batmanisko
d2125a050b
CI / Generate TypeScript types (push) Successful in 13s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 33s
CI / Build client (push) Successful in 42s
CI / Playwright E2E tests (push) Successful in 1m54s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 2s
430 lines
17 KiB
TypeScript
430 lines
17 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from "react";
|
||
import { Button, Form, Modal, Table } from "react-bootstrap";
|
||
import { socket } from "../context/socket";
|
||
import { useAuth } from "../context/auth";
|
||
import { getToken } from "../Utils";
|
||
import { useGameIcon } from "../games/themeIcons";
|
||
import "./DrawingGame.scss";
|
||
|
||
// Typy musí odpovídat server/src/drawingGame.ts (stav chodí přes websocket, ne přes OpenAPI)
|
||
type DrawPhase = 'idle' | 'lobby' | 'drawing' | 'reveal' | 'finished';
|
||
type DrawPlayer = { login: string, score: number, guessed: boolean, place?: number };
|
||
type ChatMessage = { login?: string, text: string, system?: boolean };
|
||
type Stroke = { color: string, size: number, points: [number, number][], start: boolean };
|
||
type DrawState = {
|
||
phase: DrawPhase,
|
||
host?: string,
|
||
players: DrawPlayer[],
|
||
drawer?: string,
|
||
round: number,
|
||
totalRounds: number,
|
||
hint?: string,
|
||
answer?: string,
|
||
remainingMs?: number,
|
||
messages: ChatMessage[],
|
||
minPlayers: number,
|
||
};
|
||
|
||
const OPEN_EVENT = 'luncher:open-drawing';
|
||
|
||
/** Otevře okno Kreslení. */
|
||
export const openDrawingGame = () => window.dispatchEvent(new Event(OPEN_EVENT));
|
||
|
||
const CANVAS_W = 800;
|
||
const CANVAS_H = 600;
|
||
/** Souřadnice tahů jsou 0–1000 v obou osách, nezávisle na velikosti plátna. */
|
||
const COORD_MAX = 1000;
|
||
const COLORS = ['#111827', '#ef4444', '#f97316', '#facc15', '#22c55e', '#3b82f6', '#a855f7', '#92400e', '#ffffff'];
|
||
const SIZES = [3, 8, 18];
|
||
/** Jak často se rozkreslený tah posílá ostatním (ms). */
|
||
const FLUSH_MS = 40;
|
||
const MEDALS = ['🥇', '🥈', '🥉'];
|
||
|
||
function drawStroke(ctx: CanvasRenderingContext2D, stroke: Stroke) {
|
||
const sx = CANVAS_W / COORD_MAX;
|
||
const sy = CANVAS_H / COORD_MAX;
|
||
ctx.strokeStyle = stroke.color;
|
||
ctx.fillStyle = stroke.color;
|
||
ctx.lineWidth = stroke.size;
|
||
ctx.lineCap = 'round';
|
||
ctx.lineJoin = 'round';
|
||
const [first, ...rest] = stroke.points;
|
||
if (rest.length === 0) {
|
||
ctx.beginPath();
|
||
ctx.arc(first[0] * sx, first[1] * sy, stroke.size / 2, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
return;
|
||
}
|
||
ctx.beginPath();
|
||
ctx.moveTo(first[0] * sx, first[1] * sy);
|
||
rest.forEach(([x, y]) => ctx.lineTo(x * sx, y * sy));
|
||
ctx.stroke();
|
||
}
|
||
|
||
function clearCanvas(ctx: CanvasRenderingContext2D) {
|
||
ctx.fillStyle = '#ffffff';
|
||
ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
|
||
}
|
||
|
||
/** Kreslení — jeden kreslí jídlo z dnešních menu, ostatní hádají v chatu. */
|
||
export default function DrawingGame() {
|
||
const auth = useAuth();
|
||
const login = auth?.login;
|
||
const [state, setState] = useState<DrawState | null>(null);
|
||
const [open, setOpen] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [word, setWord] = useState<string | null>(null);
|
||
const [color, setColor] = useState(COLORS[0]);
|
||
const [size, setSize] = useState(SIZES[1]);
|
||
const [guess, setGuess] = useState('');
|
||
const [secondsLeft, setSecondsLeft] = useState(0);
|
||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
const chatRef = useRef<HTMLDivElement>(null);
|
||
const prevPhase = useRef<DrawPhase>('idle');
|
||
/** Rozkreslený tah: body čekající na odeslání a poslední odeslaný bod pro navázání. */
|
||
const pending = useRef<{ points: [number, number][], start: boolean } | null>(null);
|
||
const drawingRef = useRef(false);
|
||
const icon = useGameIcon('drawing');
|
||
|
||
const send = useCallback((event: string, extra?: object) => {
|
||
setError(null);
|
||
socket.emit(event, { token: getToken(), ...extra });
|
||
}, []);
|
||
|
||
const ctx = () => canvasRef.current?.getContext('2d') ?? null;
|
||
|
||
useEffect(() => {
|
||
const onState = (s: DrawState) => setState(s);
|
||
const onError = (msg: string) => setError(msg);
|
||
const onOpen = () => setOpen(true);
|
||
const sync = () => socket.emit('draw:sync');
|
||
socket.on('draw:state', onState);
|
||
socket.on('draw:error', onError);
|
||
socket.on('connect', sync);
|
||
window.addEventListener(OPEN_EVENT, onOpen);
|
||
sync();
|
||
return () => {
|
||
socket.off('draw:state', onState);
|
||
socket.off('draw:error', onError);
|
||
socket.off('connect', sync);
|
||
window.removeEventListener(OPEN_EVENT, onOpen);
|
||
};
|
||
}, []);
|
||
|
||
const isDrawer = !!login && state?.phase === 'drawing' && state.drawer === login;
|
||
const isDrawerRef = useRef(isDrawer);
|
||
isDrawerRef.current = isDrawer;
|
||
|
||
// Kresba a slovo chodí jen klientům s otevřeným oknem
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const watch = () => socket.emit('draw:watch', { token: getToken() });
|
||
const onStrokes = (strokes: Stroke[]) => {
|
||
const c = ctx();
|
||
if (!c) return;
|
||
clearCanvas(c);
|
||
strokes.forEach(s => drawStroke(c, s));
|
||
};
|
||
// Vlastní tahy kreslíř vykresluje hned lokálně
|
||
const onStroke = (s: Stroke) => {
|
||
const c = ctx();
|
||
if (c && !isDrawerRef.current) drawStroke(c, s);
|
||
};
|
||
const onClear = () => {
|
||
const c = ctx();
|
||
if (c) clearCanvas(c);
|
||
};
|
||
const onWord = (w: string) => setWord(w);
|
||
socket.on('draw:strokes', onStrokes);
|
||
socket.on('draw:stroke', onStroke);
|
||
socket.on('draw:clear', onClear);
|
||
socket.on('draw:word', onWord);
|
||
socket.on('connect', watch);
|
||
watch();
|
||
return () => {
|
||
socket.off('draw:strokes', onStrokes);
|
||
socket.off('draw:stroke', onStroke);
|
||
socket.off('draw:clear', onClear);
|
||
socket.off('draw:word', onWord);
|
||
socket.off('connect', watch);
|
||
socket.emit('draw:unwatch');
|
||
};
|
||
}, [open]);
|
||
|
||
const isPlayer = !!login && !!state?.players.some(p => p.login === login);
|
||
const phase = state?.phase ?? 'idle';
|
||
const inGame = phase === 'drawing' || phase === 'reveal';
|
||
|
||
useEffect(() => {
|
||
if (prevPhase.current === 'lobby' && phase === 'drawing' && isPlayer) {
|
||
setOpen(true);
|
||
}
|
||
prevPhase.current = phase;
|
||
}, [phase, isPlayer]);
|
||
|
||
// Slovo patří jen k aktuálnímu kolu
|
||
useEffect(() => {
|
||
if (!isDrawer) setWord(null);
|
||
}, [isDrawer, state?.round]);
|
||
|
||
// Plátno se po vykreslení (nové kolo, otevření okna) vyplní bílou a znovu vyžádá kresba
|
||
useEffect(() => {
|
||
if (open && inGame) {
|
||
const c = ctx();
|
||
if (c) clearCanvas(c);
|
||
socket.emit('draw:watch', { token: getToken() });
|
||
}
|
||
}, [open, inGame]);
|
||
|
||
// Odpočet kola počítaný lokálně od posledního stavu ze serveru
|
||
useEffect(() => {
|
||
if (phase !== 'drawing' || state?.remainingMs === undefined) {
|
||
setSecondsLeft(0);
|
||
return;
|
||
}
|
||
const endsAt = Date.now() + state.remainingMs;
|
||
const update = () => setSecondsLeft(Math.max(0, Math.ceil((endsAt - Date.now()) / 1000)));
|
||
update();
|
||
const id = window.setInterval(update, 250);
|
||
return () => window.clearInterval(id);
|
||
}, [phase, state?.remainingMs]);
|
||
|
||
useEffect(() => {
|
||
chatRef.current?.scrollTo({ top: chatRef.current.scrollHeight });
|
||
}, [state?.messages.length]);
|
||
|
||
// Průběžné odesílání rozkresleného tahu
|
||
useEffect(() => {
|
||
if (!isDrawer) return;
|
||
const id = window.setInterval(() => {
|
||
const p = pending.current;
|
||
if (!p || p.points.length === 0 || (p.points.length === 1 && !p.start)) return;
|
||
send('draw:stroke', { color, size, points: p.points, start: p.start });
|
||
// Další dávka začne posledním bodem, aby čára navazovala
|
||
pending.current = drawingRef.current ? { points: [p.points[p.points.length - 1]], start: false } : null;
|
||
}, FLUSH_MS);
|
||
return () => window.clearInterval(id);
|
||
}, [isDrawer, color, size, send]);
|
||
|
||
const toCoords = (e: React.PointerEvent<HTMLCanvasElement>): [number, number] => {
|
||
const rect = e.currentTarget.getBoundingClientRect();
|
||
const x = Math.round(((e.clientX - rect.left) / rect.width) * COORD_MAX);
|
||
const y = Math.round(((e.clientY - rect.top) / rect.height) * COORD_MAX);
|
||
return [Math.min(COORD_MAX, Math.max(0, x)), Math.min(COORD_MAX, Math.max(0, y))];
|
||
};
|
||
|
||
const onPointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
|
||
if (!isDrawer) return;
|
||
e.currentTarget.setPointerCapture(e.pointerId);
|
||
drawingRef.current = true;
|
||
const point = toCoords(e);
|
||
pending.current = { points: [point], start: true };
|
||
const c = ctx();
|
||
if (c) drawStroke(c, { color, size, points: [point], start: true });
|
||
};
|
||
|
||
const onPointerMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
|
||
if (!isDrawer || !drawingRef.current || !pending.current) return;
|
||
const point = toCoords(e);
|
||
const prev = pending.current.points[pending.current.points.length - 1];
|
||
if (prev && prev[0] === point[0] && prev[1] === point[1]) return;
|
||
pending.current.points.push(point);
|
||
const c = ctx();
|
||
if (c && prev) drawStroke(c, { color, size, points: [prev, point], start: false });
|
||
};
|
||
|
||
const onPointerUp = () => {
|
||
drawingRef.current = false;
|
||
};
|
||
|
||
const submitGuess = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!guess.trim()) return;
|
||
send('draw:guess', { text: guess });
|
||
setGuess('');
|
||
};
|
||
|
||
if (!login) return null;
|
||
|
||
const me = state?.players.find(p => p.login === login);
|
||
const canChat = isPlayer && !isDrawer && !(phase === 'drawing' && me?.guessed);
|
||
const ranked = [...(state?.players ?? [])].sort((a, b) => b.score - a.score);
|
||
const showInvite = !open && phase === 'lobby' && !isPlayer;
|
||
const showReturn = !open && isPlayer && inGame;
|
||
|
||
const renderTopBar = () => {
|
||
if (phase === 'reveal' || phase === 'finished') {
|
||
return <div className="draw-topbar">Bylo to: <strong>{state?.answer}</strong></div>;
|
||
}
|
||
return (
|
||
<div className="draw-topbar">
|
||
<span>Kolo {state?.round}/{state?.totalRounds} · kreslí <strong>{state?.drawer}</strong></span>
|
||
{isDrawer
|
||
? <span className="draw-word">Nakreslete: <strong>{word ?? '…'}</strong></span>
|
||
: <span className="draw-hint">{state?.hint}</span>}
|
||
<span className={secondsLeft <= 10 ? 'draw-timer urgent' : 'draw-timer'}>⏱ {secondsLeft} s</span>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const renderGame = () => (
|
||
<>
|
||
{renderTopBar()}
|
||
<div className="draw-layout">
|
||
<div className="draw-canvas-col">
|
||
<canvas
|
||
ref={canvasRef}
|
||
className={`draw-canvas ${isDrawer ? 'active' : ''}`}
|
||
width={CANVAS_W}
|
||
height={CANVAS_H}
|
||
onPointerDown={onPointerDown}
|
||
onPointerMove={onPointerMove}
|
||
onPointerUp={onPointerUp}
|
||
onPointerCancel={onPointerUp}
|
||
/>
|
||
{isDrawer && (
|
||
<div className="draw-tools">
|
||
{COLORS.map(c => (
|
||
<button key={c} className={`draw-color ${c === color ? 'selected' : ''}`}
|
||
style={{ background: c }} onClick={() => setColor(c)} aria-label={`Barva ${c}`} />
|
||
))}
|
||
<span className="draw-sep" />
|
||
{SIZES.map(s => (
|
||
<button key={s} className={`draw-size ${s === size ? 'selected' : ''}`} onClick={() => setSize(s)}
|
||
aria-label={`Tloušťka ${s}`}>
|
||
<span style={{ width: s, height: s }} />
|
||
</button>
|
||
))}
|
||
<span className="draw-sep" />
|
||
<Button size="sm" variant="outline-secondary" onClick={() => send('draw:clear')}>Smazat</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="draw-side">
|
||
<ul className="draw-scores">
|
||
{ranked.map(p => (
|
||
<li key={p.login} className={p.guessed && phase === 'drawing' ? 'guessed' : undefined}>
|
||
<span>{p.login === state?.drawer && phase === 'drawing' ? '✏️ ' : ''}{p.login}{p.login === login && ' (vy)'}</span>
|
||
<strong>{p.score}</strong>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
{renderChat()}
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
|
||
const renderChat = () => (
|
||
<>
|
||
<div className="draw-chat" ref={chatRef}>
|
||
{state?.messages.map((m, i) => (
|
||
<div key={i} className={m.system ? 'system' : undefined}>
|
||
{m.login && <strong>{m.login}: </strong>}{m.text}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<Form onSubmit={submitGuess}>
|
||
<Form.Control
|
||
value={guess}
|
||
onChange={e => setGuess(e.target.value)}
|
||
placeholder={isDrawer ? 'Kreslíte…' : canChat ? 'Váš tip…' : 'Uhodli jste ✔'}
|
||
disabled={!canChat}
|
||
maxLength={100}
|
||
onKeyDown={e => e.stopPropagation()}
|
||
/>
|
||
</Form>
|
||
</>
|
||
);
|
||
|
||
const renderBody = () => {
|
||
switch (phase) {
|
||
case 'idle':
|
||
return (
|
||
<p>
|
||
Jeden kreslí jídlo z dnešních menu, ostatní hádají v chatu. Stačí trefit hlavní slovo
|
||
(např. „guláš"), diakritika nevadí. Čím dřív uhodnete, tím víc bodů; kreslíř dostává body
|
||
za každého, kdo uhodl. Každý kreslí jednou.
|
||
</p>
|
||
);
|
||
case 'lobby':
|
||
return (
|
||
<>
|
||
<p>Lobby založil(a) <strong>{state?.host}</strong>. Hráči ({state?.players.length}):</p>
|
||
<ul className="draw-players">
|
||
{state?.players.map(p => <li key={p.login}>{p.login}{p.login === state.host && ' 👑'}</li>)}
|
||
</ul>
|
||
{renderChat()}
|
||
</>
|
||
);
|
||
case 'drawing':
|
||
case 'reveal':
|
||
return renderGame();
|
||
case 'finished':
|
||
return (
|
||
<>
|
||
<Table size="sm">
|
||
<thead><tr><th>#</th><th>Hráč</th><th>Body</th></tr></thead>
|
||
<tbody>
|
||
{ranked.map((p, i) => (
|
||
<tr key={p.login}>
|
||
<td>{i < 3 ? MEDALS[i] : i + 1}</td>
|
||
<td>{p.login}{p.login === login && ' (vy)'}</td>
|
||
<td>{p.score}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</Table>
|
||
</>
|
||
);
|
||
}
|
||
};
|
||
|
||
const renderFooter = () => {
|
||
const buttons = [];
|
||
if (phase === 'idle' || phase === 'finished') {
|
||
buttons.push(<Button key="new" onClick={() => send('draw:join')}>{phase === 'idle' ? 'Založit lobby' : 'Nová hra'}</Button>);
|
||
}
|
||
if (phase === 'lobby') {
|
||
if (!isPlayer) {
|
||
buttons.push(<Button key="join" onClick={() => send('draw:join')}>Připojit se</Button>);
|
||
} else {
|
||
buttons.push(<Button key="leave" variant="outline-secondary" onClick={() => send('draw:leave')}>
|
||
{login === state?.host ? 'Zrušit lobby' : 'Odejít'}
|
||
</Button>);
|
||
if (login === state?.host) {
|
||
buttons.push(<Button key="start" onClick={() => send('draw:start')}
|
||
disabled={(state?.players.length ?? 0) < (state?.minPlayers ?? 2)}>Spustit hru</Button>);
|
||
}
|
||
}
|
||
}
|
||
buttons.push(<Button key="close" variant="secondary" onClick={() => setOpen(false)}>Zavřít</Button>);
|
||
return buttons;
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{showInvite && (
|
||
<button className="duel-invite draw-invite" onClick={() => setOpen(true)}>
|
||
{icon} <strong>{state?.host}</strong> zve na kreslení — připojit se
|
||
</button>
|
||
)}
|
||
{showReturn && (
|
||
<button className="duel-invite draw-invite" onClick={() => setOpen(true)}>
|
||
{icon} Kreslení běží — zpět do hry
|
||
</button>
|
||
)}
|
||
<Modal show={open} onHide={() => setOpen(false)} size="xl" fullscreen="sm-down" className="drawing-game-modal">
|
||
<Modal.Header closeButton>
|
||
<Modal.Title><h2>{icon} Kreslení</h2></Modal.Title>
|
||
</Modal.Header>
|
||
<Modal.Body>
|
||
{renderBody()}
|
||
{error && <div className="text-danger mt-2">{error}</div>}
|
||
</Modal.Body>
|
||
<Modal.Footer>{renderFooter()}</Modal.Footer>
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|