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

refacto : load game

Browse Source
This commit is contained in:
GuillaumeSD
2025-06-10 02:42:43 +02:00
parent 839f87a2e8
commit 5e2d944513
15 changed files with 310 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,103 +11,13 @@ import {
import { Icon } from "@iconify/react";
import { useDebounce } from "@/hooks/useDebounce";
import { useQuery } from "@tanstack/react-query";
import { ChessComGameItem } from "./chess-com-game-item";
import { ChessComRawGameData, NormalizedGameData } from "@/types/chessCom";
import { useMemo, useState } from "react";
import { GameItem } from "./gameItem";
interface Props {
onSelect: (pgn: string, boardOrientation?: boolean) => void;
}
// Helper function to normalize Chess.com data
const normalizeChessComData = (
data: ChessComRawGameData
): NormalizedGameData => {
const timeControl = data.time_control + "s" || "unknown";
// Todo Convert from seconds to minutes to time + increment seconds
// Determine result from multiple sources
let gameResult = "*"; // default to ongoing
if (data.result) {
gameResult = data.result;
} else if (data.white?.result && data.black?.result) {
if (data.white.result === "win") {
gameResult = "1-0";
} else if (data.black.result === "win") {
gameResult = "0-1";
} else if (
(data.white.result === "stalemate" &&
data.black.result === "stalemate") ||
(data.white.result === "repetition" &&
data.black.result === "repetition") ||
(data.white.result === "insufficient" &&
data.black.result === "insufficient") ||
(data.white.result === "50move" && data.black.result === "50move") ||
(data.white.result === "agreed" && data.black.result === "agreed")
) {
gameResult = "1/2-1/2";
}
}
//* Function to count moves from PGN. Generated from claude..... :)
const countMovesFromPGN = (pgn: string) => {
if (!pgn) return 0;
// Split PGN into lines and find the moves section (after headers)
const lines = pgn.split("\n");
let movesSection = "";
let inMoves = false;
for (const line of lines) {
if (line.trim() === "" && !inMoves) {
inMoves = true;
continue;
}
if (inMoves) {
movesSection += line + " ";
}
}
// Remove comments in curly braces and square brackets
movesSection = movesSection
.replace(/\{[^}]*\}/g, "")
.replace(/\[[^\]]*\]/g, "");
// Remove result indicators
movesSection = movesSection.replace(/1-0|0-1|1\/2-1\/2|\*/g, "");
// Split by move numbers and count them
// Match pattern like "1." "58." etc.
const moveNumbers = movesSection.match(/\d+\./g);
return moveNumbers ? moveNumbers.length : 0;
};
return {
id: data.uuid || data.url?.split("/").pop() || data.id,
white: {
username: data.white?.username || "White",
rating: data.white?.rating || 0,
title: data.white?.title,
},
black: {
username: data.black?.username || "Black",
rating: data.black?.rating || 0,
title: data.black?.title,
},
result: gameResult,
timeControl: timeControl,
date: data.end_time
? new Date(data.end_time * 1000).toLocaleDateString()
: new Date().toLocaleDateString(),
opening: data.opening?.name || data.eco,
moves: data.pgn ? countMovesFromPGN(data.pgn) : 0,
url: data.url,
};
};
export default function ChessComInput({ onSelect }: Props) {
const [rawStoredValue, setStoredValues] = useLocalStorage<string>(
"chesscom-username",
@@ -239,24 +149,23 @@ export default function ChessComInput({ onSelect }: Props) {
) : (
<List sx={{ width: "100%", maxWidth: 800 }}>
{games.map((game) => {
const normalizedGame = normalizeChessComData(game);
const perspectiveUserColor =
normalizedGame.white.username.toLowerCase() ===
chessComUsername.toLowerCase()
game.white.name.toLowerCase() ===
debouncedUsername.toLowerCase()
? "white"
: "black";
return (
<ChessComGameItem
key={game.uuid}
{...normalizedGame}
<GameItem
key={game.id}
game={game}
perspectiveUserColor={perspectiveUserColor}
onClick={() => {
updateHistory(debouncedUsername);
const boardOrientation =
debouncedUsername.toLowerCase() !==
game.black?.username?.toLowerCase();
onSelect(game.pgn, boardOrientation);
debouncedUsername.toLowerCase() !==
game.black?.name?.toLowerCase();
onSelect(game.pgn, boardOrientation);
}}
/>
);

105
src/sections/loadGame/game-item-utils.tsx
View File

@@ -1,105 +0,0 @@
import { Icon } from "@iconify/react";
import { Chip, Tooltip, useTheme } from "@mui/material";
import React from "react";
export const GameResult: React.FC<{
result: string;
perspectiveUserColor: "white" | "black";
}> = ({ result, perspectiveUserColor }) => {
const theme = useTheme();
let color = theme.palette.text.secondary; // Neutral gray for ongoing
let bgColor = theme.palette.action.hover;
let icon = <Icon icon="material-symbols:play-circle-outline" />;
let label = "Game in Progress";
if (result === "1-0") {
// White wins
if (perspectiveUserColor === "white") {
color = theme.palette.success.main; // Success green
bgColor = `${theme.palette.success.main}1A`; // 10% opacity
icon = <Icon icon="material-symbols:emoji-events" />;
} else {
// perspectiveUserColor is black
color = theme.palette.error.main; // Confident red
bgColor = `${theme.palette.error.main}1A`; // 10% opacity
icon = <Icon icon="material-symbols:sentiment-dissatisfied" />; // A suitable icon for loss
}
label = "White Wins";
} else if (result === "0-1") {
// Black wins
if (perspectiveUserColor === "black") {
color = theme.palette.success.main; // Success green
bgColor = `${theme.palette.success.main}1A`; // 10% opacity
icon = <Icon icon="material-symbols:emoji-events" />;
} else {
// perspectiveUserColor is white
color = theme.palette.error.main; // Confident red
bgColor = `${theme.palette.error.main}1A`; // 10% opacity
icon = <Icon icon="material-symbols:sentiment-dissatisfied" />; // A suitable icon for loss
}
label = "Black Wins";
} else if (result === "1/2-1/2") {
color = theme.palette.info.main; // Balanced blue (using info for a neutral, distinct color)
bgColor = `${theme.palette.info.main}1A`; // 10% opacity
icon = <Icon icon="material-symbols:handshake" />;
label = "Draw";
}
return (
<Tooltip title={label}>
<Chip
icon={icon}
label={result}
size="small"
sx={{
color,
backgroundColor: bgColor,
fontWeight: "600",
minWidth: 65,
border: `1px solid ${color}20`,
"& .MuiChip-icon": {
color: color,
},
}}
/>
</Tooltip>
);
};
export const TimeControlChip: React.FC<{ timeControl: string }> = ({
timeControl,
}) => {
return (
<Tooltip title="Time Control">
<Chip
icon={<Icon icon="material-symbols:timer-outline" />}
label={timeControl}
size="small"
/>
</Tooltip>
);
};
export const MovesChip: React.FC<{ moves: number }> = ({ moves }) => {
return (
<Tooltip title="Number of Moves">
<Chip
icon={<Icon icon="heroicons:hashtag-20-solid" />}
label={`${Math.round(moves / 2)} moves`}
size="small"
/>
</Tooltip>
);
};
export const DateChip: React.FC<{ date: string }> = ({ date }) => {
return (
<Tooltip title="Date Played">
<Chip
icon={<Icon icon="material-symbols:calendar-today" />}
label={date}
size="small"
/>
</Tooltip>
);
};

20
src/sections/loadGame/gameItem/dateChip.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Icon } from "@iconify/react";
import { Chip, Tooltip } from "@mui/material";
interface Props {
date?: string;
}
export default function DateChip({ date }: Props) {
if (!date) return null;
return (
<Tooltip title="Date Played">
<Chip
icon={<Icon icon="material-symbols:calendar-today" />}
label={date}
size="small"
/>
</Tooltip>
);
}

86
src/sections/loadGame/gameItem/gameResultChip.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { Icon } from "@iconify/react";
import { Chip, Theme, Tooltip, useTheme } from "@mui/material";
import React from "react";
interface Props {
result?: string;
perspectiveUserColor: "white" | "black";
}
export default function GameResultChip({
result,
perspectiveUserColor,
}: Props) {
const theme = useTheme();
const { label, color, bgColor, icon } = getResultSpecs(
theme,
perspectiveUserColor,
result
);
return (
<Tooltip title={label}>
<Chip
icon={icon}
label={result}
size="small"
sx={{
color,
backgroundColor: bgColor,
fontWeight: "600",
minWidth: icon ? 65 : 40,
border: `1px solid ${color}20`,
"& .MuiChip-icon": {
color: color,
},
}}
/>
</Tooltip>
);
}
const getResultSpecs = (
theme: Theme,
perspectiveUserColor: "white" | "black",
result?: string
) => {
if (
(result === "1-0" && perspectiveUserColor === "white") ||
(result === "0-1" && perspectiveUserColor === "black")
) {
return {
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" />,
};
}
if (
(result === "1-0" && perspectiveUserColor === "black") ||
(result === "0-1" && perspectiveUserColor === "white")
) {
return {
label: result === "1-0" ? "White won" : "Black won",
color: theme.palette.error.main,
bgColor: `${theme.palette.error.main}1A`,
};
}
if (result === "1/2-1/2") {
return {
label: "Draw",
color: theme.palette.info.main,
bgColor: `${theme.palette.info.main}1A`,
icon: <Icon icon="material-symbols:handshake" />,
};
}
return {
label: "Game in Progress",
color: theme.palette.text.secondary,
bgColor: theme.palette.action.hover,
icon: <Icon icon="material-symbols:play-circle-outline" />,
};
};

63
src/sections/loadGame/chess-com-game-item.tsx → src/sections/loadGame/gameItem/index.tsx
View File

@@ -5,55 +5,26 @@ import {
Typography,
Box,
useTheme,
IconButton,
Tooltip,
} from "@mui/material";
import { Icon } from "@iconify/react";
import {
DateChip,
GameResult,
MovesChip,
TimeControlChip,
} from "./game-item-utils";
import { LoadedGame } from "@/types/game";
import TimeControlChip from "./timeControlChip";
import MovesNbChip from "./movesNbChip";
import DateChip from "./dateChip";
import GameResultChip from "./gameResultChip";
type ChessComPlayer = {
username: string;
rating: number;
title?: string;
};
type ChessComGameProps = {
id: string;
white: ChessComPlayer;
black: ChessComPlayer;
result: string;
timeControl: string;
date: string;
opening?: string;
moves?: number;
url: string;
interface Props {
game: LoadedGame;
onClick?: () => void;
perspectiveUserColor: "white" | "black";
};
}
export const ChessComGameItem: React.FC<ChessComGameProps> = ({
white,
black,
result,
timeControl,
date,
moves,
url,
export const GameItem: React.FC<Props> = ({
game,
onClick,
perspectiveUserColor,
}) => {
const theme = useTheme();
const formatPlayerName = (player: ChessComPlayer) => {
return player.title
? `${player.title} ${player.username}`
: player.username;
};
const { white, black, result, timeControl, date, movesNb } = game;
const whiteWon = result === "1-0";
const blackWon = result === "0-1";
@@ -122,7 +93,7 @@ export const ChessComGameItem: React.FC<ChessComGameProps> = ({
{formatPlayerName(black)} ({black.rating})
</Typography>
<GameResult
<GameResultChip
result={result}
perspectiveUserColor={perspectiveUserColor}
/>
@@ -138,14 +109,14 @@ export const ChessComGameItem: React.FC<ChessComGameProps> = ({
}}
>
<TimeControlChip timeControl={timeControl} />
{moves && moves > 0 && <MovesChip moves={moves} />}
<MovesNbChip movesNb={movesNb} />
<DateChip date={date} />
</Box>
}
sx={{ mr: 2 }}
/>
<Box sx={{ display: "flex", alignItems: "center", ml: "auto" }}>
{/* <Box sx={{ display: "flex", alignItems: "center", ml: "auto" }}>
<Tooltip title="View on Chess.com">
<IconButton
onClick={(e) => {
@@ -165,7 +136,11 @@ export const ChessComGameItem: React.FC<ChessComGameProps> = ({
<Icon icon="material-symbols:open-in-new" />
</IconButton>
</Tooltip>
</Box>
</Box> */}
</ListItem>
);
};
const formatPlayerName = (player: LoadedGame["white"]) => {
return player.title ? `${player.title} ${player.name}` : player.name;
};

20
src/sections/loadGame/gameItem/movesNbChip.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Icon } from "@iconify/react";
import { Chip, Tooltip } from "@mui/material";
interface Props {
movesNb?: number;
}
export default function MovesNbChip({ movesNb }: Props) {
if (!movesNb) return null;
return (
<Tooltip title="Number of Moves">
<Chip
icon={<Icon icon="heroicons:hashtag-20-solid" />}
label={`${Math.ceil(movesNb / 2)} moves`}
size="small"
/>
</Tooltip>
);
}

20
src/sections/loadGame/gameItem/timeControlChip.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Icon } from "@iconify/react";
import { Chip, Tooltip } from "@mui/material";
interface Props {
timeControl?: string;
}
export default function TimeControlChip({ timeControl }: Props) {
if (!timeControl) return null;
return (
<Tooltip title="Time Control">
<Chip
icon={<Icon icon="material-symbols:timer-outline" />}
label={timeControl}
size="small"
/>
</Tooltip>
);
}

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

@@ -10,16 +10,15 @@ interface Props {
export default function GamePgnInput({ pgn, setPgn }: Props) {
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file) {
const reader = new FileReader();
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
const fileContent = e.target?.result as string;
setPgn(fileContent);
};
reader.onload = (e) => {
const fileContent = e.target?.result as string;
setPgn(fileContent);
};
reader.readAsText(file); // Read the file as text
}
reader.readAsText(file);
};
return (
@@ -39,12 +38,7 @@ export default function GamePgnInput({ pgn, setPgn }: Props) {
startIcon={<Icon icon="material-symbols:upload" />}
>
Choose PGN File
<input
type="file"
hidden // Hide the default file input
accept=".pgn" // Only allow .pgn files
onChange={handleFileChange}
/>
<input type="file" hidden accept=".pgn" onChange={handleFileChange} />
</Button>
</FormControl>
);

179
src/sections/loadGame/lichess-game-item.tsx
View File

@@ -1,179 +0,0 @@
import type React from "react";
import {
ListItem,
ListItemText,
Typography,
Chip,
Box,
useTheme,
IconButton,
Tooltip,
} from "@mui/material";
import { Icon } from "@iconify/react";
import {
DateChip,
GameResult,
MovesChip,
TimeControlChip,
} from "./game-item-utils";
type LichessPlayer = {
username: string;
rating: number;
title?: string;
};
type LichessGameProps = {
id: string;
white: LichessPlayer;
black: LichessPlayer;
result: string;
timeControl: string;
date: string;
opening?: string;
moves?: number;
url: string;
onClick?: () => void;
perspectiveUserColor: "white" | "black";
};
export const LichessGameItem: React.FC<LichessGameProps> = ({
white,
black,
result,
timeControl,
date,
perspectiveUserColor,
moves,
url,
onClick,
}) => {
const theme = useTheme();
// If it is a titled played append the title to the start of the name
const formatPlayerName = (player: LichessPlayer) => {
return player.title
? `${player.title} ${player.username}`
: player.username;
};
const whiteWon = result === "1-0";
const blackWon = result === "0-1";
return (
<ListItem
alignItems="flex-start"
sx={{
borderRadius: 2,
mb: 1.5,
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",
}}
onClick={onClick}
>
<ListItemText
primary={
<Box
sx={{
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: 1.5,
mb: 1,
}}
>
<Typography
variant="subtitle1"
component="span"
sx={{
fontWeight: "700",
color: whiteWon
? theme.palette.success.main
: theme.palette.text.primary,
opacity: blackWon ? 0.7 : 1,
}}
>
{formatPlayerName(white)} ({white.rating})
</Typography>
<Typography
variant="body2"
component="span"
sx={{ color: theme.palette.text.secondary, fontWeight: "500" }}
>
vs
</Typography>
<Typography
variant="subtitle1"
component="span"
sx={{
fontWeight: "700",
color: blackWon
? theme.palette.success.main
: theme.palette.text.primary,
opacity: whiteWon ? 0.7 : 1,
}}
>
{formatPlayerName(black)} ({black.rating})
</Typography>
<GameResult
result={result}
perspectiveUserColor={perspectiveUserColor}
/>
</Box>
}
secondary={
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: 1,
alignItems: "center",
}}
>
<TimeControlChip timeControl={timeControl} />
{moves && moves > 0 && <MovesChip moves={moves} />}
<DateChip date={date} />
<Chip
icon={<Icon icon="simple-icons:lichess" />}
label="Lichess"
size="small"
/>
</Box>
}
sx={{ mr: 2 }}
/>
<Box sx={{ display: "flex", alignItems: "center", ml: "auto" }}>
<Tooltip title="View on Lichess">
<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>
);
};

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

@@ -1,5 +1,3 @@
"use client";
import { useLocalStorage } from "@/hooks/useLocalStorage";
import { getLichessUserRecentGames } from "@/lib/lichess";
import {
@@ -13,44 +11,13 @@ import {
import { Icon } from "@iconify/react";
import { useDebounce } from "@/hooks/useDebounce";
import { useQuery } from "@tanstack/react-query";
import { LichessGameItem } from "./lichess-game-item";
import { LichessRawGameData, NormalizedLichessGameData } from "@/types/lichess";
import { useMemo, useState } from "react";
import { GameItem } from "./gameItem";
interface Props {
onSelect: (pgn: string, boardOrientation?: boolean) => void;
}
// Helper function to normalize Lichess data
const normalizeLichessData = (
data: LichessRawGameData
): NormalizedLichessGameData => ({
id: data.id,
white: {
username: data.players.white.user?.name || "Anonymous",
rating: data.players.white.rating,
title: data.players.white.user?.title,
},
black: {
username: data.players.black.user?.name || "Anonymous",
rating: data.players.black.rating,
title: data.players.black.user?.title,
},
result:
data.status === "draw"
? "1/2-1/2"
: data.winner
? data.winner === "white"
? "1-0"
: "0-1"
: "*",
timeControl: `${Math.floor(data.clock?.initial / 60 || 0)}+${data.clock?.increment || 0}`,
date: new Date(data.createdAt || data.lastMoveAt).toLocaleDateString(),
opening: data.opening?.name,
moves: data.moves?.split(" ").length || 0,
url: `https://lichess.org/${data.id}`,
});
export default function LichessInput({ onSelect }: Props) {
const [rawStoredValue, setStoredValues] = useLocalStorage<string>(
"lichess-username",
@@ -181,24 +148,23 @@ export default function LichessInput({ onSelect }: Props) {
) : (
<List sx={{ width: "100%", maxWidth: 800 }}>
{games.map((game) => {
const normalizedGame = normalizeLichessData(game);
const perspectiveUserColor =
normalizedGame.white.username.toLowerCase() ===
lichessUsername.toLowerCase()
game.white.name.toLowerCase() ===
debouncedUsername.toLowerCase()
? "white"
: "black";
return (
<LichessGameItem
<GameItem
key={game.id}
{...normalizedGame}
game={game}
perspectiveUserColor={perspectiveUserColor}
onClick={() => {
const boardOrientation =
debouncedUsername.toLowerCase() !==
game.black.name.toLowerCase();
onSelect(game.pgn, boardOrientation);
updateHistory(debouncedUsername);
const boardOrientation =
debouncedUsername.toLowerCase() !==
game.players?.black?.user?.name?.toLowerCase();
onSelect(game.pgn, boardOrientation);
}}
/>
);