MineSeeker/assets/js/components/battle-dialog/BonusPoints.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 { useMemo } from 'react';
import { StatRow } from './StatRow';
import { object } from 'prop-types';

export const BonusPoints = ({ game }) => {
  const hasBonuspoints = useMemo(
    () => 0 < game?.redBonusPoints
      || 0 < game?.blueBonusPoints
      || game?.redBonusStats?.blindHits
      || game?.blueBonusStats?.blindHits,
    [
      game?.blueBonusPoints,
      game?.blueBonusStats?.blindHits,
      game?.redBonusPoints,
      game?.redBonusStats?.blindHits,
    ],
  );

  const hasRedNoBonuses = useMemo(
    () => !game.redBonusStats?.blindHits
      && !game.redBonusStats?.chainBest
      && !game.redBonusStats?.edgeMines
      && !game.redBonusStats?.lastMineHits
      && !game.redBonusStats?.biggestReveal,
    [
      game.redBonusStats?.biggestReveal,
      game.redBonusStats?.blindHits,
      game.redBonusStats?.chainBest,
      game.redBonusStats?.edgeMines,
      game.redBonusStats?.lastMineHits,
    ],
  );

  const hasBlueNoBonuses = useMemo(
    () => !game.blueBonusStats?.blindHits
      && !game.blueBonusStats?.chainBest
      && !game.blueBonusStats?.edgeMines
      && !game.blueBonusStats?.lastMineHits
      && !game.blueBonusStats?.biggestReveal,
    [
      game.blueBonusStats?.biggestReveal,
      game.blueBonusStats?.blindHits,
      game.blueBonusStats?.chainBest,
      game.blueBonusStats?.edgeMines,
      game.blueBonusStats?.lastMineHits,
    ],
  );

  if (!hasBonuspoints) return '';

  return (
    <div className="bd-bonus">
      <div className="bd-bonus__grid">
        <div className="bd-bonus__column bd-bonus__column--red">
          <span className="bd-bonus__heading">
            <i className="fa fa-star" /> Red Bonus Statistics
          </span>
          <div className="bd-bonus__rows">
            <StatRow icon="fa-star" label="Total Bonus Points" value={(game.redBonusPoints ?? 0).toFixed(1)} valueColor="#ffd700" />
            {0 < game.redBonusStats?.blindHits && (
              <StatRow icon="fa-bullseye" label="Blind hits" value={game.redBonusStats.blindHits} />
            )}
            {0 < game.redBonusStats?.chainBest && (
              <StatRow icon="fa-link" label="Best chain" value={game.redBonusStats.chainBest} />
            )}
            {0 < game.redBonusStats?.edgeMines && (
              <StatRow icon="fa-border-all" label="Edge mines" value={game.redBonusStats.edgeMines} />
            )}
            {0 < game.redBonusStats?.lastMineHits && (
              <StatRow icon="fa-hourglass-end" label="Endgame mines" value={game.redBonusStats.lastMineHits} />
            )}
            {0 < game.redBonusStats?.biggestReveal && (
              <StatRow icon="fa-expand" label="Biggest reveal" value={game.redBonusStats.biggestReveal} />
            )}
            {hasRedNoBonuses && (
              <StatRow icon="fa-minus-circle" label="Status" value="No bonuses" valueColor="rgba(255,255,255,0.3)" />
            )}
          </div>
        </div>
        <div className="bd-bonus__column bd-bonus__column--blue">
          <span className="bd-bonus__heading">
            <i className="fa fa-star" /> Blue Bonus Statistics
          </span>
          <div className="bd-bonus__rows">
            <StatRow icon="fa-star" label="Total Bonus Points" value={(game.blueBonusPoints ?? 0).toFixed(1)} valueColor="#ffd700" />
            {0 < game.blueBonusStats?.blindHits && (
              <StatRow icon="fa-bullseye" label="Blind hits" value={game.blueBonusStats.blindHits} />
            )}
            {0 < game.blueBonusStats?.chainBest && (
              <StatRow icon="fa-link" label="Best chain" value={game.blueBonusStats.chainBest} />
            )}
            {0 < game.blueBonusStats?.edgeMines && (
              <StatRow icon="fa-border-all" label="Edge mines" value={game.blueBonusStats.edgeMines} />
            )}
            {0 < game.blueBonusStats?.lastMineHits && (
              <StatRow icon="fa-hourglass-end" label="Endgame mines" value={game.blueBonusStats.lastMineHits} />
            )}
            {0 < game.blueBonusStats?.biggestReveal && (
              <StatRow icon="fa-expand" label="Biggest reveal" value={game.blueBonusStats.biggestReveal} />
            )}
            {hasBlueNoBonuses && (
              <StatRow icon="fa-minus-circle" label="Status" value="No bonuses" valueColor="rgba(255,255,255,0.3)" />
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

BonusPoints.propTypes = {
  game: object.isRequired,
};