Add persistence layer: TOTP auth, game history, restore

- db/ package: async SQLAlchemy engine + Player/Game/Guess models - api/auth.py: passwordless TOTP login (pyotp), session token via socket auth - api/history.py: record guesses/points, DB-backed standings, restore unfinished games on startup, host-only end_game - api/__init__.py: auth-gated handlers, accounts map, rejoin via account - frontend: Auth (QR + code) and History pages, resume/end-game in lobby/table - docker-compose: real PostgreSQL service wired via DATABASE_URL - tests_history.py for the persistence/auth layer; refresh CLAUDE.md Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-23 23:09:50 +02:00
parent beaf142ee4
commit 30c32b7714
24 changed files with 1446 additions and 87 deletions
@@ -0,0 +1,97 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useGameStore } from '../store/gameStore';
+import { emit } from '../lib/socket';
+
+function fmtDate(iso: string | null): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  return isNaN(d.getTime()) ? '—' : d.toLocaleString('sk-SK');
+}
+
+export default function History() {
+  const navigate = useNavigate();
+  const history = useGameStore((s) => s.history);
+  const detail = useGameStore((s) => s.gameDetail);
+  const setGameDetail = useGameStore((s) => s.setGameDetail);
+
+  useEffect(() => {
+    emit.getPlayerHistory();
+    return () => setGameDetail(null);
+  }, [setGameDetail]);
+
+  // --- detail view ---
+  if (detail) {
+    return (
+      <div className="max-w-md mx-auto p-4 pt-8">
+        <button
+          onClick={() => setGameDetail(null)}
+          className="text-sm text-gray-400 hover:text-white mb-4"
+        >
+          ← Spat na zoznam
+        </button>
+        <h1 className="text-xl font-bold mb-1">Detail hry</h1>
+        <p className="text-xs text-gray-400 mb-4">{fmtDate(detail.created_at)}</p>
+
+        <div className="bg-slate-800 rounded-xl overflow-hidden text-sm">
+          <div className="grid grid-cols-[auto_1fr_auto_auto] gap-2 px-3 py-2 text-xs text-gray-400 border-b border-slate-700">
+            <span>S/K</span>
+            <span>Hrac</span>
+            <span className="text-right">Tip</span>
+            <span className="text-right">Body</span>
+          </div>
+          {detail.rounds.map((r, i) => (
+            <div
+              key={i}
+              className="grid grid-cols-[auto_1fr_auto_auto] gap-2 px-3 py-1.5 border-b border-slate-700/50 last:border-0"
+            >
+              <span className="text-gray-500">
+                {r.series_number}/{r.round_number}
+              </span>
+              <span className="truncate">{r.username ?? `#${r.player_id}`}</span>
+              <span className="text-right font-mono">{r.guess}</span>
+              <span className={`text-right font-mono ${r.won ? 'text-green-400' : 'text-gray-500'}`}>
+                {r.points}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // --- list view ---
+  return (
+    <div className="max-w-md mx-auto p-4 pt-8">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-xl font-bold">Moja historia</h1>
+        <button onClick={() => navigate('/')} className="text-sm text-gray-400 hover:text-white">
+          Spat
+        </button>
+      </div>
+
+      {history.length === 0 && (
+        <p className="text-center text-gray-500 py-6">Zatial ziadne odohrane hry.</p>
+      )}
+
+      <div className="flex flex-col gap-3">
+        {history.map((g) => (
+          <button
+            key={g.gid}
+            onClick={() => emit.getGameDetail(g.gid)}
+            className="text-left bg-slate-800 hover:bg-slate-700 rounded-xl px-4 py-3"
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-gray-200">{fmtDate(g.created_at)}</span>
+              <span className="text-sm font-semibold text-green-400">{g.my_points} b.</span>
+            </div>
+            <p className="text-xs text-gray-400 mt-1 truncate">{g.players.join(', ')}</p>
+            <p className="text-[11px] text-gray-500 mt-0.5">
+              {g.ended_at ? 'dohrana' : 'nedohrana'}
+            </p>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}