Provocare React: implementați o tablă de joc 10x10 (100 pătrate), fiecare de culoare aleatorie (roșu sau verde). La clic pe un pătrat, culoarea sa se schimbă în cea opusă, iar recursiv se schimbă culoarea tuturor celulelor vecine de aceeași culoare (vertical și orizontal).

Ниже пример реализации игрового поля 10x10 на React, где каждый квадрат имеет случайный цвет (красный или зелёный). При клике цвет квадрата меняется на противоположный, а также рекурсивно меняется цвет всех соседних клеток того же цвета по вертикали и горизонтали.

import React, { useState, useEffect } from 'react';

const ROWS = 10;
const COLS = 10;

// Генерируем случайный цвет: 'red' или 'green'
const randomColor = () => (Math.random() < 0.5 ? 'red' : 'green');

function GameBoard() {
  const [board, setBoard] = useState([]);

  useEffect(() => {
    // Инициализация доски случайными цветами
    const initialBoard = Array.from({ length: ROWS }, () =>
      Array.from({ length: COLS }, () => randomColor())
    );
    setBoard(initialBoard);
  }, []);

  const toggleColor = (color) => (color === 'red' ? 'green' : 'red');

  const handleClick = (row, col) => {
    const targetColor = board[row][col];
    const newBoard = board.map(row => row.slice()); // глубокая копия

    const visited = new Set();

    const dfs = (r, c) => {
      if (
        r < 0 || r >= ROWS ||
        c < 0 || c >= COLS ||
        visited.has(`${r},${c}`) ||
        newBoard[r][c] !== targetColor
      ) {
        return;
      }

      visited.add(`${r},${c}`);
      newBoard[r][c] = toggleColor(targetColor);

      // Рекурсивно меняем цвет соседних клеток
      dfs(r - 1, c); // вверх
      dfs(r + 1, c); // вниз
      dfs(r, c - 1); // влево
      dfs(r, c + 1); // вправо
    };

    dfs(row, col);
    setBoard(newBoard);
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${COLS}, 30px)`, gap: '2px' }}>
      {board.map((row, rIdx) =>
        row.map((color, cIdx) => (
          <div
            key={`${rIdx}-${cIdx}`}
            onClick={() => handleClick(rIdx, cIdx)}
            style={{
              width: 30,
              height: 30,
              backgroundColor: color,
              cursor: 'pointer',
              border: '1px solid #000',
            }}
          />
        ))
      )}
    </div>
  );
}

export default GameBoard;