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
-# .devcontainer). The full (non-slim) image carries the build tools that
+# Node 22 (current LTS) matches the project toolchain (webpack 5 / TypeScript 6,
+# 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.5",
-    "express": "^4.17.1",
+    "cors": "^2.8.6",
+    "express": "^5.2.1",
     "gl-matrix": "3.3.0",
-    "minimist": "^1.2.5",
-    "socket.io": "^2.3.0",
-    "socket.io-msgpack-parser": "^2.0.0"
+    "minimist": "^1.2.8",
+    "socket.io": "^4.8.3",
+    "socket.io-msgpack-parser": "^3.0.2"
   },
   "devDependencies": {
-    "@types/cors": "^2.8.7",
-    "@types/express": "^4.17.8",
-    "@types/minimist": "^1.2.0",
-    "@types/node": "^14.11.2",
-    "@types/socket.io": "^2.1.11",
-    "clean-webpack-plugin": "^3.0.0",
-    "concurrently": "^5.3.0",
-    "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",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/minimist": "^1.2.5",
+    "@types/node": "^22.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "concurrently": "^10.0.3",
+    "nodemon": "^3.1.14",
     "shared": "file:../shared",
-    "terser-webpack-plugin": "^2.3.5",
-    "ts-config-webpack-plugin": "^2.0.0",
-    "ts-loader": "^8.0.3",
-    "typescript": "^4.0.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-node-externals": "^2.5.2"
+    "terser-webpack-plugin": "^5.6.1",
+    "ts-loader": "^9.6.0",
+    "typescript": "^6.0.3",
+    "webpack": "^5.107.2",
+    "webpack-cli": "^7.0.3",
+    "webpack-node-externals": "^3.0.0"
   }
 }

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(
-    deltaTimeInSeconds: number,
-  ): { hitObject: GameObject | undefined; velocity: vec2 } {
+  public stepManually(deltaTimeInSeconds: number): {
+    hitObject: GameObject | undefined;
+    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(
-        playerBoundingBox,
-      );
+      const possibleIntersectors =
+        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",
-    "clean-webpack-plugin": "^3.0.0",
-    "common-config-webpack-plugin": "^2.0.1",
-    "css-loader": "^1.0.1",
+    "@plausible-analytics/tracker": "^0.4.5",
+    "autoprefixer": "^10.5.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "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-webpack-inline-svg-plugin": "^2.3.0",
-    "html-webpack-plugin": "^4.5.0",
-    "image-config-webpack-plugin": "^2.0.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "postcss-loader": "^3.0.0",
+    "html-inline-css-webpack-plugin": "^1.11.2",
+    "html-webpack-plugin": "^5.6.7",
+    "mini-css-extract-plugin": "^2.10.2",
+    "postcss": "^8.5.15",
+    "postcss-loader": "^8.2.1",
     "resize-observer-polyfill": "^1.5.1",
-    "resolve-url-loader": "^3.1.1",
-    "sass": "^1.27.0",
-    "sass-loader": "^8.0.2",
-    "sdf-2d": "^0.7.2",
+    "sass": "^1.100.0",
+    "sass-loader": "^17.0.0",
+    "sdf-2d": "^0.7.6",
     "shared": "file:../shared",
-    "socket.io-client": "^2.3.1",
-    "socket.io-msgpack-parser": "^2.0.0",
-    "source-map-loader": "^1.1.1",
-    "svg-url-loader": "^6.0.0",
-    "terser-webpack-plugin": "^4.2.2",
-    "ts-config-webpack-plugin": "^2.0.0",
-    "typescript": "^4.0.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "socket.io-client": "^4.8.3",
+    "socket.io-msgpack-parser": "^3.0.2",
+    "source-map-loader": "^5.0.0",
+    "terser-webpack-plugin": "^5.6.1",
+    "ts-loader": "^9.6.0",
+    "typescript": "^6.0.3",
+    "webpack": "^5.107.2",
+    "webpack-cli": "^7.0.3",
+    "webpack-dev-server": "^5.2.4"
   }
 }

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>