Bump dependencies

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