add WS client in frontend, start work on play website

app/static/js/main.js

@@ -0,0 +1,16 @@
+import { createWSClient } from "./ws.js";
+import {
+  handleP2Connected,
+  handleGameStarted,
+  handleCodeGameCreated,
+} from "./ws_handlers.js";
+
+function main() {
+  createWSClient({
+    onGameStarted: handleGameStarted,
+    onP2Connected: handleP2Connected,
+    onGameCreated: handleCodeGameCreated,
+  });
+}
+
+main();

app/static/js/ws.js

@@ -0,0 +1,35 @@
+// using socketio for websocket communication
+export function createWSClient(handlers = {}) {
+  const socket = io();
+
+  socket.on("connect", () => {
+    console.log("Connected to server");
+    handlers.onConnect?.();
+  });
+
+  socket.on("disconnect", () => {
+    console.log("Disconnected from server");
+    handlers.onDisconnect?.();
+  });
+
+  const serverEvents = {
+    code_game_created: handlers.onGameCreated,
+    code_game_joined: handlers.onGameJoined,
+    game_started: handlers.onGameStarted,
+    p2_connected: handlers.onP2Connected,
+    user_move: handlers.onUserMove,
+    move_accept: handlers.onMoveAccept,
+    move_reject: handlers.onMoveReject,
+    game_over: handlers.onGameOver,
+    //todo: draw, resign, rematch
+  };
+
+  let i = 0;
+  for (const [event, handler] of Object.entries(serverEvents)) {
+    if (handler) {
+      socket.on(event, handler);
+      i++;
+    }
+  }
+  console.log("registered " + i + " server event handlers");
+}

app/static/js/ws_handlers.js

@@ -0,0 +1,11 @@
+export function handleGameStarted(data) {
+  throw new Error("todo");
+}
+
+export function handleCodeGameCreated(data) {
+  throw new Error("todo");
+}
+
+export function handleP2Connected(data) {
+  throw new Error("todo");
+}