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)