From f906c81c67f258a9e25a696e2460d341ae9a36c6 Mon Sep 17 00:00:00 2001 From: GuillaumeSD Date: Mon, 16 Jun 2025 05:01:52 +0200 Subject: [PATCH] style : enhance load game UI --- package-lock.json | 37 ++++++++-------- sentry.client.config.ts | 3 ++ src/lib/chessCom.ts | 9 ++-- src/sections/loadGame/chessComInput.tsx | 6 +-- .../loadGame/gameItem/gameResultChip.tsx | 9 +--- src/sections/loadGame/gameItem/index.tsx | 44 +++++-------------- .../loadGame/gameItem/movesNbChip.tsx | 2 +- src/sections/loadGame/gamePgnInput.tsx | 2 +- src/sections/loadGame/lichessInput.tsx | 4 +- src/sections/loadGame/loadGameDialog.tsx | 8 ++-- 10 files changed, 52 insertions(+), 72 deletions(-) diff --git a/package-lock.json b/package-lock.json index 29483d4..eedca5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3286,9 +3286,9 @@ } }, "node_modules/@sentry/bundler-plugin-core/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", + "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "license": "MIT", "dependencies": { "balanced-match": "^1.0.0" @@ -4108,9 +4108,9 @@ } }, "node_modules/@typescript-eslint/parser/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", + "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "dev": true, "license": "MIT", "dependencies": { @@ -4248,9 +4248,9 @@ } }, "node_modules/@typescript-eslint/type-utils/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", + "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "dev": true, "license": "MIT", "dependencies": { @@ -4330,9 +4330,9 @@ } }, "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", + "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "dev": true, "license": "MIT", "dependencies": { @@ -4457,9 +4457,9 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", + "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "dev": true, "license": "MIT", "dependencies": { @@ -5512,10 +5512,11 @@ } }, "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", + "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "dev": true, + "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" diff --git a/sentry.client.config.ts b/sentry.client.config.ts index deb8317..573684d 100644 --- a/sentry.client.config.ts +++ b/sentry.client.config.ts @@ -39,6 +39,9 @@ if ( "RuntimeError: Out of bounds memory access (evaluating 'n.apply(null,arguments)')", "Uncaught RuntimeError: Aborted(CompileError: WebAssembly.instantiate():", "Uncaught RangeError: WebAssembly.Memory(): could not allocate memory", + "Aborted(NetworkError: Failed to execute 'send' on 'XMLHttpRequest'", + "Aborted(CompileError: WebAssembly.Module doesn't parse at byte", + "Aborted(NetworkError: A network error occurred", ], }); } diff --git a/src/lib/chessCom.ts b/src/lib/chessCom.ts index 755267b..e8b904d 100644 --- a/src/lib/chessCom.ts +++ b/src/lib/chessCom.ts @@ -1,7 +1,6 @@ import { ChessComGame } from "@/types/chessCom"; import { getPaddedNumber } from "./helpers"; import { LoadedGame } from "@/types/game"; -import { Chess } from "chess.js"; export const getChessComUserRecentGames = async ( username: string, @@ -63,8 +62,8 @@ export const getChessComUserAvatar = async ( }; const formatChessComGame = (data: ChessComGame): LoadedGame => { - const game = new Chess(); - game.loadPgn(data.pgn); + const result = data.pgn.match(/\[Result "(.*?)"]/)?.[1]; + const movesNb = data.pgn.match(/\d+?\. /g)?.length; return { id: data.uuid || data.url?.split("/").pop() || data.id, @@ -79,12 +78,12 @@ const formatChessComGame = (data: ChessComGame): LoadedGame => { rating: data.black?.rating || 0, title: data.black?.title, }, - result: game.getHeaders().Result, + result, timeControl: getGameTimeControl(data), date: data.end_time ? new Date(data.end_time * 1000).toLocaleDateString() : new Date().toLocaleDateString(), - movesNb: game.history().length, + movesNb: movesNb ? movesNb * 2 : undefined, url: data.url, }; }; diff --git a/src/sections/loadGame/chessComInput.tsx b/src/sections/loadGame/chessComInput.tsx index e2e25b7..d9f62bd 100644 --- a/src/sections/loadGame/chessComInput.tsx +++ b/src/sections/loadGame/chessComInput.tsx @@ -85,7 +85,7 @@ export default function ChessComInput({ onSelect }: Props) { return ( <> - + ) : ( - + {games.map((game) => { const perspectiveUserColor = game.white.name.toLowerCase() === @@ -161,11 +161,11 @@ export default function ChessComInput({ onSelect }: Props) { game={game} perspectiveUserColor={perspectiveUserColor} onClick={() => { - updateHistory(debouncedUsername); const boardOrientation = debouncedUsername.toLowerCase() !== game.black?.name?.toLowerCase(); onSelect(game.pgn, boardOrientation); + updateHistory(debouncedUsername); }} /> ); diff --git a/src/sections/loadGame/gameItem/gameResultChip.tsx b/src/sections/loadGame/gameItem/gameResultChip.tsx index a9da152..8a4f3f0 100644 --- a/src/sections/loadGame/gameItem/gameResultChip.tsx +++ b/src/sections/loadGame/gameItem/gameResultChip.tsx @@ -1,4 +1,3 @@ -import { Icon } from "@iconify/react"; import { Chip, Theme, Tooltip, useTheme } from "@mui/material"; import React from "react"; @@ -13,7 +12,7 @@ export default function GameResultChip({ }: Props) { const theme = useTheme(); - const { label, color, bgColor, icon } = getResultSpecs( + const { label, color, bgColor } = getResultSpecs( theme, perspectiveUserColor, result @@ -22,14 +21,13 @@ export default function GameResultChip({ return ( , }; } @@ -73,7 +70,6 @@ const getResultSpecs = ( label: "Draw", color: theme.palette.info.main, bgColor: `${theme.palette.info.main}1A`, - icon: , }; } @@ -81,6 +77,5 @@ const getResultSpecs = ( label: "Game in Progress", color: theme.palette.text.secondary, bgColor: theme.palette.action.hover, - icon: , }; }; diff --git a/src/sections/loadGame/gameItem/index.tsx b/src/sections/loadGame/gameItem/index.tsx index 477844c..82910f0 100644 --- a/src/sections/loadGame/gameItem/index.tsx +++ b/src/sections/loadGame/gameItem/index.tsx @@ -14,7 +14,7 @@ import GameResultChip from "./gameResultChip"; interface Props { game: LoadedGame; - onClick?: () => void; + onClick: () => void; perspectiveUserColor: "white" | "black"; } @@ -38,34 +38,34 @@ export const GameItem: React.FC = ({ transition: "all 0.2s ease-in-out", "&:hover": { backgroundColor: theme.palette.action.hover, - transform: "translateY(-1px)", boxShadow: theme.shadows[3], }, border: `1px solid ${theme.palette.divider}`, - cursor: onClick ? "pointer" : "default", + cursor: "pointer", }} onClick={onClick} > {formatPlayerName(white)} ({white.rating}) @@ -74,7 +74,10 @@ export const GameItem: React.FC = ({ vs @@ -82,12 +85,13 @@ export const GameItem: React.FC = ({ {formatPlayerName(black)} ({black.rating}) @@ -103,7 +107,6 @@ export const GameItem: React.FC = ({ = ({ } - sx={{ mr: 2 }} /> - - {/* - - { - e.stopPropagation(); - window.open(url, "_blank"); - }} - size="small" - sx={{ - color: theme.palette.primary.main, - "&:hover": { - backgroundColor: theme.palette.action.hover, - transform: "scale(1.1)", - }, - transition: "all 0.2s ease-in-out", - }} - > - - - - */} ); }; diff --git a/src/sections/loadGame/gameItem/movesNbChip.tsx b/src/sections/loadGame/gameItem/movesNbChip.tsx index 2e6cbdb..b286bae 100644 --- a/src/sections/loadGame/gameItem/movesNbChip.tsx +++ b/src/sections/loadGame/gameItem/movesNbChip.tsx @@ -9,7 +9,7 @@ export default function MovesNbChip({ movesNb }: Props) { if (!movesNb) return null; return ( - + } label={`${Math.ceil(movesNb / 2)} moves`} diff --git a/src/sections/loadGame/gamePgnInput.tsx b/src/sections/loadGame/gamePgnInput.tsx index 7060bbd..6773386 100644 --- a/src/sections/loadGame/gamePgnInput.tsx +++ b/src/sections/loadGame/gamePgnInput.tsx @@ -37,7 +37,7 @@ export default function GamePgnInput({ pgn, setPgn }: Props) { component="label" startIcon={} > - Choose PGN File + Upload PGN File diff --git a/src/sections/loadGame/lichessInput.tsx b/src/sections/loadGame/lichessInput.tsx index 778f9de..44daea6 100644 --- a/src/sections/loadGame/lichessInput.tsx +++ b/src/sections/loadGame/lichessInput.tsx @@ -84,7 +84,7 @@ export default function LichessInput({ onSelect }: Props) { return ( <> - + ) : ( - + {games.map((game) => { const perspectiveUserColor = game.white.name.toLowerCase() === diff --git a/src/sections/loadGame/loadGameDialog.tsx b/src/sections/loadGame/loadGameDialog.tsx index c62324b..fcbe386 100644 --- a/src/sections/loadGame/loadGameDialog.tsx +++ b/src/sections/loadGame/loadGameDialog.tsx @@ -91,12 +91,14 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) { open={open} onClose={handleClose} maxWidth="md" - fullWidth slotProps={{ paper: { sx: { position: "fixed", top: 0, + width: "calc(100% - 10px)", + marginY: { xs: "3vh", sm: 5 }, + maxHeight: { xs: "calc(100% - 5vh)", sm: "calc(100% - 64px)" }, }, }, }} @@ -104,7 +106,7 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) { {setGame ? "Load a game" : "Add a game to your database"} - + - + Game origin