123 lines
4.6 KiB
JavaScript
123 lines
4.6 KiB
JavaScript
/**
|
|
* 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,
|
|
};
|