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

style : fix gap & margin & padding

Browse Source
This commit is contained in:
GuillaumeSD
2024-02-25 02:13:06 +01:00
parent 892004f0d0
commit 8d15b7e1a2
15 changed files with 104 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/sections/analysis/board/evaluationBar.tsx
View File

@@ -1,12 +1,11 @@
import { Box, Grid, Typography } from "@mui/material";
import { useAtomValue } from "jotai";
import { useEffect, useState } from "react";
import { boardAtom, boardOrientationAtom } from "../states";
import { boardAtom, boardOrientationAtom, currentMoveAtom } from "../states";
import { getEvaluationBarValue } from "@/lib/chess";
import { useCurrentMove } from "@/hooks/useCurrentMove";
interface Props {
height?: number;
height: number;
}
export default function EvaluationBar({ height }: Props) {
@@ -16,7 +15,7 @@ export default function EvaluationBar({ height }: Props) {
});
const board = useAtomValue(boardAtom);
const boardOrientation = useAtomValue(boardOrientationAtom);
const currentMove = useCurrentMove();
const currentMove = useAtomValue(currentMoveAtom);
useEffect(() => {
const bestLine = currentMove?.eval?.lines[0];
@@ -32,12 +31,11 @@ export default function EvaluationBar({ height }: Props) {
container
justifyContent="center"
alignItems="center"
xs={1}
width="2rem"
height={height}
paddingX={3}
>
<Box
sx={{ backgroundColor: boardOrientation ? "black" : "white" }}
sx={{ backgroundColor: boardOrientation ? "secondary.main" : "white" }}
height={`${
boardOrientation
? 100 - evalBar.whiteBarPercentage
@@ -59,7 +57,7 @@ export default function EvaluationBar({ height }: Props) {
</Box>
<Box
sx={{ backgroundColor: boardOrientation ? "white" : "black" }}
sx={{ backgroundColor: boardOrientation ? "white" : "secondary.main" }}
height={`${
boardOrientation
? evalBar.whiteBarPercentage

21
src/sections/analysis/board/index.tsx
View File

@@ -4,12 +4,12 @@ import { useAtomValue } from "jotai";
import {
boardAtom,
boardOrientationAtom,
currentMoveAtom,
showBestMoveArrowAtom,
showPlayerMoveArrowAtom,
} from "../states";
import { Arrow, Square } from "react-chessboard/dist/chessboard/types";
import { useChessActions } from "@/hooks/useChess";
import { useCurrentMove } from "@/hooks/useCurrentMove";
import { useMemo, useRef } from "react";
import PlayerInfo from "./playerInfo";
import EvaluationBar from "./evaluationBar";
@@ -21,7 +21,7 @@ export default function Board() {
const showBestMoveArrow = useAtomValue(showBestMoveArrowAtom);
const showPlayerMoveArrow = useAtomValue(showPlayerMoveArrowAtom);
const boardActions = useChessActions(boardAtom);
const currentMove = useCurrentMove();
const currentMove = useAtomValue(currentMoveAtom);
const onPieceDrop = (source: Square, target: Square): boolean => {
try {
@@ -71,16 +71,24 @@ export default function Board() {
}, [currentMove, showBestMoveArrow, showPlayerMoveArrow]);
return (
<Grid item container justifyContent="center" alignItems="center" xs={12}>
<EvaluationBar height={boardRef?.current?.offsetWidth} />
<Grid
item
container
justifyContent="center"
alignItems="center"
xs={12}
wrap="nowrap"
>
<EvaluationBar height={boardRef?.current?.offsetHeight || 800} />
<Grid
item
container
rowGap={2}
rowGap={1}
justifyContent="center"
alignItems="center"
xs={11}
paddingLeft={2}
xs
>
<PlayerInfo color={boardOrientation ? "black" : "white"} />
@@ -90,6 +98,7 @@ export default function Board() {
justifyContent="center"
alignItems="center"
ref={boardRef}
xs={12}
>
<Chessboard
id="AnalysisBoard"

11
src/sections/analysis/board/playerInfo.tsx
View File

@@ -16,15 +16,8 @@ export default function PlayerInfo({ color }: Props) {
game.header()[color === "white" ? "White" : "Black"];
return (
<Grid
item
container
xs={12}
justifyContent="center"
alignItems="center"
gap={1}
>
<Typography variant="h4">
<Grid item container xs={12} justifyContent="center" alignItems="center">
<Typography variant="h5">
{playerName || (color === "white" ? "White" : "Black")}
</Typography>
</Grid>

15
src/sections/analysis/reviewPanelBody.tsx
View File

@@ -1,5 +1,5 @@
import { Icon } from "@iconify/react";
import { Divider, Grid, List, Typography } from "@mui/material";
import { Grid, List, Typography } from "@mui/material";
import { useAtomValue } from "jotai";
import { boardAtom, engineMultiPvAtom, gameAtom } from "./states";
import LineEvaluation from "./lineEvaluation";
@@ -29,9 +29,14 @@ export default function ReviewPanelBody() {
: linesSkeleton;
return (
<>
<Divider sx={{ width: "90%", marginY: 3 }} />
<Grid
item
container
xs={12}
justifyContent="center"
alignItems="center"
gap={2}
>
<Grid
item
container
@@ -73,6 +78,6 @@ export default function ReviewPanelBody() {
))}
</List>
</Grid>
</>
</Grid>
);
}

11
src/sections/analysis/reviewPanelHeader/analyzePanel.tsx
View File

@@ -57,7 +57,7 @@ export default function AnalyzePanel() {
xs={12}
justifyContent="center"
alignItems="center"
rowGap={4}
rowGap={3}
>
<Slider
label="Maximum depth"
@@ -75,14 +75,7 @@ export default function AnalyzePanel() {
xs={6}
/>
<Grid
item
container
xs={12}
justifyContent="center"
alignItems="center"
marginTop={1}
>
<Grid item container xs={12} justifyContent="center" alignItems="center">
<LoadingButton
variant="contained"
size="large"

14
src/sections/analysis/reviewPanelHeader/gamePanel/index.tsx
View File

@@ -12,14 +12,7 @@ export default function GamePanel() {
if (!hasGameInfo) {
return (
<Grid
item
container
xs={12}
justifyContent="center"
alignItems="center"
marginY={1}
>
<Grid item container xs={12} justifyContent="center" alignItems="center">
<Typography variant="h6">No game loaded</Typography>
</Grid>
);
@@ -32,8 +25,7 @@ export default function GamePanel() {
xs={12}
justifyContent="center"
alignItems="center"
gap={3}
marginY={1}
gap={2}
>
<Grid item container xs={12} justifyContent="center" alignItems="center">
<PlayerInfo color="white" />
@@ -51,7 +43,7 @@ export default function GamePanel() {
xs={10}
justifyContent="space-evenly"
alignItems="center"
gap={3}
gap={2}
>
<Typography>
Site : {gameFromUrl?.site || game.header().Site || "?"}

9
src/sections/analysis/reviewPanelHeader/index.tsx
View File

@@ -1,6 +1,5 @@
import { Icon } from "@iconify/react";
import { Divider, Grid, Typography } from "@mui/material";
import AnalyzePanel from "./analyzePanel";
import { Grid, Typography } from "@mui/material";
import GamePanel from "./gamePanel";
import LoadGame from "./loadGame";
@@ -34,15 +33,11 @@ export default function ReviewPanelHeader() {
xs={12}
justifyContent="center"
alignItems="center"
gap={4}
gap={3}
>
<GamePanel />
<LoadGame />
</Grid>
<Divider sx={{ width: "90%", marginY: 3 }} />
<AnalyzePanel />
</Grid>
);
}

1
src/sections/analysis/reviewPanelToolbar/arrowOptions.tsx
View File

@@ -18,7 +18,6 @@ export default function ArrowOptions() {
justifyContent="space-evenly"
alignItems="center"
xs={12}
marginY={3}
gap={3}
>
<FormControlLabel

61
src/sections/analysis/reviewPanelToolbar/index.tsx
View File

@@ -1,4 +1,4 @@
import { Divider, Grid, IconButton, Tooltip } from "@mui/material";
import { Grid, IconButton, Tooltip } from "@mui/material";
import { Icon } from "@iconify/react";
import { useAtomValue } from "jotai";
import { boardAtom } from "../states";
@@ -7,7 +7,6 @@ import FlipBoardButton from "./flipBoardButton";
import NextMoveButton from "./nextMoveButton";
import GoToLastPositionButton from "./goToLastPositionButton";
import SaveButton from "./saveButton";
import ArrowOptions from "./arrowOptions";
export default function ReviewPanelToolBar() {
const board = useAtomValue(boardAtom);
@@ -16,42 +15,36 @@ export default function ReviewPanelToolBar() {
const boardHistory = board.history();
return (
<>
<Divider sx={{ width: "90%", marginY: 3 }} />
<Grid container item justifyContent="center" alignItems="center" xs={12}>
<FlipBoardButton />
<Grid container item justifyContent="center" alignItems="center" xs={12}>
<FlipBoardButton />
<Tooltip title="Reset board">
<Grid>
<IconButton
onClick={() => boardActions.reset()}
disabled={boardHistory.length === 0}
>
<Icon icon="ri:skip-back-line" />
</IconButton>
</Grid>
</Tooltip>
<Tooltip title="Reset board">
<Grid>
<IconButton
onClick={() => boardActions.reset()}
disabled={boardHistory.length === 0}
>
<Icon icon="ri:skip-back-line" />
</IconButton>
</Grid>
</Tooltip>
<Tooltip title="Go to previous move">
<Grid>
<IconButton
onClick={() => boardActions.undo()}
disabled={boardHistory.length === 0}
>
<Icon icon="ri:arrow-left-s-line" height={30} />
</IconButton>
</Grid>
</Tooltip>
<Tooltip title="Go to previous move">
<Grid>
<IconButton
onClick={() => boardActions.undo()}
disabled={boardHistory.length === 0}
>
<Icon icon="ri:arrow-left-s-line" height={30} />
</IconButton>
</Grid>
</Tooltip>
<NextMoveButton />
<NextMoveButton />
<GoToLastPositionButton />
<GoToLastPositionButton />
<SaveButton />
</Grid>
<ArrowOptions />
</>
<SaveButton />
</Grid>
);
}

3
src/sections/analysis/states.ts
View File

@@ -1,10 +1,11 @@
import { GameEval } from "@/types/eval";
import { CurrentMove, GameEval } from "@/types/eval";
import { Chess } from "chess.js";
import { atom } from "jotai";
export const gameEvalAtom = atom<GameEval | undefined>(undefined);
export const gameAtom = atom(new Chess());
export const boardAtom = atom(new Chess());
export const currentMoveAtom = atom<CurrentMove>({});
export const boardOrientationAtom = atom(true);
export const showBestMoveArrowAtom = atom(true);