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

design : mobile review panel UI rework

Browse Source
This commit is contained in:
GuillaumeSD
2024-04-12 03:31:52 +02:00
parent daaf145fa9
commit 56b267762e
3 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/board/capturedPieces.tsx
View File

@@ -16,7 +16,6 @@ export default function CapturedPieces({ gameAtom, color }: Props) {
const game = useAtomValue(gameAtom); const game = useAtomValue(gameAtom);
const cssProps = useMemo(() => { const cssProps = useMemo(() => {
const capturedPieces = getCapturedPieces(game.fen(), color); const capturedPieces = getCapturedPieces(game.fen(), color);
console.log(capturedPieces, color);
return getCapturedPiecesCSSProps(capturedPieces, color); return getCapturedPiecesCSSProps(capturedPieces, color);
}, [game, color]); }, [game, color]);

36
src/pages/index.tsx
View File

@@ -11,7 +11,7 @@ import {
} from "@/sections/analysis/states"; } from "@/sections/analysis/states";
import { Divider, Grid, useMediaQuery, useTheme } from "@mui/material"; import { Divider, Grid, useMediaQuery, useTheme } from "@mui/material";
import { Chess } from "chess.js"; import { Chess } from "chess.js";
import { useSetAtom } from "jotai"; import { useAtom, useSetAtom } from "jotai";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect } from "react"; import { useEffect } from "react";
import ClassificationPanel from "@/sections/analysis/reviewPanelBody/classificationPanel"; import ClassificationPanel from "@/sections/analysis/reviewPanelBody/classificationPanel";
@@ -22,7 +22,7 @@ export default function GameReport() {
const { reset: resetBoard } = useChessActions(boardAtom); const { reset: resetBoard } = useChessActions(boardAtom);
const { setPgn: setGamePgn } = useChessActions(gameAtom); const { setPgn: setGamePgn } = useChessActions(gameAtom);
const setGameEval = useSetAtom(gameEvalAtom); const [gameEval, setGameEval] = useAtom(gameEvalAtom);
const setBoardOrientation = useSetAtom(boardOrientationAtom); const setBoardOrientation = useSetAtom(boardOrientationAtom);
const router = useRouter(); const router = useRouter();
@@ -72,17 +72,37 @@ export default function GameReport() {
display="grid" display="grid"
gridTemplateRows="repeat(4, auto) fit-content(100%)" gridTemplateRows="repeat(4, auto) fit-content(100%)"
> >
{isLgOrGreater ? <ReviewPanelHeader /> : <ReviewPanelToolBar />} {isLgOrGreater ? (
<>
<ReviewPanelHeader key="analysis-panel-header" />
<Divider sx={{ marginX: "5%" }} /> <Divider sx={{ marginX: "5%" }} />
<ReviewPanelBody /> <ReviewPanelBody key="review-panel-body" />
<ClassificationPanel /> <ClassificationPanel key="review-panel-class" />
<Divider sx={{ marginX: "5%" }} /> <Divider sx={{ marginX: "5%" }} />
{isLgOrGreater ? <ReviewPanelToolBar /> : <ReviewPanelHeader />} <ReviewPanelToolBar key="review-panel-toolbar" />
</>
) : (
<>
<ReviewPanelToolBar key="review-panel-toolbar" />
<Divider sx={{ marginX: "5%" }} />
{!gameEval && <ReviewPanelHeader key="analysis-panel-header" />}
{!gameEval && <Divider sx={{ marginX: "5%" }} />}
<ReviewPanelBody key="review-panel-body" />
<ClassificationPanel key="review-panel-class" />
{gameEval && <Divider sx={{ marginX: "5%" }} />}
{gameEval && <ReviewPanelHeader key="analysis-panel-header" />}
</>
)}
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>

4
src/sections/analysis/reviewPanelBody/index.tsx
View File

@@ -83,7 +83,9 @@ export default function ReviewPanelBody() {
{isGameOver && ( {isGameOver && (
<Grid item xs={12}> <Grid item xs={12}>
<Typography align="center">Game is over</Typography> <Typography align="center" fontSize="0.9rem">
Game is over
</Typography>
</Grid> </Grid>
)} )}