feat : play UI v1

src/hooks/useScreenSize.ts

@@ -35,17 +35,5 @@ export const useScreenSize = () => {
     };
   }, []);
 
-  const getBoardSize = () => {
-    const width = screenSize.width;
-    const height = screenSize.height;
-
-    // 1200 is the lg layout breakpoint
-    if (window?.innerWidth < 1200) {
-      return Math.min(width, height - 150);
-    }
-
-    return Math.min(width - 600, height * 0.95);
-  };
-
-  return { ...screenSize, boardSize: getBoardSize() };
+  return screenSize;
 };

src/pages/play.tsx

@@ -16,14 +16,14 @@ export default function Play() {
       <Grid
         container
         item
-        marginTop={{ xs: 0, lg: "2.5em" }}
+        marginTop={{ xs: 0, md: "2.5em" }}
         justifyContent="center"
         alignItems="center"
         borderRadius={2}
         border={1}
         borderColor={"secondary.main"}
         xs={12}
-        lg
+        md
         sx={{
           backgroundColor: "secondary.main",
           borderColor: "primary.main",
@@ -33,7 +33,7 @@ export default function Play() {
         padding={3}
         rowGap={3}
         style={{
-          maxWidth: "1100px",
+          maxWidth: "400px",
         }}
       >
         <GameInProgress />

src/sections/analysis/board/index.tsx

@@ -20,7 +20,7 @@ import SquareRenderer, { moveClassificationColors } from "./squareRenderer";
 
 export default function Board() {
   const boardRef = useRef<HTMLDivElement>(null);
-  const { boardSize } = useScreenSize();
+  const screenSize = useScreenSize();
   const board = useAtomValue(boardAtom);
   const boardOrientation = useAtomValue(boardOrientationAtom);
   const showBestMoveArrow = useAtomValue(showBestMoveArrowAtom);
@@ -91,6 +91,18 @@ export default function Board() {
     return [];
   }, [position, showBestMoveArrow]);
 
+  const boardSize = useMemo(() => {
+    const width = screenSize.width;
+    const height = screenSize.height;
+
+    // 1200 is the lg layout breakpoint
+    if (window?.innerWidth < 1200) {
+      return Math.min(width, height - 150);
+    }
+
+    return Math.min(width - 600, height * 0.95);
+  }, [screenSize]);
+
   return (
     <Grid
       item

src/sections/play/board/index.tsx

@@ -12,7 +12,7 @@ import {
 } from "../states";
 import { Square } from "react-chessboard/dist/chessboard/types";
 import { useChessActions } from "@/hooks/useChessActions";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import PlayerInfo from "./playerInfo";
 import { useScreenSize } from "@/hooks/useScreenSize";
 import { Color, EngineName } from "@/types/enums";
@@ -23,7 +23,7 @@ import { useGameData } from "@/hooks/useGameData";
 
 export default function Board() {
   const boardRef = useRef<HTMLDivElement>(null);
-  const { boardSize } = useScreenSize();
+  const screenSize = useScreenSize();
   const engine = useEngine(EngineName.Stockfish16);
   const game = useAtomValue(gameAtom);
   const playerColor = useAtomValue(playerColorAtom);
@@ -106,6 +106,18 @@ export default function Board() {
     setPlayableSquares([]);
   };
 
+  const boardSize = useMemo(() => {
+    const width = screenSize.width;
+    const height = screenSize.height;
+
+    // 900 is the md layout breakpoint
+    if (window?.innerWidth < 900) {
+      return Math.min(width, height - 150);
+    }
+
+    return Math.min(width - 300, height * 0.85);
+  }, [screenSize]);
+
   return (
     <Grid
       item
@@ -114,7 +126,6 @@ export default function Board() {
       justifyContent="center"
       alignItems="center"
       width={boardSize}
-      maxWidth="85vh"
     >
       <PlayerInfo
         color={playerColor === Color.White ? Color.Black : Color.White}