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

2026-04-21 11:30:07 +02:00
parent 0d04ec91e7
commit 3bbfb8740f
63 changed files with 1096 additions and 480 deletions
--- a/assets/js/components/battle-dialog/Avatar.jsx
+++ b/assets/js/components/battle-dialog/Avatar.jsx
@@ -7,92 +7,48 @@
 * file that was distributed with this source code.
 */

-import React from 'react';
+import React, { useMemo } from 'react';
+import { string } from 'prop-types';

-export default function Avatar({ name, color, avatarUrl, bonusPoints = 0 }) {
+export const Avatar = ({ name, color, avatarUrl, bonusPoints = 0 }) => {
  const isRed = 'red' === color;
-  const initials = (name || '?').slice(0, 2).toUpperCase();
+  const initials = useMemo(() => (name || '?').slice(0, 2).toUpperCase(), [name]);

-  const gradient = isRed
-    ? 'linear-gradient(135deg, rgba(173,10,5,0.6) 0%, rgba(246,125,82,0.4) 100%)'
-    : 'linear-gradient(135deg, rgba(35,111,135,0.6) 0%, rgba(41,128,185,0.4) 100%)';
-  const glow = isRed
-    ? '0 0 0 3px rgba(173,10,5,0.2), 0 0 28px rgba(173,10,5,0.35)'
-    : '0 0 0 3px rgba(35,111,135,0.2), 0 0 28px rgba(35,111,135,0.35)';
-  const border = isRed
-    ? 'rgba(173,10,5,0.5)'
-    : 'rgba(35,111,135,0.5)';
-  const textColor = isRed ? '#f67d52' : '#95cff5';
+  const cssVars = isRed ? {
+    '--bd-avatar-gradient': 'linear-gradient(135deg, rgba(173,10,5,0.6) 0%, rgba(246,125,82,0.4) 100%)',
+    '--bd-avatar-glow':     '0 0 0 3px rgba(173,10,5,0.2), 0 0 28px rgba(173,10,5,0.35)',
+    '--bd-avatar-border':   'rgba(173,10,5,0.5)',
+    '--bd-avatar-color':    '#f67d52',
+  } : {
+    '--bd-avatar-gradient': 'linear-gradient(135deg, rgba(35,111,135,0.6) 0%, rgba(41,128,185,0.4) 100%)',
+    '--bd-avatar-glow':     '0 0 0 3px rgba(35,111,135,0.2), 0 0 28px rgba(35,111,135,0.35)',
+    '--bd-avatar-border':   'rgba(35,111,135,0.5)',
+    '--bd-avatar-color':    '#95cff5',
+  };

  return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, position: 'relative' }}>
-      <div style={{ position: 'relative' }}>
-        <div style={{
-          width: 72, height: 72, borderRadius: '50%',
-          background: avatarUrl ? 'transparent' : gradient,
-          border: `2px solid ${border}`,
-          boxShadow: glow,
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          font: '800 24px \'Rajdhani\', sans-serif',
-          color: textColor,
-          letterSpacing: 2,
-          overflow: 'hidden',
-        }}
-        >
-          {avatarUrl ? (
-            <img
-              src={avatarUrl}
-              alt={name}
-              style={{
-                width: '100%',
-                height: '100%',
-                objectFit: 'cover',
-              }}
-            />
-          ) : (
-            initials
-          )}
+    <div className="bd-avatar-wrap" style={cssVars}>
+      <div className="bd-avatar-ring-wrap">
+        <div className="bd-avatar-ring">
+          {avatarUrl
+            ? <img src={avatarUrl} alt={name} className="bd-avatar-img" />
+            : initials}
        </div>
        {0 < bonusPoints && (
-          <div style={{
-            position: 'absolute',
-            bottom: -6,
-            right: -6,
-            background: '#ffd700',
-            borderRadius: '50%',
-            width: 28,
-            height: 28,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            boxShadow: '0 0 12px rgba(255, 215, 0, 0.6), 0 0 0 2px rgba(7, 9, 13, 1)',
-            border: '2px solid rgba(0,0,0,0.5)',
-            zIndex: 10,
-          }}
-          >
-            <i className="fa fa-star" style={{ color: '#000', fontSize: 14 }} />
+          <div className="bd-avatar-bonus">
+            <i className="fa fa-star" />
          </div>
        )}
      </div>
-      <span style={{
-        font: '700 15px \'Rajdhani\', sans-serif',
-        color: textColor,
-        letterSpacing: 1,
-        maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-        textAlign: 'center',
-      }}
-      >
-        {name}
-      </span>
-      <span style={{
-        font: '600 10px \'Rajdhani\', sans-serif',
-        textTransform: 'uppercase',
-        letterSpacing: 2,
-        color: 'rgba(255,255,255,0.3)',
-      }}
-      >
-        {isRed ? 'Red' : 'Blue'}
-      </span>
+      <span className="bd-avatar-name">{name}</span>
+      <span className="bd-avatar-side">{isRed ? 'Red' : 'Blue'}</span>
    </div>
  );
-}
+};
+
+Avatar.propTypes = {
+  name: string,
+  color: string,
+  avatarUrl: string,
+  bonusPoints: string,
+};
--- a/assets/js/components/battle-dialog/BonusPoints.jsx
+++ b/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,
+};
--- a/assets/js/components/battle-dialog/StatRow.jsx
+++ b/assets/js/components/battle-dialog/StatRow.jsx
@@ -8,33 +8,24 @@
 */

 import React from 'react';
+import { node, string } from 'prop-types';

-export default function StatRow({ icon, label, value, valueColor }) {
-  return (
-    <div style={{
-      display: 'flex', alignItems: 'center',
-      gap: 10, padding: '9px 0',
-      borderBottom: '1px solid rgba(255,255,255,0.05)',
-    }}
+export const StatRow = ({ icon, label, value, valueColor }) => (
+  <div className="bd-stat-row">
+    <i className={`fa ${icon} bd-stat-row__icon`} />
+    <span className="bd-stat-row__label">{label}</span>
+    <span
+      className="bd-stat-row__value"
+      style={valueColor ? { '--bd-stat-value-color': valueColor } : undefined}
    >
-      <i className={`fa ${icon}`} style={{ width: 16, color: 'rgba(149,207,245,0.4)', fontSize: 13 }} />
-      <span style={{
-        font: '500 13px \'Rajdhani\', sans-serif',
-        color: 'rgba(255,255,255,0.45)',
-        flex: 1,
-        letterSpacing: 0.5,
-      }}
-      >
-        {label}
-      </span>
-      <span style={{
-        font: '700 13px \'Rajdhani\', sans-serif',
-        color: valueColor || 'rgba(255,255,255,0.75)',
-        letterSpacing: 0.5,
-      }}
-      >
-        {value}
-      </span>
-    </div>
-  );
-}
+      {value}
+    </span>
+  </div>
+);
+
+StatRow.propTypes = {
+  icon:       string.isRequired,
+  label:      string.isRequired,
+  value:      node.isRequired,
+  valueColor: string,
+};