Chapitre 6.3 — La machine d’état d’une partie

// lib/types.ts
export type Question = {
  id: string
  prompt: string
  choices: [string, string, string, string]
  correctIndex: 0 | 1 | 2 | 3
  explanation: string
  difficulty: 'facile' | 'moyen' | 'difficile'
}
 
export type Phase =
  | { name: 'playing'; endsAt: number }                                   // timer en cours
  | { name: 'answered'; choiceIndex: number | null; correct: boolean }    // null = timeout
  | { name: 'finished' }

// stores/session.ts — ajouts
type SessionState = {
  // … (chapitre 6.2)
  phase: Phase
  totalSeconds: number
 
  startQuestion: () => void
  answer: (choiceIndex: number, secondsLeft: number) => boolean
  timeout: () => void
  next: () => void
}
 
export const useSession = create<SessionState>((set, get) => ({
  // …
  phase: { name: 'finished' },
  totalSeconds: 20,
 
  startQuestion: () =>
    set(s => ({ phase: { name: 'playing', endsAt: Date.now() + s.totalSeconds * 1000 } })),
 
  answer: (choiceIndex, secondsLeft) => {
    const s = get()
    if (s.phase.name !== 'playing') return false        // ← la garde : pas de double réponse
    const q = s.questions[s.index]
    const correct = choiceIndex === q.correctIndex
    // … scoring/streak/answers comme au chapitre 6.2 …
    set({ phase: { name: 'answered', choiceIndex, correct } })
    return correct
  },
 
  timeout: () => {
    const s = get()
    if (s.phase.name !== 'playing') return
    set({ streak: 0, answers: [...s.answers, { questionId: s.questions[s.index].id, correct: false }],
          phase: { name: 'answered', choiceIndex: null, correct: false } })
  },
 
  next: () => {
    const s = get()
    const last = s.index >= s.questions.length - 1
    if (last) set({ phase: { name: 'finished' } })
    else {
      set({ index: s.index + 1 })
      get().startQuestion()
    }
  },
}))

// hooks/useCountdown.ts
import { useEffect, useState } from 'react'
import { useSession } from '../stores/session'
import { useAppStateChange } from './useAppStateChange'
 
export function useCountdown() {
  const phase = useSession(s => s.phase)
  const timeout = useSession(s => s.timeout)
  const [secondsLeft, setSecondsLeft] = useState(0)
 
  useEffect(() => {
    if (phase.name !== 'playing') return
    const compute = () => Math.max(0, Math.ceil((phase.endsAt - Date.now()) / 1000))
    setSecondsLeft(compute())
    const id = setInterval(() => {
      const left = compute()
      setSecondsLeft(left)
      if (left <= 0) timeout()          // la transition vient de l'horloge
    }, 250)
    return () => clearInterval(id)
  }, [phase, timeout])
 
  // Retour d'arrière-plan : recalcul immédiat (le temps a continué de couler)
  useAppStateChange(status => {
    if (status === 'active' && phase.name === 'playing') {
      if (Date.now() >= phase.endsAt) timeout()
    }
  })
 
  return secondsLeft
}

// app/quiz.tsx — la structure (styles omis)
export default function QuizScreen() {
  const phase = useSession(s => s.phase)
  const question = useSession(s => s.questions[s.index])
  const answer = useSession(s => s.answer)
  const next = useSession(s => s.next)
  const secondsLeft = useCountdown()
 
  useEffect(() => {
    if (phase.name === 'finished') router.replace('/quiz/results')   // ch. 5.4
  }, [phase.name])
 
  if (!question) return null
 
  return (
    <Screen>
      <SessionHeader />
      <ProgressBar ratio={secondsLeft / 20} />
      <View className="flex-1 justify-center">
        <AppText variant="heading">{question.prompt}</AppText>
      </View>
      <View className="gap-2.5">
        {question.choices.map((choice, i) => (
          <AnswerButton
            key={i}
            label={choice}
            state={answerState(phase, i, question.correctIndex)}   // lib pure ↓
            onPress={() => answer(i, secondsLeft)}
          />
        ))}
      </View>
      {phase.name === 'answered' && (
        <Card className="mt-3">
          <AppText variant="caption">{question.explanation}</AppText>
          <Button label="Question suivante" onPress={next} className="mt-3" />
        </Card>
      )}
    </Screen>
  )
}

// lib/answer-state.ts — pur, testable : quelle tête a le bouton i selon la phase ?
export function answerState(phase: Phase, i: number, correctIndex: number): AnswerState {
  if (phase.name !== 'answered') return 'idle'
  if (i === correctIndex) return 'correct'          // la bonne réponse se révèle toujours
  if (i === phase.choiceIndex) return 'incorrect'   // le mauvais choix du joueur
  return 'disabled'
}

// Dans QuizScreen
useEffect(() => {
  const sub = BackHandler.addEventListener('hardwareBackPress', () => {
    const { phase } = useSession.getState()
    if (phase.name === 'finished') return false      // laisser faire
    router.push('/quiz/confirm-quit')                 // notre modal du ch. 5.4
    return true                                       // ← on a consommé l'événement
  })
  return () => sub.remove()
}, [])