MineSeeker/assets/js/mine-seeker/components/GameBoard.jsx

/**
 * This file is part of the SplendidBear Websites' projects.
 *
 * Copyright (c) 2026 @ www.splendidbear.org
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

import React, { useState } from 'react';
import { useGame } from '@mine-contexts';
import { useServerCommunication } from '@mine-hooks';
import CaptchaOverlay from './CaptchaOverlay';
import GridControl from './grid/GridControl';
import { bool, string } from 'prop-types';

export const GameBoard = ({ gameAssoc, gameInherited, opponentName = '', isEnvDev }) => {
  const { gridReady } = useGame();
  const { onClick, resign } = useServerCommunication(gameAssoc, gameInherited, opponentName, isEnvDev);
  const [captchaVerified, setCaptchaVerified] = useState(false);

  const siteKey = document.getElementById('mine-wrapper')?.dataset.recaptchaSiteKey;

  if (!gridReady) {
    return (
      <div className="game-overlay">
        <div className="game-overlay-window"><h1>Loading…</h1></div>
      </div>
    );
  }

  if (!captchaVerified && siteKey) {
    return (
      <CaptchaOverlay siteKey={siteKey} onVerified={() => setCaptchaVerified(true)} />
    );
  }

  return (
    <GridControl
      gameAssoc={gameAssoc}
      onClick={onClick}
      resign={resign}
    />
  );
};

GameBoard.propTypes = {
  gameAssoc:     string.isRequired,
  gameInherited: bool.isRequired,
  opponentName:  string,
  isEnvDev:      bool,
};