Add React frontend and clean up legacy HTTP backend

2026-06-15 22:20:56 +02:00
parent b8e2d15e27
commit beaf142ee4
40 changed files with 8328 additions and 437 deletions
@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { useGameStore } from '../store/gameStore';
+import NameModal from '../components/NameModal';
+import RulesModal from '../components/RulesModal';
+
+type ModalState = { mode: 'create' } | { mode: 'join'; gid: string } | null;
+
+export default function GameList() {
+  const games = useGameStore((s) => s.games);
+  const [modal, setModal] = useState<ModalState>(null);
+  const [showRules, setShowRules] = useState(false);
+
+  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 flex-col gap-3 mb-6">
+        {games.length === 0 && (
+          <p className="text-center text-gray-500 py-4">Ziadne hry. Vytvor prvu!</p>
+        )}
+        {games.map((g) => {
+          const full = g.players.length >= 4;
+          const unavailable = full || g.started;
+          return (
+            <div
+              key={g.gid}
+              className="flex items-center justify-between bg-slate-800 rounded-xl px-4 py-3"
+            >
+              <div>
+                <p className="font-semibold">{g.name}</p>
+                <p className="text-xs text-gray-400">
+                  {g.players.length}/4 hracov
+                  {g.started ? ' · zacata' : ''}
+                </p>
+              </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"
+              >
+                {full ? 'Plna' : g.started ? 'Zacata' : 'Vstup'}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
+      <button
+        onClick={() => setModal({ mode: 'create' })}
+        className="w-full py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold text-lg"
+      >
+        + Vytvorit novu hru
+      </button>
+
+      <button
+        onClick={() => setShowRules(true)}
+        className="w-full py-2 rounded-xl bg-slate-700 hover:bg-slate-600 text-sm text-gray-300"
+      >
+        Pravidlá hry
+      </button>
+
+      {showRules && <RulesModal onClose={() => setShowRules(false)} />}
+
+      {modal && (
+        <NameModal
+          mode={modal.mode}
+          gid={modal.mode === 'join' ? modal.gid : undefined}
+          onClose={() => setModal(null)}
+        />
+      )}
+    </div>
+  );
+}