Add backend

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();