Solve serialization

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": [],
@@ -41,4 +42,4 @@
   "sideEffects": [
     "*.scss"
   ]
-}
+}

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,
-        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,
-        },
+        test: /\.ts$/,
       }),
       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',