ches-UI

chess_game/static/room.js

@@ -0,0 +1,89 @@
+(() => {
+  const { roomId, basePath } = window.__ROOM_CONFIG__ || {};
+  const boardEl = document.getElementById('boardUI');
+  let board, chess;
+
+  async function getJSON(path, options) {
+    const res = await fetch(path, options);
+    if (!res.ok) throw new Error(await res.text());
+    return res.json();
+  }
+
+  async function refreshSideInfo() {
+    const s = await getJSON(`${basePath}/room/${roomId}/status`);
+    document.getElementById('turn').textContent = s.turn + (s.is_check ? ' (check)' : '');
+    document.getElementById('result').textContent = s.is_game_over ? (s.result || 'game over') : '-';
+    const legal = await getJSON(`${basePath}/room/${roomId}/legal_moves`);
+    document.getElementById('legal').textContent = legal.join(', ');
+  }
+
+  async function syncFromServer() {
+    const st = await getJSON(`${basePath}/room/${roomId}/board`);
+    // chess.js v0.13 uses load(fen)
+    chess.load(st.fen);
+    board.position(chess.fen());
+    await refreshSideInfo();
+  }
+
+  function onDragStart(source, piece) {
+    // Disallow moves if game over or trying to move wrong color
+    if (chess.game_over()) return false;
+    const turn = chess.turn() === 'w' ? 'white' : 'black';
+    if ((turn === 'white' && piece.search(/^b/) !== -1) || (turn === 'black' && piece.search(/^w/) !== -1)) {
+      return false;
+    }
+    return true;
+  }
+
+  async function onDrop(source, target) {
+    let moveObj = chess.move({ from: source, to: target, promotion: 'q' });
+    if (moveObj == null) return 'snapback';
+    // Send move to server in UCI
+    const uci = `${source}${target}${moveObj.promotion ? moveObj.promotion : ''}`;
+    try {
+      await getJSON(`${basePath}/room/${roomId}/player_move`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ move: uci })
+      });
+      await syncFromServer();
+    } catch (e) {
+      console.error(e);
+      chess.undo();
+      return 'snapback';
+    }
+  }
+
+  function onSnapEnd() {
+    board.position(chess.fen());
+  }
+
+  async function init() {
+    chess = new Chess();
+    board = Chessboard(boardEl, {
+      position: 'start', draggable: true, dropOffBoard: 'snapback',
+      onDragStart, onDrop, onSnapEnd
+    });
+    await syncFromServer();
+  }
+
+  document.getElementById('startBtn').addEventListener('click', async () => {
+    const color = document.getElementById('color').value;
+    await getJSON(`${basePath}/room/${roomId}/start`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ player_color: color })});
+    await syncFromServer();
+  });
+
+  document.getElementById('aiBtn').addEventListener('click', async () => {
+    await getJSON(`${basePath}/room/${roomId}/ai_move`, { method: 'POST' });
+    await syncFromServer();
+  });
+
+  document.getElementById('copyPgnBtn').addEventListener('click', async () => {
+    const data = await getJSON(`${basePath}/room/${roomId}/pgn`);
+    await navigator.clipboard.writeText(data.pgn || '');
+    alert('PGN copied to clipboard');
+  });
+
+  init();
+})();
+
+

chess_game/templates/room.html

@@ -4,13 +4,22 @@
   <meta charset="utf-8">
   <title>Chess Room {{ room_id }}</title>
   <link rel="stylesheet" href="{{ base_path }}/static/style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard.js/1.0.0/chessboard-1.0.0.min.css" integrity="sha512-NE1T0qj4Y8p4129f7m6C8b6oym3s+3X7B2+bXhYzIY8w14JzO3Qb5rG3wI+XHX5cS8l88sC5d6z7+q5U3aY4nA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
-    pre.board { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 14px; line-height: 1.2; }
+    .layout { display: grid; grid-template-columns: 520px 1fr; gap: 16px; align-items: start; }
+    #boardUI { width: 520px; max-width: 90vw; }
     .controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
     .status { margin-top: 8px; }
+    .pill { background: #0f172a; border: 1px solid #334155; padding: 8px 10px; border-radius: 8px; }
   </style>
   <link rel="icon" href="data:,">
+  <script>
+    window.__ROOM_CONFIG__ = {
+      roomId: {{ room_id | tojson }},
+      basePath: {{ base_path | tojson }}
+    };
+  </script>
 </head>
 <body>
   <div class="container">
@@ -23,71 +32,30 @@
         <option value="black">Black</option>
       </select>
       <button id="startBtn">Start / Reset</button>
-      <input id="moveInput" placeholder="Enter SAN or UCI (e4, Nf3, e7e5)" />
-      <button id="moveBtn">Make Move</button>
       <button id="aiBtn">AI Move</button>
       <button id="copyPgnBtn">Copy PGN</button>
     </div>
 
-    <pre id="board" class="board">{{ state.unicode }}</pre>
-    <div class="status">
-      <div><strong>Turn:</strong> <span id="turn"></span></div>
-      <div><strong>Result:</strong> <span id="result"></span></div>
-      <div><strong>Legal Moves:</strong> <span id="legal"></span></div>
+    <div class="layout">
+      <div class="pill">
+        <div id="boardUI"></div>
+      </div>
+      <div>
+        <div class="pill">
+          <div><strong>Turn:</strong> <span id="turn"></span></div>
+          <div><strong>Result:</strong> <span id="result"></span></div>
+        </div>
+        <div class="pill" style="margin-top:8px;">
+          <div><strong>Legal Moves:</strong></div>
+          <div id="legal" style="margin-top:4px;"></div>
+        </div>
+      </div>
     </div>
   </div>
 
-  <script>
-    const roomId = {{ room_id | tojson }};
-    const basePath = {{ base_path | tojson }};
-
-    async function getJSON(path, options) {
-      const res = await fetch(path, options);
-      if (!res.ok) {
-        const msg = await res.text();
-        throw new Error(msg || res.statusText);
-      }
-      return res.json();
-    }
-
-    async function refresh() {
-      const state = await getJSON(`${basePath}/room/${roomId}/board`);
-      document.getElementById('board').textContent = state.unicode;
-      const s = await getJSON(`${basePath}/room/${roomId}/status`);
-      document.getElementById('turn').textContent = s.turn + (s.is_check ? ' (check)' : '');
-      document.getElementById('result').textContent = s.is_game_over ? (s.result || 'game over') : '-';
-      const legal = await getJSON(`${basePath}/room/${roomId}/legal_moves`);
-      document.getElementById('legal').textContent = legal.join(', ');
-    }
-
-    document.getElementById('startBtn').addEventListener('click', async () => {
-      const color = document.getElementById('color').value;
-      await getJSON(`${basePath}/room/${roomId}/start`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ player_color: color })});
-      await refresh();
-    });
-
-    document.getElementById('moveBtn').addEventListener('click', async () => {
-      const mv = document.getElementById('moveInput').value.trim();
-      if (!mv) return;
-      try {
-        await getJSON(`${basePath}/room/${roomId}/player_move`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ move: mv })});
-      } catch (e) { alert('Move error: ' + e.message); }
-      await refresh();
-    });
-
-    document.getElementById('aiBtn').addEventListener('click', async () => {
-      await getJSON(`${basePath}/room/${roomId}/ai_move`, { method: 'POST' });
-      await refresh();
-    });
-
-    document.getElementById('copyPgnBtn').addEventListener('click', async () => {
-      const data = await getJSON(`${basePath}/room/${roomId}/pgn`);
-      await navigator.clipboard.writeText(data.pgn || '');
-      alert('PGN copied to clipboard');
-    });
-
-    refresh();
-  </script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.13.4/chess.min.js" integrity="sha512-QI3VgD1x5bY2Hf7Kx4Ew6U3bN1a90R0l3tq0m7pFx5tW5Lgn8gZyQmVh0Wk5xk/fXUeV3I8w6L6S3m0q8lFv8Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard.js/1.0.0/chessboard-1.0.0.min.js" integrity="sha512-YOsk0kM2w3Jr0o5Q2E7jv0o3s8fCqfVqUjEJ7sU2iQzQ9Q2G4fMBxQ8f2cN7z7m2fA2q5S5n0l1C1zjY00kHqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="{{ base_path }}/static/room.js"></script>
 </body>
 </html>