Squashed commit of the following:

commit 4810de3b94b0ec0d7e9b8570de58f85792dffa80
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Sat Apr 6 01:37:42 2024 +0200

    fix : lint

commit 59e0b571e6089da6c086ab6340ec6a966b2e9739
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Sat Apr 6 01:36:17 2024 +0200

    feat : UI refacto

commit 56806a89dca5c7fb2c229b5a57404f9a856fac09
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Fri Apr 5 03:56:08 2024 +0200

    feat : add moves list

commit 9e3d2347882074c38ab183e642ecef8153dbfcde
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Thu Apr 4 02:18:52 2024 +0200

    feat : init branch, wip
This commit is contained in:
GuillaumeSD
2024-04-06 01:38:06 +02:00
parent d9b322d9fa
commit 3d0d1c41a8
18 changed files with 328 additions and 176 deletions

View File

@@ -0,0 +1,44 @@
import { Grid, Typography } from "@mui/material";
import { useGameDatabase } from "@/hooks/useGameDatabase";
import { useAtomValue } from "jotai";
import { gameAtom } from "../states";
export default function GamePanel() {
const { gameFromUrl } = useGameDatabase();
const game = useAtomValue(gameAtom);
const hasGameInfo = gameFromUrl !== undefined || !!game.header().White;
if (!hasGameInfo) return null;
return (
<Grid
item
container
xs={11}
justifyContent="space-evenly"
alignItems="center"
rowGap={1}
columnGap={3}
>
<Grid item container xs justifyContent="center" alignItems="center">
<Typography noWrap>
Site : {gameFromUrl?.site || game.header().Site || "?"}
</Typography>
</Grid>
<Grid item container xs justifyContent="center" alignItems="center">
<Typography noWrap>
Date : {gameFromUrl?.date || game.header().Date || "?"}
</Typography>
</Grid>
<Grid item container xs justifyContent="center" alignItems="center">
<Typography noWrap>
Result :{" "}
{gameFromUrl?.termination || game.header().Termination || "?"}
</Typography>
</Grid>
</Grid>
);
}

View File

@@ -1,62 +0,0 @@
import { Grid, Typography } from "@mui/material";
import { useGameDatabase } from "@/hooks/useGameDatabase";
import { useAtomValue } from "jotai";
import { gameAtom } from "../../states";
import PlayerInfo from "./playerInfo";
export default function GamePanel() {
const { gameFromUrl } = useGameDatabase();
const game = useAtomValue(gameAtom);
const hasGameInfo = gameFromUrl !== undefined || !!game.header().White;
if (!hasGameInfo) return null;
return (
<Grid
item
container
xs={12}
justifyContent="center"
alignItems="center"
gap={2}
>
<Grid item container xs={12} justifyContent="center" alignItems="center">
<PlayerInfo color="white" />
<Typography marginX={1.5}>vs</Typography>
<PlayerInfo color="black" />
</Grid>
<Grid
item
container
xs={11}
justifyContent="space-evenly"
alignItems="center"
rowGap={1}
columnGap={3}
>
<Grid item container xs justifyContent="center" alignItems="center">
<Typography noWrap>
Site : {gameFromUrl?.site || game.header().Site || "?"}
</Typography>
</Grid>
<Grid item container xs justifyContent="center" alignItems="center">
<Typography noWrap>
Date : {gameFromUrl?.date || game.header().Date || "?"}
</Typography>
</Grid>
<Grid item container xs justifyContent="center" alignItems="center">
<Typography noWrap>
Result :{" "}
{gameFromUrl?.termination || game.header().Termination || "?"}
</Typography>
</Grid>
</Grid>
</Grid>
);
}

View File

@@ -1,38 +0,0 @@
import { useGameDatabase } from "@/hooks/useGameDatabase";
import { Grid, Typography } from "@mui/material";
import { useAtomValue } from "jotai";
import { gameAtom } from "../../states";
interface Props {
color: "white" | "black";
}
export default function PlayerInfo({ color }: Props) {
const { gameFromUrl } = useGameDatabase();
const game = useAtomValue(gameAtom);
const rating =
gameFromUrl?.[color]?.rating ||
game.header()[color === "white" ? "WhiteElo" : "BlackElo"];
const playerName =
gameFromUrl?.[color]?.name ||
game.header()[color === "white" ? "White" : "Black"];
return (
<Grid
item
container
xs={5}
justifyContent={color === "white" ? "flex-end" : "flex-start"}
alignItems="center"
gap={0.5}
>
<Typography>
{playerName || (color === "white" ? "White" : "Black")}
</Typography>
<Typography>{rating ? `(${rating})` : "(?)"}</Typography>
</Grid>
);
}