Add backend

frontend/.gitattributes

@@ -1 +0,0 @@
-*.psd filter=lfs diff=lfs merge=lfs -text

frontend/package.json

@@ -32,7 +32,7 @@
     "css-loader": "^3.5.2",
     "cssnano": "^4.1.10",
     "eslint": "^7.2.0",
-    "sdf-2d": "^0.3.4",
+    "sdf-2d": "^0.4.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-prettier": "^3.1.4",
@@ -57,11 +57,12 @@
     "ts-loader": "^8.0.1",
     "typescript": "^3.8.3",
     "uuid": "^8.2.0",
+    "file-loader": "^6.1.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
-  },
-  "dependencies": {
-    "firebase": "^7.22.0"
+    "webpack-dev-server": "^3.10.3",
+    "firebase": "^7.22.0",
+    "@types/socket.io-client": "^1.4.34",
+    "socket.io-client": "^2.3.1"
   }
 }

frontend/src/index.ts

@@ -1,4 +1,6 @@
 import { glMatrix } from 'gl-matrix';
+import io from 'socket.io-client';
+import { TransportEvents } from '../../shared/src/transport/transport-events';
 import { Configuration } from './scripts/config/configuration';
 import { Game } from './scripts/game';
 import { Random } from './scripts/helper/random';
@@ -9,6 +11,17 @@ glMatrix.setMatrixArrayType(Array);
 const main = async () => {
   await Configuration.initialize();
 
+  const socket = io(Configuration.servers[0], {
+    reconnectionDelayMax: 10000,
+    transports: ['websocket'],
+  });
+
+  socket.on('reconnect_attempt', () => {
+    socket.io.opts.transports = ['polling', 'websocket'];
+  });
+
+  socket.emit(TransportEvents.PlayerJoining, null);
+
   try {
     Random.seed = 42;
     await new Game().start();

frontend/src/scripts/config/configuration.ts

@@ -1,7 +1,10 @@
-import * as firebase from 'firebase/app';
+import firebase from 'firebase/app';
 import 'firebase/firebase-remote-config';
 
-export class Configuration {
+export abstract class Configuration {
+  private static remoteConfig: firebase.remoteConfig.RemoteConfig;
+  private static initialized = false;
+
   public static async initialize(): Promise<void> {
     const firebaseConfig = {
       apiKey: 'AIzaSyBG85dp-AhaCW-qi_6mu77wDPSipzipIF4',
@@ -12,19 +15,24 @@ export class Configuration {
 
     firebase.initializeApp(firebaseConfig);
 
-    const remoteConfig = firebase.remoteConfig();
-    remoteConfig.defaultConfig = {
-      online_servers: 'hi',
-    };
+    this.remoteConfig = firebase.remoteConfig();
 
-    remoteConfig.settings = {
-      minimumFetchIntervalMillis: 3600 * 1000,
+    this.remoteConfig.settings = {
+      minimumFetchIntervalMillis: 0, // todo: 3600 * 1000,
       fetchTimeoutMillis: 15 * 1000,
     } as any;
 
-    await remoteConfig.ensureInitialized();
-    await remoteConfig.fetchAndActivate();
+    await this.remoteConfig.ensureInitialized();
+    await this.remoteConfig.fetchAndActivate();
 
-    console.log(remoteConfig.getValue('online_servers'));
+    this.initialized = true;
+  }
+
+  public static get servers(): Array<string> {
+    if (!this.initialized) {
+      throw new Error('Configuration should be initialized');
+    }
+
+    return JSON.parse(this.remoteConfig.getValue('online_servers').asString());
   }
 }

frontend/src/scripts/game.ts

@@ -3,9 +3,12 @@ import {
   Circle,
   CircleLight,
   compile,
+  FilteringOptions,
   Flashlight,
   InvertedTunnel,
   Renderer,
+  renderNoise,
+  WrapOptions,
 } from 'sdf-2d';
 import { CommandBroadcaster } from './commands/command-broadcaster';
 import { MoveToCommand } from './commands/move-to';
@@ -82,6 +85,8 @@ export class Game implements IGame {
   }
 
   public async start(): Promise<void> {
+    const noiseTexture = await renderNoise([1024, 1], 60, 1 / 8);
+
     this.renderer = await this.rendererPromise;
     this.renderer.setRuntimeSettings({
       isWorldInverted: true,
@@ -97,6 +102,15 @@ export class Game implements IGame {
       ],
       enableHighDpiRendering: false,
       lightCutoffDistance: settings.lightCutoffDistance,
+      textures: {
+        noiseTexture: {
+          source: noiseTexture,
+          overrides: {
+            maxFilter: FilteringOptions.LINEAR,
+            wrapS: WrapOptions.MIRRORED_REPEAT,
+          },
+        },
+      },
     });
     this.initializeScene();
     this.physics.start();

frontend/tsconfig.json

@@ -7,6 +7,7 @@
     "downlevelIteration": true,
     "allowJs": true,
     "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
     "moduleResolution": "Node",
     "module": "es6",
     "lib": ["es2015", "dom"]