MineSeeker/assets/js/mine-seeker/components/user/UserControl.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, { Fragment, useState } from 'react';
import { useGame } from '@mine-contexts';
import User from './User';
import BonusStatsDialog from '../BonusStatsDialog';
import { func } from 'prop-types';

const UserControl = ({ resign }) => {
  const { webPlayer, activePlayer, foundMines, red, blue, onBombToggle } = useGame();
  const [bonusDialogOpen, setBonusDialogOpen] = useState(false);
  const activeColor = activePlayer ? 'blue' : 'red';
  const resignClass = 'resign' + (activeColor !== webPlayer ? ' disabled' : '');
  const minesClass = 'active-mines' + (foundMines ? ' found-mine' : '');
  const remainingMines = 51 - red.mines - blue.mines;

  const handleBombClick = (color, player) => {
    const p = 'red' === color ? red : blue;
    if (p.haveBomb && p.enabledBomb && activePlayer === player) {
      onBombToggle();
    }
  };

  const handleBonusClick = () => {
    setBonusDialogOpen(true);
  };

  return (
    <Fragment>
      <div className="users">
        <User
          color="blue" webPlayer={webPlayer} {...blue}
          onClickBombSelector={() => handleBombClick('blue', 1)}
          onBonusClick={handleBonusClick}
        />
        <div className="active-mines-container">
          <i className="fa fa-star" />
          <div className={minesClass}>
            <div className="active-mines-nbr">{remainingMines}</div>
            <div className="active-mines-shine" />
          </div>
          <i className="fa fa-star" />
        </div>
        <div className="clear" />
        <User
          color="red" webPlayer={webPlayer} {...red}
          onClickBombSelector={() => handleBombClick('red', 0)}
          onBonusClick={handleBonusClick}
        />
        <button className={resignClass} onClick={resign}>
          <div className="resign-shine" />
          Resign
        </button>
      </div>
      <BonusStatsDialog
        open={bonusDialogOpen}
        onClose={() => setBonusDialogOpen(false)}
        red={red}
        blue={blue}
      />
    </Fragment>
  );
}

export default UserControl;

UserControl.propTypes = {
  resign: func.isRequired,
};