haunter/chesskit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : enhance load game UI

Browse Source
This commit is contained in:
GuillaumeSD
2025-06-16 05:01:52 +02:00
parent 5e2d944513
commit f906c81c67
10 changed files with 52 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/chessCom.ts
View File

@@ -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,
};
};

6
src/sections/loadGame/chessComInput.tsx
View File

@@ -85,7 +85,7 @@ export default function ChessComInput({ onSelect }: Props) {
return (
<>
<FormControl sx={{ m: 1, width: 300 }}>
<FormControl sx={{ my: 1, width: 300 }}>
<Autocomplete
freeSolo
options={storedValues}
@@ -147,7 +147,7 @@ export default function ChessComInput({ onSelect }: Props) {
No games found. Please check your username.
</span>
) : (
<List sx={{ width: "100%", maxWidth: 800 }}>
<List sx={{ width: "100%" }}>
{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);
}}
/>
);

9
src/sections/loadGame/gameItem/gameResultChip.tsx
View File

@@ -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 (
<Tooltip title={label}>
<Chip
icon={icon}
label={result}
size="small"
sx={{
color,
backgroundColor: bgColor,
fontWeight: "600",
minWidth: icon ? 65 : 40,
minWidth: { sm: 40 },
border: `1px solid ${color}20`,
"& .MuiChip-icon": {
color: color,
@@ -53,7 +51,6 @@ const getResultSpecs = (
label: result === "1-0" ? "White won" : "Black won",
color: theme.palette.success.main,
bgColor: `${theme.palette.success.main}1A`,
icon: <Icon icon="material-symbols:emoji-events" />,
};
}
@@ -73,7 +70,6 @@ const getResultSpecs = (
label: "Draw",
color: theme.palette.info.main,
bgColor: `${theme.palette.info.main}1A`,
icon: <Icon icon="material-symbols:handshake" />,
};
}
@@ -81,6 +77,5 @@ const getResultSpecs = (
label: "Game in Progress",
color: theme.palette.text.secondary,
bgColor: theme.palette.action.hover,
icon: <Icon icon="material-symbols:play-circle-outline" />,
};
};

44
src/sections/loadGame/gameItem/index.tsx
View File

@@ -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<Props> = ({
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}
>
<ListItemText
disableTypography
primary={
<Box
sx={{
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: 1.5,
gap: { xs: 1, sm: 1.5 },
mb: 1,
}}
>
<Typography
variant="subtitle1"
component="span"
noWrap
sx={{
fontWeight: "700",
color: whiteWon
? theme.palette.success.main
: theme.palette.text.primary,
opacity: blackWon ? 0.7 : 1,
opacity: whiteWon ? 1 : blackWon ? 0.7 : 0.8,
}}
>
{formatPlayerName(white)} ({white.rating})
@@ -74,7 +74,10 @@ export const GameItem: React.FC<Props> = ({
<Typography
variant="body2"
component="span"
sx={{ color: theme.palette.text.secondary, fontWeight: "500" }}
sx={{
color: theme.palette.text.secondary,
fontWeight: "500",
}}
>
vs
</Typography>
@@ -82,12 +85,13 @@ export const GameItem: React.FC<Props> = ({
<Typography
variant="subtitle1"
component="span"
noWrap
sx={{
fontWeight: "700",
color: blackWon
? theme.palette.success.main
: theme.palette.text.primary,
opacity: whiteWon ? 0.7 : 1,
opacity: blackWon ? 1 : whiteWon ? 0.7 : 0.8,
}}
>
{formatPlayerName(black)} ({black.rating})
@@ -103,7 +107,6 @@ export const GameItem: React.FC<Props> = ({
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: 1,
alignItems: "center",
}}
@@ -113,30 +116,7 @@ export const GameItem: React.FC<Props> = ({
<DateChip date={date} />
</Box>
}
sx={{ mr: 2 }}
/>
{/* <Box sx={{ display: "flex", alignItems: "center", ml: "auto" }}>
<Tooltip title="View on Chess.com">
<IconButton
onClick={(e) => {
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",
}}
>
<Icon icon="material-symbols:open-in-new" />
</IconButton>
</Tooltip>
</Box> */}
</ListItem>
);
};

2
src/sections/loadGame/gameItem/movesNbChip.tsx
View File

@@ -9,7 +9,7 @@ export default function MovesNbChip({ movesNb }: Props) {
if (!movesNb) return null;
return (
<Tooltip title="Number of Moves">
<Tooltip title="Number of Moves" sx={{ overflow: "hidden" }}>
<Chip
icon={<Icon icon="heroicons:hashtag-20-solid" />}
label={`${Math.ceil(movesNb / 2)} moves`}

2
src/sections/loadGame/gamePgnInput.tsx
View File

@@ -37,7 +37,7 @@ export default function GamePgnInput({ pgn, setPgn }: Props) {
component="label"
startIcon={<Icon icon="material-symbols:upload" />}
>
Choose PGN File
Upload PGN File
<input type="file" hidden accept=".pgn" onChange={handleFileChange} />
</Button>
</FormControl>

4
src/sections/loadGame/lichessInput.tsx
View File

@@ -84,7 +84,7 @@ export default function LichessInput({ onSelect }: Props) {
return (
<>
<FormControl sx={{ m: 1, width: 300 }}>
<FormControl sx={{ my: 1, width: 300 }}>
<Autocomplete
freeSolo
options={storedValues}
@@ -146,7 +146,7 @@ export default function LichessInput({ onSelect }: Props) {
No games found. Please check your username.
</span>
) : (
<List sx={{ width: "100%", maxWidth: 800 }}>
<List sx={{ width: "100%" }}>
{games.map((game) => {
const perspectiveUserColor =
game.white.name.toLowerCase() ===

8
src/sections/loadGame/loadGameDialog.tsx
View File

@@ -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) {
<DialogTitle marginY={1} variant="h5">
{setGame ? "Load a game" : "Add a game to your database"}
</DialogTitle>
<DialogContent>
<DialogContent sx={{ padding: { xs: 2, md: 3 } }}>
<Grid
container
marginTop={1}
@@ -112,7 +114,7 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
justifyContent="start"
rowGap={2}
>
<FormControl sx={{ m: 1, width: 150 }}>
<FormControl sx={{ my: 1, mr: 2, width: 150 }}>
<InputLabel id="dialog-select-label">Game origin</InputLabel>
<Select
labelId="dialog-select-label"