feat: client reconnection

Author: abcxff

client/config.js

@@ -533,3 +533,7 @@ const FLAGS = {
     isCachable: 1 << 5,
     showsAboveParent: 1 << 6
 };
+
+// Keep in sync with index.ts
+const RECONNECTION_KEY_LENGTH = 16;
+const RECONNECTION_KEY_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

client/loader.js

@@ -618,7 +618,21 @@ Module.todo.push([() => {
         // executes spawn command
         spawn: name => window.input.execute(`game_spawn ${name}`),
         // executes reconnect command
-        reconnect: () => window.input.execute(`lb_reconnect`)
+        reconnect: () => window.input.execute(`lb_reconnect`),
+        // gets or creates reconnection key
+        getReconnectionKey: () => {
+            let key = window.localStorage.getItem('reconnectionKey');
+            if (!key) {
+                key = "";
+                for (let i = 0; i < RECONNECTION_KEY_LENGTH; i++) {
+                    key += RECONNECTION_KEY_ALPHABET[Math.floor(
+                        Math.random() * RECONNECTION_KEY_ALPHABET.length
+                    )];
+                }
+                window.localStorage.setItem('reconnectionKey', key);
+            }
+            return key;
+        }
     };
 
     // custom commands
@@ -1255,7 +1269,9 @@ class ASMConsts {
 
     static createWebSocket(urlPtr) {
         const url = Module.UTF8ToString(urlPtr);
-        const ws = new WebSocket(`ws${location.protocol.slice(4)}//${location.host}/${url.slice(5, url.length - 4)}`);
+        const reconnectionKey = window.Game.getReconnectionKey();
+        const protocol = reconnectionKey ? `reconkey#${reconnectionKey}` : undefined;
+        const ws = new WebSocket(`ws${location.protocol.slice(4)}//${location.host}/${url.slice(5, url.length - 4)}`, protocol);
         ws.binaryType = "arraybuffer";
         ws.events = [];
         ws.onopen = function() {

src/Client.ts

@@ -23,8 +23,8 @@ import { WebSocket } from "uWebSockets.js";
 import Reader from "./Coder/Reader";
 import Writer from "./Coder/Writer";
 import GameServer from "./Game";
-import ClientCamera from "./Native/Camera";
-import { ArenaState } from "./Native/Arena";
+import { CameraEntity } from "./Native/Camera";
+
 import ObjectEntity from "./Entity/Object";
 import TankDefinitions, { getTankById, TankCount } from "./Const/TankDefinitions";
 import DevTankDefinitions, { DevTank } from "./Const/DevTankDefinitions";
@@ -80,6 +80,7 @@ export interface ClientWrapper {
     client: Client | null;
     ipAddress: string;
     gamemode: string;
+    reconnectionKey: string | null;
 }
 
 export default class Client {
@@ -102,7 +103,10 @@ export default class Client {
     /** Inner websocket connection. */
     public ws: WebSocket<ClientWrapper> | null;
     /** Client's camera entity. */
-    public camera: ClientCamera | null = null;
+    public camera: CameraEntity | null = null;
+
+    /** Client's reconnection key for reclaiming cameras. */
+    public reconnectionKey: string | null = null;
 
     /** Whether or not the player has used in game dev cheats before (such as level up or godmode). */
     private devCheatsUsed: boolean = false;
@@ -119,14 +123,48 @@ export default class Client {
         this.game.clients.add(this);
         this.ws = ws;
         this.lastPingTick = this.connectTick = game.tick;
+        this.reconnectionKey = ws.getUserData().reconnectionKey;
     }
 
     /** Accepts the client and creates a camera for it. */
     public acceptClient() {
         this.write().u8(ClientBound.ServerInfo).stringNT(this.game.gamemode).stringNT(config.host).send();
         this.write().u8(ClientBound.PlayerCount).vu(GameServer.globalPlayerCount).send();
         this.write().u8(ClientBound.Accept).vi(this.accessLevel).send();
-        this.camera = new ClientCamera(this.game, this);
+        
+        // Check for reconnection
+        const didRestoreCamera = this.tryReconnection();
+        if (!didRestoreCamera) {
+            // If reconnection failed, create a new camera
+            this.camera = new CameraEntity(this.game);
+            this.camera.setClient(this);
+        }
+    }
+
+    private tryReconnection(): boolean {
+        if (!config.enableReconnection) return false;
+        const reconnectionKey = this.reconnectionKey;
+        if (!reconnectionKey) return false;
+
+        for (const id of this.game.entities.cameras) {
+            const camera = this.game.entities.inner[id] as CameraEntity;
+            if (!camera) continue;
+
+            if (camera.reconnectionKey === reconnectionKey) {
+                if (camera.getClient()) {
+                    // Already claimed, so our reconnection key itself is a duplicate
+                    this.reconnectionKey = null;
+                    return false;
+                }
+
+                camera.setClient(this);
+                this.camera = camera;
+
+                return true;
+            }
+        }
+
+        return false;
     }
 
     /** Sends data to client. */
@@ -154,8 +192,14 @@ export default class Client {
 
         this.inputs.deleted = true;
         this.inputs.movement.magnitude = 0;
-
-        if (Entity.exists(this.camera)) this.camera.delete();
+        if (Entity.exists(this.camera)) {
+            if (config.enableReconnection && this.reconnectionKey) {
+                // Mark camera for reconnection instead of deleting
+                this.camera.markForReconnection();
+            } else {
+                this.camera.delete();
+            }
+        }
     }
 
     /** Handles to incoming messages. */

src/Entity/Misc/Dominator.ts

@@ -18,7 +18,7 @@
 
 import { Color, ColorsHexCode, NameFlags, StyleFlags, Tank, ClientBound } from "../../Const/Enums";
 import ArenaEntity from "../../Native/Arena";
-import ClientCamera, { CameraEntity } from "../../Native/Camera";
+import { CameraEntity } from "../../Native/Camera";
 import { AI, AIState, Inputs } from "../AI";
 import LivingEntity from "../Live";
 import Bullet from "../Tank/Projectile/Bullet";

src/Entity/Tank/TankBody.ts

@@ -280,26 +280,28 @@ export default class TankBody extends LivingEntity implements BarrelBase {
                 if (client && client.accessLevel < AccessLevel.FullAccess) this.setInvulnerability(false);
             }
         }
-        if (!this.deletionAnimation && !this.inputs.deleted) this.physicsData.size = this.baseSize * this.cameraEntity.sizeFactor;
-        else this.regenPerTick = 0;
+        if (!this.deletionAnimation) {
+            this.physicsData.size = this.baseSize * this.cameraEntity.sizeFactor;
+        }
+        
+        if (this.deletionAnimation) this.regenPerTick = 0;
 
         super.tick(tick);
 
         // If we're currently in a deletion animation
         if (this.deletionAnimation) return;
 
-        if (this.inputs.deleted) {
-            if (this.cameraEntity.cameraData.values.level <= 5) return this.destroy();
+        if (!Entity.exists(this.cameraEntity)) {
             this.lastDamageTick = tick;
             this.healthData.health -= 2 + this.healthData.values.maxHealth / 500;
+            this.regenPerTick = 0;
 
             if (this.isInvulnerable) this.setInvulnerability(false);
             if (this.styleData.values.flags & StyleFlags.isFlashing) {
                 this.styleData.flags ^= StyleFlags.isFlashing;
                 this.damageReduction = 1.0;
             }
             return;
-            // return this.destroy();
         }
 
         if (this.definition.flags.zoomAbility && (this.inputs.flags & InputFlags.rightclick)) {