MineSeeker/assets/js/components/BattleDialog.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, { useEffect, useState } from 'react';
import { array } from 'prop-types';
import { formatDuration } from '@global-utils/format';
import Dialog from '@mui/material/Dialog';
import { createTheme, styled, ThemeProvider } from '@mui/material/styles';
import { Avatar, BonusPoints, StatRow } from '@global-components';

const darkTheme = createTheme({ palette: { mode: 'dark' } });

const RESULT_META = {
  win: {
    label: 'Victory',
    color: '#5ee89a',
    bg: 'rgba(42,158,96,0.15)',
    border: 'rgba(42,158,96,0.4)',
    icon: 'fa-trophy',
  },
  loss: {
    label: 'Defeated',
    color: '#f67d52',
    bg: 'rgba(173,10,5,0.15)',
    border: 'rgba(173,10,5,0.4)',
    icon: 'fa-flag',
  },
  draw: {
    label: 'Draw',
    color: '#95cff5',
    bg: 'rgba(149,207,245,0.1)',
    border: 'rgba(149,207,245,0.3)',
    icon: 'fa-minus',
  },
};

export const BattleDialog = ({ games }) => {
  const [open, setOpen] = useState(false);
  const [game, setGame] = useState(null);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    const handler = e => {
      const row = e.target.closest('[data-game-index]');
      if (!row) return;
      const idx = parseInt(row.dataset.gameIndex, 10);
      if (!isNaN(idx) && games[idx]) {
        setGame(games[idx]);
        setOpen(true);
      }
    };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, [games]);

  if (!game) {
    return <ThemeProvider theme={darkTheme}><StyledDialog open={false} /></ThemeProvider>;
  }

  const meta = RESULT_META[game.result] ?? RESULT_META.draw;
  const resign = game.resign;
  const maxPoints = Math.max(game.redPoints ?? 0, game.bluePoints ?? 0);
  const endReason = resign
    ? `${resign.charAt(0).toUpperCase() + resign.slice(1)} resigned`
    : 26 <= maxPoints ? 'Points' : 'Abandoned';
  const canShare = !canContinue;
  const bothRegistered = game.bothRegistered;
  const canContinue = bothRegistered && !resign && 26 > maxPoints;
  const playUrl = `${window.location.origin}/play/${game.uuid}`;
  const shareUrl = `${window.location.origin}/battle/${game.uuid}`;

  const duration = formatDuration(game.created, game.date);
  const pointDiff = Math.abs((game.redPoints ?? 0) - (game.bluePoints ?? 0));
  const winnerColor = (game.redPoints ?? 0) > (game.bluePoints ?? 0) ? '#f67d52'
    : (game.bluePoints ?? 0) > (game.redPoints ?? 0) ? '#95cff5'
      : 'rgba(255,255,255,0.45)';

  const handleShare = () => {
    navigator.clipboard.writeText(shareUrl).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2200);
    });
  };

  return (
    <ThemeProvider theme={darkTheme}>
      <StyledDialog open={open} onClose={() => setOpen(false)}>
        <div className="bd">
          <div className="bd-header">
            <div className="bd-header-left">
              <span className="bd-label">Battle Report</span>
              <h2 className="bd-title">
                <i className="fa fa-crosshairs" /> Match Details
              </h2>
            </div>
            <div className="bd-header-actions">
              {canContinue ? (
                <a
                  className="bd-continue"
                  href={playUrl}
                  aria-label="Continue the game"
                  title="Continue the game"
                >
                  <i className="fa fa-play" />
                  Continue
                </a>
              ) : canShare ? (
                <button
                  className={`bd-share${copied ? ' bd-share--copied' : ''}`}
                  onClick={handleShare}
                  aria-label="Copy share link"
                  title="Copy share link"
                >
                  <i className={`fa ${copied ? 'fa-check' : 'fa-share-alt'}`} />
                  {copied ? 'Copied!' : 'Share'}
                </button>
              ) : null}
              <button className="bd-close" onClick={() => setOpen(false)} aria-label="Close">
                <i className="fa fa-times" />
              </button>
            </div>
          </div>
          <div className="bd-vs-panel">
            <Avatar
              name={game.redName} color="red" avatarUrl={game.redAvatar}
              bonusPoints={game.redBonusPoints > game.blueBonusPoints ? game.redBonusPoints : 0}
            />
            <div className="bd-vs-center">
              <div className="bd-vs-score">
                <span className="bd-vs-score__red">{game.redPoints ?? '—'}</span>
                <span className="bd-vs-score__sep">:</span>
                <span className="bd-vs-score__blue">{game.bluePoints ?? '—'}</span>
              </div>
              <div className="bd-vs-score bd-bonus-score">
                <span className="bd-bonus-score__red">
                  <i className="fa fa-star" /> {(game.redBonusPoints ?? 0).toFixed(1)}
                </span>
                <span className="bd-vs-score__sep">:</span>
                <span className="bd-bonus-score__blue">
                  {(game.blueBonusPoints ?? 0).toFixed(1)} <i className="fa fa-star" />
                </span>
              </div>
              <div className="bd-vs-label">VS</div>
              <div
                className="bd-result-badge"
                style={{ '--bd-result-bg': meta.bg, '--bd-result-border': meta.border, '--bd-result-color': meta.color }}
              >
                <i className={`fa ${meta.icon}`} /> {meta.label}
              </div>
            </div>
            <Avatar
              name={game.blueName} color="blue" avatarUrl={game.blueAvatar}
              bonusPoints={game.blueBonusPoints > game.redBonusPoints ? game.blueBonusPoints : 0}
            />
          </div>
          <div className="bd-stats">
            <StatRow icon="fa-calendar" label="Date" value={game.date ?? '—'} />
            {game.created && game.date && game.created !== game.date && (
              <StatRow icon="fa-clock" label="Started" value={game.created} />
            )}
            {duration && (
              <StatRow icon="fa-hourglass-half" label="Match duration" value={duration} />
            )}
            <StatRow icon="fa-flag-checkered" label="End reason" value={endReason} />
            {0 < pointDiff && (
              <StatRow
                icon="fa-balance-scale" label="Winning margin"
                value={`${pointDiff} mine${1 === pointDiff ? '' : 's'}`} valueColor={winnerColor}
              />
            )}
            <StatRow
              icon="fa-bomb" label="Red used bomb"
              value={game.redExplodedBomb ? 'Yes' : 'No'}
              valueColor={game.redExplodedBomb ? '#f67d52' : 'rgba(255,255,255,0.45)'}
            />
            <StatRow
              icon="fa-bomb" label="Blue used bomb"
              value={game.blueExplodedBomb ? 'Yes' : 'No'}
              valueColor={game.blueExplodedBomb ? '#95cff5' : 'rgba(255,255,255,0.45)'}
            />
          </div>
          <BonusPoints
            game={game}
          />
        </div>
      </StyledDialog>
    </ThemeProvider>
  );
};

BattleDialog.propTypes = {
  games: array.isRequired,
};

const StyledDialog = styled(Dialog)({
  '& .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: '580px',
    maxWidth: '94vw',
    overflow: 'hidden',
    color: '#fff',
  },
  '& .MuiBackdrop-root': {
    background: 'rgba(2, 4, 8, 0.88)',
    backdropFilter: 'blur(4px)',
  },
});