Bump dependencies

.eslintignore

@@ -1,4 +0,0 @@
-**/node_modules/**/*.js
-node_modules/**/*.js
-**/package-lock.json
-package-lock.json

.eslintrc.json

@@ -1,37 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "browser": true,
-    "es2020": true
-  },
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "sourceType": "module"
-  },
-  "plugins": ["unused-imports", "@typescript-eslint", "json-format", "prettier"],
-  "settings": {
-    "json/sort-package-json": true
-  },
-  "rules": {
-    "prettier/prettier": "error",
-    "no-unused-vars": "off",
-    "unused-imports/no-unused-imports-ts": "error",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        "argsIgnorePattern": "^_"
-      }
-    ],
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-var-requires": "off"
-  }
-}

Dockerfile

@@ -4,10 +4,10 @@
 # The frontend is a static site and is NOT built here — see .forgejo/workflows.
 
 # ---- Stage 1: build the shared lib, then bundle the server -------------------
-# Node 14 matches the project toolchain (webpack 4 / TypeScript 4, see
+# Node 22 (current LTS) matches the project toolchain (webpack 5 / TypeScript 6,
-# .devcontainer). The full (non-slim) image carries the build tools that
+# see .devcontainer). The full (non-slim) image carries the build tools that
 # socket.io's optional native deps (bufferutil/utf-8-validate) compile against.
-FROM node:14-bullseye AS build
+FROM node:22-bookworm AS build
 WORKDIR /app
 
 # `shared` is consumed by the backend as `file:../shared` and is bundled into
@@ -28,7 +28,7 @@ RUN cd backend && npm run build
 RUN cd backend && npm prune --production
 
 # ---- Stage 2: minimal runtime ----------------------------------------------
-FROM node:14-bullseye-slim
+FROM node:22-bookworm-slim
 WORKDIR /app
 ENV NODE_ENV=production
 

backend/package.json

@@ -14,35 +14,27 @@
     "try-build": "npm run build && cd dist && node main.js && cd -"
   },
   "dependencies": {
-    "@types/config": "0.0.36",
+    "cors": "^2.8.6",
-    "cors": "^2.8.5",
+    "express": "^5.2.1",
-    "express": "^4.17.1",
     "gl-matrix": "3.3.0",
-    "minimist": "^1.2.5",
+    "minimist": "^1.2.8",
-    "socket.io": "^2.3.0",
+    "socket.io": "^4.8.3",
-    "socket.io-msgpack-parser": "^2.0.0"
+    "socket.io-msgpack-parser": "^3.0.2"
   },
   "devDependencies": {
-    "@types/cors": "^2.8.7",
+    "@types/cors": "^2.8.19",
-    "@types/express": "^4.17.8",
+    "@types/express": "^5.0.6",
-    "@types/minimist": "^1.2.0",
+    "@types/minimist": "^1.2.5",
-    "@types/node": "^14.11.2",
+    "@types/node": "^22.0.0",
-    "@types/socket.io": "^2.1.11",
+    "clean-webpack-plugin": "^4.0.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "concurrently": "^10.0.3",
-    "concurrently": "^5.3.0",
+    "nodemon": "^3.1.14",
-    "file-loader": "^6.1.0",
-    "html-webpack-plugin": "^4.5.0",
-    "nodemon": "^2.0.4",
-    "raw-loader": "^4.0.1",
-    "resolve-url-loader": "^3.1.1",
     "shared": "file:../shared",
-    "terser-webpack-plugin": "^2.3.5",
+    "terser-webpack-plugin": "^5.6.1",
-    "ts-config-webpack-plugin": "^2.0.0",
+    "ts-loader": "^9.6.0",
-    "ts-loader": "^8.0.3",
+    "typescript": "^6.0.3",
-    "typescript": "^4.0.3",
+    "webpack": "^5.107.2",
-    "webpack": "^4.44.2",
+    "webpack-cli": "^7.0.3",
-    "webpack-cli": "^3.3.12",
+    "webpack-node-externals": "^3.0.0"
-    "webpack-dev-server": "^3.11.0",
-    "webpack-node-externals": "^2.5.2"
   }
 }

backend/src/commands/generate-points.ts

@@ -1,7 +1,10 @@
 import { Command } from 'shared';
 
 export class GeneratePointsCommand extends Command {
-  public constructor(public readonly decla: number, public readonly red: number) {
+  public constructor(
+    public readonly decla: number,
+    public readonly red: number,
+  ) {
     super();
   }
 }

backend/src/game-server.ts

@@ -1,5 +1,5 @@
 import { PhysicalContainer } from './physics/containers/physical-container';
-import ioserver from 'socket.io';
+import { Server, Socket } from 'socket.io';
 import {
   TransportEvents,
   deserialize,
@@ -62,7 +62,10 @@ export class GameServer extends CommandReceiver {
     [GeneratePointsCommand.type]: this.addPoints.bind(this),
   };
 
-  constructor(private readonly io: ioserver.Server, private options: Options) {
+  constructor(
+    private readonly io: Server,
+    private options: Options,
+  ) {
     super();
 
     this.serverName = options.name;
@@ -70,7 +73,7 @@ export class GameServer extends CommandReceiver {
 
     this.initialize();
 
-    io.on('connection', (socket: SocketIO.Socket) => {
+    io.on('connection', (socket: Socket) => {
       socket.on(TransportEvents.PlayerJoining, (playerInfo: PlayerInformation) => {
         try {
           const player = this.players.createPlayer(playerInfo, socket);

backend/src/main.ts

@@ -1,4 +1,4 @@
-import ioserver from 'socket.io';
+import { Server as IoServer } from 'socket.io';
 import express from 'express';
 import { Server } from 'http';
 import cors from 'cors';
@@ -22,7 +22,13 @@ Random.seed = options.seed;
 
 const app = express();
 const server = new Server(app);
-const io = ioserver(server, { parser } as any);
+const io = new IoServer(server, {
+  parser,
+  cors: {
+    origin: true,
+    credentials: true,
+  },
+} as any);
 
 const gameServer = new GameServer(io, options);
 

backend/src/objects/circle-physical.ts

@@ -88,9 +88,10 @@ export class CirclePhysical extends CommandReceiver implements Circle, DynamicPh
     );
   }
 
-  public stepManually(
+  public stepManually(deltaTimeInSeconds: number): {
-    deltaTimeInSeconds: number,
+    hitObject: GameObject | undefined;
-  ): { hitObject: GameObject | undefined; velocity: vec2 } {
+    velocity: vec2;
+  } {
     let delta = vec2.scale(vec2.create(), this.velocity, deltaTimeInSeconds);
 
     this.radius += vec2.length(delta);

backend/src/physics/containers/bounding-box-tree.ts

@@ -5,7 +5,10 @@ import { StaticPhysical } from '../physicals/static-physical';
 class Node {
   public left: Node | null = null;
   public right: Node | null = null;
-  constructor(public object: StaticPhysical, public parent: Node | null) {}
+  constructor(
+    public object: StaticPhysical,
+    public parent: Node | null,
+  ) {}
 }
 
 export class BoundingBoxTree {

backend/src/players/player-base.ts

@@ -56,9 +56,8 @@ export abstract class PlayerBase extends CommandReceiver {
       );
 
       const playerBoundingBox = getBoundingBoxOfCircle(playerBoundingCircle);
-      const possibleIntersectors = this.objectContainer.findIntersecting(
+      const possibleIntersectors =
-        playerBoundingBox,
+        this.objectContainer.findIntersecting(playerBoundingBox);
-      );
       if (!isCircleIntersecting(playerBoundingCircle, possibleIntersectors)) {
         return playerPosition;
       }

backend/src/players/player-container.ts

@@ -1,4 +1,5 @@
 import { CharacterTeam, PlayerInformation, Random, settings, Command } from 'shared';
+import { Socket } from 'socket.io';
 import { PhysicalContainer } from '../physics/containers/physical-container';
 import { NPC } from './npc';
 import { Player } from './player';
@@ -29,7 +30,7 @@ export class PlayerContainer {
     }
   }
 
-  public createPlayer(playerInfo: PlayerInformation, socket: SocketIO.Socket): Player {
+  public createPlayer(playerInfo: PlayerInformation, socket: Socket): Player {
     if (this._players.length === this.playerMaxCount) {
       throw new Error('Too many players');
     }

backend/src/players/player.ts

@@ -23,6 +23,7 @@ import {
   PropertyUpdatesForObject,
   PrimaryActionCommand,
 } from 'shared';
+import { Socket } from 'socket.io';
 import { BoundingBox } from '../physics/bounding-boxes/bounding-box';
 import { PhysicalContainer } from '../physics/containers/physical-container';
 import { CharacterPhysical } from '../objects/character-physical';
@@ -51,7 +52,7 @@ export class Player extends PlayerBase {
     playerContainer: PlayerContainer,
     objectContainer: PhysicalContainer,
     team: CharacterTeam,
-    private readonly socket: SocketIO.Socket,
+    private readonly socket: Socket,
   ) {
     super(playerInfo, playerContainer, objectContainer, team);
     this.createCharacter();

backend/tsconfig.json

@@ -1,13 +1,14 @@
 {
   "compilerOptions": {
     "outDir": "dist",
+    "rootDir": "src",
     "skipLibCheck": true,
     "target": "es6",
     "esModuleInterop": true,
     "strict": true,
     "experimentalDecorators": true,
-    "downlevelIteration": true,
     "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
     "module": "commonjs",
     "lib": ["dom", "es2017"],
     "typeRoots": ["./types", "./node_modules/@types"]

backend/webpack.config.js

@@ -32,9 +32,9 @@ module.exports = (env, argv) => ({
     minimize: argv.mode !== 'development',
     minimizer: [
       new TerserJSPlugin({
-        sourceMap: false,
-        test: /\.js$/,
         exclude: /node_modules/,
+        // The custom serialization protocol keys on class names, so they must
+        // survive minification (see shared/src/serialization).
         terserOptions: {
           keep_classnames: true,
         },
@@ -50,16 +50,6 @@ module.exports = (env, argv) => ({
   ],
   module: {
     rules: [
-      {
-        test: /\.html$/,
-        use: {
-          loader: 'file-loader',
-          query: {
-            outputPath: '/',
-            name: '[name].[ext]',
-          },
-        },
-      },
       {
         test: /\.ts$/,
         use: {

eslint.config.js

@@ -0,0 +1,32 @@
+// Flat config (ESLint 9+/10). Ported from the former .eslintrc.json.
+const tseslint = require('typescript-eslint');
+const prettierRecommended = require('eslint-plugin-prettier/recommended');
+const unusedImports = require('eslint-plugin-unused-imports');
+
+module.exports = tseslint.config(
+  {
+    ignores: ['**/node_modules/**', '**/dist/**', '**/lib/**'],
+  },
+  ...tseslint.configs.recommended,
+  prettierRecommended,
+  {
+    files: ['**/*.ts'],
+    plugins: {
+      'unused-imports': unusedImports,
+    },
+    languageOptions: {
+      sourceType: 'module',
+    },
+    rules: {
+      'no-unused-vars': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      // Renamed from the former no-var-requires; keep require() allowed.
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+);

frontend/package.json

@@ -22,32 +22,31 @@
     }
   },
   "devDependencies": {
-    "@types/socket.io-client": "^1.4.34",
+    "@plausible-analytics/tracker": "^0.4.5",
-    "clean-webpack-plugin": "^3.0.0",
+    "autoprefixer": "^10.5.0",
-    "common-config-webpack-plugin": "^2.0.1",
+    "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^1.0.1",
+    "copy-webpack-plugin": "^14.0.0",
+    "css-loader": "^7.1.4",
+    "file-loader": "^6.2.0",
     "gl-matrix": "3.3.0",
-    "html-webpack-inline-source-plugin": "^1.0.0-beta.2",
+    "html-inline-css-webpack-plugin": "^1.11.2",
-    "html-webpack-inline-svg-plugin": "^2.3.0",
+    "html-webpack-plugin": "^5.6.7",
-    "html-webpack-plugin": "^4.5.0",
+    "mini-css-extract-plugin": "^2.10.2",
-    "image-config-webpack-plugin": "^2.0.0",
+    "postcss": "^8.5.15",
-    "mini-css-extract-plugin": "^0.9.0",
+    "postcss-loader": "^8.2.1",
-    "postcss-loader": "^3.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "resolve-url-loader": "^3.1.1",
+    "sass": "^1.100.0",
-    "sass": "^1.27.0",
+    "sass-loader": "^17.0.0",
-    "sass-loader": "^8.0.2",
+    "sdf-2d": "^0.7.6",
-    "sdf-2d": "^0.7.2",
     "shared": "file:../shared",
-    "socket.io-client": "^2.3.1",
+    "socket.io-client": "^4.8.3",
-    "socket.io-msgpack-parser": "^2.0.0",
+    "socket.io-msgpack-parser": "^3.0.2",
-    "source-map-loader": "^1.1.1",
+    "source-map-loader": "^5.0.0",
-    "svg-url-loader": "^6.0.0",
+    "terser-webpack-plugin": "^5.6.1",
-    "terser-webpack-plugin": "^4.2.2",
+    "ts-loader": "^9.6.0",
-    "ts-config-webpack-plugin": "^2.0.0",
+    "typescript": "^6.0.3",
-    "typescript": "^4.0.3",
+    "webpack": "^5.107.2",
-    "webpack": "^4.43.0",
+    "webpack-cli": "^7.0.3",
-    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^5.2.4"
-    "webpack-dev-server": "^3.11.0"
   }
 }

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(
+      const result: PlayerDecision = (
-        (new FormData(form) as any).entries(),
+        Array.from((new FormData(form) as any).entries()) as Array<[string, any]>
-      ) as Array<[string, any]>).reduce((result, [name, value]) => {
+      ).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(
+  public static initialize(inputElements: {
-    inputElements: { [k in Extract<keyof Options, string>]: HTMLInputElement },
+    [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

@@ -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);
       }
     }
   }

frontend/tsconfig.json

@@ -1,12 +1,13 @@
 {
   "compilerOptions": {
     "outDir": "dist",
+    "rootDir": "src",
     "target": "es6",
     "esModuleInterop": true,
     "strict": true,
     "experimentalDecorators": true,
-    "downlevelIteration": true,
     "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
     "skipLibCheck": true,
     "module": "commonjs",
     "lib": ["dom", "es2017"],

frontend/webpack.config.js

@@ -1,45 +1,57 @@
-const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
-const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 const Sass = require('sass');
 
-module.exports = (env, argv) => ({
+module.exports = (env, argv) => {
+  const isProduction = argv.mode !== 'development';
+
+  return {
+    entry: {
+      main: path.resolve(__dirname, 'src/index.ts'),
+    },
+    output: {
+      filename: 'main.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
     devServer: {
       host: '0.0.0.0',
-    disableHostCheck: true,
+      allowedHosts: 'all',
+    },
+    // webpack-dev-server 5 no longer accepts `watchOptions` under `devServer`;
+    // polling is configured on the compiler instead (needed for some FS mounts).
     watchOptions: {
       poll: true,
     },
-  },
     plugins: [
       new CleanWebpackPlugin(),
       new MiniCssExtractPlugin(),
       //new BundleAnalyzerPlugin(),
       new HtmlWebpackPlugin({
         template: './src/index.html',
-      inlineSource: argv.mode === 'development' ? '' : '.(css)$',
       }),
-    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
+      // The SVG UI icons used to be inlined into the HTML by the (abandoned,
-    new HtmlWebpackInlineSVGPlugin({
+      // webpack-4-only) html-webpack-inline-svg-plugin. They are now emitted as
-      inlineAll: true,
+      // static files and referenced via `static/<name>.svg` from index.html.
-      svgoConfig: [
+      new CopyWebpackPlugin({
-        {
+        patterns: [{ from: 'static/*.svg', to: 'static/[name][ext]' }],
-          removeViewBox: false,
-        },
-      ],
       }),
-    new TsConfigWebpackPlugin(),
+      // Inline the extracted CSS into the HTML for production builds (replaces
+      // the abandoned html-webpack-inline-source-plugin). In development the CSS
+      // stays a separate, linked file for faster rebuilds.
+      ...(isProduction ? [new HTMLInlineCSSWebpackPlugin()] : []),
     ],
     optimization: {
       minimizer: [
         new TerserJSPlugin({
-        test: /\.js$/,
           exclude: /node_modules/,
+          // The custom serialization protocol keys on class names, so they must
+          // survive minification (see shared/src/serialization).
           terserOptions: {
             keep_classnames: true,
           },
@@ -53,6 +65,11 @@ module.exports = (env, argv) => ({
           enforce: 'pre',
           use: ['source-map-loader'],
         },
+        {
+          test: /\.ts$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
         {
           test: /\.scss$/i,
           use: [
@@ -69,18 +86,29 @@ module.exports = (env, argv) => ({
           ],
         },
         {
+          // SVGs referenced from CSS (`mask-image`/`background-image`) and JS
+          // must be inlined as real `data:` URIs. svg-url-loader emits a CJS
+          // module (`module.exports = "data:..."`) which webpack 5 + css-loader 7
+          // write out verbatim as a `.svg` asset file, so the browser fetches JS
+          // instead of an image and the mask/background silently fails. webpack 5's
+          // built-in `asset/inline` produces a proper data URI instead.
+          // (HTML <img> icons are unaffected: they are copied by CopyWebpackPlugin
+          // and referenced by literal `static/*.svg` paths, not through this rule.)
           test: /\.svg$/,
-        use: {
+          type: 'asset/inline',
-          loader: 'svg-url-loader',
-          options: {},
-        },
         },
         {
-        test: /\.(mp3|png)$/,
+          // Use oneOf so each asset matches exactly one rule (og-image.png would
+          // otherwise match both the generic png rule and its own rule).
+          // The directory is encoded in `name` (not `outputPath`) and has no
+          // leading slash: with the default `publicPath: 'auto'` a leading slash
+          // produces a doubled slash in the emitted URL (e.g. `//static/x.mp3`).
+          oneOf: [
+            {
+              test: /og-image\.png$/,
               use: {
                 loader: 'file-loader',
-          query: {
+                options: {
-            outputPath: '/static',
                   name: '[name].[ext]',
                 },
               },
@@ -89,22 +117,32 @@ module.exports = (env, argv) => ({
               test: /\.ico$/,
               use: {
                 loader: 'file-loader',
-          query: {
+                options: {
-            outputPath: '/',
                   name: '[name].[ext]',
                 },
               },
             },
             {
-        test: /og-image.png$/,
+              test: /\.(mp3|png)$/,
               use: {
                 loader: 'file-loader',
-          query: {
+                options: {
-            outputPath: '/',
+                  name: 'static/[name].[ext]',
-            name: '[name].[ext]',
                 },
               },
             },
           ],
         },
-});
+      ],
+    },
+    resolve: {
+      extensions: ['.ts', '.js', '.json'],
+      alias: {
+        // sdf-2d's package.json `exports` only declares an `import` condition,
+        // which webpack 5 cannot resolve for the production (require) build.
+        // Point straight at its entry to bypass package exports resolution.
+        'sdf-2d$': path.resolve(__dirname, 'node_modules/sdf-2d/lib/main.js'),
+      },
+    },
+  };
+};

package.json

@@ -2,21 +2,18 @@
   "name": "root",
   "private": true,
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^3.9.1",
+    "concurrently": "^10.0.3",
-    "@typescript-eslint/parser": "^3.9.1",
+    "eslint": "^10.4.1",
-    "concurrently": "^5.3.0",
+    "eslint-config-prettier": "^10.1.8",
-    "eslint": "^7.2.0",
+    "eslint-plugin-prettier": "^5.5.6",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
-    "eslint-plugin-import": "^2.21.2",
+    "prettier": "^3.8.3",
-    "eslint-plugin-json-format": "^2.0.1",
+    "typescript": "^6.0.3",
-    "eslint-plugin-prettier": "^3.1.4",
+    "typescript-eslint": "^8.60.1"
-    "eslint-plugin-unused-imports": "^0.1.3",
-    "prettier": "^2.0.5",
-    "typescript": "^4.0.3"
   },
   "scripts": {
     "build": "cd shared && npm run build && cd ../frontend && npm run build && cd ../backend && npm run build",
-    "lint": "eslint ./**/src/**/*.{js,ts,json} --fix && prettier --write ./**/src/**/*.{js,ts,json}",
+    "lint": "eslint ./**/src/**/*.{js,ts} --fix && prettier --write ./**/src/**/*.{js,ts,json}",
     "init": "cd shared && npm install && cd ../frontend && npm install && cd ../backend && npm install",
     "dev": "concurrently --kill-others-on-fail \"cd shared && npm dev\"  \"cd backend && npm dev\"  \"cd frontend && npm dev\""
   }

shared/package.json

@@ -13,14 +13,14 @@
     "try-build-before": "npx webpack --mode production"
   },
   "devDependencies": {
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
-    "file-loader": "^6.1.0",
+    "file-loader": "^6.2.0",
-    "gl-matrix": "3.3.0",
+    "gl-matrix": "^3.3.0",
-    "prettier": "^2.0.5",
+    "prettier": "^3.8.3",
-    "terser-webpack-plugin": "^2.3.8",
+    "terser-webpack-plugin": "^5.6.1",
-    "ts-loader": "^8.0.3",
+    "ts-loader": "^9.6.0",
-    "typescript": "^4.0.3",
+    "typescript": "^6.0.3",
-    "webpack": "^4.43.0",
+    "webpack": "^5.107.2",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^7.0.3"
   }
 }

shared/src/commands/types/remote-calls-for-objects.ts

@@ -4,7 +4,10 @@ import { Command } from '../command';
 
 @serializable
 export class RemoteCallsForObject {
-  constructor(public readonly id: Id, public readonly calls: Array<RemoteCall>) {}
+  constructor(
+    public readonly id: Id,
+    public readonly calls: Array<RemoteCall>,
+  ) {}
 
   public toArray(): Array<any> {
     return [this.id, this.calls];

shared/src/helper/circle.ts

@@ -3,7 +3,10 @@ import { serializable } from '../serialization/serializable';
 
 @serializable
 export class Circle {
-  constructor(public center: vec2, public radius: number) {}
+  constructor(
+    public center: vec2,
+    public radius: number,
+  ) {}
 
   public distance(target: vec2): number {
     return vec2.distance(this.center, target) - this.radius;

shared/src/helper/rectangle.ts

@@ -3,7 +3,10 @@ import { serializable } from '../serialization/serializable';
 
 @serializable
 export class Rectangle {
-  constructor(public topLeft = vec2.create(), public size = vec2.create()) {}
+  constructor(
+    public topLeft = vec2.create(),
+    public size = vec2.create(),
+  ) {}
 
   public toArray(): Array<any> {
     return [this.topLeft, this.size];

shared/src/objects/game-object.ts

@@ -5,7 +5,10 @@ import { serializable } from '../serialization/serializable';
 
 @serializable
 export class RemoteCall {
-  constructor(public readonly functionName: string, public readonly args: Array<any>) {}
+  constructor(
+    public readonly functionName: string,
+    public readonly args: Array<any>,
+  ) {}
 
   public toArray(): Array<any> {
     return [this.functionName, this.args];
@@ -48,9 +51,9 @@ export abstract class GameObject extends CommandReceiver {
 
   public processRemoteCalls(remoteCalls: Array<RemoteCall>) {
     remoteCalls.forEach((r) =>
-      ((this[r.functionName as keyof this] as unknown) as (
+      (this[r.functionName as keyof this] as unknown as (...args: Array<any>) => unknown)(
-        ...args: Array<any>
+        ...r.args,
-      ) => unknown)(...r.args),
+      ),
     );
   }
 

shared/src/objects/types/lamp-base.ts

@@ -4,7 +4,12 @@ import { GameObject } from '../game-object';
 
 @serializable
 export class LampBase extends GameObject {
-  constructor(id: Id, public center: vec2, public color: vec3, public lightness: number) {
+  constructor(
+    id: Id,
+    public center: vec2,
+    public color: vec3,
+    public lightness: number,
+  ) {
     super(id);
   }
 

shared/tsconfig.json

@@ -8,8 +8,8 @@
     "esModuleInterop": true,
     "strict": true,
     "experimentalDecorators": true,
-    "downlevelIteration": true,
     "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
     "module": "commonjs",
     "skipLibCheck": true,
     "composite": true,