1 files changed, 75 insertions, 0 deletions
diff --git a/client/src/main.ts b/client/src/main.ts
new file mode 100644
index 0000000..a6cc3ba
--- /dev/null
+++ b/client/src/main.ts
@@ -0,0 +1,75 @@
+import { Game } from "./net/game.js";
+import { InitialState, onLogic } from "./logic/logic.js";
+import { startGraphicsUpdater } from "./renderer.js";
+import { GameKeyMap, Frame, Key } from "./types.js";
+
+const join = document.getElementById("join")
+const lobby = document.getElementById("lobby")
+lobby.style.display = "none"
+
+join.onsubmit = async function(event) {
+    event.preventDefault()
+     
+    const room_code = this.elements.room_code.value.trim()
+    const player_name = this.elements.name.value.trim()
+
+    if (room_code == '') {
+        alert('Please enter a room code')
+        return
+    }
+
+    if (player_name == '') {
+        alert('Please enter a player name')
+        return
+    }
+
+    join.style.display = "none"
+
+    startGame(room_code, player_name)
+}
+
+const updateGraphics = startGraphicsUpdater()
+
+const onLoad = (startData: Frame) => {
+
+    if (startData.data.started) {
+        alert('Room has already started')
+        return false
+    }
+
+    let players = Object.values(startData.data.players).filter(p => { return p !== null && p.name !== undefined })
+    if (players.length >= 4) {
+        alert('Room is full')
+        return false
+    }
+
+    lobby.style.display = ""
+
+    return true
+}
+
+const onFrame = (data: Frame, frame: number) => {
+    
+	updateGraphics(data ? data.data : InitialState, frame);
+
+}
+
+
+const startGame = (code: string, name: string) => {
+
+    const game = new Game(3000)
+
+    game.start(
+        code,
+        GameKeyMap,        
+        onLoad,
+        onFrame,
+        onLogic,
+        {
+            start: false,
+            key: Key.NOTHING,
+            name
+        }
+    )
+
+}