holy fuck we actually got somewhere

4 files changed, 95 insertions, 34 deletions

diff --git a/client/src/JumpStorm.ts b/client/src/JumpStorm.ts
index ae99b8e..01cc8d8 100644
--- a/client/src/JumpStorm.ts
+++ b/client/src/JumpStorm.ts
@@ -1,4 +1,5 @@
 import { Game } from "@engine/Game";
+import { Entity } from "@engine/entities";
 import { Grid } from "@engine/structures";
 import {
   WallBounds,
@@ -7,67 +8,116 @@ import {
   Physics,
   Input,
   Collision,
-  MessageQueueProvider,
-  MessagePublisher,
   NetworkUpdate,
 } from "@engine/systems";
+import {
+  type MessageQueueProvider,
+  type MessagePublisher,
+  type MessageProcessor,
+  type Message,
+  type EntityAddBody,
+  MessageType,
+} from "@engine/network";
+import { stringify, parse } from "@engine/utils";
+
+class ClientMessageProcessor implements MessageProcessor {
+  private game: Game;
+
+  constructor(game: Game) {
+    this.game = game;
+  }
+
+  public process(message: Message) {
+    switch (message.type) {
+      case MessageType.NEW_ENTITY:
+        const entityAddBody = message.body as unknown as EntityAddBody;
+        this.game.addEntity(
+          Entity.from(entityAddBody.entityName, entityAddBody.args),
+        );
+        break;
+    }
+
+    console.log(message);
+  }
+}
 
 class ClientSocketMessageQueueProvider implements MessageQueueProvider {
   private socket: WebSocket;
-  private messages: any[];
+  private messages: Message[];
 
   constructor(socket: WebSocket) {
     this.socket = socket;
     this.messages = [];
 
     this.socket.addEventListener("message", (e) => {
-      console.log(e);
+      const message = parse<Message>(e.data);
+      this.messages.push(message);
     });
   }
 
-  getNewMessages() {
+  public getNewMessages() {
     return this.messages;
   }
 
-  clearMessages() {
+  public clearMessages() {
     this.messages = [];
   }
 }
 
 class ClientSocketMessagePublisher implements MessagePublisher {
   private socket: WebSocket;
-  private messages: any[];
+  private messages: Message[];
 
   constructor(socket: WebSocket) {
     this.socket = socket;
     this.messages = [];
-
-    this.socket.addEventListener("message", (e) => {
-      console.log(e);
-    });
   }
 
-  addMessage(_message: any) {}
+  public addMessage(message: Message) {
+    this.messages.push(message);
+  }
 
-  publish() {}
+  public publish() {
+    this.messages.forEach((message: Message) =>
+      this.socket.send(stringify(message)),
+    );
+  }
 }
 
 export class JumpStorm {
   private game: Game;
+  private clientId: string;
+
+  constructor(game: Game) {
+    this.game = game;
+  }
 
-  constructor(ctx: CanvasRenderingContext2D) {
-    this.game = new Game();
+  public async init(
+    ctx: CanvasRenderingContext2D,
+    httpMethod: string,
+    wsMethod: string,
+    host: string,
+  ) {
+    await fetch(`${httpMethod}://${host}/assign`)
+      .then((resp) => {
+        if (resp.ok) {
+          return resp.text();
+        }
+        throw resp;
+      })
+      .then((cookie) => {
+        this.clientId = cookie;
+      });
 
-    const socket = new WebSocket("ws://localhost:8080");
-    setInterval(() => socket.send(JSON.stringify({ x: 1 })), 1_000);
+    const grid = new Grid();
+
+    const socket = new WebSocket(`${wsMethod}://${host}/game`);
     const clientSocketMessageQueueProvider =
       new ClientSocketMessageQueueProvider(socket);
     const clientSocketMessagePublisher = new ClientSocketMessagePublisher(
-      socket
+      socket,
     );
-
-    const grid = new Grid();
-
+    const clientMessageProcessor = new ClientMessageProcessor(this.game);
     [
       this.createInputSystem(),
       new FacingDirection(),
@@ -76,7 +126,8 @@ export class JumpStorm {
       new WallBounds(ctx.canvas.width),
       new NetworkUpdate(
         clientSocketMessageQueueProvider,
-        clientSocketMessagePublisher
+        clientSocketMessagePublisher,
+        clientMessageProcessor,
       ),
       new Render(ctx),
     ].forEach((system) => this.game.addSystem(system));
@@ -93,7 +144,7 @@ export class JumpStorm {
   }
 
   private createInputSystem(): Input {
-    const inputSystem = new Input();
+    const inputSystem = new Input(this.clientId);
 
     window.addEventListener("keydown", (e) => {
       if (!e.repeat) {
diff --git a/client/src/components/GameCanvas.svelte b/client/src/components/GameCanvas.svelte
index ae8c1b0..ed16f33 100644
--- a/client/src/components/GameCanvas.svelte
+++ b/client/src/components/GameCanvas.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { loadAssets } from "@engine/config";
+  import { Game } from "@engine/Game";
   import { JumpStorm } from "../JumpStorm";
   
   let canvas: HTMLCanvasElement;
@@ -9,16 +10,18 @@
   export let width: number;
   export let height: number;
 
-  let jumpStorm: JumpStorm;
-
-  onMount(() => {
+  onMount(async () => {
     ctx = canvas.getContext("2d");
     ctx.imageSmoothingEnabled = false;
 
-    loadAssets().then(() => {
-      jumpStorm = new JumpStorm(ctx);
-      jumpStorm.play();
-    });
+    await loadAssets();
+
+    const game = new Game();
+    const jumpStorm = new JumpStorm(game);
+
+    const url = new URL(document.location);
+    await jumpStorm.init(ctx, "http", "ws", url.host  + "/api");
+    jumpStorm.play();
   });
 </script>
 
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 781d1b3..fadebb0 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
+  "extends": ["@tsconfig/svelte/tsconfig.json", "../tsconfig.engine.json"],
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
@@ -24,8 +24,5 @@
     "src/**/*.js",
     "src/**/*.svelte"
   ],
-  "paths": {
-    "@engine/*": ["../engine/*"]
-  },
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 0307338..cdf1ab1 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -4,6 +4,16 @@ import { fileURLToPath, URL } from "node:url";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        ws: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
+  cors: true,
   plugins: [svelte()],
   resolve: {
     alias: {