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:
44
src/sections/analysis/reviewPanelHeader/gamePanel.tsx
Normal file
44
src/sections/analysis/reviewPanelHeader/gamePanel.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user