diff --git a/src/components/slider.tsx b/src/components/slider.tsx index 31c728b..5d00c57 100644 --- a/src/components/slider.tsx +++ b/src/components/slider.tsx @@ -24,7 +24,7 @@ export default function Slider({ diff --git a/src/hooks/useScreenSize.ts b/src/hooks/useScreenSize.ts new file mode 100644 index 0000000..9d91f03 --- /dev/null +++ b/src/hooks/useScreenSize.ts @@ -0,0 +1,27 @@ +import { useEffect, useState } from "react"; + +export const useScreenSize = () => { + const [screenSize, setScreenSize] = useState({ + width: window?.innerWidth ?? 500, + height: window?.innerHeight ?? 500, + }); + + useEffect(() => { + if (window === undefined) return; + + const handleResize = () => { + setScreenSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + return screenSize; +}; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index af7e9b0..66b353b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,9 +2,7 @@ import { useChessActions } from "@/hooks/useChess"; import Board from "@/sections/analysis/board"; import ReviewPanelBody from "@/sections/analysis/reviewPanelBody"; import ReviewPanelHeader from "@/sections/analysis/reviewPanelHeader"; -import AnalyzePanel from "@/sections/analysis/analyzePanel"; import ReviewPanelToolBar from "@/sections/analysis/reviewPanelToolbar"; -import ArrowOptions from "@/sections/analysis/arrowOptions"; import { boardAtom, boardOrientationAtom, @@ -84,17 +82,11 @@ export default function GameReport() { - - - - - - diff --git a/src/sections/analysis/reviewPanelBody/index.tsx b/src/sections/analysis/reviewPanelBody/index.tsx index 57297b6..c19c866 100644 --- a/src/sections/analysis/reviewPanelBody/index.tsx +++ b/src/sections/analysis/reviewPanelBody/index.tsx @@ -72,7 +72,7 @@ export default function ReviewPanelBody() { )} - + {engineLines.map((line) => ( ))} diff --git a/src/sections/analysis/reviewPanelBody/lineEvaluation.tsx b/src/sections/analysis/reviewPanelBody/lineEvaluation.tsx index 76bbcbb..5afee6f 100644 --- a/src/sections/analysis/reviewPanelBody/lineEvaluation.tsx +++ b/src/sections/analysis/reviewPanelBody/lineEvaluation.tsx @@ -36,7 +36,7 @@ export default function LineEvaluation({ line }: Props) { )} - + {showSkeleton ? ( ) : ( diff --git a/src/sections/analysis/analyzePanel.tsx b/src/sections/analysis/reviewPanelHeader/analyzeButton.tsx similarity index 55% rename from src/sections/analysis/analyzePanel.tsx rename to src/sections/analysis/reviewPanelHeader/analyzeButton.tsx index aad6413..02a65c0 100644 --- a/src/sections/analysis/analyzePanel.tsx +++ b/src/sections/analysis/reviewPanelHeader/analyzeButton.tsx @@ -1,22 +1,20 @@ import { Icon } from "@iconify/react"; -import { Grid } from "@mui/material"; import { useState } from "react"; import { engineDepthAtom, engineMultiPvAtom, gameAtom, gameEvalAtom, -} from "./states"; +} from "../states"; import { useAtomValue, useSetAtom } from "jotai"; import { getFens } from "@/lib/chess"; import { useGameDatabase } from "@/hooks/useGameDatabase"; import { LoadingButton } from "@mui/lab"; -import Slider from "@/components/slider"; import { useEngine } from "@/hooks/useEngine"; import { EngineName } from "@/types/enums"; import { logAnalyticsEvent } from "@/lib/firebase"; -export default function AnalyzePanel() { +export default function AnalyzeButton() { const engine = useEngine(EngineName.Stockfish16); const [evaluationInProgress, setEvaluationInProgress] = useState(false); const engineDepth = useAtomValue(engineDepthAtom); @@ -58,52 +56,25 @@ export default function AnalyzePanel() { }; return ( - + ) + } + onClick={handleAnalyze} + disabled={!readyToAnalyse} + loading={evaluationInProgress} + loadingPosition={evaluationInProgress ? "end" : undefined} + endIcon={ + evaluationInProgress && ( + + ) + } > - - - - - - - ) - } - onClick={handleAnalyze} - disabled={!readyToAnalyse} - loading={evaluationInProgress} - loadingPosition={evaluationInProgress ? "end" : undefined} - endIcon={ - evaluationInProgress && ( - - ) - } - > - {evaluationInProgress ? "Analyzing..." : "Analyze"} - - - + {evaluationInProgress ? "Analyzing..." : "Analyze"} + ); } diff --git a/src/sections/analysis/reviewPanelHeader/index.tsx b/src/sections/analysis/reviewPanelHeader/index.tsx index 09f63e1..b20397f 100644 --- a/src/sections/analysis/reviewPanelHeader/index.tsx +++ b/src/sections/analysis/reviewPanelHeader/index.tsx @@ -2,6 +2,8 @@ import { Icon } from "@iconify/react"; import { Grid, Typography } from "@mui/material"; import GamePanel from "./gamePanel"; import LoadGame from "./loadGame"; +import AnalyzeButton from "./analyzeButton"; +import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton"; export default function ReviewPanelHeader() { return ( @@ -37,6 +39,8 @@ export default function ReviewPanelHeader() { > + + ); diff --git a/src/sections/analysis/arrowOptions.tsx b/src/sections/engineSettings/arrowOptions.tsx similarity index 86% rename from src/sections/analysis/arrowOptions.tsx rename to src/sections/engineSettings/arrowOptions.tsx index 7768be2..1eab450 100644 --- a/src/sections/analysis/arrowOptions.tsx +++ b/src/sections/engineSettings/arrowOptions.tsx @@ -1,13 +1,11 @@ import { Checkbox, FormControlLabel, Grid } from "@mui/material"; -import { useAtom, useAtomValue } from "jotai"; +import { useAtom } from "jotai"; import { - gameEvalAtom, showBestMoveArrowAtom, showPlayerMoveArrowAtom, -} from "./states"; +} from "../analysis/states"; export default function ArrowOptions() { - const gameEval = useAtomValue(gameEvalAtom); const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom); const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom); @@ -25,7 +23,6 @@ export default function ArrowOptions() { setShowBestMove(checked)} - disabled={!gameEval} /> } label="Show best move green arrow" diff --git a/src/sections/engineSettings/engineSettingsButton.tsx b/src/sections/engineSettings/engineSettingsButton.tsx new file mode 100644 index 0000000..df36c5e --- /dev/null +++ b/src/sections/engineSettings/engineSettingsButton.tsx @@ -0,0 +1,20 @@ +import { Button } from "@mui/material"; +import { useState } from "react"; +import EngineSettingsDialog from "./engineSettingsDialog"; + +export default function EngineSettingsButton() { + const [openDialog, setOpenDialog] = useState(false); + + return ( + <> + + + setOpenDialog(false)} + /> + + ); +} diff --git a/src/sections/engineSettings/engineSettingsDialog.tsx b/src/sections/engineSettings/engineSettingsDialog.tsx new file mode 100644 index 0000000..83bcaf7 --- /dev/null +++ b/src/sections/engineSettings/engineSettingsDialog.tsx @@ -0,0 +1,95 @@ +import Slider from "@/components/slider"; +import { EngineName } from "@/types/enums"; +import { + MenuItem, + Select, + Button, + Dialog, + DialogTitle, + DialogContent, + FormControl, + InputLabel, + OutlinedInput, + DialogActions, + Typography, + Grid, +} from "@mui/material"; +import { engineDepthAtom, engineMultiPvAtom } from "../analysis/states"; +import ArrowOptions from "./arrowOptions"; + +interface Props { + open: boolean; + onClose: () => void; +} + +export default function EngineSettingsDialog({ open, onClose }: Props) { + return ( + + + Set engine parameters + + + + Only Stockfish 16 is available now, more engine choices will come ! + + + + + Engine + + + + + + + + + + + + + + + + ); +} + +const engineLabel: Record = { + [EngineName.Stockfish16]: "Stockfish 16", +};