Solve serialization

backend/package.json

@@ -7,6 +7,7 @@
     "start": "concurrently --kill-others \"webpack --mode development -w\" \"nodemon --legacy-watch dist/main.js\"",
     "lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.ts\"",
     "build": "webpack --mode production",
+    "try-build": "npm run build && node dist/main.js",
     "initialize": "npm install"
   },
   "keywords": [],

backend/src/main.ts

@@ -6,7 +6,7 @@ import {
   applyArrayPlugins,
   Random,
   TransportEvents,
-  deserializeCommand,
+  deserialize,
   StepCommand,
 } from 'shared';
 import './index.html';
@@ -23,7 +23,6 @@ applyArrayPlugins();
 Random.seed = 42;
 
 const objects = new PhysicalContainer();
-
 createDungeon(objects);
 createDungeon(objects);
 createDungeon(objects);
@@ -59,8 +58,8 @@ app.get('/', function (req, res) {
 io.on('connection', (socket: SocketIO.Socket) => {
   socket.on(TransportEvents.PlayerJoining, () => {
     const player = new Player(objects, socket);
-    socket.on(TransportEvents.PlayerToServer, (text: string) => {
+    socket.on(TransportEvents.PlayerToServer, (json: string) => {
-      const command = deserializeCommand(JSON.parse(text));
+      const command = deserialize(json);
       player.sendCommand(command);
     });
 

backend/src/objects/character-physical.ts

@@ -6,7 +6,7 @@ import {
   settings,
   CommandExecutors,
   MoveActionCommand,
-  typeToBaseType,
+  serializable,
 } from 'shared';
 
 import { ImmutableBoundingBox } from '../physics/bounding-boxes/immutable-bounding-box';
@@ -15,7 +15,7 @@ import { CirclePhysical } from './circle-physical';
 import { Physical } from '../physics/physical';
 import { PhysicalContainer } from '../physics/containers/physical-container';
 
-@typeToBaseType
+@serializable(CharacterBase)
 export class CharacterPhysical extends CharacterBase implements Physical {
   public readonly canCollide = true;
   public readonly isInverted = false;
@@ -166,9 +166,4 @@ export class CharacterPhysical extends CharacterBase implements Physical {
     this.container.removeObject(this.leftFoot);
     this.container.removeObject(this.rightFoot);
   }
-
-  public toJSON(): any {
-    const { type, id, head, leftFoot, rightFoot } = this;
-    return [type, id, head, leftFoot, rightFoot];
-  }
 }

backend/src/objects/circle-physical.ts

@@ -4,6 +4,7 @@ import {
   clamp,
   CommandExecutors,
   GameObject,
+  serializable,
   settings,
   StepCommand,
 } from 'shared';
@@ -14,6 +15,7 @@ import { BoundingBoxBase } from '../physics/bounding-boxes/bounding-box-base';
 import { moveCircle } from '../physics/move-circle';
 import { PhysicalContainer } from '../physics/containers/physical-container';
 
+@serializable(Circle)
 export class CirclePhysical implements Circle, Physical {
   readonly isInverted = false;
   readonly canCollide = true;
@@ -154,8 +156,8 @@ export class CirclePhysical implements Circle, Physical {
     return wasHit;
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
     const { center, radius } = this;
-    return { center, radius };
+    return [center, radius];
   }
 }

backend/src/objects/lamp-physical.ts

@@ -1,11 +1,11 @@
 import { vec2, vec3 } from 'gl-matrix';
-import { LampBase, settings, id, typeToBaseType } from 'shared';
+import { LampBase, settings, id, serializable } from 'shared';
 
 import { ImmutableBoundingBox } from '../physics/bounding-boxes/immutable-bounding-box';
 
 import { Physical } from '../physics/physical';
 
-@typeToBaseType
+@serializable(LampBase)
 export class LampPhysical extends LampBase implements Physical {
   public readonly canCollide = false;
   public readonly isInverted = false;
@@ -38,9 +38,4 @@ export class LampPhysical extends LampBase implements Physical {
   public distance(_: vec2): number {
     return 0;
   }
-
-  public toJSON(): any {
-    const { type, id, center, color, lightness } = this;
-    return [type, id, center, color, lightness];
-  }
 }

backend/src/objects/tunnel-physical.ts

@@ -1,10 +1,10 @@
 import { vec2 } from 'gl-matrix';
-import { clamp01, mix, TunnelBase, id, typeToBaseType } from 'shared';
+import { clamp01, mix, TunnelBase, id, serializable } from 'shared';
 
 import { ImmutableBoundingBox } from '../physics/bounding-boxes/immutable-bounding-box';
 import { StaticPhysical } from '../physics/containers/static-physical-object';
 
-@typeToBaseType
+@serializable(TunnelBase)
 export class TunnelPhysical extends TunnelBase implements StaticPhysical {
   public readonly canCollide = true;
   public readonly isInverted = true;
@@ -45,9 +45,4 @@ export class TunnelPhysical extends TunnelBase implements StaticPhysical {
   public get gameObject(): TunnelPhysical {
     return this;
   }
-
-  public toJSON(): any {
-    const { type, id, from, to, fromRadius, toRadius } = this;
-    return [type, id, from, to, fromRadius, toRadius];
-  }
 }

backend/src/players/player.ts

@@ -7,6 +7,7 @@ import {
   CreatePlayerCommand,
   DeleteObjectsCommand,
   MoveActionCommand,
+  serialize,
   SetViewAreaActionCommand,
   TransportEvents,
   UpdateObjectsCommand,
@@ -16,7 +17,6 @@ import { CharacterPhysical } from '../objects/character-physical';
 import { BoundingBox } from '../physics/bounding-boxes/bounding-box';
 import { PhysicalContainer } from '../physics/containers/physical-container';
 import { Physical } from '../physics/physical';
-import { jsonSerialize } from '../serialize';
 
 export class Player extends CommandReceiver {
   public isActive = true;
@@ -50,7 +50,7 @@ export class Player extends CommandReceiver {
 
     socket.emit(
       TransportEvents.ServerToPlayer,
-      jsonSerialize(new CreatePlayerCommand(jsonSerialize(this.character)))
+      serialize(new CreatePlayerCommand(this.character))
     );
 
     this.sendObjects();
@@ -72,13 +72,12 @@ export class Player extends CommandReceiver {
     const noLongerIntersecting = this.objectsPreviouslyInViewArea.filter(
       (o) => !this.objectsInViewArea.includes(o)
     );
-
     this.objectsPreviouslyInViewArea = this.objectsInViewArea;
 
     if (noLongerIntersecting.length > 0) {
       this.socket.emit(
         TransportEvents.ServerToPlayer,
-        jsonSerialize(
+        serialize(
           new DeleteObjectsCommand([
             ...new Set(noLongerIntersecting.map((p) => p.gameObject.id)),
           ])
@@ -89,25 +88,23 @@ export class Player extends CommandReceiver {
     if (newlyIntersecting.length > 0) {
       this.socket.emit(
         TransportEvents.ServerToPlayer,
-        jsonSerialize(
+        serialize(
-          new CreateObjectsCommand(
+          new CreateObjectsCommand([
-            jsonSerialize([...new Set(newlyIntersecting.map((p) => p.gameObject))])
+            ...new Set(newlyIntersecting.map((p) => p.gameObject)),
-          )
+          ])
         )
       );
     }
 
     this.socket.emit(
       TransportEvents.ServerToPlayer,
-      jsonSerialize(
+      serialize(
-        new UpdateObjectsCommand(
+        new UpdateObjectsCommand([
-          jsonSerialize([
           ...new Set(
             this.objectsInViewArea.filter((p) => p.canMove).map((p) => p.gameObject)
           ),
         ])
       )
-      )
     );
 
     if (this.isActive) {

backend/src/serialize.ts

@@ -1,2 +0,0 @@
-export const jsonSerialize = (o: any): string =>
-  JSON.stringify(o, (key, value) => (value?.toFixed ? Number(value.toFixed(3)) : value));

backend/webpack.config.js

@@ -32,29 +32,14 @@ module.exports = {
       new TerserJSPlugin({
         sourceMap: true,
         cache: true,
-        test: /\.ts$/i,
+        test: /\.ts$/,
-        terserOptions: {
-          ecma: 5,
-          warnings: true,
-          parse: {},
-          compress: { defaults: true },
-          mangle: true,
-          module: false,
-          output: null,
-          toplevel: true,
-          nameCache: null,
-          ie8: false,
-          keep_classnames: false,
-          keep_fnames: false,
-          safari10: false,
-        },
       }),
     ],
   },
   module: {
     rules: [
       {
-        test: /\.html$/i,
+        test: /\.html$/,
         use: {
           loader: 'file-loader',
           query: {

frontend/package.json

@@ -7,6 +7,7 @@
     "start": "webpack-dev-server --mode development",
     "lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.ts\"",
     "build": "webpack --mode production && find dist -type f -not -name '*.html' | xargs rm",
+    "try-build": "npm run build && cd dist && python3 -m http.server 8080",
     "initialize": "npm install"
   },
   "keywords": [],

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

@@ -1,4 +1,4 @@
-import { Command, CommandReceiver, TransportEvents } from 'shared';
+import { Command, CommandReceiver, serialize, TransportEvents } from 'shared';
 
 export class CommandReceiverSocket extends CommandReceiver {
   constructor(private readonly socket: SocketIOClient.Socket) {
@@ -6,6 +6,6 @@ export class CommandReceiverSocket extends CommandReceiver {
   }
 
   protected defaultCommandExecutor(command: Command) {
-    this.socket.emit(TransportEvents.PlayerToServer, JSON.stringify(command));
+    this.socket.emit(TransportEvents.PlayerToServer, serialize(command));
   }
 }

frontend/src/scripts/game.ts

@@ -12,7 +12,9 @@ import {
 } from 'sdf-2d';
 import {
   broadcastCommands,
+  deserialize,
   prettyPrint,
+  serialize,
   settings,
   SetViewAreaActionCommand,
   StepCommand,
@@ -27,9 +29,13 @@ import { RenderCommand } from './commands/types/render';
 import { Configuration } from './config/configuration';
 import { DeltaTimeCalculator } from './helper/delta-time-calculator';
 import { rgb } from './helper/rgb';
+import { CharacterView } from './objects/character-view';
+import { TunnelView } from './objects/tunnel-view';
+import { LampView } from './objects/lamp-view';
 import { GameObjectContainer } from './objects/game-object-container';
 import { BlobShape } from './shapes/blob-shape';
-import { deserialize } from './transport/deserialize';
+
+const a = [CharacterView, TunnelView, LampView];
 
 export class Game {
   public readonly gameObjects = new GameObjectContainer();
@@ -149,7 +155,7 @@ export class Game {
       // todo: Should only send aspect ratio
       this.socket.emit(
         TransportEvents.PlayerToServer,
-        JSON.stringify(new SetViewAreaActionCommand(this.gameObjects.camera.viewArea))
+        serialize(new SetViewAreaActionCommand(this.gameObjects.camera.viewArea))
       );
     }
 

frontend/src/scripts/objects/character-view.ts

@@ -1,8 +1,9 @@
 import { vec2 } from 'gl-matrix';
-import { CharacterBase, CommandExecutors } from 'shared';
+import { CharacterBase, CommandExecutors, deserializable } from 'shared';
 import { RenderCommand } from '../commands/types/render';
 import { BlobShape } from '../shapes/blob-shape';
 
+@deserializable(CharacterBase)
 export class CharacterView extends CharacterBase {
   private shape = new BlobShape();
 

frontend/src/scripts/objects/game-object-container.ts

@@ -10,7 +10,6 @@ import {
   StepCommand,
   UpdateObjectsCommand,
 } from 'shared';
-import { deserialize, deserializeJsonArray } from '../transport/deserialize';
 import { Camera } from './camera';
 import { CharacterView } from './character-view';
 
@@ -21,7 +20,7 @@ export class GameObjectContainer extends CommandReceiver {
 
   protected commandExecutors: CommandExecutors = {
     [CreatePlayerCommand.type]: (c: CreatePlayerCommand) => {
-      this.player = deserialize(c.serializedPlayer) as CharacterView;
+      this.player = c.character as CharacterView;
       this.camera = new Camera();
       this.addObject(this.player);
       this.addObject(this.camera);
@@ -34,13 +33,13 @@ export class GameObjectContainer extends CommandReceiver {
     },
 
     [CreateObjectsCommand.type]: (c: CreateObjectsCommand) =>
-      deserializeJsonArray(c.serializedObjects).forEach((o) => this.addObject(o)),
+      c.objects.forEach((o) => this.addObject(o)),
 
     [DeleteObjectsCommand.type]: (c: DeleteObjectsCommand) =>
       c.ids.forEach((id: Id) => this.objects.delete(id)),
 
     [UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) =>
-      deserializeJsonArray(c.serializedObjects).forEach((o) => {
+      c.objects.forEach((o) => {
         this.objects.delete(o.id);
         this.addObject(o);
         if (o.id === this.player.id) {

frontend/src/scripts/objects/lamp-view.ts

@@ -1,8 +1,9 @@
 import { vec2, vec3 } from 'gl-matrix';
 import { CircleLight } from 'sdf-2d';
-import { CommandExecutors, Id, LampBase } from 'shared';
+import { CommandExecutors, deserializable, Id, LampBase } from 'shared';
 import { RenderCommand } from '../commands/types/render';
 
+@deserializable(LampBase)
 export class LampView extends LampBase {
   private light: CircleLight;
 

frontend/src/scripts/objects/tunnel-view.ts

@@ -1,8 +1,9 @@
 import { vec2 } from 'gl-matrix';
 import { InvertedTunnel } from 'sdf-2d';
-import { CommandExecutors, Id, TunnelBase } from 'shared';
+import { CommandExecutors, deserializable, Id, TunnelBase } from 'shared';
 import { RenderCommand } from '../commands/types/render';
 
+@deserializable(TunnelBase)
 export class TunnelView extends TunnelBase {
   private shape: InvertedTunnel;
 

frontend/src/scripts/transport/deserialize.ts

@@ -1,28 +0,0 @@
-import {
-  CharacterBase,
-  commandConstructors,
-  GameObject,
-  LampBase,
-  TunnelBase,
-} from 'shared';
-import { CharacterView } from '../objects/character-view';
-import { LampView } from '../objects/lamp-view';
-import { TunnelView } from '../objects/tunnel-view';
-
-const constructors: { [type: string]: new (...values: Array<any>) => GameObject } = {
-  [TunnelBase.type]: TunnelView,
-  [LampBase.type]: LampView,
-  [CharacterBase.type]: CharacterView,
-  ...commandConstructors,
-};
-
-export const deserialize = (json: string): GameObject => {
-  const [type, ...values] = JSON.parse(json);
-  return new constructors[type](...values);
-};
-
-export const deserializeJsonArray = (json: string): Array<GameObject> => {
-  return (JSON.parse(json) as Array<any>).map(([type, ...values]) => {
-    return new constructors[type](...values);
-  });
-};

frontend/tsconfig.json

@@ -10,6 +10,9 @@
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "Node",
     "module": "es6",
-    "lib": ["es2015", "dom"]
+    "lib": [
+      "es2015",
+      "dom"
+    ]
   }
 }

frontend/webpack.config.js

@@ -31,28 +31,13 @@ module.exports = {
     },
   },
   optimization: {
-    minimize: true,
+    minimize: false,
     usedExports: true,
     minimizer: [
       new TerserJSPlugin({
         sourceMap: true,
         cache: true,
-        test: /\.ts$/i,
+        test: /\.ts$/,
-        terserOptions: {
-          ecma: 5,
-          warnings: true,
-          parse: {},
-          compress: { defaults: true },
-          mangle: true,
-          module: false,
-          output: null,
-          toplevel: true,
-          nameCache: null,
-          ie8: false,
-          keep_classnames: false,
-          keep_fnames: false,
-          safari10: false,
-        },
       }),
       new OptimizeCSSAssetsPlugin({}),
     ],
@@ -81,7 +66,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.ico$/i,
+        test: /\.ico$/,
         use: {
           loader: 'file-loader',
           query: {
@@ -91,7 +76,7 @@ module.exports = {
         },
       },
       {
-        test: /\.scss$/i,
+        test: /\.scss$/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader',