Bump dependencies

frontend/src/custom.d.ts

@@ -2,3 +2,14 @@ declare module '*.mp3' {
   const content: string;
   export default content;
 }
+
+// Asset imports handled by webpack loaders. TypeScript 5.x+ requires ambient
+// declarations for side-effect imports of these, so declare them here.
+declare module '*.png';
+declare module '*.ico';
+declare module '*.svg';
+declare module '*.scss';
+
+// webpack's `mode` inlines `process.env.NODE_ENV` via DefinePlugin. Declare just
+// that one global so browser code can read it without pulling in all of @types/node.
+declare const process: { env: { NODE_ENV?: string } };

frontend/src/index.html

@@ -68,13 +68,13 @@
           <img
             title="Enable sounds"
             alt="speaker with sound waves"
-            src="../static/volume.svg"
+            src="static/volume.svg"
           />
         </label>
 
         <label for="enable-music">
           <input id="enable-music" type="checkbox" />
-          <img title="Enable music" alt="music note" src="../static/music.svg" />
+          <img title="Enable music" alt="music note" src="static/music.svg" />
         </label>
 
         <label for="enable-vibration">
@@ -82,7 +82,7 @@
           <img
             title="Enable vibration on mobile"
             alt="vibrating mobile"
-            src="../static/vibrate.svg"
+            src="static/vibrate.svg"
           />
         </label>
 
@@ -90,7 +90,7 @@
           title="Exit from current game"
           id="logout"
           alt="logout"
-          src="../static/logout.svg"
+          src="static/logout.svg"
         />
       </section>
     </div>
@@ -101,7 +101,7 @@
         id="toggle-settings"
         class="icon"
         alt="toggle-settings"
-        src="../static/settings.svg"
+        src="static/settings.svg"
       />
     </div>
 
@@ -109,17 +109,17 @@
       class="full-screen-controllers"
       id="minimize"
       alt="minimize-application"
-      src="../static/minimize.svg"
+      src="static/minimize.svg"
     />
     <img
       class="full-screen-controllers"
       id="maximize"
       alt="maximize-application"
-      src="../static/maximize.svg"
+      src="static/maximize.svg"
     />
 
     <div id="spinner-container">
-      <img id="spinner" alt="waiting" src="../static/spinner.svg" />
+      <img id="spinner" alt="waiting" src="static/spinner.svg" />
     </div>
   </body>
 </html>

frontend/src/index.ts

@@ -7,6 +7,7 @@ import {
   ProjectileBase,
 } from 'shared';
 import './main.scss';
+import './scripts/analytics';
 import '../static/og-image.png';
 import '../static/favicons/apple-touch-icon.png';
 import '../static/favicons/favicon-16x16.png';
@@ -16,9 +17,6 @@ import { LandingPageBackground } from './scripts/landing-page-background';
 import { JoinFormHandler } from './scripts/join-form-handler';
 import { handleFullScreen } from './scripts/helper/handle-full-screen';
 import { Game } from './scripts/game';
-import { handleInsights } from './scripts/handle-insights';
-import { getInsightsFromRenderer } from './scripts/get-insights-from-renderer';
-import { Renderer } from 'sdf-2d';
 import ResizeObserver from 'resize-observer-polyfill';
 import { OptionsHandler } from './scripts/options-handler';
 import { hide } from './scripts/helper/hide';
@@ -55,39 +53,6 @@ const enableMusic = document.querySelector('#enable-music') as HTMLInputElement;
 const enableVibration = document.querySelector('#enable-vibration') as HTMLInputElement;
 const spinner = document.querySelector('#spinner-container') as HTMLElement;
 
-let isInGame = false;
-
-const startInsights = (getRenderer: () => Renderer | undefined) => {
-  const { vendor, renderer } = getInsightsFromRenderer(getRenderer());
-  handleInsights(
-    {
-      vendor,
-      renderer,
-      referrer: document.referrer,
-      connection: (navigator as any)?.connection?.effectiveType,
-      devicePixelRatio: devicePixelRatio,
-    },
-    () => {
-      const {
-        fps,
-        renderScale,
-        lightScale,
-        canvasWidth,
-        canvasHeight,
-      } = getInsightsFromRenderer(getRenderer());
-
-      return {
-        isInGame,
-        fps,
-        renderScale,
-        lightScale,
-        canvasWidth,
-        canvasHeight,
-      };
-    },
-  );
-};
-
 const toggleSettings = () => {
   settings.className = settings.className === 'open' ? '' : 'open';
   SoundHandler.play(Sounds.click);
@@ -157,9 +122,6 @@ const main = async () => {
     });
     window.onpopstate = () => game.destroy();
 
-    let backgroundRenderer: Renderer | undefined;
-    startInsights(() => (isInGame ? game.renderer : backgroundRenderer));
-
     for (;;) {
       show(spinner);
       hide(logoutButton, true);
@@ -168,7 +130,7 @@ const main = async () => {
       const background = new LandingPageBackground(canvas);
       const joinHandler = new JoinFormHandler(joinGameForm, serverContainer);
 
-      backgroundRenderer = await background.renderer;
+      await background.renderer;
       hide(spinner);
 
       const playerDecision = await joinHandler.getPlayerDecision();
@@ -185,11 +147,9 @@ const main = async () => {
       game = new Game(playerDecision, canvas, overlay);
       const gameOver = game.start();
       await game.started;
-      isInGame = true;
       hide(spinner);
       show(logoutButton, true, 'block');
       await gameOver;
-      isInGame = false;
     }
   } catch (e) {
     console.error(e);

frontend/src/scripts/commands/command-socket.ts

@@ -1,7 +1,8 @@
 import { Command, CommandReceiver, serialize, TransportEvents } from 'shared';
+import { Socket } from 'socket.io-client';
 
 export class CommandSocket extends CommandReceiver {
-  constructor(private readonly socket: SocketIOClient.Socket) {
+  constructor(private readonly socket: Socket) {
     super();
   }
 

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

@@ -3,7 +3,10 @@ import { CommandGenerator, PrimaryActionCommand, SecondaryActionCommand } from '
 import { Game } from '../game';
 
 export class MouseListener extends CommandGenerator {
-  constructor(private target: HTMLElement, private readonly game: Game) {
+  constructor(
+    private target: HTMLElement,
+    private readonly game: Game,
+  ) {
     super();
 
     target.addEventListener('mousedown', this.mouseDownListener);

frontend/src/scripts/game.ts

@@ -22,7 +22,7 @@ import {
   Command,
   settings,
 } from 'shared';
-import io from 'socket.io-client';
+import { io, Socket } from 'socket.io-client';
 import { KeyboardListener } from './commands/keyboard-listener';
 import { MouseListener } from './commands/mouse-listener';
 import { TouchListener } from './commands/touch-listener';
@@ -38,7 +38,7 @@ import { StepCommand } from './commands/types/step';
 export class Game extends CommandReceiver {
   public gameObjects = new GameObjectContainer(this);
   public renderer?: Renderer;
-  private socket!: SocketIOClient.Socket;
+  private socket!: Socket;
   private isBetweenGames = false;
 
   public started: Promise<void>;
@@ -92,7 +92,9 @@ export class Game extends CommandReceiver {
       parser,
     } as any);
 
-    this.socket.on('reconnect_attempt', () => {
+    // In socket.io-client v4 reconnection events are emitted by the Manager
+    // (`socket.io`), not the Socket itself.
+    this.socket.io.on('reconnect_attempt', () => {
       this.socket.io.opts.transports = ['polling', 'websocket'];
     });
 

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

@@ -42,7 +42,7 @@ export const handleFullScreen = (
   });
 
   addEventListener('resize', () => {
-    if (isInFullScreen && currentWindowHeight > innerHeight) {
+    if (isInFullScreen() && currentWindowHeight > innerHeight) {
       followToggle();
     }
   });

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

@@ -1,5 +1,5 @@
 import { ServerInformation, serverInformationEndpoint, TransportEvents } from 'shared';
-import io from 'socket.io-client';
+import { io, Socket } from 'socket.io-client';
 import { Configuration } from './configuration';
 import parser from 'socket.io-msgpack-parser';
 import { SoundHandler, Sounds } from './sound-handler';
@@ -21,7 +21,10 @@ export class JoinFormHandler {
     }
   };
 
-  constructor(private form: HTMLFormElement, private readonly container: HTMLElement) {
+  constructor(
+    private form: HTMLFormElement,
+    private readonly container: HTMLElement,
+  ) {
     this.joinButton = form.querySelector('button[type="submit"]') as HTMLButtonElement;
     this.joinButton.disabled = true;
     this.waitingForDecision = new Promise((r) => (this.resolvePlayerDecision = r));
@@ -32,9 +35,9 @@ export class JoinFormHandler {
 
     form.onsubmit = (e) => {
       SoundHandler.play(Sounds.click);
-      const result: PlayerDecision = (Array.from(
-        (new FormData(form) as any).entries(),
-      ) as Array<[string, any]>).reduce((result, [name, value]) => {
+      const result: PlayerDecision = (
+        Array.from((new FormData(form) as any).entries()) as Array<[string, any]>
+      ).reduce((result, [name, value]) => {
         (result as any)[name] = value;
         return result;
       }, {}) as any;
@@ -116,7 +119,7 @@ class ServerChooserOption {
   private serverNameElement = document.createElement('span');
   private completionElement = document.createElement('span');
 
-  private socket: SocketIOClient.Socket;
+  private socket: Socket;
 
   constructor(
     private content: ServerInformation,
@@ -145,8 +148,9 @@ class ServerChooserOption {
       parser,
     } as any);
 
+    // `connect_timeout` was removed in socket.io-client v3+; connection
+    // timeouts now surface through `connect_error` (reconnection is disabled).
     this.socket.on('connect_error', this.destroy.bind(this));
-    this.socket.on('connect_timeout', this.destroy.bind(this));
     this.socket.on('disconnect', this.destroy.bind(this));
     this.socket.emit(TransportEvents.SubscribeForServerInfoUpdates);
     this.socket.on(

frontend/src/scripts/options-handler.ts

@@ -15,9 +15,9 @@ export abstract class OptionsHandler {
     musicEnabled: true,
   };
 
-  public static initialize(
-    inputElements: { [k in Extract<keyof Options, string>]: HTMLInputElement },
-  ) {
+  public static initialize(inputElements: {
+    [k in Extract<keyof Options, string>]: HTMLInputElement;
+  }) {
     if (localStorage.getItem('options')) {
       const stored: Partial<Options> | null = JSON.parse(
         localStorage.getItem('options')!,
@@ -44,7 +44,11 @@ export abstract class OptionsHandler {
         }
 
         if (k === 'musicEnabled') {
-          this.checked ? SoundHandler.playAmbient() : SoundHandler.stopAmbient();
+          if (this.checked) {
+            SoundHandler.playAmbient();
+          } else {
+            SoundHandler.stopAmbient();
+          }
         }
 
         if (this.checked && k === 'vibrationEnabled') {

frontend/src/scripts/shapes/planet-shape.ts

@@ -89,8 +89,8 @@ export class PlanetShape extends PolygonFactory(settings.planetEdgeCount, 0) {
               if (dist < minDistance) {
                 minDistance = dist;
                 color = mix(${colorToString(settings.declaPlanetColor)}, ${colorToString(
-        settings.redPlanetColor,
-      )}, planetColorMixQ[j]);
+                  settings.redPlanetColor,
+                )}, planetColorMixQ[j]);
               }
             }
 
@@ -113,7 +113,10 @@ export class PlanetShape extends PolygonFactory(settings.planetEdgeCount, 0) {
 
   public randomOffset = 0;
 
-  constructor(public vertices: Array<vec2>, public colorMixQ: number) {
+  constructor(
+    public vertices: Array<vec2>,
+    public colorMixQ: number,
+  ) {
     super(vertices);
   }
 

frontend/src/styles/form.scss

@@ -1,10 +1,11 @@
+@use 'sass:math';
 @use 'vars' as *;
 @use 'mixins' as *;
 
 form {
   @include background;
 
-  padding: $small-padding / 2 $small-padding $small-padding $small-padding;
+  padding: math.div($small-padding, 2) $small-padding $small-padding $small-padding;
   border-radius: $border-radius;
 
   input:-webkit-autofill,
@@ -38,7 +39,7 @@ form {
       position: relative;
       padding: 15px 0 0;
       margin-top: 10px;
-      margin: 10px $small-padding / 2 $small-padding $small-padding / 2;
+      margin: 10px math.div($small-padding, 2) $small-padding math.div($small-padding, 2);
 
       input {
         font-family: inherit;
@@ -99,7 +100,7 @@ form {
 
         cursor: pointer;
         margin: $border-width-focused - $border-width $border-width-focused -
-          $border-width + $small-padding / 2;
+          $border-width + math.div($small-padding, 2);
 
         .completion {
           font-size: 0.7em;
@@ -115,7 +116,7 @@ form {
       &:checked + label {
         border-color: $accent;
         border-width: $border-width-focused;
-        margin: 0 $small-padding / 2;
+        margin: 0 math.div($small-padding, 2);
       }
     }
   }

frontend/src/styles/settings.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use 'vars' as *;
 @use 'mixins' as *;
 
@@ -107,7 +108,7 @@
 
         $height: 4px;
         width: $height;
-        top: $height / 2;
+        top: math.div($height, 2);
 
         right: 0;
         transform-origin: top right;
@@ -119,7 +120,7 @@
         @media (max-width: $breakpoint) {
           $height: 2px;
           width: $height;
-          top: $height / 2;
+          top: math.div($height, 2);
         }
       }
 
@@ -152,11 +153,11 @@
   label:not(:first-child) {
     input[type='checkbox']:after {
       $height: 4px;
-      top: $height / 2 + $small-padding;
+      top: math.div($height, 2) + $small-padding;
 
       @media (max-width: $breakpoint) {
         right: $small-padding;
-        top: $height / 2;
+        top: math.div($height, 2);
       }
     }
   }