chg: dev: massive refactor on front-end for unification and readiness #8

assets/js/components/battle-dialog/BonusPoints.jsx

@@ -1,7 +1,17 @@
-import { useMemo } from 'react';
-import StatRow from './StatRow';
+/**
+ * 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.
+ */
 
-export default function BonusPoints({ game }) {
+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
@@ -45,95 +55,68 @@ export default function BonusPoints({ game }) {
     ],
   );
 
-  if (!hasBonuspoints) {
-    return '';
-  }
+  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
+    <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 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 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 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
+        <div className="bd-bonus__column bd-bonus__column--blue">
+          <span className="bd-bonus__heading">
+            <i className="fa fa-star" /> 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 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,
+};