Merge pull request #256 from CSSLab/codex/material-count-size-tuning

fix: tune chess material display

Author: ashtonanderson

src/components/Board/GameBoard.tsx

@@ -141,7 +141,9 @@ export const GameBoard: React.FC<Props> = ({
     return {
       fen,
       lastMove,
-      check: currentNode.check,
+      check: currentNode.check
+        ? (currentNode.turn === 'w' ? 'white' : 'black')
+        : false,
       orientation: orientation as 'white' | 'black',
     }
   }, [currentNode, game, orientation])

src/components/Board/GameClock.tsx

@@ -60,24 +60,47 @@ export const GameClock: React.FC<Props> = (
 
   return (
     <div
-      className={`flex items-center justify-between bg-glass-strong md:items-start md:justify-start ${active ? 'opacity-100' : 'opacity-50'} flex-row md:flex-col`}
+      className="flex flex-row items-center justify-between bg-glass-strong md:flex-col md:items-start md:justify-start"
     >
       <div className="flex w-full items-center justify-between gap-3 px-4 py-2">
-        <span>
-          {props.player === 'black' ? '●' : '○'}{' '}
-          {player === props.player
-            ? user?.displayName
-            : getMaiaDisplayName(maiaVersion)}
+        <span
+          className={`flex items-center gap-2 transition-colors ${
+            active ? 'text-white' : 'text-white/55'
+          }`}
+        >
+          <span
+            className={`inline-block h-3 w-3 rounded-full ${
+              props.player === 'white'
+                ? 'bg-white ring-1 ring-white/70'
+                : 'bg-black ring-1 ring-white/35'
+            } ${active ? 'animate-pulse ring-2 ring-primary/35' : ''}`}
+          />
+          <span>
+            {player === props.player
+              ? user?.displayName
+              : getMaiaDisplayName(maiaVersion)}
+          </span>
         </span>
         <MaterialBalance
           fen={currentNode?.fen}
           color={props.player}
-          className="gap-1.5"
-          iconClassName="!text-base md:!text-lg text-white/85"
-          textClassName="text-sm md:text-base text-white/85"
+          className="gap-2"
+          iconClassName="!text-xl md:!text-2xl text-white/95"
+          textClassName="text-base md:text-lg text-white/90"
+          pieceFilter={
+            props.player === 'black'
+              ? 'brightness(1.18) contrast(1.08)'
+              : undefined
+          }
         />
       </div>
-      <div className="inline-flex self-start px-4 py-2 md:text-3xl">
+      <div
+        className={`inline-flex self-start px-4 py-2 transition-all duration-200 md:text-3xl ${
+          active
+            ? 'font-semibold text-primary'
+            : 'text-white/55'
+        }`}
+      >
         {minutes}:{('00' + seconds).slice(-2)}
         {showTenths ? '.' + tenths : null}
       </div>

src/components/Common/MaterialBalance.tsx

@@ -21,21 +21,21 @@ const STARTING_MATERIAL: { white: MaterialCount; black: MaterialCount } = {
   black: { p: 8, n: 2, b: 2, r: 2, q: 1, k: 1 },
 }
 
-const getPieceIcon = (piece: PieceType): string => {
-  const iconMap: Record<PieceType, string> = {
-    p: 'chess_pawn',
-    n: 'chess_knight',
-    b: 'chess_bishop',
-    r: 'chess_rook',
-    q: 'chess',
-    k: 'chess',
+const getPieceLabel = (piece: PieceType): string => {
+  const labelMap: Record<PieceType, string> = {
+    p: 'pawn',
+    n: 'knight',
+    b: 'bishop',
+    r: 'rook',
+    q: 'queen',
+    k: 'king',
   }
 
-  return iconMap[piece]
+  return labelMap[piece]
 }
 
-const getPieceLabel = (piece: PieceType): string => {
-  const labelMap: Record<PieceType, string> = {
+const getPieceSpriteClass = (piece: PieceType): string => {
+  const spriteMap: Record<PieceType, string> = {
     p: 'pawn',
     n: 'knight',
     b: 'bishop',
@@ -44,7 +44,7 @@ const getPieceLabel = (piece: PieceType): string => {
     k: 'king',
   }
 
-  return labelMap[piece]
+  return spriteMap[piece]
 }
 
 const calculateCapturedPieces = (fen: string) => {
@@ -113,12 +113,14 @@ export const MaterialBalance = ({
   className = '',
   iconClassName = '',
   textClassName = '',
+  pieceFilter,
 }: {
   fen?: string
   color: Color
   className?: string
   iconClassName?: string
   textClassName?: string
+  pieceFilter?: string
 }) => {
   const materialData = useMemo(() => {
     if (!fen) {
@@ -166,10 +168,12 @@ export const MaterialBalance = ({
     return null
   }
 
-  const capturedPieceToneClass =
-    color === 'white'
-      ? 'text-zinc-900 [text-shadow:0_0_1px_rgba(255,255,255,0.95)]'
-      : 'text-white [text-shadow:0_0_1px_rgba(0,0,0,0.9)]'
+  const capturedPieceColor = color === 'white' ? 'black' : 'white'
+  const capturedPieceFilter =
+    pieceFilter ??
+    capturedPieceColor === 'black'
+      ? 'drop-shadow(0 0 0.8px rgba(255,255,255,0.82)) drop-shadow(0 0 1.5px rgba(255,255,255,0.28))'
+      : 'drop-shadow(0 0 0.8px rgba(0,0,0,0.82)) drop-shadow(0 0 1.5px rgba(0,0,0,0.22))'
 
   return (
     <div className={`flex select-none items-center gap-1 ${className}`.trim()}>
@@ -186,23 +190,25 @@ export const MaterialBalance = ({
               {Array.from({ length: count }).map((_, index) => (
                 <span
                   key={`${piece}-${index}`}
-                  className={`material-symbols-outlined material-symbols-filled text-sm ${capturedPieceToneClass} ${index > 0 ? '-ml-1.5' : ''} ${iconClassName}`.trim()}
+                  className={`cg-wrap !relative !inline-block !h-[1em] !w-[1em] align-middle ${
+                    index > 0 ? '-ml-1.5' : ''
+                  } ${iconClassName}`.trim()}
                   title={getPieceLabel(piece)}
                 >
-                  {getPieceIcon(piece)}
+                  <piece
+                    className={`${getPieceSpriteClass(piece)} ${capturedPieceColor}`}
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      filter: capturedPieceFilter,
+                    }}
+                  />
                 </span>
               ))}
             </div>
           )
         })}
       </div>
-      {materialData.advantage > 0 && (
-        <span
-          className={`text-xxs font-medium text-secondary ${textClassName}`.trim()}
-        >
-          +{materialData.advantage}
-        </span>
-      )}
     </div>
   )
 }

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

@@ -1604,8 +1604,8 @@ const Analysis: React.FC<Props> = ({
                         fen={controller.currentNode?.fen}
                         color="white"
                         className="whitespace-nowrap"
-                        iconClassName="!text-[12px]"
-                        textClassName="text-[11px] text-white/85"
+                        iconClassName="!text-[18px]"
+                        textClassName="text-[14px] text-white/90"
                       />
                     </div>
                     <AnalysisArrowLegend
@@ -1617,8 +1617,8 @@ const Analysis: React.FC<Props> = ({
                         fen={controller.currentNode?.fen}
                         color="black"
                         className="whitespace-nowrap"
-                        iconClassName="!text-[12px]"
-                        textClassName="text-[11px] text-white/85"
+                        iconClassName="!text-[18px]"
+                        textClassName="text-[14px] text-white/90"
                       />
                     </div>
                   </div>
@@ -1893,8 +1893,8 @@ const Analysis: React.FC<Props> = ({
                       fen={controller.currentNode?.fen}
                       color="white"
                       className="whitespace-nowrap"
-                      iconClassName="!text-[11px]"
-                      textClassName="text-[10px] text-primary/75"
+                      iconClassName="!text-[13px]"
+                      textClassName="text-[11px] text-primary/80"
                     />
                   </div>
                   <AnalysisArrowLegend
@@ -1906,8 +1906,8 @@ const Analysis: React.FC<Props> = ({
                       fen={controller.currentNode?.fen}
                       color="black"
                       className="whitespace-nowrap"
-                      iconClassName="!text-[11px]"
-                      textClassName="text-[10px] text-primary/75"
+                      iconClassName="!text-[13px]"
+                      textClassName="text-[11px] text-primary/80"
                     />
                   </div>
                 </div>