Merge branch 'main' into codex/practice-modal-queue-wip

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/Common/Header.tsx

@@ -212,7 +212,7 @@ export const Header: React.FC = () => {
             href="/openings"
             className={`px-2 py-1 transition-all duration-200 hover:!text-primary ${router.pathname.startsWith('/openings') ? '!text-primary' : '!text-primary/80'}`}
           >
-            OPENINGS
+            PRACTICE
           </Link>
           <Link
             href="/turing"
@@ -392,7 +392,7 @@ export const Header: React.FC = () => {
               Puzzles
             </Link>
             <Link href="/openings" className="uppercase">
-              Openings
+              Practice
             </Link>
             <Link href="/turing" className="uppercase">
               Bot-or-not

src/components/Home/HomeHero.tsx

@@ -229,7 +229,7 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
             />
             <FeatureCard
               icon="play_lesson"
-              title="Openings"
+              title="Practice"
               description="Learn and practice chess openings with Maia"
               href="/openings"
               index={4}

src/components/Home/Sections/AdditionalFeaturesSection.tsx

@@ -135,10 +135,10 @@ export const AdditionalFeaturesSection = ({
   const features: Feature[] = [
     {
       icon: <StarIcon />,
-      title: 'Openings Practice',
+      title: 'Practice',
       description:
         "Drill chess openings against Maia models calibrated to specific rating levels, allowing you to practice against opponents similar to those you'll face.",
-      action: { type: 'link', href: '/openings', label: 'Practice Openings' },
+      action: { type: 'link', href: '/openings', label: 'Practice' },
       iconBgColor: 'bg-human-3/10',
       iconTextColor: 'text-human-3',
     },

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

src/components/Openings/OpeningSelectionModal.tsx

@@ -434,7 +434,7 @@ const BrowsePanel: React.FC<{
   const searchPlaceholder = `Search ${categoryLabelPlural.toLowerCase()}...`
 
   const renderTabs = () => (
-    <div className="grid w-full select-none grid-cols-3 items-center justify-between border-b border-glass-border bg-white/[0.02]">
+    <div className="grid w-full select-none grid-cols-3 items-center justify-between border-b border-glass-border bg-white/[0.04]">
       {[
         { label: 'Openings', value: 'openings' as const },
         { label: 'Endgames', value: 'endgames' as const },
@@ -2548,13 +2548,13 @@ export const OpeningSelectionModal: React.FC<Props> = ({
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        className="relative flex h-[90vh] max-h-[900px] w-[98vw] max-w-[1320px] flex-col items-start justify-start overflow-hidden rounded-xl border border-glass-border bg-[#231d1a] backdrop-blur-md md:h-[90vh]"
+        className="relative flex h-[90vh] max-h-[900px] w-[98vw] max-w-[1320px] flex-col items-start justify-start overflow-hidden rounded-xl border border-glass-border bg-[#171513] shadow-[0_30px_90px_rgba(0,0,0,0.5)] backdrop-blur-md md:h-[90vh]"
       >
         <div
           className="pointer-events-none absolute inset-0"
           style={{
             background:
-              'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00) 20%), radial-gradient(ellipse 180% 160% at 0% 100%, rgba(239, 68, 68, 0.08) 0%, transparent 72%)',
+              'linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 22%, rgba(255,255,255,0) 38%), radial-gradient(ellipse 140% 120% at 50% -10%, rgba(255,255,255,0.06) 0%, transparent 48%), radial-gradient(ellipse 180% 160% at 0% 100%, rgba(127, 29, 29, 0.09) 0%, transparent 70%)',
           }}
         />
         <button
@@ -2571,7 +2571,7 @@ export const OpeningSelectionModal: React.FC<Props> = ({
         >
           <div>
             <h1 className="text-[19px] font-semibold text-primary">
-              Maia Drill Studio
+              Practice with Maia
             </h1>
             <p className="mt-0.5 text-[13px] text-secondary">
               Select drills, configure settings, practice against Maia 3.