40 lines
1.3 KiB
React
40 lines
1.3 KiB
React
|
import React, { memo } from 'react';
|
||
|
|
|
||
|
|
const SRC = '/images/';
|
||
|
|
|
||
|
|
const User = memo(function User({
|
||
|
|
color, webPlayer,
|
||
|
|
name, desc, active, mines, haveBomb, enabledBomb,
|
||
|
|
onClickBombSelector,
|
||
|
|
}) {
|
||
|
|
const buzzClass = 'bomb-container'
|
||
|
|
+ (active && color === webPlayer && haveBomb && enabledBomb ? ' buzz' : '');
|
||
|
|
|
||
|
|
const bombImg = haveBomb
|
||
|
|
? SRC + (enabledBomb && active ? 'bg-bomb-outbg.png' : 'bg-bomb-disabled-outbg.png')
|
||
|
|
: SRC + 'bg-bomb-exploded-outbg.png';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`user-container user-${color}`}>
|
||
|
|
<div className="user-header">
|
||
|
|
<div className="user-color">{color}</div>
|
||
|
|
{active && <img src={`${SRC}bg-cursor-${color}-outbg.png`} alt="" className="user-cursor" />}
|
||
|
|
<img src={`${SRC}bg-figure-${color}-outbg.png`} alt="" />
|
||
|
|
</div>
|
||
|
|
<div className="user-name"> {name} </div>
|
||
|
|
<div className="user-caret"><i className="fa fa-caret-down" /></div>
|
||
|
|
<div className="user-desc"> {desc} </div>
|
||
|
|
<div className="user-control">
|
||
|
|
<img src={`${SRC}bg-flag-${color}-outbg.png`} alt="" />
|
||
|
|
<div className="user-control-mines">{mines}</div>
|
||
|
|
<div className={buzzClass} onClick={onClickBombSelector}>
|
||
|
|
<div className="bomb"><img src={bombImg} alt="" /></div>
|
||
|
|
</div>
|
||
|
|
<div className="clear" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
export default User;
|