MineSeeker/assets/js/mine-seeker/components/BonusStatsDialog.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 from 'react';
import Dialog from '@mui/material/Dialog';
import { BONUS_LABELS } from '@mine-utils';

const DIALOG_SX = {
  '& .MuiDialog-paper': {
    background: '#07090d',
    backgroundImage: `
      linear-gradient(rgba(35, 111, 135, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(35, 111, 135, 0.08) 1px, transparent 1px)
    `,
    backgroundSize: '46px 46px',
    border: '1px solid rgba(35, 111, 135, 0.4)',
    borderRadius: '12px',
    boxShadow: '0 0 80px rgba(35, 111, 135, 0.15), 0 32px 80px rgba(0, 0, 0, 0.9)',
    width: '560px',
    maxWidth: '94vw',
    overflow: 'hidden',
    color: '#fff',
  },
  '& .MuiBackdrop-root': {
    background: 'rgba(2, 4, 8, 0.88)',
    backdropFilter: 'blur(4px)',
  },
};

const formatPlayerName = name => {
  if (name && name.startsWith('anon_')) {
    return 'Anonymous';
  }

  if (name && 10 < name.length) {
    return name.substring(0, 7) + '...';
  }

  return name || 'Unknown';
};

const PlayerColumn = ({ color, player }) => (
  <div className={`bsd-column bsd-column--${color}`}>
    <div className="bsd-column-header">
      <span className="bsd-column-name">{formatPlayerName(player.name)}</span>
      <span className="bsd-column-total">
        <i className="fa fa-star" />
        {player.bonusPoints}
      </span>
    </div>
    <ul className="bsd-stats">
      {Object.entries(BONUS_LABELS).map(([key, { label, desc }]) => (
        <li key={key} className="bsd-stat">
          <div className="bsd-stat-text">
            <span className="bsd-stat-label">{label}</span>
            <span className="bsd-stat-desc">{desc}</span>
          </div>
          <span className="bsd-stat-value">{player.bonusStats?.[key] ?? 0}</span>
        </li>
      ))}
    </ul>
  </div>
);

const BonusStatsDialog = ({ open, onClose, red, blue }) => (
  <Dialog open={open} onClose={onClose} sx={DIALOG_SX}>
    <div className="bsd">
      <div className="bsd-header">
        <div className="bsd-header-text">
          <span className="bsd-label">Scoring</span>
          <h2 className="bsd-title">
            <i className="fa fa-star" />
            Bonus Statistics
          </h2>
        </div>
        <button className="bsd-close" onClick={onClose} aria-label="Close">
          <i className="fa fa-times" />
        </button>
      </div>
      <div className="bsd-body">
        <PlayerColumn color="red" player={red} />
        <PlayerColumn color="blue" player={blue} />
      </div>
      <p className="bsd-note">
        Bonus points are awarded alongside the main score for skillful play.
      </p>
    </div>
  </Dialog>
);

export default BonusStatsDialog;