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

assets/js/components/BattleDialog.jsx

@@ -1,34 +1,21 @@
+/**
+ * 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 React, { useEffect, useState } from 'react';
+import { array } from 'prop-types';
+import { formatDuration } from '@global-utils/format';
 import Dialog from '@mui/material/Dialog';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import Avatar from './battle-dialog/Avatar';
-import StatRow from './battle-dialog/StatRow';
-import BonusPoints from './battle-dialog/BonusPoints';
+import { createTheme, styled, ThemeProvider } from '@mui/material/styles';
+import { Avatar, BonusPoints, StatRow } from '@global-components';
 
 const darkTheme = createTheme({ palette: { mode: 'dark' } });
 
-const DIALOG_SX = {
-  '& .MuiDialog-paper': {
-    background: '#07090d',
-    backgroundImage: `
-      linear-gradient(rgba(35, 111, 135, 0.08) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(35, 111, 135, 0.08) 1px, transparent 1px)
-    `,
-    backgroundSize: '46px 46px',
-    border: '1px solid rgba(35, 111, 135, 0.4)',
-    borderRadius: '12px',
-    boxShadow: '0 0 80px rgba(35, 111, 135, 0.15), 0 32px 80px rgba(0,0,0,0.9)',
-    width: '580px',
-    maxWidth: '94vw',
-    overflow: 'hidden',
-    color: '#fff',
-  },
-  '& .MuiBackdrop-root': {
-    background: 'rgba(2, 4, 8, 0.88)',
-    backdropFilter: 'blur(4px)',
-  },
-};
-
 const RESULT_META = {
   win: {
     label: 'Victory',
@@ -53,7 +40,7 @@ const RESULT_META = {
   },
 };
 
-export default function BattleDialog({ games }) {
+export const BattleDialog = ({ games }) => {
   const [open, setOpen] = useState(false);
   const [game, setGame] = useState(null);
   const [copied, setCopied] = useState(false);
@@ -73,7 +60,7 @@ export default function BattleDialog({ games }) {
   }, [games]);
 
   if (!game) {
-    return <ThemeProvider theme={darkTheme}><Dialog open={false} sx={DIALOG_SX} /></ThemeProvider>;
+    return <ThemeProvider theme={darkTheme}><StyledDialog open={false} /></ThemeProvider>;
   }
 
   const meta = RESULT_META[game.result] ?? RESULT_META.draw;
@@ -86,18 +73,6 @@ export default function BattleDialog({ games }) {
   const canContinue = !resign && 26 > maxPoints;
   const playUrl = `${window.location.origin}/play/${game.uuid}`;
 
-  const formatDuration = (from, to) => {
-    if (!from || !to) return null;
-    const diffMs = new Date(to.replace(' ', 'T')) - new Date(from.replace(' ', 'T'));
-    if (isNaN(diffMs) || 0 >= diffMs) return null;
-    const totalSec = Math.floor(diffMs / 1000);
-    const h = Math.floor(totalSec / 3600);
-    const m = Math.floor((totalSec % 3600) / 60);
-    const s = totalSec % 60;
-    if (0 < h) return `${h}h ${m}m ${s}s`;
-    if (0 < m) return `${m}m ${s}s`;
-    return `${s}s`;
-  };
   const duration = formatDuration(game.created, game.date);
   const pointDiff = Math.abs((game.redPoints ?? 0) - (game.bluePoints ?? 0));
   const winnerColor = (game.redPoints ?? 0) > (game.bluePoints ?? 0) ? '#f67d52'
@@ -113,7 +88,7 @@ export default function BattleDialog({ games }) {
 
   return (
     <ThemeProvider theme={darkTheme}>
-      <Dialog open={open} onClose={() => setOpen(false)} sx={DIALOG_SX}>
+      <StyledDialog open={open} onClose={() => setOpen(false)}>
         <div className="bd">
           <div className="bd-header">
             <div className="bd-header-left">
@@ -122,7 +97,7 @@ export default function BattleDialog({ games }) {
                 <i className="fa fa-crosshairs" /> Match Details
               </h2>
             </div>
-            <div style={{ display: 'flex', gap: 8 }}>
+            <div className="bd-header-actions">
               {canContinue ? (
                 <a
                   className="bd-continue"
@@ -160,33 +135,19 @@ export default function BattleDialog({ games }) {
                 <span className="bd-vs-score__sep">:</span>
                 <span className="bd-vs-score__blue">{game.bluePoints ?? '—'}</span>
               </div>
-              <div className="bd-vs-score" style={{ marginBottom: 8 }}>
-                <span style={{
-                  font: '700 13px \'Rajdhani\', sans-serif',
-                  color: '#f67d52',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 4,
-                }}
-                >
-                  <i className="fa fa-star" style={{ fontSize: 11 }} /> {(game.redBonusPoints ?? 0).toFixed(1)}
+              <div className="bd-vs-score bd-bonus-score">
+                <span className="bd-bonus-score__red">
+                  <i className="fa fa-star" /> {(game.redBonusPoints ?? 0).toFixed(1)}
                 </span>
                 <span className="bd-vs-score__sep">:</span>
-                <span style={{
-                  font: '700 13px \'Rajdhani\', sans-serif',
-                  color: '#95cff5',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 4,
-                }}
-                >
-                  {(game.blueBonusPoints ?? 0).toFixed(1)} <i className="fa fa-star" style={{ fontSize: 11 }} />
+                <span className="bd-bonus-score__blue">
+                  {(game.blueBonusPoints ?? 0).toFixed(1)} <i className="fa fa-star" />
                 </span>
               </div>
               <div className="bd-vs-label">VS</div>
               <div
                 className="bd-result-badge"
-                style={{ background: meta.bg, border: `1px solid ${meta.border}`, color: meta.color }}
+                style={{ '--bd-result-bg': meta.bg, '--bd-result-border': meta.border, '--bd-result-color': meta.color }}
               >
                 <i className={`fa ${meta.icon}`} /> {meta.label}
               </div>
@@ -226,7 +187,33 @@ export default function BattleDialog({ games }) {
             game={game}
           />
         </div>
-      </Dialog>
+      </StyledDialog>
     </ThemeProvider>
   );
-}
+};
+
+BattleDialog.propTypes = {
+  games: array.isRequired,
+};
+
+const StyledDialog = styled(Dialog)({
+  '& .MuiDialog-paper': {
+    background: '#07090d',
+    backgroundImage: `
+      linear-gradient(rgba(35, 111, 135, 0.08) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(35, 111, 135, 0.08) 1px, transparent 1px)
+    `,
+    backgroundSize: '46px 46px',
+    border: '1px solid rgba(35, 111, 135, 0.4)',
+    borderRadius: '12px',
+    boxShadow: '0 0 80px rgba(35, 111, 135, 0.15), 0 32px 80px rgba(0,0,0,0.9)',
+    width: '580px',
+    maxWidth: '94vw',
+    overflow: 'hidden',
+    color: '#fff',
+  },
+  '& .MuiBackdrop-root': {
+    background: 'rgba(2, 4, 8, 0.88)',
+    backdropFilter: 'blur(4px)',
+  },
+});