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,74 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { useGameStore } from '../store/gameStore';
+import { emit } from '../lib/socket';
+
+export default function Lobby() {
+  const { gid } = useParams<{ gid: string }>();
+  const navigate = useNavigate();
+  const myPlayer = useGameStore((s) => s.myPlayer);
+  const games = useGameStore((s) => s.games);
+
+  const game = games.find((g) => g.gid === gid);
+  const players = game?.players ?? [];
+  const isHost = myPlayer?.order === 0;
+  const canStart = players.length === 4 && isHost;
+
+  const handleLeave = () => {
+    emit.leaveGame();
+    useGameStore.getState().reset();
+    localStorage.removeItem('bridzik_player');
+    navigate('/', { replace: true });
+  };
+
+  const handleCopyCode = () => {
+    if (gid) navigator.clipboard.writeText(gid);
+  };
+
+  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">{game?.name ?? 'Hra'}</h1>
+        <button onClick={handleLeave} className="text-sm text-gray-400 hover:text-white">
+          Odist
+        </button>
+      </div>
+
+      <div className="bg-slate-800 rounded-xl p-4 mb-4 flex items-center justify-between">
+        <div>
+          <p className="text-xs text-gray-400 mb-1">Kod hry</p>
+          <p className="font-mono text-sm text-gray-200 break-all">{gid}</p>
+        </div>
+        <button
+          onClick={handleCopyCode}
+          className="ml-3 px-3 py-1 rounded-lg text-sm bg-slate-700 hover:bg-slate-600"
+        >
+          Kopirovat
+        </button>
+      </div>
+
+      <div className="bg-slate-800 rounded-xl p-4 mb-6 flex flex-col gap-3">
+        {[0, 1, 2, 3].map((order) => {
+          const p = players.find((pl) => pl.order === order);
+          return (
+            <div key={order} className="flex items-center gap-3">
+              <span className={`text-lg ${p ? 'text-green-400' : 'text-gray-600'}`}>
+                {p ? '✓' : '○'}
+              </span>
+              <span className={p ? 'text-white' : 'text-gray-500 italic'}>
+                {p ? `${p.name}${myPlayer?.order === p.order ? ' (ty)' : ''}` : 'Caka sa...'}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      <button
+        disabled={!canStart}
+        onClick={() => gid && emit.startGame(gid)}
+        className="w-full py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold text-lg disabled:opacity-40 disabled:cursor-default"
+      >
+        {isHost ? (canStart ? 'Zacat hru' : `Caka sa na hracov (${players.length}/4)`) : 'Caka sa na hosta...'}
+      </button>
+    </div>
+  );
+}