Checkers — Socket events

import { useEffect, useRef } from 'react';
import { BetaGamerProvider, CheckersBoard, useSocket } from '@beta-gamer/react';

function CheckersSideEvents({ myPlayerId }: { myPlayerId: string }) {
  const socket = useSocket();
  const roomIdRef = useRef('');

  useEffect(() => {
    if (!socket) return;

    socket.emit('matchmaking:join', { username: 'Alex', playerId: myPlayerId });

    socket.on('game:started', ({ roomId }) => { roomIdRef.current = roomId; });

    socket.on('checkers:afk_warning', ({ playerId, secondsRemaining }) => {
      // show countdown banner
    });

    socket.on('player:disconnected', () => {
      // show "opponent disconnected" banner
    });

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

    return () => {
      socket.off('game:started');
      socket.off('checkers:afk_warning');
      socket.off('player:disconnected');
      socket.off('game:over');
    };
  }, [socket]);

  const resign = () => socket?.emit('game:resign', {
    roomId: roomIdRef.current, playerId: myPlayerId,
  });

  return (
    <div>
      <CheckersBoard />
      <button onClick={resign}>Resign</button>
    </div>
  );
}

export default function CheckersPage({ sessionToken }: { sessionToken: string }) {
  return (
    <BetaGamerProvider token={sessionToken}>
      <CheckersSideEvents myPlayerId="user_123" />
    </BetaGamerProvider>
  );
}

import { useEffect, useRef, useState } from 'react';
import { useSocket } from '@beta-gamer/react';

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

function CheckersGameManual({ myPlayerId }: { myPlayerId: string }) {
  const socket = useSocket();
  const roomIdRef   = useRef('');
  const playerIdRef = useRef('');
  const [board, setBoard]           = useState<Piece[]>(Array(64).fill(null));
  const [validMoves, setValidMoves] = useState<{ from: number; to: number; captures: number[] }[]>([]);

  useEffect(() => {
    if (!socket) return;

    socket.emit('matchmaking:join', { username: 'Alex', playerId: myPlayerId });

    socket.on('game:started', ({ roomId, playerId, board: b }) => {
      roomIdRef.current   = roomId;
      playerIdRef.current = playerId;
      setBoard(b);
    });

    // After emitting game:get_moves, server responds with valid moves for that piece
    socket.on('game:valid_moves', ({ moves }) => setValidMoves(moves));

    socket.on('game:move:made', ({ board: b, move }) => {
      setBoard(b);
      setValidMoves([]);
      if (move.becameKing) console.log('Promoted to king!');
    });

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

    return () => {
      socket.off('game:started');
      socket.off('game:valid_moves');
      socket.off('game:move:made');
      socket.off('game:over');
    };
  }, [socket]);

  // Step 1: player clicks a piece — request its valid moves
  const selectPiece = (position: number) => {
    socket?.emit('game:get_moves', {
      roomId: roomIdRef.current, position, playerId: playerIdRef.current,
    });
  };

  // Step 2: player clicks a highlighted destination — submit the move
  const makeMove = (from: number, to: number, captures: number[]) => {
    socket?.emit('game:move', {
      roomId: roomIdRef.current, playerId: playerIdRef.current,
      move: { from, to, captures },
    });
  };

  // Render your own board using board[], validMoves
  return null;
}