Checkers — Spectate

const res = await fetch('https://api.beta-gamer.com/v1/rooms?game=checkers');
const { rooms } = await res.json();

// rooms: Array of active PvP games
// [
//   {
//     roomId:    "room_abc123",
//     players:   [{ id: "p1", username: "Alice" }, { id: "p2", username: "Bob" }],
//     moveCount: 8
//   },
//   …
// ]

import { io } from 'socket.io-client';

const socket = io('https://api.beta-gamer.com/checkers', {
  path: '/socket.io',
  transports: ['websocket', 'polling'],
});

socket.on('connect', () => {
  socket.emit('game:spectate', { roomId: 'room_abc123', username: 'Spectator' });
});

// Receive the current game state immediately
socket.on('game:spectate:joined', ({ roomId, players, board, currentTurn, moveHistory }) => {
  // board: 64-element array — see Board layout in Rules & board
  // moveHistory: [{ move: { from, to, captures? }, playerId, timestamp }]
});

// Live updates
socket.on('game:move:made', ({ move, board, currentTurn, moveHistory }) => {
  // update board
});

socket.on('game:over', ({ winner, reason }) => {
  // game ended
});

import { useEffect, useRef, useState } from 'react';
import { io } from 'socket.io-client';

type Piece = { player: 'red' | 'black'; type: 'man' | 'king' } | null;

export default function SpectateRoom({ roomId }: { roomId: string }) {
  const [board, setBoard] = useState<Piece[]>(Array(64).fill(null));
  const [players, setPlayers] = useState<any[]>([]);
  const [currentTurn, setCurrentTurn] = useState('');

  useEffect(() => {
    const socket = io(window.location.origin + '/checkers', {
      path: '/api/socket/io',
      transports: ['websocket', 'polling'],
    });

    socket.on('connect', () => {
      socket.emit('game:spectate', { roomId, username: 'Spectator' });
    });

    socket.on('game:spectate:joined', ({ players: p, board: b, currentTurn: t }) => {
      setPlayers(p);
      setBoard(b);
      setCurrentTurn(t);
    });

    socket.on('game:move:made', ({ board: b, currentTurn: t }) => {
      setBoard(b);
      setCurrentTurn(t);
    });

    socket.on('game:over', ({ winner, reason }) => {
      console.log('Game ended:', reason, winner);
    });

    return () => { socket.disconnect(); };
  }, [roomId]);

  // Render a read-only board — no click handlers, no move requests
  return null;
}