77 lines
2.3 KiB
JavaScript
77 lines
2.3 KiB
JavaScript
/**
|
|
* 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,
|
|
};
|