Contributing Guide

// Good: Clear function with JSDoc comment
/**
 * Validates a move on the Hex board
 * @param x - X coordinate (0 to boardSize-1)
 * @param y - Y coordinate (0 to boardSize-1)
 * @param grid - Current game grid state
 * @returns true if move is valid, false otherwise
 */
function validateMove(x: number, y: number, grid: number[][]): boolean {
  // Check bounds
  if (x < 0 || y < 0 || x >= grid.length || y >= grid[0].length) {
    return false;
  }
  
  // Check if cell is empty
  return grid[y][x] === 0;
}

// ✅ Good: Proper typing
interface GameState {
  gameId: string;
  board: number[][];
  currentPlayer: number;
  status: GameStatus;
}

function updateGameState(state: GameState): GameState {
  return { ...state, currentPlayer: state.currentPlayer === 1 ? 2 : 1 };
}

// ❌ Bad: Using any
function updateGameState(state: any): any {
  return { ...state, currentPlayer: state.currentPlayer === 1 ? 2 : 1 };
}

// ✅ Good: Functional component with proper types
import React from 'react';

interface GameBoardProps {
  size: number;
  onCellClick: (x: number, y: number) => void;
  grid: number[][];
}

export default function GameBoard({ size, onCellClick, grid }: GameBoardProps) {
  return (
    <div className="game-board">
      {/* Component implementation */}
    </div>
  );
}

// ❌ Bad: No prop types
export default function GameBoard(props) {
  return <div>{/* Implementation */}</div>;
}

feat: add move history replay feature

Implements a replay system that allows users to step through
previous moves in completed games. Adds navigation controls
and updates the board state for each move.

Closes #123

## Description
Brief description of what this PR does.

## Type of Change
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] Documentation update

## Testing
Describe the tests you ran:
- [ ] Tested on Chrome, Firefox, Safari
- [ ] Tested different board sizes
- [ ] Tested online multiplayer
- [ ] Tested offline mode
- [ ] Verified no TypeScript errors
- [ ] Ran linter

## Screenshots (if applicable)
Add screenshots to demonstrate visual changes.

## Related Issues
Closes #issue_number

## Additional Notes
Any additional information reviewers should know.

enum ClientBoundPacketType {
  ERROR_MESSAGE = 0,      // Error notifications
  GAME_SEARCH = 1,        // Game search status
  GAME_FOUND = 2,         // Game found notification
  JOIN_GAME = 3,          // Join game with initial state
  MOVE_PLAYED = 4,        // Move update
  GAME_END = 5            // Game end with result
}

enum ServerBoundPacketType {
  GAME_SEARCH = 0,        // Start searching for game
  CANCEL_GAME_SEARCH = 1, // Cancel search
  JOIN_GAME = 2,          // Join specific game
  JOIN_ROOM = 3,          // Join room
  PLAY_MOVE = 4,          // Play a move
  FORFEIT_GAME = 5        // Forfeit the game
}

interface Game {
  game_id: string;
  game_parameters: GameParameters;
  grid: Array<Array<number>>;  // 0 = empty, 1 = player1, 2 = player2
  first_player_id: string;
  second_player_id: string;
  turn: number;  // Current turn number
}

interface GameParameters {
  ranked: boolean;      // Is this a ranked game?
  board_size: number;   // 5, 7, or 9
  time_limit: number;   // Time limit in seconds (0 = unlimited)
}

import { WebsocketHandler } from '@/app/game_mode/WebsocketHandler';
import * as packets from '@/app/definitions';

// Create WebSocket handler with callbacks
const ws = new WebsocketHandler({
  errorCallback: (message) => {
    console.error('Error:', message);
    // Show error to user
  },
  
  gameSearchCallback: (params, playerCount, eloRange) => {
    console.log(`Searching: ${playerCount} players`);
    // Update UI with search status
  },
  
  gameFoundCallback: (gameId) => {
    console.log('Game found:', gameId);
    // Navigate to game page
  },
  
  joinGameCallback: (game) => {
    console.log('Joined game:', game);
    // Initialize game board
  },
  
  movePlayedCallback: (x, y, turn, grid) => {
    console.log(`Move played at (${x}, ${y})`);
    // Update game board
  },
  
  connectionEndedCallback: () => {
    console.log('Connection lost');
    // Show reconnection UI
  }
});

// Send packet to server
const searchPacket: packets.ServerBoundGameSearchPacket = {
  type: packets.ServerBoundPacketType.GAME_SEARCH,
  game_parameters: {
    ranked: true,
    board_size: 7,
    time_limit: 0
  }
};

ws.sendPacket(searchPacket);

// 1. Imports
import React, { useState, useEffect } from 'react';
import styles from './component.module.css';
import { Game } from '@/app/definitions';

// 2. Interface definitions
interface ComponentProps {
  game: Game;
  onMove: (x: number, y: number) => void;
}

// 3. Component definition
export default function Component({ game, onMove }: ComponentProps) {
  // 4. State and hooks
  const [selectedCell, setSelectedCell] = useState<[number, number] | null>(null);
  
  // 5. Effects
  useEffect(() => {
    // Effect logic
  }, [game]);
  
  // 6. Event handlers
  const handleCellClick = (x: number, y: number) => {
    setSelectedCell([x, y]);
    onMove(x, y);
  };
  
  // 7. Render
  return (
    <div className={styles.container}>
      {/* JSX */}
    </div>
  );
}