44 lines
1.3 KiB
React
44 lines
1.3 KiB
React
|
import React from 'react';
|
||
|
|
import User from './User';
|
||
|
|
|
||
|
|
const UserControl = ({ webPlayer, activePlayer, mines, foundMines, red, blue, onBombToggle, resign }) => {
|
||
|
|
const activeColor = activePlayer ? 'blue' : 'red';
|
||
|
|
const resignClass = 'resign' + (activeColor !== webPlayer ? ' disabled' : '');
|
||
|
|
const minesClass = 'active-mines' + (foundMines ? ' found-mine' : '');
|
||
|
|
|
||
|
|
const handleBombClick = (color, player) => {
|
||
|
|
const p = 'red' === color ? red : blue;
|
||
|
|
if (p.haveBomb && p.enabledBomb && activePlayer === player) {
|
||
|
|
onBombToggle();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="users">
|
||
|
|
<User
|
||
|
|
color="blue" webPlayer={webPlayer} {...blue}
|
||
|
|
onClickBombSelector={() => handleBombClick('blue', 1)}
|
||
|
|
/>
|
||
|
|
<div className="active-mines-container">
|
||
|
|
<i className="fa fa-star" />
|
||
|
|
<div className={minesClass}>
|
||
|
|
<div className="active-mines-nbr">{mines}</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)}
|
||
|
|
/>
|
||
|
|
<button className={resignClass} onClick={resign}>
|
||
|
|
<div className="resign-shine" />
|
||
|
|
Resign
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default UserControl;
|