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',

package.json

@@ -3,6 +3,8 @@
   "private": true,
   "scripts": {
     "start": "lerna run --parallel start",
+    "try-build": "lerna run --parallel try-build",
+    "build": "lerna run build",
     "initialize": "lerna run initialize"
   },
   "devDependencies": {

shared/src/commands/command.ts

@@ -1,3 +1,9 @@
-import { Typed } from '../transport/typed';
+export abstract class Command {
+  public static get type(): string {
+    return (this as any).name;
+  }
 
-export abstract class Command extends Typed { }
+  public get type(): string {
+    return (this as any).constructor.name;
+  }
+}

shared/src/commands/types/create-objects.ts

@@ -1,11 +1,14 @@
+import { GameObject } from '../../objects/game-object';
+import { serializable } from '../../transport/serializable/serializable';
 import { Command } from '../command';
 
+@serializable()
 export class CreateObjectsCommand extends Command {
-  public constructor(public readonly serializedObjects: string) {
+  public constructor(public readonly objects: Array<GameObject>) {
     super();
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
-    return [this.type, this.serializedObjects];
+    return [this.objects];
   }
 }

shared/src/commands/types/create-player.ts

@@ -1,11 +1,14 @@
+import { CharacterBase } from '../../objects/types/character-base';
+import { serializable } from '../../transport/serializable/serializable';
 import { Command } from '../command';
 
+@serializable()
 export class CreatePlayerCommand extends Command {
-  public constructor(public readonly serializedPlayer: string) {
+  public constructor(public readonly character: CharacterBase) {
     super();
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
-    return [this.type, this.serializedPlayer];
+    return [this.character];
   }
 }

shared/src/commands/types/delete-objects.ts

@@ -1,12 +1,14 @@
 import { Id } from '../../transport/identity';
+import { serializable } from '../../transport/serializable/serializable';
 import { Command } from '../command';
 
+@serializable()
 export class DeleteObjectsCommand extends Command {
   public constructor(public readonly ids: Array<Id>) {
     super();
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
-    return [this.type, this.ids];
+    return [this.ids];
   }
 }

shared/src/commands/types/move-action.ts

@@ -1,12 +1,14 @@
 import { vec2 } from 'gl-matrix';
+import { serializable } from '../../transport/serializable/serializable';
 import { Command } from '../command';
 
+@serializable()
 export class MoveActionCommand extends Command {
   public constructor(public readonly delta: vec2) {
     super();
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
-    return [this.type, this.delta];
+    return [this.delta];
   }
 }

shared/src/commands/types/primary-action.ts

@@ -1,12 +1,14 @@
 import { vec2 } from 'gl-matrix';
+import { serializable } from '../../transport/serializable/serializable';
 import { Command } from '../command';
 
+@serializable()
 export class PrimaryActionCommand extends Command {
   public constructor(public readonly position: vec2) {
     super();
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
-    return [this.type, this.position];
+    return [this.position];
   }
 }

shared/src/commands/types/secondary-action.ts

@@ -1,12 +1,14 @@
 import { vec2 } from 'gl-matrix';
+import { serializable } from '../../transport/serializable/serializable';
 import { Command } from '../command';
 
+@serializable()
 export class SecondaryActionCommand extends Command {
   public constructor(public readonly position: vec2) {
     super();
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
-    return [this.type, this.position];
+    return [this.position];
   }
 }

shared/src/commands/types/set-view-area-action.ts

@@ -1,12 +1,14 @@
 import { Rectangle } from '../../helper/rectangle';
+import { serializable } from '../../transport/serializable/serializable';
 import { Command } from '../command';
 
+@serializable()
 export class SetViewAreaActionCommand extends Command {
   public constructor(public readonly viewArea: Rectangle) {
     super();
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
-    return [this.type, this.viewArea];
+    return [this.viewArea];
   }
 }

shared/src/commands/types/ternary-action.ts

@@ -1,12 +1,14 @@
 import { vec2 } from 'gl-matrix';
+import { serializable } from '../../transport/serializable/serializable';
 import { Command } from '../command';
 
+@serializable()
 export class TernaryActionCommand extends Command {
   public constructor(public readonly position: vec2) {
     super();
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
-    return [this.type, this.position];
+    return [this.position];
   }
 }

shared/src/commands/types/update-objects.ts

@@ -1,11 +1,14 @@
+import { GameObject } from '../../objects/game-object';
+import { serializable } from '../../transport/serializable/serializable';
 import { Command } from '../command';
 
+@serializable()
 export class UpdateObjectsCommand extends Command {
-  public constructor(public readonly serializedObjects: string) {
+  public constructor(public readonly objects: Array<GameObject>) {
     super();
   }
 
-  public toJSON(): any {
+  public toArray(): Array<any> {
-    return [this.type, this.serializedObjects];
+    return [this.objects];
   }
 }

shared/src/helper/circle.ts

@@ -1,5 +1,11 @@
 import { vec2 } from 'gl-matrix';
+import { serializable } from '../transport/serializable/serializable';
 
+@serializable()
 export class Circle {
   constructor(public center: vec2, public radius: number) { }
+
+  public toArray(): Array<any> {
+    return [this.center, this.radius];
+  }
 }

shared/src/helper/rectangle.ts

@@ -1,5 +1,11 @@
 import { vec2 } from 'gl-matrix';
+import { serializable } from '../transport/serializable/serializable';
 
+@serializable()
 export class Rectangle {
   constructor(public topLeft = vec2.create(), public size = vec2.create()) { }
+
+  public toArray(): Array<any> {
+    return [this.topLeft, this.size];
+  }
 }

shared/src/main.ts

@@ -22,7 +22,9 @@ export * from './helper/random';
 export * from './helper/unique';
 export * from './helper/rotate-90-deg';
 export * from './objects/game-object';
-export * from './objects/deserialize';
+export * from './transport/serializable/deserialize';
+export * from './transport/serializable/serialize';
+export * from './transport/serializable/serializable';
 export * from './objects/types/character-base';
 export * from './objects/types/lamp-base';
 export * from './objects/types/tunnel-base';

shared/src/objects/deserialize.ts

@@ -1,26 +0,0 @@
-import { CreatePlayerCommand } from '../commands/types/create-player';
-import { MoveActionCommand } from '../commands/types/move-action';
-import { PrimaryActionCommand } from '../commands/types/primary-action';
-import { SecondaryActionCommand } from '../commands/types/secondary-action';
-import { SetViewAreaActionCommand } from '../commands/types/set-view-area-action';
-import { TernaryActionCommand } from '../commands/types/ternary-action';
-import { UpdateObjectsCommand } from '../commands/types/update-objects';
-import { Command, CreateObjectsCommand, DeleteObjectsCommand } from '../main';
-
-export const commandConstructors: {
-  [type: string]: new (...values: Array<any>) => any;
-} = {
-  [CreateObjectsCommand.type]: CreateObjectsCommand,
-  [DeleteObjectsCommand.type]: DeleteObjectsCommand,
-  [CreatePlayerCommand.type]: CreatePlayerCommand,
-  [MoveActionCommand.type]: MoveActionCommand,
-  [PrimaryActionCommand.type]: PrimaryActionCommand,
-  [SecondaryActionCommand.type]: SecondaryActionCommand,
-  [TernaryActionCommand.type]: TernaryActionCommand,
-  [SetViewAreaActionCommand.type]: SetViewAreaActionCommand,
-  [UpdateObjectsCommand.type]: UpdateObjectsCommand,
-};
-
-export const deserializeCommand = ([type, ...values]: [string, Array<any>]): Command => {
-  return new commandConstructors[type](...values);
-};

shared/src/objects/game-object.ts

@@ -2,14 +2,6 @@ import { CommandReceiver } from '../commands/command-receiver';
 import { Id } from '../transport/identity';
 
 export abstract class GameObject extends CommandReceiver {
-  public static get type(): string {
-    return (this as any).name;
-  }
-
-  public get type(): string {
-    return (this as any).constructor.name;
-  }
-
   constructor(public readonly id: Id) {
     super();
   }

shared/src/objects/types/character-base.ts

@@ -1,7 +1,9 @@
 import { Circle } from '../../helper/circle';
-import { Id } from '../../main';
+import { Id } from '../../transport/identity';
+import { serializable } from '../../transport/serializable/serializable';
 import { GameObject } from '../game-object';
 
+@serializable()
 export abstract class CharacterBase extends GameObject {
   constructor(
     id: Id,
@@ -11,4 +13,9 @@ export abstract class CharacterBase extends GameObject {
   ) {
     super(id);
   }
+
+  public toArray(): Array<any> {
+    const { id, head, leftFoot, rightFoot } = this as any;
+    return [id, head, leftFoot, rightFoot];
+  }
 }

shared/src/objects/types/lamp-base.ts

@@ -1,9 +1,15 @@
 import { vec2, vec3 } from 'gl-matrix';
-import { Id } from '../../main';
+import { Id, serializable } from '../../main';
 import { GameObject } from '../game-object';
 
+@serializable()
 export abstract class LampBase extends GameObject {
   constructor(id: Id, public center: vec2, public color: vec3, public lightness: number) {
     super(id);
   }
+
+  public toArray(): Array<any> {
+    const { id, center, color, lightness } = this as any;
+    return [id, center, color, lightness];
+  }
 }

shared/src/objects/types/tunnel-base.ts

@@ -1,6 +1,9 @@
 import { vec2 } from 'gl-matrix';
-import { GameObject, Id } from '../../main';
+import { Id } from '../../transport/identity';
+import { serializable } from '../../transport/serializable/serializable';
+import { GameObject } from '../game-object';
 
+@serializable()
 export abstract class TunnelBase extends GameObject {
   constructor(
     id: Id,
@@ -11,4 +14,9 @@ export abstract class TunnelBase extends GameObject {
   ) {
     super(id);
   }
+
+  public toArray(): Array<any> {
+    const { id, from, to, fromRadius, toRadius } = this as any;
+    return [id, from, to, fromRadius, toRadius];
+  }
 }

shared/src/transport/serializable/deserialize.ts

@@ -0,0 +1,13 @@
+import { serializableClasses } from './serializable';
+
+export const deserialize = (json: string): any => {
+  return JSON.parse(json, (k, v) => {
+    const possibleType = v[0];
+    const overridableConstructor = serializableClasses.get(possibleType);
+    if (overridableConstructor) {
+      const [_, ...values] = v;
+      return new overridableConstructor.constructor(...values);
+    }
+    return v;
+  });
+};

shared/src/transport/serializable/serializable.ts

@@ -0,0 +1,58 @@
+export const serializableClasses = new Map<
+  string,
+  {
+    constructor: any;
+    overriden: boolean;
+  }
+>();
+
+export const serializable = (serializableType?) => {
+  return (type): any => {
+    const actualType = serializableType
+      ? Object.getPrototypeOf((serializableType as any).prototype).constructor
+      : type;
+
+    const typeName = actualType.name;
+
+    const overridableConstructor = serializableClasses.get(typeName);
+    if (!overridableConstructor) {
+      serializableClasses.set(typeName, {
+        constructor: actualType,
+        overriden: false,
+      });
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(actualType.prototype, 'toArray')) {
+      throw new Error(
+        `Class ${typeName} must define a toArray returning an array containing the arguments for its constructor.`
+      );
+    }
+
+    return class extends type {
+      public get type(): string {
+        return typeName;
+      }
+
+      public static get type(): string {
+        return typeName;
+      }
+    };
+  };
+};
+
+export const deserializable = (fromType) => {
+  return (type): any => {
+    const overridableConstructor = serializableClasses.get(fromType.name);
+    if (!overridableConstructor || !overridableConstructor.overriden) {
+      serializableClasses.set(fromType.name, {
+        constructor: type,
+        overriden: true,
+      });
+    } else {
+      throw new Error(
+        `Constructor  ${fromType} already overriden, cannot override again with ${type}`
+      );
+    }
+    return type;
+  };
+};

shared/src/transport/serializable/serialize.ts

@@ -0,0 +1,10 @@
+export const serialize = (object): string => {
+  const result = JSON.stringify(object, (key, value) => {
+    if (value?.type) {
+      return [value.type, ...value.toArray()];
+    }
+    return value?.toFixed ? Number(value.toFixed(3)) : value;
+  });
+
+  return result;
+};

shared/src/transport/typed.ts

@@ -1,9 +0,0 @@
-export abstract class Typed {
-  public static get type(): string {
-    return (this as any).name;
-  }
-
-  public get type(): string {
-    return (this as any).constructor.name;
-  }
-}

shared/tsconfig.json

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