fix: keep SAN move labels stable before stockfish colors load

Author: ashtonanderson

src/components/Analysis/Highlight.tsx

@@ -512,7 +512,7 @@ export const Highlight: React.FC<Props> = ({
                   <p
                     className={`text-left font-mono ${simplified ? 'text-sm' : 'text-sm md:text-xxs xl:text-xs'}`}
                   >
-                    {move}
+                    {colorSanMapping[move]?.san ?? move}
                   </p>
                   <p
                     className={`text-right font-mono ${simplified ? 'text-sm' : 'text-sm md:text-xxs xl:text-xs'}`}
@@ -620,7 +620,7 @@ export const Highlight: React.FC<Props> = ({
                     <p
                       className={`text-left font-mono ${simplified ? 'text-sm' : 'text-sm md:text-xxs xl:text-xs'}`}
                     >
-                      {move}
+                      {colorSanMapping[move]?.san ?? move}
                     </p>
                     <p
                       className={`text-right font-mono ${simplified ? 'text-sm' : 'text-sm md:text-xxs xl:text-xs'}`}

src/hooks/useAnalysisController/utils.ts

@@ -56,6 +56,13 @@ export const generateColorSanMapping = (
 
   const chess = new Chess(fen)
   const moves = chess.moves({ verbose: true })
+  moves.forEach((m) => {
+    const moveKey = `${m.from}${m.to}${m.promotion || ''}`
+    mapping[moveKey] = {
+      san: m.san,
+      color: '#FFF',
+    }
+  })
 
   if (!stockfish) return mapping