diff --git a/src/hooks/useScreenSize.ts b/src/hooks/useScreenSize.ts index 9d91f03..7e8f8ff 100644 --- a/src/hooks/useScreenSize.ts +++ b/src/hooks/useScreenSize.ts @@ -2,18 +2,30 @@ import { useEffect, useState } from "react"; export const useScreenSize = () => { const [screenSize, setScreenSize] = useState({ - width: window?.innerWidth ?? 500, - height: window?.innerHeight ?? 500, + width: document?.querySelector(".MuiGrid-root")?.clientWidth ?? 500, + height: window?.innerHeight - 120 ?? 500, }); useEffect(() => { - if (window === undefined) return; + const mainDiv = document?.querySelector(".MuiGrid-root"); + if (!mainDiv) return; + const observer = new ResizeObserver(() => + setScreenSize((prev) => ({ ...prev, width: mainDiv.clientWidth })) + ); + observer.observe(mainDiv); + + return () => { + observer.disconnect(); + }; + }, []); + + useEffect(() => { const handleResize = () => { - setScreenSize({ - width: window.innerWidth, - height: window.innerHeight, - }); + setScreenSize((prev) => ({ + ...prev, + height: window.innerHeight - 120, + })); }; window.addEventListener("resize", handleResize); @@ -23,5 +35,17 @@ export const useScreenSize = () => { }; }, []); - return screenSize; + const getBoardSize = () => { + const width = screenSize.width; + const height = screenSize.height; + + // 900 is the md layout breakpoint + if (width < 900) { + return Math.min(width, height) * 0.95; + } + + return Math.min(width - 500, height) * 0.95; + }; + + return { ...screenSize, boardSize: getBoardSize() }; }; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 6be13a1..a28af52 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -4,8 +4,6 @@ import "@fontsource/roboto/500.css"; import "@fontsource/roboto/700.css"; import { AppProps } from "next/app"; import Head from "next/head"; -// import "../../styles/global.css"; -// import "../../styles/index.css"; import Layout from "@/sections/layout"; export default function MyApp({ Component, pageProps }: AppProps) { diff --git a/src/pages/database.tsx b/src/pages/database.tsx index 72daa99..9b9061e 100644 --- a/src/pages/database.tsx +++ b/src/pages/database.tsx @@ -152,9 +152,7 @@ export default function GameDatabase() { marginTop={6} > - - - + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 66b353b..6d74e69 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -38,7 +38,7 @@ export default function GameReport() { rowGap={6} justifyContent="center" alignItems="start" - marginTop={1} + gap={6} > @@ -55,11 +54,11 @@ export default function GameReport() { diff --git a/src/sections/analysis/board/index.tsx b/src/sections/analysis/board/index.tsx index 4f02c42..6747810 100644 --- a/src/sections/analysis/board/index.tsx +++ b/src/sections/analysis/board/index.tsx @@ -13,9 +13,11 @@ import { useChessActions } from "@/hooks/useChess"; import { useMemo, useRef } from "react"; import PlayerInfo from "./playerInfo"; import EvaluationBar from "./evaluationBar"; +import { useScreenSize } from "@/hooks/useScreenSize"; export default function Board() { const boardRef = useRef(null); + const { boardSize } = useScreenSize(); const board = useAtomValue(boardAtom); const boardOrientation = useAtomValue(boardOrientationAtom); const showBestMoveArrow = useAtomValue(showBestMoveArrowAtom); @@ -76,10 +78,10 @@ export default function Board() { container justifyContent="center" alignItems="center" - xs={12} wrap="nowrap" + width={boardSize} > - + - + {playerName || (color === "white" ? "White" : "Black")} diff --git a/src/sections/analysis/reviewPanelBody/index.tsx b/src/sections/analysis/reviewPanelBody/index.tsx index c19c866..08bdb4a 100644 --- a/src/sections/analysis/reviewPanelBody/index.tsx +++ b/src/sections/analysis/reviewPanelBody/index.tsx @@ -35,7 +35,7 @@ export default function ReviewPanelBody() { xs={12} justifyContent="center" alignItems="center" - gap={2} + gap={1} > - - Game Review + + Engine evaluation {!!bestMove && ( - + {`${bestMove} was the best move`} @@ -65,9 +65,7 @@ export default function ReviewPanelBody() { {isGameOver && ( - - Game is over - + Game is over )} diff --git a/src/sections/analysis/reviewPanelHeader/analyzeButton.tsx b/src/sections/analysis/reviewPanelHeader/analyzeButton.tsx index 02a65c0..35cd33b 100644 --- a/src/sections/analysis/reviewPanelHeader/analyzeButton.tsx +++ b/src/sections/analysis/reviewPanelHeader/analyzeButton.tsx @@ -58,7 +58,7 @@ export default function AnalyzeButton() { return ( diff --git a/src/sections/analysis/reviewPanelHeader/gamePanel/index.tsx b/src/sections/analysis/reviewPanelHeader/gamePanel/index.tsx index ac6dc74..d14d9bf 100644 --- a/src/sections/analysis/reviewPanelHeader/gamePanel/index.tsx +++ b/src/sections/analysis/reviewPanelHeader/gamePanel/index.tsx @@ -10,13 +10,7 @@ export default function GamePanel() { const hasGameInfo = gameFromUrl !== undefined || !!game.header().White; - if (!hasGameInfo) { - return ( - - No game loaded - - ); - } + if (!hasGameInfo) return null; return ( - - vs - + vs @@ -40,10 +32,11 @@ export default function GamePanel() { Site : {gameFromUrl?.site || game.header().Site || "?"} diff --git a/src/sections/analysis/reviewPanelHeader/gamePanel/playerInfo.tsx b/src/sections/analysis/reviewPanelHeader/gamePanel/playerInfo.tsx index 4cd9fed..820cdab 100644 --- a/src/sections/analysis/reviewPanelHeader/gamePanel/playerInfo.tsx +++ b/src/sections/analysis/reviewPanelHeader/gamePanel/playerInfo.tsx @@ -26,13 +26,13 @@ export default function PlayerInfo({ color }: Props) { xs={5} justifyContent={color === "white" ? "flex-end" : "flex-start"} alignItems="center" - gap={1} + gap={0.5} > - + {playerName || (color === "white" ? "White" : "Black")} - {rating ? `(${rating})` : "(?)"} + {rating ? `(${rating})` : "(?)"} ); } diff --git a/src/sections/analysis/reviewPanelHeader/index.tsx b/src/sections/analysis/reviewPanelHeader/index.tsx index b20397f..b8ffe93 100644 --- a/src/sections/analysis/reviewPanelHeader/index.tsx +++ b/src/sections/analysis/reviewPanelHeader/index.tsx @@ -13,20 +13,33 @@ export default function ReviewPanelHeader() { justifyContent="center" alignItems="center" xs={12} - gap={3} + rowGap={3} > - - - Game Report - + + + + + + + Game Report + + + + - ); diff --git a/src/sections/analysis/reviewPanelHeader/loadGame.tsx b/src/sections/analysis/reviewPanelHeader/loadGame.tsx index 0d4cc84..9cdc80f 100644 --- a/src/sections/analysis/reviewPanelHeader/loadGame.tsx +++ b/src/sections/analysis/reviewPanelHeader/loadGame.tsx @@ -1,4 +1,3 @@ -import { Grid } from "@mui/material"; import LoadGameButton from "../../loadGame/loadGameButton"; import { useCallback, useEffect } from "react"; import { useChessActions } from "@/hooks/useChess"; @@ -50,14 +49,13 @@ export default function LoadGame() { const isGameLoaded = gameFromUrl !== undefined || !!game.header().White; return ( - - { - await router.push("/"); - resetAndSetGamePgn(game.pgn()); - }} - /> - + { + await router.push("/"); + resetAndSetGamePgn(game.pgn()); + }} + /> ); } diff --git a/src/sections/engineSettings/engineSettingsButton.tsx b/src/sections/engineSettings/engineSettingsButton.tsx index df36c5e..3785f68 100644 --- a/src/sections/engineSettings/engineSettingsButton.tsx +++ b/src/sections/engineSettings/engineSettingsButton.tsx @@ -1,15 +1,18 @@ -import { Button } from "@mui/material"; +import { IconButton, Tooltip } from "@mui/material"; import { useState } from "react"; import EngineSettingsDialog from "./engineSettingsDialog"; +import { Icon } from "@iconify/react"; export default function EngineSettingsButton() { const [openDialog, setOpenDialog] = useState(false); return ( <> - + + setOpenDialog(true)}> + + + Set engine parameters - + - Only Stockfish 16 is available now, more engine choices will come ! + Stockfish 16 is the only engine available now, more engine choices + will come soon ! void; label?: string; + size?: "small" | "medium" | "large"; } -export default function LoadGameButton({ setGame, label }: Props) { +export default function LoadGameButton({ setGame, label, size }: Props) { const [openDialog, setOpenDialog] = useState(false); return ( <> -