MineSeeker/assets/js/mine-seeker/components/user/User.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, { memo } from 'react';
import { IMAGES } from '@mine-utils';

const User = memo(function User(
  {
    color,
    webPlayer,
    name,
    desc,
    active,
    mines,
    haveBomb,
    enabledBomb,
    onClickBombSelector,
  },
) {
  const buzzClass = 'bomb-container'
    + (active && color === webPlayer && haveBomb && enabledBomb ? ' buzz' : '');

  return (
    <div className={`user-container user-${color}`}>
      <div className="user-header">
        <div className="user-color">{color}</div>
        {active && <img src={IMAGES.cursor(color)} alt="" className="user-cursor" />}
        <img src={IMAGES.figure(color)} 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={IMAGES.flag(color)} alt="" />
        <div className="user-control-mines">{mines}</div>
        <div className={buzzClass} onClick={onClickBombSelector}>
          <div className="bomb">
            {haveBomb && <img src={enabledBomb && active ? IMAGES.bomb : IMAGES.bombDisabled} alt="" />}
            {!haveBomb && <img src={IMAGES.bombExploded} alt="" />}
          </div>
        </div>
        <div className="clear" />
      </div>
    </div>
  );
});

export default User;