- {keys.map((key) => {
- // During guessing phase cards are visible at full opacity (just not clickable).
- // Only dim cards during the play phase when they can't be played.
- const disabled = isPlayPhase && (!myTurn || (playableKeys !== undefined && !playableKeys.has(key)));
- return (
- emit.playCard(key)}
- />
- );
- })}
+
+
+
+ Tvoje karty
+
+
+
+ {desktop ? (
+ // Desktop has room — keep cards grouped by suit, wrap if needed.
+
+ {groups.map(({ color, keys }) => (
+
+ {keys.map((key) => (
+
+ ))}
+
+ ))}
+
+ ) : (
+
+ )}
+
+ );
+}
+
+/** All cards in a single overlapping row that always fits the mobile width:
+ * small gap when few cards, partial overlap when many. */
+function MobileHand({
+ groups,
+ cardProps,
+}: {
+ groups: { color: CardColor; keys: string[] }[];
+ cardProps: (key: string) => { card: Hand[string]; highlight: boolean; disabled: boolean; onClick?: () => void };
+}) {
+ const keys = groups.flatMap((g) => g.keys);
+ const n = keys.length;
+
+ const CARD_W = 60; // matches CardView size "lg"
+ const MAX_ROW = 300; // keep within a small phone's usable width (~360px screens)
+ // Horizontal step between successive cards; 1 ? Math.min(CARD_W + 6, (MAX_ROW - CARD_W) / (n - 1)) : 0;
+ const margin = step - CARD_W; // negative → overlap, positive → gap
+
+ return (
+
+ {playOrder.map((order, i) => {
+ const card = stash.cards[String(order)];
+ // Only render cards that have actually been played — no placeholder slot
+ // for players still to play this trick.
+ if (!card) return null;
+ const offset = (order - myOrder + 4) % 4;
+ return (
+
+
+ {nameFor(order)}
+
+ {/* Outer: flies in from the player's direction. Inner: static rotation. */}
+
+
+
+
+
+
+ );
+ })}
);
}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9ecd347..fc64c58 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,6 +2,71 @@
@tailwind components;
@tailwind utilities;
-body {
- @apply bg-slate-900 text-white min-h-screen;
+@layer base {
+ html,
+ body,
+ #root {
+ @apply min-h-screen;
+ }
+
+ /* Single global type lever: enlarges all rem-based Tailwind text (menu/list/
+ auth/history screens). The game board uses fixed px + transform zoom, so it
+ stays pixel-precise. Bump this one value to scale the menus up or down. */
+ html {
+ font-size: 18px;
+ }
+
+ body {
+ @apply bg-table text-green-score font-sans;
+ background:
+ radial-gradient(ellipse at 50% -10%, rgba(48, 104, 69, 0.16), transparent 60%),
+ #090e0b;
+ background-attachment: fixed;
+ }
+
+ /* Form fields keep the velvet look across the app */
+ input::placeholder {
+ @apply text-green-dim/60;
+ }
+}
+
+/* Velvet-table animations (design handoff). Declared as raw CSS so they work
+ both via Tailwind's animate-* utilities and inline `animation:` strings. */
+@keyframes tp {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.5; }
+}
+@keyframes ci {
+ from { opacity: 0; transform: translateY(-6px) scale(0.9); }
+ to { opacity: 1; transform: none; }
+}
+@keyframes ar {
+ 0%, 100% {
+ box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18), 0 0 18px rgba(201, 168, 76, 0.5), 0 0 42px rgba(201, 168, 76, 0.2);
+ }
+ 50% {
+ box-shadow: 0 0 0 5px rgba(201, 168, 76, 0.34), 0 0 32px rgba(201, 168, 76, 0.85), 0 0 56px rgba(201, 168, 76, 0.3);
+ }
+}
+@keyframes g1 {
+ 0%, 100% { box-shadow: 0 0 18px rgba(201, 168, 76, 0.55), 0 6px 18px rgba(0, 0, 0, 0.55); }
+ 50% { box-shadow: 0 0 34px rgba(201, 168, 76, 0.85), 0 6px 18px rgba(0, 0, 0, 0.55); }
+}
+
+/* A played card slides into the centre from the direction of its player. */
+@keyframes fly-top {
+ from { opacity: 0; transform: translateY(-90px) scale(0.82); }
+ to { opacity: 1; transform: none; }
+}
+@keyframes fly-bottom {
+ from { opacity: 0; transform: translateY(90px) scale(0.82); }
+ to { opacity: 1; transform: none; }
+}
+@keyframes fly-left {
+ from { opacity: 0; transform: translateX(-110px) scale(0.82); }
+ to { opacity: 1; transform: none; }
+}
+@keyframes fly-right {
+ from { opacity: 0; transform: translateX(110px) scale(0.82); }
+ to { opacity: 1; transform: none; }
}
diff --git a/frontend/src/lib/socket.ts b/frontend/src/lib/socket.ts
index 6490d23..51bbb8d 100644
--- a/frontend/src/lib/socket.ts
+++ b/frontend/src/lib/socket.ts
@@ -47,6 +47,8 @@ export const emit = {
_pendingGid = gid;
socket.emit('rejoin_game', gid);
},
+ // Reopen a prematurely-ended game from history back into the lobby.
+ restoreGame: (gid: string) => socket.emit('restore_game', gid),
leaveGame: () => socket.emit('leave_game'),
endGame: (gid: string) => socket.emit('end_game', gid),
startGame: (gid: string) => socket.emit('start_game', gid),
diff --git a/frontend/src/lib/useFitScale.ts b/frontend/src/lib/useFitScale.ts
new file mode 100644
index 0000000..207cb86
--- /dev/null
+++ b/frontend/src/lib/useFitScale.ts
@@ -0,0 +1,45 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+/**
+ * Zooms the desktop board to fill the whole window. The board is a canvas of
+ * fixed height (`designHeight`) whose width is computed to span the viewport,
+ * and the scale is driven by height — so everything (cards, circles, text,
+ * header) grows and shrinks together while the felt always uses the full width.
+ *
+ * Returns the container ref (the viewport), the `scale` for `transform`, and
+ * `contentWidth` — the pre-scale canvas width (`viewportWidth / scale`) so that
+ * after scaling it exactly fills the viewport width.
+ *
+ * `deps` should change when the layout swaps (mobile↔desktop) so the observer
+ * re-attaches to the freshly rendered element.
+ */
+export function useFitScale(deps: unknown[] = [], designHeight = 860, maxScale = 2.6) {
+ const containerRef = useRef(null);
+ const [box, setBox] = useState({ scale: 1, contentWidth: 1280 });
+
+ useLayoutEffect(() => {
+ const el = containerRef.current;
+ if (!el) return;
+
+ const measure = () => {
+ const availW = el.clientWidth;
+ const availH = el.clientHeight;
+ if (!availW || !availH) return;
+ const scale = Math.min(maxScale, availH / designHeight);
+ const contentWidth = availW / scale;
+ setBox((prev) =>
+ Math.abs(prev.scale - scale) > 0.004 || Math.abs(prev.contentWidth - contentWidth) > 1
+ ? { scale, contentWidth }
+ : prev,
+ );
+ };
+
+ measure();
+ const ro = new ResizeObserver(measure);
+ ro.observe(el);
+ return () => ro.disconnect();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, deps);
+
+ return { containerRef, scale: box.scale, contentWidth: box.contentWidth };
+}
diff --git a/frontend/src/lib/useIsDesktop.ts b/frontend/src/lib/useIsDesktop.ts
new file mode 100644
index 0000000..d67f0bd
--- /dev/null
+++ b/frontend/src/lib/useIsDesktop.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+/** True on viewports >= 1024px — drives the desktop GameTable layout
+ * (score sidebar, larger oval, bigger cards). */
+export function useIsDesktop(): boolean {
+ const query = '(min-width: 1024px)';
+ const [isDesktop, setIsDesktop] = useState(
+ () => typeof window !== 'undefined' && window.matchMedia(query).matches,
+ );
+
+ useEffect(() => {
+ const mql = window.matchMedia(query);
+ const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
+ mql.addEventListener('change', handler);
+ setIsDesktop(mql.matches);
+ return () => mql.removeEventListener('change', handler);
+ }, []);
+
+ return isDesktop;
+}
diff --git a/frontend/src/pages/Auth.tsx b/frontend/src/pages/Auth.tsx
index 20945c0..2763b8f 100644
--- a/frontend/src/pages/Auth.tsx
+++ b/frontend/src/pages/Auth.tsx
@@ -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('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 (
-
-
Bridzik
-
- Prihlas sa kodom z aplikacie (napr. Google Authenticator).
+
+
Bridžik
+
+ Prihlás sa kódom z aplikácie (napr. Google Authenticator).