fix : UI flickering

src/hooks/useScreenSize.ts

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

src/lib/chess.ts

@@ -85,8 +85,8 @@ export const getEvaluationBarValue = (
 ): { whiteBarPercentage: number; label: string } => {
   if (bestLine.mate) {
     return {
-      whiteBarPercentage: whiteToPlay ? 100 : 0,
-      label: `M${bestLine.mate}`,
+      whiteBarPercentage: whiteToPlay && bestLine.mate > 0 ? 100 : 0,
+      label: `M${Math.abs(bestLine.mate)}`,
     };
   }
 

src/lib/engine/uciEngine.ts

@@ -207,6 +207,7 @@ export abstract class UciEngine {
       parsedResults.lines = parsedResults.lines.map((line) => ({
         ...line,
         cp: line.cp ? -line.cp : line.cp,
+        mate: line.mate ? -line.mate : line.mate,
       }));
     }
 

src/pages/index.tsx

@@ -17,7 +17,7 @@ import { useEffect } from "react";
 
 export default function GameReport() {
   const theme = useTheme();
-  const isMdOrGreater = useMediaQuery(theme.breakpoints.up("md"));
+  const isLgOrGreater = useMediaQuery(theme.breakpoints.up("lg"));
 
   const { reset: resetBoard } = useChessActions(boardAtom);
   const { setPgn: setGamePgn } = useChessActions(gameAtom);
@@ -43,26 +43,26 @@ export default function GameReport() {
       <Grid
         container
         item
-        marginTop={{ xs: 0, md: "2.5em" }}
+        marginTop={{ xs: 0, lg: "2.5em" }}
         justifyContent="center"
         alignItems="center"
         borderRadius={2}
         border={1}
         borderColor={"secondary.main"}
         xs={12}
-        md
+        lg
         sx={{
           backgroundColor: "secondary.main",
           borderColor: "primary.main",
           borderWidth: 2,
         }}
         padding={3}
-        gap={3}
+        rowGap={3}
         style={{
           maxWidth: "1100px",
         }}
       >
-        {isMdOrGreater ? <ReviewPanelHeader /> : <ReviewPanelToolBar />}
+        {isLgOrGreater ? <ReviewPanelHeader /> : <ReviewPanelToolBar />}
 
         <Divider sx={{ width: "90%" }} />
 
@@ -70,7 +70,7 @@ export default function GameReport() {
 
         <Divider sx={{ width: "90%" }} />
 
-        {isMdOrGreater ? <ReviewPanelToolBar /> : <ReviewPanelHeader />}
+        {isLgOrGreater ? <ReviewPanelToolBar /> : <ReviewPanelHeader />}
       </Grid>
     </Grid>
   );

src/sections/analysis/board/evaluationBar.tsx

@@ -44,7 +44,9 @@ export default function EvaluationBar({ height }: Props) {
             : evalBar.whiteBarPercentage
         }%`}
         width="100%"
-        borderRadius="5px 5px 0 0"
+        borderRadius={
+          evalBar.whiteBarPercentage === 100 ? "5px" : "5px 5px 0 0"
+        }
       >
         <Typography
           color={boardOrientation ? "white" : "black"}
@@ -68,7 +70,9 @@ export default function EvaluationBar({ height }: Props) {
         width={"100%"}
         display="flex"
         alignItems="flex-end"
-        borderRadius="0 0 5px 5px"
+        borderRadius={
+          evalBar.whiteBarPercentage === 100 ? "5px" : "0 0 5px 5px"
+        }
       >
         <Typography
           color={boardOrientation ? "black" : "white"}

src/sections/analysis/reviewPanelBody/index.tsx

@@ -36,7 +36,7 @@ export default function ReviewPanelBody() {
       xs={12}
       justifyContent="center"
       alignItems="center"
-      gap={1}
+      rowGap={1}
     >
       <Grid
         item

src/sections/analysis/reviewPanelBody/lineEvaluation.tsx

@@ -14,17 +14,23 @@ export default function LineEvaluation({ line }: Props) {
     line.cp !== undefined
       ? `${line.cp / 100}`
       : line.mate
-      ? `Mate in ${Math.abs(line.mate)}`
+      ? `${line.mate > 0 ? "" : "-"}M${Math.abs(line.mate)}`
       : "?";
 
   const showSkeleton = line.depth < 6;
 
   return (
     <ListItem disablePadding>
-      <Typography marginRight={2} marginY={0.5}>
+      <Typography
+        marginRight={1.5}
+        marginY={0.5}
+        noWrap
+        overflow="visible"
+        width="3em"
+        textAlign="center"
+      >
         {showSkeleton ? (
           <Skeleton
-            width={"2em"}
             variant="rounded"
             animation="wave"
             sx={{ color: "transparent" }}
@@ -36,11 +42,14 @@ export default function LineEvaluation({ line }: Props) {
         )}
       </Typography>
 
-      <Typography noWrap>
+      <Typography
+        noWrap
+        maxWidth={{ xs: "15em", sm: "25em", md: "30em", lg: "25em" }}
+      >
         {showSkeleton ? (
-          <Skeleton width={"20em"} variant="rounded" animation="wave" />
+          <Skeleton variant="rounded" animation="wave" />
         ) : (
-          line.pv.slice(0, 10).map(moveLineUciToSan(board.fen())).join(", ")
+          line.pv.map(moveLineUciToSan(board.fen())).join(", ")
         )}
       </Typography>
     </ListItem>