add WS client in frontend, start work on play website

2026-02-25 19:57:11 +01:00
parent 2e65f0011f
commit 3f4ea57ee1
8 changed files with 88 additions and 6 deletions
@@ -1,5 +0,0 @@
-from app import sIO
-
-@sIO.on('auth')
-def handle_auth(msg):
-    print(msg)
@@ -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();
@@ -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");
+}
@@ -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");
+}
@@ -12,4 +12,6 @@
  <body>
    <h1>logged in</h1>
    <p>hi, {{ current_user.username }}!</p>
+    <a href="{{ url_for('main.play') }}" class="link-button">Play Chess</a>
+  </body>
 </html>
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chess Arena</title>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='play.css') }}"
+    />
+    <script
+      src="https://cdn.socket.io/4.8.1/socket.io.min.js"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      type="module"
+      src="{{ url_for('static', filename='js/main.js') }}"
+    ></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
@@ -4,4 +4,4 @@ app = create_app()

 if __name__ == "__main__":
    print("Starting server...")
-    sIO.run(app, debug=True)
+    sIO.run(app, debug=True, use_reloader=False)