design : improve board responsiveness

Author: GuillaumeSD

src/components/board/evaluationBar.tsx

@@ -35,10 +35,10 @@ export default function EvaluationBar({
       container
       justifyContent="center"
       alignItems="center"
-      width="2rem"
+      width={{ xs: "1.6rem", sm: "2rem" }}
       height={height}
       border="1px solid black"
-      borderRadius="5px"
+      borderRadius={{ xs: "3px", sm: "5px" }}
     >
       <Box
         sx={{
@@ -53,13 +53,16 @@ export default function EvaluationBar({
         }%`}
         width="100%"
         borderRadius={
-          evalBar.whiteBarPercentage === 100 ? "5px" : "5px 5px 0 0"
+          evalBar.whiteBarPercentage === 100
+            ? { xs: "3px", sm: "5px" }
+            : { xs: "3px 3px 0 0", sm: "5px 5px 0 0" }
         }
       >
         <Typography
           color={boardOrientation === Color.White ? "white" : "black"}
           textAlign="center"
           width="100%"
+          fontSize={{ xs: "0.9rem", sm: "1rem" }}
         >
           {(evalBar.whiteBarPercentage < 50 &&
             boardOrientation === Color.White) ||
@@ -80,17 +83,20 @@ export default function EvaluationBar({
             ? evalBar.whiteBarPercentage
             : 100 - evalBar.whiteBarPercentage
         }%`}
-        width={"100%"}
+        width="100%"
         display="flex"
         alignItems="flex-end"
         borderRadius={
-          evalBar.whiteBarPercentage === 100 ? "5px" : "0 0 5px 5px"
+          evalBar.whiteBarPercentage === 100
+            ? { xs: "3px", sm: "5px" }
+            : { xs: "0 0 3px 3px", sm: "0 0 5px 5px" }
         }
       >
         <Typography
           color={boardOrientation === Color.White ? "black" : "white"}
           textAlign="center"
           width="100%"
+          fontSize={{ xs: "0.9rem", sm: "1rem" }}
         >
           {(evalBar.whiteBarPercentage >= 50 &&
             boardOrientation === Color.White) ||

src/components/board/index.tsx

@@ -239,12 +239,14 @@ export default function Board({
       clickedSquaresAtom,
       playableSquaresAtom,
       showPlayerMoveIconAtom,
+      boardSize: boardSize || 400,
     });
   }, [
     currentPositionAtom,
     clickedSquaresAtom,
     playableSquaresAtom,
     showPlayerMoveIconAtom,
+    boardSize,
   ]);
 
   const customPieces = useMemo(
@@ -303,7 +305,7 @@ export default function Board({
         rowGap={1.5}
         justifyContent="center"
         alignItems="center"
-        paddingLeft={showEvaluationBar ? 2 : 0}
+        paddingLeft={{ xs: 0.5, sm: showEvaluationBar ? 2 : 0 }}
         size="grow"
       >
         <PlayerHeader

src/components/board/squareRenderer.tsx

@@ -15,13 +15,15 @@ export interface Props {
   clickedSquaresAtom: PrimitiveAtom<Square[]>;
   playableSquaresAtom: PrimitiveAtom<Square[]>;
   showPlayerMoveIconAtom?: PrimitiveAtom<boolean>;
+  boardSize: number;
 }
 
 export function getSquareRenderer({
   currentPositionAtom,
   clickedSquaresAtom,
   playableSquaresAtom,
   showPlayerMoveIconAtom = atom(false),
+  boardSize,
 }: Props) {
   const squareRenderer = forwardRef<HTMLDivElement, CustomSquareProps>(
     (props, ref) => {
@@ -68,14 +70,12 @@ export function getSquareRenderer({
             <Image
               src={`/icons/${moveClassification}.png`}
               alt="move-icon"
-              width={35}
-              height={35}
+              width={Math.min(40, boardSize * 0.06)}
+              height={Math.min(40, boardSize * 0.06)}
               style={{
                 position: "absolute",
-                top: "max(-12px, -1.8vw)",
-                right: "max(-12px, -1.8vw)",
-                maxWidth: "3.6vw",
-                maxHeight: "3.6vw",
+                top: Math.max(-13.5, boardSize * -0.03) + "px",
+                right: Math.max(-13.5, boardSize * -0.03) + "px",
                 zIndex: 100,
               }}
             />

src/sections/analysis/board/index.tsx

@@ -25,7 +25,7 @@ export default function BoardContainer() {
 
     // 1200 is the lg layout breakpoint
     if (window?.innerWidth < 1200) {
-      return Math.min(width - 15, height - 150);
+      return Math.min(width, height - 150);
     }
 
     return Math.min(width - 700, height * 0.92);