React тапсырмасы: 10x10 ойын тақтасын (100 шаршы) жүзеге асырыңыз, әр шаршы кездейсоқ түсті (қызыл немесе жасыл). Шаршыға басқанда, оның түсі керісінше өзгереді, және рекурсивті түрде, сол түстегі барлық көрші ұяшықтардың түсі де өзгереді (тік және көлденең бағытта).

Төменде React-те 10x10 ойын алаңының мысалы келтірілген, мұнда әрбір торда кездейсоқ түс (қызыл немесе жасыл) бар. Түймені басқанда, тордың түсі қарама-қарсы түске ауысады, сондай-ақ, сол түсі бар көршілес ұяшықтардың түсі рекурсивті түрде өзгереді.

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;