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>

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "bridzik-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "qrcode.react": "^4.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.26.0",
@@ -5353,6 +5354,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

frontend/package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "qrcode.react": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0",

frontend/src/App.tsx

@@ -1,20 +1,24 @@
 import { useEffect } from 'react';
-import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { useGameStore } from './store/gameStore';
 import { socket, emit } from './lib/socket';
 import type { MyPlayer } from './types';
 import GameList from './pages/GameList';
 import Lobby from './pages/Lobby';
 import GameTable from './pages/GameTable';
+import Auth from './pages/Auth';
+import History from './pages/History';
 
 function AppInner() {
   const navigate = useNavigate();
+  const location = useLocation();
+  const account = useGameStore((s) => s.account);
   const myPlayer = useGameStore((s) => s.myPlayer);
   const gameStatus = useGameStore((s) => s.gameStatus);
   const error = useGameStore((s) => s.error);
   const clearError = useGameStore((s) => s.clearError);
 
-  // Reconnect on every socket connect event (handles auto-reconnects after network drops)
+  // Reconnect into an in-progress game on every socket connect (after network drops).
   useEffect(() => {
     const doReconnect = () => {
       const saved = localStorage.getItem('bridzik_player');
@@ -27,10 +31,20 @@ function AppInner() {
     return () => { socket.off('connect', doReconnect); };
   }, []);
 
-  // Single authoritative navigation: derive target from store state
-  const targetRoute = myPlayer
-    ? gameStatus ? `/game/${gameStatus.gid}` : `/lobby/${myPlayer.gid}`
-    : null;
+  // Single authoritative navigation:
+  //  - not logged in            → /auth
+  //  - logged in & in a game     → lobby/game
+  //  - logged in, no game, on /auth (just logged in) → leave for the game list
+  //  - logged in, no game, elsewhere → null (let the user navigate: list/history)
+  const onGameRoute =
+    location.pathname === '/auth' ||
+    location.pathname.startsWith('/game') ||
+    location.pathname.startsWith('/lobby');
+  const targetRoute = !account
+    ? '/auth'
+    : myPlayer
+      ? gameStatus ? `/game/${gameStatus.gid}` : `/lobby/${myPlayer.gid}`
+      : onGameRoute ? '/' : null;
 
   useEffect(() => {
     if (!targetRoute) return;
@@ -52,7 +66,9 @@ function AppInner() {
         </div>
       )}
       <Routes>
+        <Route path="/auth" element={<Auth />} />
         <Route path="/" element={<GameList />} />
+        <Route path="/history" element={<History />} />
         <Route path="/lobby/:gid" element={<Lobby />} />
         <Route path="/game/:gid" element={<GameTable />} />
         <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/components/NameModal.tsx

@@ -3,16 +3,16 @@ import { useGameStore } from '../store/gameStore';
 import { emit } from '../lib/socket';
 
 interface Props {
-  mode: 'create' | 'join';
-  gid?: string;
   onClose: () => void;
 }
 
-export default function NameModal({ mode, gid, onClose }: Props) {
-  const [name, setName] = useState(localStorage.getItem('bridzik_name') ?? '');
+/** Prompt for a new game's name. Identity is taken from the logged-in session,
+ *  so no player name is asked here. */
+export default function NameModal({ onClose }: Props) {
+  const [name, setName] = useState('');
   const myPlayer = useGameStore((s) => s.myPlayer);
 
-  // Close modal once we have a player identity
+  // Close once we've joined the just-created game (create → register chain done).
   useEffect(() => {
     if (myPlayer) onClose();
   }, [myPlayer, onClose]);
@@ -21,29 +21,22 @@ export default function NameModal({ mode, gid, onClose }: Props) {
     e.preventDefault();
     const trimmed = name.trim();
     if (!trimmed) return;
-    localStorage.setItem('bridzik_name', trimmed);
-
-    if (mode === 'join' && gid) {
-      // emit.registerPlayer sets _pendingGid so the listener can resolve gid
-      emit.registerPlayer(gid, trimmed);
-    } else {
-      // emit.createGame stores the name; the socket listener auto-chains registerPlayer
-      emit.createGame(trimmed);
-    }
+    // Stores the name; the socket listener auto-chains register_player.
+    emit.createGame(trimmed);
   };
 
   return (
     <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-40 p-4">
       <div className="bg-slate-800 rounded-2xl p-6 w-full max-w-sm shadow-xl">
-        <h2 className="text-lg font-bold mb-4 text-white">Zadaj svoje meno</h2>
+        <h2 className="text-lg font-bold mb-4 text-white">Nazov hry</h2>
         <form onSubmit={handleSubmit} className="flex flex-col gap-4">
           <input
             autoFocus
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            maxLength={20}
-            placeholder="Tvoje meno"
+            maxLength={30}
+            placeholder="Napr. Vecerna partia"
             className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500"
           />
           <div className="flex gap-2 justify-end">
@@ -59,7 +52,7 @@ export default function NameModal({ mode, gid, onClose }: Props) {
               disabled={!name.trim()}
               className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-semibold disabled:opacity-40"
             >
-              Potvrdit
+              Vytvorit
             </button>
           </div>
         </form>

frontend/src/lib/socket.ts

@@ -1,23 +1,54 @@
 import { io } from 'socket.io-client';
 import { useGameStore } from '../store/gameStore';
-import type { GameInfo, GameStatusPayload, Hand, MyPlayer } from '../types';
+import type {
+  Account,
+  GameDetail,
+  GameInfo,
+  GameStatusPayload,
+  Hand,
+  HistoryGame,
+  MyPlayer,
+  Registration,
+} from '../types';
 
 export const socket = io({ autoConnect: false });
 
+/** Attach (or clear) the session token sent in the Socket.IO `auth` handshake
+ *  so the server can auto-login this connection (now and on every reconnect). */
+export function setAuthToken(token: string | null) {
+  socket.auth = token ? { token } : {};
+}
+
 // Module-level state for the create→register chain and gid resolution on register_player
 let _pendingGid: string | null = null;
 let _createName: string | null = null;
 
 export const emit = {
+  // auth
+  registerAccount: (username: string) => socket.emit('register_account', username),
+  confirmAccount: (username: string, code: string) =>
+    socket.emit('confirm_account', username, code),
+  login: (username: string, code: string) => socket.emit('login', username, code),
+  // history
+  getPlayerHistory: () => socket.emit('get_player_history'),
+  getGameDetail: (gid: string) => socket.emit('get_game_detail', gid),
+  // lobby / game
   createGame: (name: string) => {
     _createName = name;
     socket.emit('create_game', name);
   },
-  registerPlayer: (gid: string, name: string) => {
+  registerPlayer: (gid: string) => {
     _pendingGid = gid;
-    socket.emit('register_player', gid, name);
+    socket.emit('register_player', gid);
+  },
+  // Re-seat into an already-started game via the logged-in account (e.g. after
+  // a server restart). The server replies with register_player + game_status.
+  rejoinGame: (gid: string) => {
+    _pendingGid = gid;
+    socket.emit('rejoin_game', gid);
   },
   leaveGame: () => socket.emit('leave_game'),
+  endGame: (gid: string) => socket.emit('end_game', gid),
   startGame: (gid: string) => socket.emit('start_game', gid),
   reconnectToGame: (gid: string, token: string) => socket.emit('reconnect_to_game', gid, token),
   gameStatus: () => socket.emit('game_status'),
@@ -31,10 +62,34 @@ export function setupSocketListeners() {
     useGameStore.getState().setGames(games);
   });
 
+  // Registration step 1: server returns the otpauth URI to render as a QR code.
+  socket.on('register_account', (data: Registration) => {
+    useGameStore.getState().setRegistration(data);
+  });
+
+  // Login / confirm / auto-login. A token is present on explicit login (persist it);
+  // auto-login on connect omits it (we keep the stored one).
+  socket.on('login', ({ player, token }: { player: Account; token?: string }) => {
+    if (token) {
+      localStorage.setItem('bridzik_token', token);
+      setAuthToken(token);
+    }
+    useGameStore.getState().setAccount(player);
+    useGameStore.getState().setRegistration(null);
+  });
+
+  socket.on('get_player_history', ({ games }: { games: HistoryGame[] }) => {
+    useGameStore.getState().setHistory(games);
+  });
+
+  socket.on('get_game_detail', (detail: GameDetail) => {
+    useGameStore.getState().setGameDetail(detail);
+  });
+
   socket.on('create_game', ({ gid }: { gid: string }) => {
-    // Auto-chain: register into the just-created game using the stored name
+    // Auto-chain: register into the just-created game (identity comes from the session).
     if (_createName !== null) {
-      emit.registerPlayer(gid, _createName);
+      emit.registerPlayer(gid);
       _createName = null;
     }
   });
@@ -55,6 +110,12 @@ export function setupSocketListeners() {
     useGameStore.getState().setGameStatus(payload);
   });
 
+  // Host ended the game permanently -> drop local game state, back to lobby.
+  socket.on('game_ended', () => {
+    useGameStore.getState().reset();
+    localStorage.removeItem('bridzik_player');
+  });
+
   socket.on('player_cards', ({ cards }: { cards: Hand }) => {
     useGameStore.getState().setHand(cards);
   });
@@ -66,4 +127,9 @@ export function setupSocketListeners() {
   socket.on('error', ({ error }: { error: string }) => {
     useGameStore.getState().setError(error);
   });
+
+  // Surface connection failures instead of silently buffering emits.
+  socket.on('connect_error', (err: Error) => {
+    useGameStore.getState().setError(`Spojenie so serverom zlyhalo: ${err.message}`);
+  });
 }

frontend/src/main.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
-import { setupSocketListeners, socket } from './lib/socket';
+import { setupSocketListeners, socket, setAuthToken } from './lib/socket';
 
 setupSocketListeners();
+// Carry the stored session token into the handshake so the server auto-logs us in.
+setAuthToken(localStorage.getItem('bridzik_token'));
 socket.connect();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

frontend/src/pages/Auth.tsx

@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { useGameStore } from '../store/gameStore';
+import { emit } from '../lib/socket';
+
+type Mode = 'login' | 'register';
+
+export default function Auth() {
+  const [mode, setMode] = useState<Mode>('login');
+  const [username, setUsername] = useState(localStorage.getItem('bridzik_name') ?? '');
+  const [code, setCode] = useState('');
+  const registration = useGameStore((s) => s.registration);
+  const setRegistration = useGameStore((s) => s.setRegistration);
+
+  const remember = (name: string) => localStorage.setItem('bridzik_name', name.trim());
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username.trim() || code.trim().length < 6) return;
+    remember(username);
+    emit.login(username.trim(), code.trim());
+  };
+
+  const handleRegisterStart = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username.trim()) return;
+    remember(username);
+    emit.registerAccount(username.trim());
+  };
+
+  const handleConfirm = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (code.trim().length < 6) return;
+    emit.confirmAccount(username.trim(), code.trim());
+  };
+
+  const switchMode = (m: Mode) => {
+    setMode(m);
+    setCode('');
+    setRegistration(null);
+  };
+
+  return (
+    <div className="max-w-sm mx-auto p-4 pt-10">
+      <h1 className="text-2xl font-bold text-center mb-2 tracking-wide">Bridzik</h1>
+      <p className="text-center text-gray-400 text-sm mb-6">
+        Prihlas sa kodom z aplikacie (napr. Google Authenticator).
+      </p>
+
+      <div className="flex mb-6 rounded-xl overflow-hidden border border-slate-700">
+        <button
+          onClick={() => switchMode('login')}
+          className={`flex-1 py-2 text-sm font-semibold ${
+            mode === 'login' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-gray-400'
+          }`}
+        >
+          Prihlasenie
+        </button>
+        <button
+          onClick={() => switchMode('register')}
+          className={`flex-1 py-2 text-sm font-semibold ${
+            mode === 'register' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-gray-400'
+          }`}
+        >
+          Registracia
+        </button>
+      </div>
+
+      {mode === 'login' && (
+        <form onSubmit={handleLogin} className="flex flex-col gap-4">
+          <input
+            autoFocus
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            maxLength={40}
+            placeholder="Pouzivatelske meno"
+            className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <input
+            type="text"
+            inputMode="numeric"
+            value={code}
+            onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+            maxLength={6}
+            placeholder="6-miestny kod"
+            className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500 tracking-widest font-mono"
+          />
+          <button
+            type="submit"
+            disabled={!username.trim() || code.trim().length < 6}
+            className="py-3 rounded-xl bg-blue-600 hover:bg-blue-500 font-bold disabled:opacity-40"
+          >
+            Prihlasit
+          </button>
+        </form>
+      )}
+
+      {mode === 'register' && !registration && (
+        <form onSubmit={handleRegisterStart} className="flex flex-col gap-4">
+          <input
+            autoFocus
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            maxLength={40}
+            placeholder="Zvol si pouzivatelske meno"
+            className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <button
+            type="submit"
+            disabled={!username.trim()}
+            className="py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold disabled:opacity-40"
+          >
+            Vytvorit ucet
+          </button>
+        </form>
+      )}
+
+      {mode === 'register' && registration && (
+        <div className="flex flex-col gap-4">
+          <p className="text-sm text-gray-300">
+            Naskenuj QR kod do autentifikacnej aplikacie a opis aktualny kod.
+          </p>
+          <div className="bg-white rounded-xl p-4 flex justify-center">
+            <QRCodeSVG value={registration.otpauth_uri} size={176} />
+          </div>
+          <div className="text-xs text-gray-400 text-center">
+            Alebo zadaj rucne kluc:
+            <span className="block font-mono text-gray-200 break-all mt-1">
+              {registration.secret}
+            </span>
+          </div>
+          <form onSubmit={handleConfirm} className="flex flex-col gap-3">
+            <input
+              autoFocus
+              type="text"
+              inputMode="numeric"
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
+              maxLength={6}
+              placeholder="6-miestny kod"
+              className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500 tracking-widest font-mono"
+            />
+            <button
+              type="submit"
+              disabled={code.trim().length < 6}
+              className="py-3 rounded-xl bg-blue-600 hover:bg-blue-500 font-bold disabled:opacity-40"
+            >
+              Potvrdit a prihlasit
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/GameList.tsx

@@ -1,18 +1,42 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useGameStore } from '../store/gameStore';
+import { emit, socket, setAuthToken } from '../lib/socket';
 import NameModal from '../components/NameModal';
 import RulesModal from '../components/RulesModal';
 
-type ModalState = { mode: 'create' } | { mode: 'join'; gid: string } | null;
-
 export default function GameList() {
+  const navigate = useNavigate();
   const games = useGameStore((s) => s.games);
-  const [modal, setModal] = useState<ModalState>(null);
+  const account = useGameStore((s) => s.account);
+  const [showCreate, setShowCreate] = useState(false);
   const [showRules, setShowRules] = useState(false);
 
+  const handleLogout = () => {
+    localStorage.removeItem('bridzik_token');
+    localStorage.removeItem('bridzik_player');
+    setAuthToken(null);
+    useGameStore.getState().logout();
+    // Drop the authenticated server-side session for this connection.
+    socket.disconnect();
+    socket.connect();
+    navigate('/auth', { replace: true });
+  };
+
   return (
     <div className="max-w-md mx-auto p-4 pt-8">
-      <h1 className="text-2xl font-bold text-center mb-6 tracking-wide">Bridzik</h1>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold tracking-wide">Bridzik</h1>
+        <div className="flex items-center gap-3 text-sm">
+          <span className="text-gray-400">{account?.username}</span>
+          <button onClick={() => navigate('/history')} className="text-blue-400 hover:text-blue-300">
+            Historia
+          </button>
+          <button onClick={handleLogout} className="text-gray-400 hover:text-white">
+            Odhlasit
+          </button>
+        </div>
+      </div>
 
       <div className="flex flex-col gap-3 mb-6">
         {games.length === 0 && (
@@ -20,7 +44,11 @@ export default function GameList() {
         )}
         {games.map((g) => {
           const full = g.players.length >= 4;
-          const unavailable = full || g.started;
+          const isMember =
+            !!account && g.players.some((p) => p.player_id === account.player_id);
+          const canResume = g.started && isMember;
+          const unavailable = !canResume && (full || g.started);
+          const label = canResume ? 'Pokracovat' : full ? 'Plna' : g.started ? 'Zacata' : 'Vstup';
           return (
             <div
               key={g.gid}
@@ -35,10 +63,12 @@ export default function GameList() {
               </div>
               <button
                 disabled={unavailable}
-                onClick={() => setModal({ mode: 'join', gid: g.gid })}
-                className="px-4 py-1.5 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:cursor-default"
+                onClick={() => (canResume ? emit.rejoinGame(g.gid) : emit.registerPlayer(g.gid))}
+                className={`px-4 py-1.5 rounded-lg text-sm font-semibold disabled:opacity-40 disabled:cursor-default ${
+                  canResume ? 'bg-green-700 hover:bg-green-600' : 'bg-blue-600 hover:bg-blue-500'
+                }`}
               >
-                {full ? 'Plna' : g.started ? 'Zacata' : 'Vstup'}
+                {label}
               </button>
             </div>
           );
@@ -46,8 +76,8 @@ export default function GameList() {
       </div>
 
       <button
-        onClick={() => setModal({ mode: 'create' })}
-        className="w-full py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold text-lg"
+        onClick={() => setShowCreate(true)}
+        className="w-full py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold text-lg mb-3"
       >
         + Vytvorit novu hru
       </button>
@@ -61,13 +91,7 @@ export default function GameList() {
 
       {showRules && <RulesModal onClose={() => setShowRules(false)} />}
 
-      {modal && (
-        <NameModal
-          mode={modal.mode}
-          gid={modal.mode === 'join' ? modal.gid : undefined}
-          onClose={() => setModal(null)}
-        />
-      )}
+      {showCreate && <NameModal onClose={() => setShowCreate(false)} />}
     </div>
   );
 }

frontend/src/pages/GameTable.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useGameStore } from '../store/gameStore';
+import { emit } from '../lib/socket';
 import { leaveGame } from '../lib/leaveGame';
 import { computePlayable } from '../lib/gameRules';
 import Hand from '../components/Hand';
@@ -68,6 +69,11 @@ export default function GameTable() {
   const activePlayerName = players.find((p) => p.order === active_player)?.name ?? '';
 
   const handleLeave = () => leaveGame(navigate);
+  const handleEnd = () => {
+    if (window.confirm('Naozaj ukoncit celu hru pre vsetkych?')) {
+      emit.endGame(gameStatus.gid);
+    }
+  };
 
   return (
     <div className="max-w-lg mx-auto p-3 flex flex-col gap-3 pb-6">
@@ -77,9 +83,16 @@ export default function GameTable() {
           <span>Seria {series_number} / Kolo {round_number + 1}</span>
           <span className="ml-2 text-gray-500">({cards_in_round} kopok)</span>
         </div>
-        <button onClick={handleLeave} className="text-xs text-gray-500 hover:text-gray-300">
-          Odist
-        </button>
+        <div className="flex gap-3">
+          {myOrder === 0 && (
+            <button onClick={handleEnd} className="text-xs text-red-400 hover:text-red-300">
+              Ukoncit hru
+            </button>
+          )}
+          <button onClick={handleLeave} className="text-xs text-gray-500 hover:text-gray-300">
+            Odist
+          </button>
+        </div>
       </div>
 
       {/* Turn indicator */}

frontend/src/pages/History.tsx

@@ -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>
+  );
+}

frontend/src/store/gameStore.ts

@@ -1,14 +1,31 @@
 import { create } from 'zustand';
-import type { GameInfo, GameStatusPayload, Hand, MyPlayer } from '../types';
+import type {
+  Account,
+  GameDetail,
+  GameInfo,
+  GameStatusPayload,
+  Hand,
+  HistoryGame,
+  MyPlayer,
+  Registration,
+} from '../types';
 
 interface GameStore {
   games: GameInfo[];
+  account: Account | null;
+  registration: Registration | null;
+  history: HistoryGame[];
+  gameDetail: GameDetail | null;
   myPlayer: MyPlayer | null;
   gameStatus: GameStatusPayload | null;
   hand: Hand;
   error: string | null;
 
   setGames: (games: GameInfo[]) => void;
+  setAccount: (account: Account | null) => void;
+  setRegistration: (registration: Registration | null) => void;
+  setHistory: (history: HistoryGame[]) => void;
+  setGameDetail: (detail: GameDetail | null) => void;
   setMyPlayer: (player: MyPlayer | null) => void;
   setGameStatus: (status: GameStatusPayload) => void;
   setHand: (hand: Hand) => void;
@@ -16,16 +33,25 @@ interface GameStore {
   clearError: () => void;
   updatePlayerConnection: (order: number, connected: boolean) => void;
   reset: () => void;
+  logout: () => void;
 }
 
 export const useGameStore = create<GameStore>((set) => ({
   games: [],
+  account: null,
+  registration: null,
+  history: [],
+  gameDetail: null,
   myPlayer: null,
   gameStatus: null,
   hand: {},
   error: null,
 
   setGames: (games) => set({ games }),
+  setAccount: (account) => set({ account }),
+  setRegistration: (registration) => set({ registration }),
+  setHistory: (history) => set({ history }),
+  setGameDetail: (gameDetail) => set({ gameDetail }),
   setMyPlayer: (myPlayer) => set({ myPlayer }),
   setGameStatus: (gameStatus) => set({ gameStatus }),
   setHand: (hand) => set({ hand }),
@@ -43,4 +69,15 @@ export const useGameStore = create<GameStore>((set) => ({
         : null,
     })),
   reset: () => set({ myPlayer: null, gameStatus: null, hand: {}, error: null }),
+  logout: () =>
+    set({
+      account: null,
+      registration: null,
+      history: [],
+      gameDetail: null,
+      myPlayer: null,
+      gameStatus: null,
+      hand: {},
+      error: null,
+    }),
 }));

frontend/src/types.ts

@@ -10,6 +10,7 @@ export interface PlayerInfo {
   order: number;
   name: string;
   connected: boolean;
+  player_id?: number;
 }
 
 export interface MyPlayer {
@@ -51,3 +52,44 @@ export interface GameInfo {
 }
 
 export type Hand = Record<string, Card>;
+
+// --- authentication (TOTP) ---
+
+export interface Account {
+  player_id: number;
+  username: string;
+}
+
+export interface Registration {
+  username: string;
+  secret: string;
+  otpauth_uri: string;
+}
+
+// --- history ---
+
+export interface HistoryGame {
+  gid: string;
+  created_at: string | null;
+  ended_at: string | null;
+  players: string[];
+  my_points: number;
+}
+
+export interface GameDetailRound {
+  series_number: number;
+  round_number: number;
+  player_id: number;
+  username: string | null;
+  guess: number;
+  points: number;
+  won: boolean;
+}
+
+export interface GameDetail {
+  gid: string;
+  created_at: string | null;
+  ended_at: string | null;
+  players: { player_id: number; username: string }[];
+  rounds: GameDetailRound[];
+}

frontend/vite.config.ts

@@ -27,7 +27,9 @@ export default defineConfig({
     host: true,
     proxy: {
       '/socket.io': {
-        target: 'http://backend:5000',
+        // Local dev defaults to localhost; docker-compose sets VITE_BACKEND_URL
+        // to the backend service (http://backend:5000).
+        target: process.env.VITE_BACKEND_URL ?? 'http://localhost:5000',
         ws: true,
         changeOrigin: true,
       },