characters invisible on human vs bot fight entrance fix

frontend/src/composables/useHumanChallenge.ts

@@ -1,5 +1,9 @@
 import { ref, type Ref } from 'vue'
 
+// Buffer to ensure client timer finishes BEFORE server timer
+// (accounts for SSE delivery delay + network latency)
+const CLIENT_TIMER_BUFFER_MS = 1500
+
 export function useHumanChallenge(
   fightId: Ref<string>,
   myBotId: Ref<string | null>,
@@ -18,6 +22,7 @@ export function useHumanChallenge(
   const humanChoices = ref<string[]>([])
   const roundCooldown = ref(0)
   const pendingChallengeData = ref<{ data: any; receivedAt: number } | null>(null)
+  const entrancePlaying = ref(false)
 
   let humanPollHandle: ReturnType<typeof setInterval> | null = null
   let timerHandle: ReturnType<typeof setInterval> | null = null
@@ -25,10 +30,11 @@ export function useHumanChallenge(
 
   function applyChallenge(data: any, receivedAt?: number) {
     const elapsed = receivedAt ? Date.now() - receivedAt : 0
-    // Cap timeout for multiple choice — you're just tapping a button, not typing
+    // Use server-computed remainingMs when available (from polling), otherwise derive from timeoutMs
     const hasChoices = data.choices && data.choices.length > 0
-    const baseTimeout = hasChoices ? Math.min(data.timeoutMs || 8000, 10000) : (data.timeoutMs || 8000)
-    const remaining = Math.max(1000, baseTimeout - elapsed)
+    const rawTimeout = data.remainingMs || (hasChoices ? Math.min(data.timeoutMs || 8000, 10000) : (data.timeoutMs || 8000))
+    // Subtract buffer so client always submits before server times out
+    const remaining = Math.max(1000, rawTimeout - elapsed - CLIENT_TIMER_BUFFER_MS)
     humanChallenge.value = {
       type: data.type,
       label: data.label,
@@ -51,7 +57,6 @@ export function useHumanChallenge(
       if (humanTimer.value <= 0) {
         if (timerHandle) clearInterval(timerHandle)
         if (!humanSubmitted.value) {
-          // BUG-9: Submit empty timeout instead of random choice
           humanSubmitted.value = true
           void submitTimeout()
         }
@@ -113,7 +118,8 @@ export function useHumanChallenge(
       const data = await res.json()
 
       if (data.pending) {
-        if (roundCooldown.value > 0) {
+        // Queue if entrance is playing or cooldown active
+        if (entrancePlaying.value || roundCooldown.value > 0) {
           if (!pendingChallengeData.value || (data.roundNumber && data.roundNumber > (pendingChallengeData.value.data.roundNumber || 0))) {
             pendingChallengeData.value = { data, receivedAt: Date.now() }
           }
@@ -179,10 +185,22 @@ export function useHumanChallenge(
     humanChoices.value = []
     roundCooldown.value = 0
     pendingChallengeData.value = null
+    entrancePlaying.value = false
+  }
+
+  /** Mark entrance as playing — queues any challenges that arrive during animation */
+  function setEntrancePlaying(playing: boolean) {
+    entrancePlaying.value = playing
+    // When entrance finishes, flush any queued challenge
+    if (!playing && pendingChallengeData.value) {
+      applyChallenge(pendingChallengeData.value.data, pendingChallengeData.value.receivedAt)
+      pendingChallengeData.value = null
+    }
   }
 
   function handleSSEChallenge(sseData: any) {
-    if (roundCooldown.value > 0) {
+    // Queue challenges during entrance animation or round cooldown
+    if (entrancePlaying.value || roundCooldown.value > 0) {
       pendingChallengeData.value = { data: sseData, receivedAt: Date.now() }
     } else {
       applyChallenge(sseData)
@@ -197,6 +215,7 @@ export function useHumanChallenge(
     humanChoices,
     roundCooldown,
     pendingChallengeData,
+    entrancePlaying,
     applyChallenge,
     submitHumanAnswer,
     submitChoice,
@@ -206,6 +225,7 @@ export function useHumanChallenge(
     startCooldown,
     clearChallenge,
     resetState,
+    setEntrancePlaying,
     handleSSEChallenge,
   }
 }