From 8e04cc2520a49599ba0b7e0c79c8a6ec386b5d7d Mon Sep 17 00:00:00 2001 From: Zihao Huang Date: Sat, 22 Aug 2026 10:54:46 -0700 Subject: [PATCH 1/7] Change sx to system props --- frontend/src/App.scss | 36 +-- frontend/src/account/Settings.tsx | 11 +- frontend/src/admin/AdminPlayers.tsx | 8 +- frontend/src/admin/AdminSeason.tsx | 6 +- frontend/src/common/AlertDialog.tsx | 4 +- frontend/src/common/ConfirmationDialog.tsx | 4 +- frontend/src/common/LoadingFallback.tsx | 2 +- frontend/src/common/NavBar.tsx | 4 +- frontend/src/game/Game.tsx | 76 +++---- frontend/src/game/GameLogs.tsx | 30 +-- frontend/src/game/LiveGames.tsx | 151 ++++++------- frontend/src/game/common/DropdownInput.tsx | 2 +- frontend/src/game/common/Footer.tsx | 176 +++++++-------- frontend/src/game/common/GameSummaryBody.tsx | 18 +- .../src/game/hk/legacy/LegacyHongKongGame.tsx | 60 +++-- .../src/game/jp/legacy/LegacyJapaneseGame.tsx | 68 +++--- frontend/src/game/new/RoundInput.tsx | 4 +- frontend/src/game/new/RoundInputFigure.tsx | 13 +- frontend/src/home/Home.tsx | 2 +- frontend/src/leaderboard/Leaderboard.tsx | 57 ++--- frontend/src/login/Login.tsx | 120 +++++----- frontend/src/login/PasswordReset.tsx | 124 +++++------ frontend/src/login/Register.tsx | 210 +++++++++--------- frontend/src/login/RequestPasswordReset.tsx | 92 ++++---- frontend/src/root.tsx | 2 +- frontend/src/theme/utils.ts | 9 +- 26 files changed, 604 insertions(+), 685 deletions(-) diff --git a/frontend/src/App.scss b/frontend/src/App.scss index a6ed86a..a9b475e 100644 --- a/frontend/src/App.scss +++ b/frontend/src/App.scss @@ -1,44 +1,44 @@ // Game input component styles .App { - text-align: center; + text-align: center; } .game-round-input { - border: 1px solid black; - position: relative; + border: 1px solid black; + position: relative; } .game-round-input .game-round-input-grid { - position: absolute; - width: 100%; - height: 100%; - z-index: 10; - pointer-events: none; + position: absolute; + width: 100%; + height: 100%; + z-index: 10; + pointer-events: none; } .game-round-input svg { - position: absolute; - left: 0; - top: 0; + position: absolute; + left: 0; + top: 0; } .game-round-input svg polygon { - stroke-width: 1px; - stroke: black; - cursor: pointer; + stroke-width: 1px; + stroke: black; + cursor: pointer; } // Wheel picker scrollbar hiding .wheel-picker-container ul::-webkit-scrollbar { - display: none; + display: none; } .wheel-picker-container ul { - -ms-overflow-style: none; + -ms-overflow-style: none; } .link { - color: #60a5fa; + color: #60a5fa; } .link:visited { - color: #c084fc; + color: #c084fc; } diff --git a/frontend/src/account/Settings.tsx b/frontend/src/account/Settings.tsx index f49a85e..d0c0ae5 100644 --- a/frontend/src/account/Settings.tsx +++ b/frontend/src/account/Settings.tsx @@ -58,14 +58,7 @@ const Settings = () => { Settings - + Theme { - + @@ -233,7 +233,7 @@ const AdminPlayers = () => { Make Test Admins - + ); }; diff --git a/frontend/src/admin/AdminSeason.tsx b/frontend/src/admin/AdminSeason.tsx index c6b2caf..c571ea9 100644 --- a/frontend/src/admin/AdminSeason.tsx +++ b/frontend/src/admin/AdminSeason.tsx @@ -161,7 +161,7 @@ const AdminSeason = () => { } return ( - + <> {getCurrentSeasonPanel()} @@ -169,7 +169,7 @@ const AdminSeason = () => { All Seasons - + columns={playerColumns} rows={seasons} @@ -183,7 +183,7 @@ const AdminSeason = () => { editMode="row" /> - + ); }; diff --git a/frontend/src/common/AlertDialog.tsx b/frontend/src/common/AlertDialog.tsx index 9a96a2b..9326efc 100644 --- a/frontend/src/common/AlertDialog.tsx +++ b/frontend/src/common/AlertDialog.tsx @@ -39,9 +39,9 @@ const Alert = ({ fullWidth disableEscapeKeyDown={false} > - {title && {title}} + {title && {title}} - {confirmation} + {confirmation} - - - - )} - + {getGameVariantString(variant, game.type)} + {game.status === "IN_PROGRESS" && ( + + {gameRoundString(game, variant)} + + )} + {getLegacyDisplayGame(game)} + {canUpdateGame && ( + + + + + + )} ); }; diff --git a/frontend/src/game/GameLogs.tsx b/frontend/src/game/GameLogs.tsx index 3ce2c76..4567abe 100644 --- a/frontend/src/game/GameLogs.tsx +++ b/frontend/src/game/GameLogs.tsx @@ -225,31 +225,17 @@ const GameLogs = () => { > - - {getGameVariantString( - queryGameVariant, - game.type, - )}{" "} - #{game.id} - - + + {getGameVariantString(queryGameVariant, game.type)}{" "} + #{game.id} + } subheader={ diff --git a/frontend/src/game/LiveGames.tsx b/frontend/src/game/LiveGames.tsx index 3a96b47..f5a6e40 100644 --- a/frontend/src/game/LiveGames.tsx +++ b/frontend/src/game/LiveGames.tsx @@ -9,7 +9,6 @@ import { Typography, CircularProgress, Alert, - Stack, CardActionArea, } from "@mui/material"; import { Link } from "react-router"; @@ -60,95 +59,83 @@ export const LiveGames = ({ gameVariant }: GameCreationPr return ( - - Live {getGameVariantString(gameVariant)} Games + Live {getGameVariantString(gameVariant)} Games - {liveGames.length === 0 ? ( - - No live games at the moment. - - ) : ( - - {liveGames.map((game) => ( - - + No live games at the moment. + + ) : ( + + {liveGames.map((game) => ( + + + - + + {getGameVariantString(gameVariant, game.type)} # + {game.id} + + } + label={gameRoundString(game, gameVariant)} + color="primary" + size="small" + variant="outlined" + /> + + } + subheader={ + + + + {formatDate(game.createdAt)} + + + } sx={{ - display: "flex", - flexDirection: "column", - alignItems: "stretch", - flexGrow: 1, + bgcolor: "action.hover", + "& .MuiCardHeader-subheader": { + color: "text.secondary", + }, }} - > - - - {getGameVariantString( - gameVariant, - game.type, - )}{" "} - #{game.id} - - } - label={gameRoundString(game, gameVariant)} - color="primary" - size="small" - variant="outlined" - /> - - } - subheader={ - - - - {formatDate(game.createdAt)} - - - } - sx={{ - bgcolor: "action.hover", - "& .MuiCardHeader-subheader": { - color: "text.secondary", - }, - }} - /> - - - - - - - ))} - - )} - + /> + + + + + + + ))} + + )} ); }; diff --git a/frontend/src/game/common/DropdownInput.tsx b/frontend/src/game/common/DropdownInput.tsx index 220731d..42d9ce3 100644 --- a/frontend/src/game/common/DropdownInput.tsx +++ b/frontend/src/game/common/DropdownInput.tsx @@ -11,7 +11,7 @@ const DropdownInput = ({ label, data, onChange }: DropdownInputProps) => { const options = transformToSelectOptions(data); return ( - + {label}: alpha(theme.palette.primary.main, 0.08) : undefined} sx={{ - flex: 1, - minWidth: 0, - px: { xs: 1, sm: 2 }, - py: 1.5, - borderRadius: 2, cursor: "pointer", transition: "all 0.2s ease-in-out", - border: 2, - borderColor: "transparent", userSelect: "none", - // Selected state styling - ...(isSelected && { - borderColor: (theme) => theme.palette.primary.main, - bgcolor: (theme) => alpha(theme.palette.primary.main, 0.08), - transform: "scale(1.02)", - }), - // Hover effect (disabled when selected) - ...(!isSelected && { - "&:hover": { - bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05), - transform: "translateY(-2px)", - }, - }), + ...(isSelected + ? { + transform: "scale(1.02)", + } + : { + "&:hover": { + bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05), + transform: "translateY(-2px)", + }, + }), }} > - + {username} {showDifference ? `${scoreDifference >= 0 ? "+" : ""}${scoreDifference.toLocaleString()}` @@ -121,75 +121,69 @@ export const Footer = ({ scores, riichiList, riichiStickCount }: FooterProps) => right: 0, bottom: 0, zIndex: 1200, + maxWidth: "lg", + mx: "auto", + py: 2, }} > - - - {riichiStickCount !== undefined && hasRiichiSticks && ( - - - } - label={`${riichiStickCount} Riichi ${riichiStickCount === 1 ? "Stick" : "Sticks"}`} - color="primary" - variant="outlined" - size="small" - /> - - )} - - {scores.map(({ username, score, eloDelta }, idx) => { - const hasRiichiStick = riichiList?.includes(idx) ?? false; - const adjustedScore = hasRiichiStick ? score - 1000 : score; - - // Calculate difference if a score is selected - let scoreDifference: number | null = null; - if (selectedScoreIndex !== null && selectedScoreIndex !== idx) { - const selectedHasRiichi = - riichiList?.includes(selectedScoreIndex) ?? false; - const selectedAdjustedScore = selectedHasRiichi - ? scores[selectedScoreIndex].score - 1000 - : scores[selectedScoreIndex].score; - scoreDifference = adjustedScore - selectedAdjustedScore; + + {riichiStickCount !== undefined && hasRiichiSticks && ( + + } + label={`${riichiStickCount} Riichi ${riichiStickCount === 1 ? "Stick" : "Sticks"}`} + color="primary" + variant="outlined" + size="small" + /> + + )} + + {scores.map(({ username, score, eloDelta }, idx) => { + const hasRiichiStick = riichiList?.includes(idx) ?? false; + const adjustedScore = hasRiichiStick ? score - 1000 : score; - return ( - handleScoreClick(idx)} - /> - ); - })} - + // Calculate difference if a score is selected + let scoreDifference: number | null = null; + if (selectedScoreIndex !== null && selectedScoreIndex !== idx) { + const selectedHasRiichi = + riichiList?.includes(selectedScoreIndex) ?? false; + const selectedAdjustedScore = selectedHasRiichi + ? scores[selectedScoreIndex].score - 1000 + : scores[selectedScoreIndex].score; + scoreDifference = adjustedScore - selectedAdjustedScore; + } + + return ( + handleScoreClick(idx)} + /> + ); + })} - + ); }; diff --git a/frontend/src/game/common/GameSummaryBody.tsx b/frontend/src/game/common/GameSummaryBody.tsx index 17ddb4e..a7e5d78 100644 --- a/frontend/src/game/common/GameSummaryBody.tsx +++ b/frontend/src/game/common/GameSummaryBody.tsx @@ -16,16 +16,14 @@ const GameSummaryBody = ({ .map((score, idx) => ( {mapIndextoPlace(idx)} - {score.username} diff --git a/frontend/src/game/hk/legacy/LegacyHongKongGame.tsx b/frontend/src/game/hk/legacy/LegacyHongKongGame.tsx index 884df82..ddde7e2 100644 --- a/frontend/src/game/hk/legacy/LegacyHongKongGame.tsx +++ b/frontend/src/game/hk/legacy/LegacyHongKongGame.tsx @@ -133,32 +133,30 @@ const LegacyHongKongGame = ({ }} > - - value && transactionTypeOnChange(value)} - sx={{ - display: "flex", - flexWrap: "wrap", - gap: 1, - "& .MuiToggleButton-root": { - flex: "1 1 auto", - minWidth: "120px", + value && transactionTypeOnChange(value)} + sx={{ + display: "flex", + flexWrap: "wrap", + gap: 1, + "& .MuiToggleButton-root": { + flex: "1 1 auto", + minWidth: "120px", + borderLeft: (theme) => `1px solid ${theme.palette.divider}`, + "&:hover": { borderLeft: (theme) => `1px solid ${theme.palette.divider}`, - "&:hover": { - borderLeft: (theme) => `1px solid ${theme.palette.divider}`, - }, }, - }} - > - {HK_TRANSACTION_TYPE_BUTTONS.map((button, idx) => ( - - {button.name} - - ))} - - + }, + }} + > + {HK_TRANSACTION_TYPE_BUTTONS.map((button, idx) => ( + + {button.name} + + ))} + @@ -173,7 +171,7 @@ const LegacyHongKongGame = ({ ))} {showPointInput() && ( - + - + {enableRecording && !gameOver && getRecordingInterface()} - - - +