140 lines
5.2 KiB
JavaScript
140 lines
5.2 KiB
JavaScript
import { useMemo } from 'react';
|
|
import StatRow from './StatRow';
|
|
|
|
export default function 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 style={{
|
|
padding: '16px 20px 0',
|
|
borderTop: '1px solid rgba(255,255,255,0.08)',
|
|
marginTop: 16,
|
|
marginBottom: 16,
|
|
}}
|
|
>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
|
|
{/* Red Bonus */}
|
|
<div style={{
|
|
padding: 16,
|
|
border: '1px solid rgba(173,10,5,0.2)',
|
|
borderRadius: 6,
|
|
background: 'rgba(173,10,5,0.05)',
|
|
}}
|
|
>
|
|
<span style={{
|
|
font: '700 12px \'Rajdhani\', sans-serif',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 2,
|
|
color: '#ffd700',
|
|
display: 'block',
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<i className="fa fa-star" style={{ marginRight: 8 }} /> Red Bonus Statistics
|
|
</span>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
|
|
<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 style={{
|
|
padding: 16,
|
|
border: '1px solid rgba(149,207,245,0.2)',
|
|
borderRadius: 6,
|
|
background: 'rgba(149,207,245,0.05)',
|
|
}}
|
|
>
|
|
<span style={{
|
|
font: '700 12px \'Rajdhani\', sans-serif',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 2,
|
|
color: '#ffd700',
|
|
display: 'block',
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<i className="fa fa-star" style={{ marginRight: 8 }} /> Blue Bonus Statistics
|
|
</span>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
|
|
<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>
|
|
);
|
|
}
|