Refactor

frontend/src/index.html

@@ -48,11 +48,11 @@
               minlength="1"
               maxlength="20"
               placeholder=" "
-              id="playerName"
-              name="playerName"
+              id="name"
+              name="name"
               type="text"
             />
-            <label for="playerName">Choose a name</label>
+            <label for="name">Choose a name</label>
           </div>
 
           <div id="server-container"></div>

frontend/src/index.ts

@@ -3,7 +3,7 @@ import {
   LampBase,
   overrideDeserialization,
   PlanetBase,
-  PlayerCharacterBase,
+  CharacterBase,
   ProjectileBase,
 } from 'shared';
 import { LampView } from './scripts/objects/lamp-view';
@@ -17,9 +17,9 @@ import '../static/favicons/favicon-32x32.png';
 import '../static/favicons/favicon.ico';
 import { LandingPageBackground } from './scripts/landing-page-background';
 import { JoinFormHandler } from './scripts/join-form-handler';
-import { handleFullScreen } from './scripts/handle-full-screen';
+import { handleFullScreen } from './scripts/helper/handle-full-screen';
 import { Game } from './scripts/game';
-import { PlayerCharacterView } from './scripts/objects/player-character-view';
+import { CharacterView } from './scripts/objects/character-view';
 import { handleInsights } from './scripts/handle-insights';
 import { getInsightsFromRenderer } from './scripts/get-insights-from-renderer';
 import { Renderer } from 'sdf-2d';
@@ -32,12 +32,13 @@ import { VibrationHandler } from './scripts/vibration-handler';
 
 glMatrix.setMatrixArrayType(Array);
 
-overrideDeserialization(PlayerCharacterBase, PlayerCharacterView);
+overrideDeserialization(CharacterBase, CharacterView);
 overrideDeserialization(PlanetBase, PlanetView);
 overrideDeserialization(LampBase, LampView);
 overrideDeserialization(ProjectileBase, ProjectileView);
 
 const landingUI = document.querySelector('#landing-ui') as HTMLElement;
+const nameInput = document.querySelector('#name') as HTMLInputElement;
 const joinGameForm = document.querySelector('#join-game-form') as HTMLFormElement;
 const serverContainer = document.querySelector('#server-container') as HTMLElement;
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
@@ -114,6 +115,11 @@ const main = async () => {
   try {
     let game: Game;
 
+    const storedUserName = localStorage?.getItem('userName');
+    if (storedUserName) {
+      nameInput.value = JSON.parse(storedUserName);
+    }
+
     const firstClickListener = () => {
       SoundHandler.initialize(
         () => {
@@ -166,6 +172,9 @@ const main = async () => {
       hide(spinner);
 
       const playerDecision = await joinHandler.getPlayerDecision();
+
+      localStorage?.setItem('userName', JSON.stringify(playerDecision.name));
+
       if (!history.state) {
         history.pushState(true, '');
       }

frontend/src/scripts/commands/mouse-listener.ts

@@ -3,11 +3,11 @@ import { CommandGenerator, PrimaryActionCommand, SecondaryActionCommand } from '
 import { Game } from '../game';
 
 export class MouseListener extends CommandGenerator {
-  constructor(private readonly game: Game) {
+  constructor(private target: HTMLElement, private readonly game: Game) {
     super();
 
-    addEventListener('mousedown', this.mouseDownListener);
-    addEventListener('contextmenu', this.contextMenuListener);
+    target.addEventListener('mousedown', this.mouseDownListener);
+    target.addEventListener('contextmenu', this.contextMenuListener);
   }
 
   private mouseDownListener = (event: MouseEvent) => {
@@ -32,7 +32,7 @@ export class MouseListener extends CommandGenerator {
   }
 
   public destroy() {
-    removeEventListener('mousedown', this.mouseDownListener);
-    removeEventListener('contextmenu', this.contextMenuListener);
+    this.target.removeEventListener('mousedown', this.mouseDownListener);
+    this.target.removeEventListener('contextmenu', this.contextMenuListener);
   }
 }

frontend/src/scripts/game.ts

@@ -1,5 +1,12 @@
 import { vec2 } from 'gl-matrix';
-import { Renderer, renderNoise } from 'sdf-2d';
+import {
+  CircleLight,
+  FilteringOptions,
+  Renderer,
+  renderNoise,
+  runAnimation,
+  WrapOptions,
+} from 'sdf-2d';
 import {
   deserialize,
   TransportEvents,
@@ -9,22 +16,23 @@ import {
   clamp,
   UpdateGameState,
   GameEndCommand,
-  CharacterTeam,
   ServerAnnouncement,
   GameStartCommand,
   CommandReceiver,
   CommandExecutors,
   Command,
+  settings,
 } from 'shared';
 import io from 'socket.io-client';
 import { KeyboardListener } from './commands/keyboard-listener';
 import { MouseListener } from './commands/mouse-listener';
 import { TouchListener } from './commands/touch-listener';
 import { CommandSocket } from './commands/command-socket';
-import { startAnimation } from './start-animation';
 import { PlayerDecision } from './join-form-handler';
 import { GameObjectContainer } from './objects/game-object-container';
 import parser from 'socket.io-msgpack-parser';
+import { BlobShape } from './shapes/blob-shape';
+import { PlanetShape } from './shapes/planet-shape';
 
 export class Game extends CommandReceiver {
   public gameObjects = new GameObjectContainer(this);
@@ -59,8 +67,8 @@ export class Game extends CommandReceiver {
     this.progressBar.appendChild(this.redPlanetCountElement);
 
     this.keyboardListener = new KeyboardListener();
-    this.mouseListener = new MouseListener(this);
-    this.touchListener = new TouchListener(this.overlay, this.overlay, this);
+    this.mouseListener = new MouseListener(this.canvas, this);
+    this.touchListener = new TouchListener(this.canvas, this.overlay, this);
   }
 
   private initialize() {
@@ -111,9 +119,7 @@ export class Game extends CommandReceiver {
 
     this.isBetweenGames = false;
 
-    this.socket.emit(TransportEvents.PlayerJoining, {
-      name: this.playerDecision.playerName,
-    } as PlayerInformation);
+    this.socket.emit(TransportEvents.PlayerJoining, this.playerDecision);
   }
 
   protected defaultCommandExecutor(c: Command) {
@@ -200,7 +206,35 @@ export class Game extends CommandReceiver {
 
     this.initialize();
 
-    await startAnimation(this.canvas, this.gameLoop.bind(this), noiseTexture);
+    await runAnimation(
+      this.canvas,
+      [
+        PlanetShape.descriptor,
+        BlobShape.descriptor,
+        {
+          ...CircleLight.descriptor,
+          shaderCombinationSteps: [0, 1, 2, 4, 8, 16],
+        },
+      ],
+      this.gameLoop.bind(this),
+      {
+        shadowTraceCount: 16,
+        paletteSize: settings.palette.length,
+        colorPalette: settings.palette,
+        enableHighDpiRendering: true,
+        lightCutoffDistance: settings.lightCutoffDistance,
+        textures: {
+          noiseTexture: {
+            source: noiseTexture,
+            overrides: {
+              maxFilter: FilteringOptions.LINEAR,
+              wrapS: WrapOptions.MIRRORED_REPEAT,
+              wrapT: WrapOptions.MIRRORED_REPEAT,
+            },
+          },
+        },
+      },
+    );
     this.socket.close();
     this.overlay.innerHTML = '';
     this.keyboardListener.destroy();

frontend/src/scripts/helper/handle-full-screen.ts

@@ -1,4 +1,4 @@
-import { SoundHandler, Sounds } from './sound-handler';
+import { SoundHandler, Sounds } from '../sound-handler';
 
 export const handleFullScreen = (
   minimizeButton: HTMLElement,

frontend/src/scripts/join-form-handler.ts

@@ -5,7 +5,7 @@ import parser from 'socket.io-msgpack-parser';
 import { SoundHandler, Sounds } from './sound-handler';
 
 export type PlayerDecision = {
-  playerName: string;
+  name: string;
   server: string;
 };
 

frontend/src/scripts/landing-page-background.ts

@@ -1,7 +1,6 @@
 import { vec2 } from 'gl-matrix';
 import {
   CircleLight,
-  compile,
   FilteringOptions,
   hsl,
   NoisyPolygonFactory,

frontend/src/scripts/objects/character-view.ts

@@ -3,7 +3,7 @@ import { Renderer } from 'sdf-2d';
 import {
   Circle,
   Id,
-  PlayerCharacterBase,
+  CharacterBase,
   CharacterTeam,
   settings,
   UpdateProperty,
@@ -14,7 +14,7 @@ import { SoundHandler, Sounds } from '../sound-handler';
 import { VibrationHandler } from '../vibration-handler';
 import { ViewObject } from './view-object';
 
-export class PlayerCharacterView extends PlayerCharacterBase implements ViewObject {
+export class CharacterView extends CharacterBase implements ViewObject {
   private shape: BlobShape;
   private nameElement: HTMLElement = document.createElement('div');
   private statsElement: HTMLElement = document.createElement('div');
@@ -81,7 +81,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
     }
   }
 
-  public kill() {
+  public onDie() {
     if (this.isMainCharacter) {
       VibrationHandler.vibrate(150);
     }

frontend/src/scripts/objects/game-object-container.ts

@@ -11,12 +11,12 @@ import {
 } from 'shared';
 import { Game } from '../game';
 import { Camera } from './camera';
-import { PlayerCharacterView } from './player-character-view';
+import { CharacterView } from './character-view';
 import { ViewObject } from './view-object';
 
 export class GameObjectContainer extends CommandReceiver {
   protected objects: Map<Id, ViewObject> = new Map();
-  public player!: PlayerCharacterView;
+  public player!: CharacterView;
   public camera!: Camera;
 
   protected commandExecutors: CommandExecutors = {
@@ -25,7 +25,7 @@ export class GameObjectContainer extends CommandReceiver {
         this.deleteObject(this.camera.id);
       }
 
-      this.player = c.character as PlayerCharacterView;
+      this.player = c.character as CharacterView;
       this.player.isMainCharacter = true;
 
       this.camera = new Camera(this.game);

frontend/src/scripts/start-animation.ts

@@ -1,45 +0,0 @@
-import {
-  CircleLight,
-  FilteringOptions,
-  Renderer,
-  runAnimation,
-  WrapOptions,
-} from 'sdf-2d';
-import { settings } from 'shared';
-import { BlobShape } from './shapes/blob-shape';
-import { PlanetShape } from './shapes/planet-shape';
-
-export const startAnimation = async (
-  canvas: HTMLCanvasElement,
-  draw: (r: Renderer, current: number, delta: number) => boolean,
-  noiseTexture: TexImageSource,
-): Promise<void> =>
-  await runAnimation(
-    canvas,
-    [
-      PlanetShape.descriptor,
-      BlobShape.descriptor,
-      {
-        ...CircleLight.descriptor,
-        shaderCombinationSteps: [0, 1, 2, 4, 8, 16],
-      },
-    ],
-    draw,
-    {
-      shadowTraceCount: 16,
-      paletteSize: settings.palette.length,
-      colorPalette: settings.palette,
-      enableHighDpiRendering: true,
-      lightCutoffDistance: settings.lightCutoffDistance,
-      textures: {
-        noiseTexture: {
-          source: noiseTexture,
-          overrides: {
-            maxFilter: FilteringOptions.LINEAR,
-            wrapS: WrapOptions.MIRRORED_REPEAT,
-            wrapT: WrapOptions.MIRRORED_REPEAT,
-          },
-        },
-      },
-    },
-  );