Apply velvet-table redesign, fix game lifecycle and history bugs
Frontend: - Dark green/gold "velvet table" visual redesign across the whole app (Auth, Lobby, GameList, GameTable, History, GameOver, modals), with Playfair Display/DM Sans typography and a centralized Tailwind palette. - Desktop game table fit-scales to fill the window; mobile gets overlapping hand/trick layouts and larger touch-friendly cards. - Standings sidebar now groups completed rounds by series with a per-series subtotal row, struck-through tips on missed bids. - History page rewritten into a scoreboard-style detail view (player totals beside names, series grouped 2-up on desktop / stacked on mobile) and gained game names, completed/abandoned status, and a button to reopen a prematurely-ended game back into the lobby. Backend: - Fix started games being deleted from memory (and vanishing from everyone's lobby) when all players disconnect; only `end_game` tears down a started game now. - Fix a crash writing a timezone-aware datetime into the naive `ended_at` Postgres column. - Add `reopen_game`/`restore_game` to un-end a prematurely-ended game from history and resume it from the lobby. - Let any seated player end an abandoned game once the host is offline, not just the host, so the game isn't stuck forever. - Expose SERIES_PER_GAME/ROUNDS_PER_SERIES as named constants on the engine so the persistence layer derives game-completion rules from bridzik.py instead of re-encoding them. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
+49
-30
@@ -2,13 +2,18 @@ import { useState } from 'react';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { useGameStore } from '../store/gameStore';
|
||||
import { emit } from '../lib/socket';
|
||||
import RulesModal from '../components/RulesModal';
|
||||
|
||||
type Mode = 'login' | 'register';
|
||||
|
||||
const inputCls =
|
||||
'bg-circle text-green-score rounded-lg px-4 py-2 border border-gold/20 outline-none focus:border-gold/60 focus:ring-1 focus:ring-gold/30 placeholder:text-green-dim/60';
|
||||
|
||||
export default function Auth() {
|
||||
const [mode, setMode] = useState<Mode>('login');
|
||||
const [username, setUsername] = useState(localStorage.getItem('bridzik_name') ?? '');
|
||||
const [code, setCode] = useState('');
|
||||
const [showRules, setShowRules] = useState(false);
|
||||
const registration = useGameStore((s) => s.registration);
|
||||
const setRegistration = useGameStore((s) => s.setRegistration);
|
||||
|
||||
@@ -41,28 +46,28 @@ export default function Auth() {
|
||||
};
|
||||
|
||||
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).
|
||||
<div className="max-w-sm mx-auto p-4 pt-12 min-h-screen">
|
||||
<h1 className="font-serif text-4xl text-center text-gold tracking-wide mb-1">Bridžik</h1>
|
||||
<p className="text-center text-green-dim text-sm mb-7">
|
||||
Prihlás sa kódom z aplikácie (napr. Google Authenticator).
|
||||
</p>
|
||||
|
||||
<div className="flex mb-6 rounded-xl overflow-hidden border border-slate-700">
|
||||
<div className="flex mb-6 rounded-xl overflow-hidden border border-gold/20">
|
||||
<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'
|
||||
className={`flex-1 py-2 text-sm font-serif tracking-wide ${
|
||||
mode === 'login' ? 'bg-gold text-table' : 'bg-header text-green-dim'
|
||||
}`}
|
||||
>
|
||||
Prihlasenie
|
||||
Prihlásenie
|
||||
</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'
|
||||
className={`flex-1 py-2 text-sm font-serif tracking-wide ${
|
||||
mode === 'register' ? 'bg-gold text-table' : 'bg-header text-green-dim'
|
||||
}`}
|
||||
>
|
||||
Registracia
|
||||
Registrácia
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -74,8 +79,8 @@ export default function Auth() {
|
||||
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"
|
||||
placeholder="Používateľské meno"
|
||||
className={inputCls}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
@@ -83,15 +88,15 @@ export default function Auth() {
|
||||
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"
|
||||
placeholder="6-miestny kód"
|
||||
className={`${inputCls} 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"
|
||||
className="py-3 rounded-xl bg-gold text-table font-serif font-semibold hover:bg-gold-bright disabled:opacity-40 transition-colors"
|
||||
>
|
||||
Prihlasit
|
||||
Prihlásiť
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
@@ -104,30 +109,30 @@ export default function Auth() {
|
||||
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"
|
||||
placeholder="Zvoľ si používateľské meno"
|
||||
className={inputCls}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!username.trim()}
|
||||
className="py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold disabled:opacity-40"
|
||||
className="py-3 rounded-xl bg-gold text-table font-serif font-semibold hover:bg-gold-bright disabled:opacity-40 transition-colors"
|
||||
>
|
||||
Vytvorit ucet
|
||||
Vytvoriť účet
|
||||
</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 className="text-sm text-green-score">
|
||||
Naskenuj QR kód do autentifikačnej aplikácie a opíš aktuálny kód.
|
||||
</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">
|
||||
<div className="text-xs text-green-dim text-center">
|
||||
Alebo zadaj ručne kľúč:
|
||||
<span className="block font-mono text-green-score break-all mt-1">
|
||||
{registration.secret}
|
||||
</span>
|
||||
</div>
|
||||
@@ -139,19 +144,33 @@ export default function Auth() {
|
||||
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"
|
||||
placeholder="6-miestny kód"
|
||||
className={`${inputCls} 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"
|
||||
className="py-3 rounded-xl bg-gold text-table font-serif font-semibold hover:bg-gold-bright disabled:opacity-40 transition-colors"
|
||||
>
|
||||
Potvrdit a prihlasit
|
||||
Potvrdiť a prihlásiť
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rules are reachable before login — quiet link with the velvet divider motif. */}
|
||||
<div className="mt-10 flex items-center gap-3">
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-transparent to-gold/20" />
|
||||
<button
|
||||
onClick={() => setShowRules(true)}
|
||||
className="uppercase tracking-[.13em] text-[10px] text-green-dim hover:text-gold transition-colors"
|
||||
>
|
||||
Pravidlá hry
|
||||
</button>
|
||||
<div className="h-px flex-1 bg-gradient-to-l from-transparent to-gold/20" />
|
||||
</div>
|
||||
|
||||
{showRules && <RulesModal onClose={() => setShowRules(false)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user