Merge pull request #235 from CSSLab/codex/desktop-analysis-mobile-ui-align

fix: disable eval bars when analysis is hidden

Author: ashtonanderson

src/components/Analysis/BoardChrome.tsx

@@ -16,6 +16,7 @@ interface AnalysisStockfishEvalBarProps {
   hasEval: boolean
   displayText: string
   labelPositionTop: MotionValue<string>
+  disabled?: boolean
   variant?: StockfishEvalBarVariant
   className?: string
   range?: number
@@ -38,6 +39,7 @@ interface AnalysisMaiaWinrateBarProps {
   hasValue: boolean
   displayText: string
   labelPositionTop: MotionValue<string>
+  disabled?: boolean
   className?: string
   bubbleMinWidthPx?: number
   desktopSize?: 'compact' | 'expanded'
@@ -134,6 +136,7 @@ export const AnalysisStockfishEvalBar: React.FC<
   hasEval,
   displayText,
   labelPositionTop,
+  disabled = false,
   variant = 'mobile',
   className,
   range = 4,
@@ -165,7 +168,13 @@ export const AnalysisStockfishEvalBar: React.FC<
         .join(' ')}
     >
       <div className={`relative h-full ${widthClass}`}>
-        <div className="absolute inset-0 overflow-hidden rounded-[5px] border border-glass-border bg-glass-strong shadow-[0_0_0_1px_rgb(var(--color-backdrop)/0.35)]">
+        <div
+          className="absolute inset-0 overflow-hidden rounded-[5px] border border-glass-border bg-glass-strong shadow-[0_0_0_1px_rgb(var(--color-backdrop)/0.35)]"
+          style={{
+            filter: disabled ? 'grayscale(0.85) saturate(0.35)' : undefined,
+            opacity: disabled ? 0.55 : 1,
+          }}
+        >
           <div
             className="absolute inset-0"
             style={{
@@ -200,13 +209,16 @@ export const AnalysisStockfishEvalBar: React.FC<
           >
             -{range}
           </div>
+          {disabled ? (
+            <div className="absolute inset-0 bg-backdrop/25" />
+          ) : null}
         </div>
         <motion.div
           className={`absolute left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center border border-black/45 bg-white font-bold leading-none text-black/85 ${bubbleClass}`}
           style={{
             top: labelPositionTop,
             boxShadow: '0 0 0 2px rgb(255 255 255 / 0.32)',
-            opacity: hasEval ? 1 : 0.6,
+            opacity: disabled ? 0.45 : hasEval ? 1 : 0.6,
             minWidth: bubbleMinWidthPx,
           }}
         >
@@ -221,6 +233,7 @@ export const AnalysisMaiaWinrateBar: React.FC<AnalysisMaiaWinrateBarProps> = ({
   hasValue,
   displayText,
   labelPositionTop,
+  disabled = false,
   className,
   bubbleMinWidthPx,
   desktopSize = 'compact',
@@ -238,7 +251,13 @@ export const AnalysisMaiaWinrateBar: React.FC<AnalysisMaiaWinrateBarProps> = ({
       <div
         className={`relative h-full ${isExpandedDesktop ? 'w-[18px]' : 'w-[16px]'}`}
       >
-        <div className="absolute inset-0 overflow-hidden rounded-[5px] border border-glass-border bg-glass-strong shadow-[0_0_0_1px_rgb(var(--color-backdrop)/0.35)]">
+        <div
+          className="absolute inset-0 overflow-hidden rounded-[5px] border border-glass-border bg-glass-strong shadow-[0_0_0_1px_rgb(var(--color-backdrop)/0.35)]"
+          style={{
+            filter: disabled ? 'grayscale(0.85) saturate(0.35)' : undefined,
+            opacity: disabled ? 0.55 : 1,
+          }}
+        >
           <div
             className="absolute inset-0"
             style={{
@@ -272,6 +291,9 @@ export const AnalysisMaiaWinrateBar: React.FC<AnalysisMaiaWinrateBarProps> = ({
           >
             0
           </div>
+          {disabled ? (
+            <div className="absolute inset-0 bg-backdrop/25" />
+          ) : null}
         </div>
         <motion.div
           className={`absolute left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-black/45 bg-white font-bold leading-none text-black/85 ${
@@ -282,7 +304,7 @@ export const AnalysisMaiaWinrateBar: React.FC<AnalysisMaiaWinrateBarProps> = ({
           style={{
             top: labelPositionTop,
             boxShadow: '0 0 0 2px rgb(255 255 255 / 0.32)',
-            opacity: hasValue ? 1 : 0.6,
+            opacity: disabled ? 0.45 : hasValue ? 1 : 0.6,
             minWidth: bubbleMinWidthPx,
           }}
         >

src/pages/analysis/[...id].tsx

@@ -1044,6 +1044,16 @@ const Analysis: React.FC<Props> = ({
     () => Math.max(0, Math.min(100, displayedMaiaWhiteWinBar.percent)),
     [displayedMaiaWhiteWinBar.percent],
   )
+  const renderedMaiaWhiteWinBar = useMemo(
+    () =>
+      analysisEnabled
+        ? displayedMaiaWhiteWinBar
+        : { hasValue: false, percent: 50, label: '--' },
+    [analysisEnabled, displayedMaiaWhiteWinBar],
+  )
+  const maiaWhiteWinBarPositionTargetPercent = analysisEnabled
+    ? maiaWhiteWinPositionPercent
+    : 50
 
   const smoothedMaiaWhiteWinPosition = useSpring(50, {
     stiffness: 520,
@@ -1056,8 +1066,8 @@ const Analysis: React.FC<Props> = ({
   )
 
   useIsomorphicLayoutEffect(() => {
-    smoothedMaiaWhiteWinPosition.set(maiaWhiteWinPositionPercent)
-  }, [maiaWhiteWinPositionPercent, smoothedMaiaWhiteWinPosition])
+    smoothedMaiaWhiteWinPosition.set(maiaWhiteWinBarPositionTargetPercent)
+  }, [maiaWhiteWinBarPositionTargetPercent, smoothedMaiaWhiteWinPosition])
 
   const desktopMaiaBubbleReservePx = useMemo(
     () => (width >= 1360 ? 62 : 52),
@@ -1197,10 +1207,28 @@ const Analysis: React.FC<Props> = ({
     smoothedEvalPosition,
     (value) => `${100 - value}%`,
   )
+  const renderedStockfishEvalBar = useMemo(
+    () =>
+      analysisEnabled
+        ? displayedStockfishEvalBar
+        : {
+            hasEval: false,
+            pawns: 0,
+            displayPawns: 0,
+            label: '--',
+          },
+    [analysisEnabled, displayedStockfishEvalBar],
+  )
+  const renderedStockfishEvalText = analysisEnabled
+    ? displayedStockfishEvalText
+    : '--'
+  const evalBarPositionTargetPercent = analysisEnabled
+    ? evalPositionPercent
+    : 50
 
   useIsomorphicLayoutEffect(() => {
-    smoothedEvalPosition.set(evalPositionPercent)
-  }, [evalPositionPercent, smoothedEvalPosition])
+    smoothedEvalPosition.set(evalBarPositionTargetPercent)
+  }, [evalBarPositionTargetPercent, smoothedEvalPosition])
 
   const NestedGameInfo = () => (
     <div className="flex w-full flex-col">
@@ -1486,11 +1514,12 @@ const Analysis: React.FC<Props> = ({
                 >
                   <div className="pointer-events-none flex justify-center py-1">
                     <AnalysisMaiaWinrateBar
-                      hasValue={displayedMaiaWhiteWinBar.hasValue}
-                      displayText={displayedMaiaWhiteWinBar.label}
+                      hasValue={renderedMaiaWhiteWinBar.hasValue}
+                      displayText={renderedMaiaWhiteWinBar.label}
                       labelPositionTop={
                         smoothedMaiaWhiteWinVerticalPositionLabel
                       }
+                      disabled={!analysisEnabled}
                       desktopSize={desktopBarChromeSize}
                     />
                   </div>
@@ -1555,9 +1584,10 @@ const Analysis: React.FC<Props> = ({
                   </div>
                   <div className="pointer-events-none flex justify-center py-1">
                     <AnalysisStockfishEvalBar
-                      hasEval={displayedStockfishEvalBar.hasEval}
-                      displayText={displayedStockfishEvalText}
+                      hasEval={renderedStockfishEvalBar.hasEval}
+                      displayText={renderedStockfishEvalText}
                       labelPositionTop={smoothedEvalVerticalPositionLabel}
+                      disabled={!analysisEnabled}
                       variant="desktop"
                       desktopSize={desktopBarChromeSize}
                     />
@@ -1786,9 +1816,10 @@ const Analysis: React.FC<Props> = ({
                 <div className="pointer-events-none relative min-h-0 min-w-0 self-stretch">
                   <div className="absolute inset-y-0 left-[68%] w-4 -translate-x-1/2">
                     <AnalysisStockfishEvalBar
-                      hasEval={displayedStockfishEvalBar.hasEval}
-                      displayText={displayedStockfishEvalText}
+                      hasEval={renderedStockfishEvalBar.hasEval}
+                      displayText={renderedStockfishEvalText}
                       labelPositionTop={smoothedEvalVerticalPositionLabel}
+                      disabled={!analysisEnabled}
                     />
                   </div>
                 </div>