Merge pull request #104 from CSSLab/copilot/fix-103

Add backend logging for opening drill sessions

Author: kevinjosethomas

src/api/index.ts

@@ -5,3 +5,4 @@ export * from './auth'
 export * from './turing'
 export * from './play'
 export * from './profile'
+export * from './opening'

src/api/opening/index.ts

@@ -0,0 +1 @@
+export * from './opening'

src/api/opening/opening.ts

@@ -0,0 +1,72 @@
+import { buildUrl } from '../utils'
+
+// API Types for opening drill logging
+export interface OpeningDrillSelection {
+  opening_fen: string
+  side_played: string
+}
+
+export interface SelectOpeningDrillsRequest {
+  openings: OpeningDrillSelection[]
+  opponent: string
+  num_moves: number
+  num_drills: number
+}
+
+export interface SelectOpeningDrillsResponse {
+  session_id: string
+}
+
+export interface SubmitOpeningDrillRequest {
+  session_id: string
+  opening_fen: string
+  side_played: string
+  moves_played_uci: string[]
+}
+
+// API function to log opening drill selections and start a session
+export const selectOpeningDrills = async (
+  request: SelectOpeningDrillsRequest,
+): Promise<SelectOpeningDrillsResponse> => {
+  const res = await fetch(buildUrl('opening/select_opening_drills'), {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(request),
+  })
+
+  if (res.status === 401) {
+    throw new Error('Unauthorized')
+  }
+
+  if (!res.ok) {
+    throw new Error(`Failed to select opening drills: ${res.statusText}`)
+  }
+
+  const data = await res.json()
+  return data as SelectOpeningDrillsResponse
+}
+
+// API function to submit a completed opening drill
+export const submitOpeningDrill = async (
+  request: SubmitOpeningDrillRequest,
+): Promise<void> => {
+  const res = await fetch(buildUrl('opening/submit_opening_drill'), {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(request),
+  })
+
+  if (res.status === 401) {
+    throw new Error('Unauthorized')
+  }
+
+  if (!res.ok) {
+    throw new Error(`Failed to submit opening drill: ${res.statusText}`)
+  }
+}

src/components/Openings/OpeningSelectionModal.tsx

@@ -23,6 +23,7 @@ import {
   trackDrillConfigurationCompleted,
 } from 'src/lib/analytics'
 import { MAIA_MODELS_WITH_NAMES } from 'src/constants/common'
+import { selectOpeningDrills } from 'src/api/opening'
 
 type MobileTab = 'browse' | 'selected'
 
@@ -1029,41 +1030,70 @@ export const OpeningSelectionModal: React.FC<Props> = ({
     return sequence.sort(() => Math.random() - 0.5)
   }
 
-  const handleStartDrilling = () => {
+  const handleStartDrilling = async () => {
     if (selections.length > 0) {
       const drillSequence = generateDrillSequence(selections, drillCount)
-      const configuration: DrillConfiguration = {
-        selections,
-        drillCount,
-        drillSequence,
-      }
 
-      // Track drill configuration completion
-      const uniqueOpenings = new Set(selections.map((s) => s.opening.id)).size
-      const averageTargetMoves =
-        selections.reduce((sum, s) => sum + s.targetMoveNumber, 0) /
-        selections.length
-      const maiaVersionsUsed = [
-        ...new Set(selections.map((s) => s.maiaVersion)),
-      ]
-      const colorDistribution = selections.reduce(
-        (acc, s) => {
-          acc[s.playerColor]++
-          return acc
-        },
-        { white: 0, black: 0 },
-      )
+      try {
+        // Prepare API request data
+        const openings = selections.map((selection) => ({
+          opening_fen: selection.variation
+            ? selection.variation.fen
+            : selection.opening.fen,
+          side_played: selection.playerColor,
+        }))
+
+        // Call the backend API to log opening selections and get session ID
+        const response = await selectOpeningDrills({
+          openings,
+          opponent: selectedMaiaVersion.id,
+          num_moves: targetMoveNumber,
+          num_drills: drillCount,
+        })
+
+        const configuration: DrillConfiguration = {
+          selections,
+          drillCount,
+          drillSequence,
+          sessionId: response.session_id,
+        }
 
-      trackDrillConfigurationCompleted(
-        selections.length,
-        drillCount,
-        uniqueOpenings,
-        averageTargetMoves,
-        maiaVersionsUsed,
-        colorDistribution,
-      )
+        // Track drill configuration completion
+        const uniqueOpenings = new Set(selections.map((s) => s.opening.id)).size
+        const averageTargetMoves =
+          selections.reduce((sum, s) => sum + s.targetMoveNumber, 0) /
+          selections.length
+        const maiaVersionsUsed = [
+          ...new Set(selections.map((s) => s.maiaVersion)),
+        ]
+        const colorDistribution = selections.reduce(
+          (acc, s) => {
+            acc[s.playerColor]++
+            return acc
+          },
+          { white: 0, black: 0 },
+        )
 
-      onComplete(configuration)
+        trackDrillConfigurationCompleted(
+          selections.length,
+          drillCount,
+          uniqueOpenings,
+          averageTargetMoves,
+          maiaVersionsUsed,
+          colorDistribution,
+        )
+
+        onComplete(configuration)
+      } catch (error) {
+        console.error('Failed to start drilling session:', error)
+        // Still allow the drill to start even if API call fails
+        const configuration: DrillConfiguration = {
+          selections,
+          drillCount,
+          drillSequence,
+        }
+        onComplete(configuration)
+      }
     }
   }
 

src/hooks/useOpeningDrillController/useOpeningDrillController.ts

@@ -1,6 +1,7 @@
 import { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { Chess } from 'chess.ts'
 import { getGameMove } from 'src/api/play/play'
+import { submitOpeningDrill } from 'src/api/opening'
 import { useTreeController } from '../useTreeController'
 import { useLocalStorage } from '../useLocalStorage'
 import {
@@ -564,6 +565,23 @@ export const useOpeningDrillController = (
           }
         })
 
+        // Submit drill data to backend if session ID is available
+        if (configuration.sessionId) {
+          try {
+            await submitOpeningDrill({
+              session_id: configuration.sessionId,
+              opening_fen: drillGame.selection.variation
+                ? drillGame.selection.variation.fen
+                : drillGame.selection.opening.fen,
+              side_played: drillGame.selection.playerColor,
+              moves_played_uci: drillGame.moves,
+            })
+          } catch (error) {
+            console.error('Failed to submit drill to backend:', error)
+            // Continue even if backend submission fails
+          }
+        }
+
         setShowPerformanceModal(true)
       } catch (error) {
         console.error('Error completing drill analysis:', error)
@@ -572,7 +590,7 @@ export const useOpeningDrillController = (
         setIsAnalyzingDrill(false)
       }
     },
-    [currentDrillGame, evaluateDrillPerformance],
+    [currentDrillGame, evaluateDrillPerformance, configuration.sessionId],
   )
 
   const moveToNextDrill = useCallback(() => {

src/types/openings/index.ts

@@ -29,6 +29,7 @@ export interface DrillConfiguration {
   selections: OpeningSelection[]
   drillCount: number
   drillSequence: OpeningSelection[]
+  sessionId?: string
 }
 
 export interface OpeningDrillState {