docs: p3-5 in progress)

2026-09-21 20:04:33 +02:00
1 parent 208fe98f1b
commit 0233be7fff
@@ -0,0 +1,124 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { ApiClientError, cardsApi } from '@/lib/api-client'
+import type { Card, CardInput } from '@/domain/card'
+
+const EMPTY_THEME = ''
+
+export function PlayView() {
+  const [themes, setThemes] = useState<string[]>([])
+  const [theme, setTheme] = useState<string>(EMPTY_THEME)
+  const [card, setCard] = useState<Card | null>(null)
+  const [revealed, setRevealed] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [drawing, setDrawing] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    cardsApi
+      .themes()
+      .then((data) => {
+        if (!cancelled) setThemes(data)
+      })
+      .catch(() => {
+        /* thèmes optionnels : le jeu reste utilisable en tirage global */
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const draw = useCallback(async () => {
+    setDrawing(true)
+    setRevealed(false)
+    setError(null)
+    try {
+      const picked = await cardsApi.random(theme === EMPTY_THEME ? undefined : theme)
+      setCard(picked)
+    } catch (e) {
+      if (e instanceof ApiClientError) {
+        setError(e.message)
+        setCard(null)
+      }
+      else {
+        setError('Impossible de tirer une carte')
+        setCard(null)
+      }
+    } finally {
+      setDrawing(false)
+    }
+  }, [theme])
+
+  return (
+    <section aria-label="Jeu de révision" className="mx-auto max-w-2xl px-4 py-8">
+      <div className="mb-6 flex flex-wrap items-end gap-4">
+        <div>
+          <label htmlFor="play-theme" className="block text-sm font-medium text-slate-700">
+            Thème
+          </label>
+          <select
+            id="play-theme"
+            value={theme}
+            onChange={(e) => setTheme(e.target.value)}
+            className="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm"
+          >
+            <option value={EMPTY_THEME}>Tous les thèmes</option>
+            {themes.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </div>
+        <button
+          type="button"
+          onClick={() => void draw()}
+          disabled={drawing}
+          className="rounded-lg bg-slate-900 px-5 py-2 text-sm font-semibold text-white hover:bg-slate-700 disabled:opacity-50"
+        >
+          {drawing ? 'Tirage…' : 'Tirer une carte'}
+        </button>
+      </div>
+
+      {error && (
+        <p role="alert" className="text-red-600">{error}</p>
+      )}
+
+      {card && (
+        <article className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+          <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600">
+            {card.theme}
+          </span>
+          <h2 className="mt-3 text-xl font-bold text-slate-900">{card.question}</h2>
+          {revealed ? (
+            <div className="mt-4 rounded-xl bg-slate-50 p-4">
+              <p className="text-slate-700">{card.response}</p>
+              <button
+                type="button"
+                onClick={() => setRevealed(false)}
+                className="mt-3 rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100"
+              >
+                Masquer la réponse
+              </button>
+            </div>
+          ) : (
+            <div className="mt-4">
+              <button
+                type="button"
+                onClick={() => setRevealed(true)}
+                className="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700"
+              >
+                Voir la réponse
+              </button>
+            </div>
+          )}
+        </article>
+      )}
+
+      {card === null && !error && (
+        <p className="text-slate-500">Cliquez sur &quot;Tirer une carte&quot; pour commencer.</p>
+      )}
+    </section>
+  )
+}