Align drill play and analysis flows

Author: ashtonanderson

src/api/play.ts

@@ -1,6 +1,14 @@
 import { buildUrl } from './utils'
 import { Color, TimeControl } from 'src/types'
 
+const normalizeOpeningBookFen = (fen: string) => {
+  const parts = fen.trim().split(/\s+/)
+  if (parts.length >= 4) {
+    return parts.slice(0, 4).join(' ')
+  }
+  return fen.trim()
+}
+
 export const startGame = async (
   playerColor: Color,
   maiaVersion: string,
@@ -107,27 +115,36 @@ export const fetchGameMove = async (
 }
 
 export const fetchOpeningBookMoves = async (fen: string) => {
-  const res = await fetch(buildUrl(`play/get_book_moves?fen=${fen}`), {
-    method: 'POST',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
+  const normalizedFen = normalizeOpeningBookFen(fen)
+  const res = await fetch(
+    buildUrl(
+      'play/get_book_moves?' +
+        new URLSearchParams({
+          fen: normalizedFen,
+        }),
+    ),
+    {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        moves: [],
+        maia_names: [
+          'maia_kdd_1100',
+          'maia_kdd_1200',
+          'maia_kdd_1300',
+          'maia_kdd_1400',
+          'maia_kdd_1500',
+          'maia_kdd_1600',
+          'maia_kdd_1700',
+          'maia_kdd_1800',
+          'maia_kdd_1900',
+        ],
+      }),
     },
-    body: JSON.stringify({
-      moves: [],
-      maia_names: [
-        'maia_kdd_1100',
-        'maia_kdd_1200',
-        'maia_kdd_1300',
-        'maia_kdd_1400',
-        'maia_kdd_1500',
-        'maia_kdd_1600',
-        'maia_kdd_1700',
-        'maia_kdd_1800',
-        'maia_kdd_1900',
-      ],
-    }),
-  })
+  )
 
   return res.json()
 }

src/components/Openings/OpeningDrillSidebar.tsx

@@ -16,6 +16,7 @@ interface Props {
   analysisEnabled?: boolean
   continueAnalyzingMode?: boolean
   drillTerminationNote?: string
+  showBottomNavigation?: boolean
 }
 
 export const OpeningDrillSidebar: React.FC<Props> = ({
@@ -28,6 +29,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
   analysisEnabled,
   continueAnalyzingMode,
   drillTerminationNote,
+  showBottomNavigation = true,
 }) => {
   const containerClass = embedded
     ? 'flex h-full w-full max-w-full flex-col'
@@ -304,7 +306,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
       </div>
 
       {/* Bottom: Moves + Controller (embedded) */}
-      {tree?.gameTree && currentDrill && (
+      {showBottomNavigation && tree?.gameTree && currentDrill && (
         <div className="flex w-full flex-1 flex-col overflow-hidden border-t border-glass-border">
           <div className="red-scrollbar flex w-full flex-1 flex-col overflow-y-auto overflow-x-hidden">
             <MovesContainer