Tic-tac-toe — Socket events

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

function TictactoeSideEvents({ 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('player:disconnected', () => {
      // show "opponent disconnected" banner
    });

    socket.on('game:over', ({ winner, reason, winningLine }) => {
      // show result screen — winningLine highlights the three winning cells
    });

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

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

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

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

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

function TictactoeGameManual({ myPlayerId }: { myPlayerId: string }) {
  const socket = useSocket();
  const roomIdRef = useRef('');
  const [board, setBoard]             = useState<('X'|'O'|null)[]>(Array(9).fill(null));
  const [currentTurn, setCurrentTurn] = useState(0);
  const [players, setPlayers]         = useState<any[]>([]);
  const [myMark, setMyMark]           = useState<'X'|'O'>('X');
  const [winningLine, setWinningLine] = useState<number[]|null>(null);

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

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

    socket.on('game:started', ({ roomId, mark, board: b, players: p, currentTurn: t }) => {
      roomIdRef.current = roomId;
      setMyMark(mark);
      setBoard(b);
      setPlayers(p);
      setCurrentTurn(t);
    });

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

    socket.on('game:over', ({ winner, reason, winningLine: wl }) => {
      if (wl) setWinningLine(wl); // highlight the three winning cells
      console.log('Game over:', reason, winner ?? 'draw');
    });

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

  const isMyTurn = players[currentTurn]?.id === myPlayerId;

  const move = (position: number) => {
    if (!isMyTurn || board[position]) return;
    socket?.emit('game:move', {
      roomId: roomIdRef.current, playerId: myPlayerId, position,
    });
  };

  // Render your own 3×3 grid using board[], winningLine
  return null;
}