Connect 4 — Socket events

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

function Connect4SideEvents({ 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('connect4:afk_warning', ({ playerId, secondsRemaining }) => {
      // show countdown banner
    });

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

    socket.on('game:over', ({ winner, reason, winningCells }) => {
      // show result screen — winningCells highlights the four in a row
    });

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

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

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

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

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

function Connect4GameManual({ myPlayerId }: { myPlayerId: string }) {
  const socket = useSocket();
  const roomIdRef   = useRef('');
  const playerIdRef = useRef('');
  const [board, setBoard]         = useState<(string | null)[]>(Array(42).fill(null));
  const [currentTurn, setCurrentTurn] = useState(0);
  const [players, setPlayers]     = useState<any[]>([]);
  const [winningCells, setWinningCells] = useState<number[] | null>(null);

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

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

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

    socket.on('game:move:made', ({ board: b, currentTurn: t, position }) => {
      setBoard(b);
      setCurrentTurn(t);
      // position = board index where piece landed — use for drop animation
    });

    socket.on('game:over', ({ winner, reason, winningCells: wc }) => {
      setWinningCells(wc ?? null); // highlight the four 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 === playerIdRef.current;

  // Player clicks a column header to drop a piece
  const dropPiece = (column: number) => {
    if (!isMyTurn) return;
    socket?.emit('game:move', {
      roomId: roomIdRef.current, playerId: playerIdRef.current, column,
    });
  };

  // Render your own 7×6 grid using board[], winningCells
  return null;
}