feat: chat v lobby

client/src/components/LobbyChat.scss

@@ -0,0 +1,35 @@
+.lobby-chat {
+    margin-top: 12px;
+
+    .lobby-chat-messages {
+        height: 140px;
+        overflow-y: auto;
+        border: 1px solid rgba(127, 127, 127, 0.35);
+        border-radius: 6px;
+        padding: 6px 8px;
+        margin-bottom: 6px;
+        font-size: 0.9rem;
+        word-break: break-word;
+    }
+
+    .lobby-chat-emojis {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px;
+        margin-bottom: 4px;
+
+        button {
+            border: none;
+            background: none;
+            padding: 0 3px;
+            font-size: 1.2rem;
+            line-height: 1.4;
+            border-radius: 4px;
+            cursor: pointer;
+
+            &:hover {
+                background: rgba(127, 127, 127, 0.2);
+            }
+        }
+    }
+}

client/src/components/LobbyChat.tsx

@@ -0,0 +1,64 @@
+import { FormEvent, useEffect, useRef, useState } from "react";
+import { Form } from "react-bootstrap";
+import { socket } from "../context/socket";
+import { getToken } from "../Utils";
+import "./LobbyChat.scss";
+
+const EMOJIS = ['😀', '😂', '😎', '😢', '😡', '👍', '👎', '👋', '🎉', '🔥', '❤️', '🍕', '🍔', '🍺', '⏳'];
+
+type LobbyChatMessage = { game: string, login: string, text: string };
+
+/** Jednoduchý chat v lobby minihry — zprávy se drží jen po dobu zobrazení lobby. */
+export default function LobbyChat({ game }: { game: string }) {
+    const [messages, setMessages] = useState<LobbyChatMessage[]>([]);
+    const [text, setText] = useState('');
+    const listRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        const onMessage = (m: LobbyChatMessage) => {
+            if (m.game === game) setMessages(prev => [...prev.slice(-99), m]);
+        };
+        socket.on('lobbychat:message', onMessage);
+        return () => { socket.off('lobbychat:message', onMessage); };
+    }, [game]);
+
+    useEffect(() => {
+        listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
+    }, [messages]);
+
+    const submit = (e: FormEvent) => {
+        e.preventDefault();
+        if (!text.trim()) return;
+        socket.emit('lobbychat:send', { token: getToken(), game, text });
+        setText('');
+    };
+
+    const addEmoji = (emoji: string) => {
+        setText(prev => (prev + emoji).slice(0, 200));
+        inputRef.current?.focus();
+    };
+
+    return (
+        <div className="lobby-chat">
+            <div className="lobby-chat-messages" ref={listRef}>
+                {messages.length === 0 && <div className="text-muted">Zatím žádné zprávy…</div>}
+                {messages.map((m, i) => <div key={i}><strong>{m.login}: </strong>{m.text}</div>)}
+            </div>
+            <div className="lobby-chat-emojis">
+                {EMOJIS.map(e => <button key={e} type="button" onClick={() => addEmoji(e)}>{e}</button>)}
+            </div>
+            <Form onSubmit={submit}>
+                <Form.Control
+                    ref={inputRef}
+                    size="sm"
+                    value={text}
+                    onChange={e => setText(e.target.value)}
+                    placeholder="Napište zprávu…"
+                    maxLength={200}
+                    onKeyDown={e => e.stopPropagation()}
+                />
+            </Form>
+        </div>
+    );
+}

client/src/components/PongGame.tsx

@@ -5,6 +5,7 @@ import { useAuth } from "../context/auth";
 import { getToken } from "../Utils";
 import { useGameIcon } from "../games/themeIcons";
 import { useTouchDevice } from "../hooks/useTouchDevice";
+import LobbyChat from "./LobbyChat";
 import "./PongGame.scss";
 
 // Typy musí odpovídat server/src/pongGame.ts (stav chodí přes websocket, ne přes OpenAPI)
@@ -257,6 +258,7 @@ export default function PongGame() {
                         {login === state?.host && state?.players.some(p => p.bot) && (
                             <Button size="sm" variant="outline-secondary" onClick={() => send('pong:removeBot')}>Odebrat bota</Button>
                         )}
+                        {isPlayer && <LobbyChat game="pong" />}
                     </>
                 );
             default:

client/src/components/ReactionDuel.tsx

@@ -5,6 +5,7 @@ import { useAuth } from "../context/auth";
 import { getToken } from "../Utils";
 import { useGameIcon } from "../games/themeIcons";
 import { useTouchDevice } from "../hooks/useTouchDevice";
+import LobbyChat from "./LobbyChat";
 import "./ReactionDuel.scss";
 
 // Typy musí odpovídat server/src/reactionDuel.ts (stav chodí přes websocket, ne přes OpenAPI)
@@ -183,6 +184,7 @@ export default function ReactionDuel() {
                         </ul>
                         {state && state.players.length < state.minPlayers &&
                             <p className="text-muted">Čeká se na další hráče…</p>}
+                        {isPlayer && <LobbyChat game="duel" />}
                     </>
                 );
             case 'waiting':

client/src/components/SnakeGame.tsx

@@ -8,6 +8,7 @@ import { getToken } from "../Utils";
 import { useGameIcon } from "../games/themeIcons";
 import { useTouchDevice } from "../hooks/useTouchDevice";
 import TouchButton from "./TouchButton";
+import LobbyChat from "./LobbyChat";
 import "./SnakeGame.scss";
 
 // Typy musí odpovídat server/src/snakeGame.ts (stav chodí přes websocket, ne přes OpenAPI)
@@ -279,6 +280,7 @@ export default function SnakeGame() {
                                 </li>
                             ))}
                         </ul>
+                        {isPlayer && <LobbyChat game="snake" />}
                     </>
                 );
             case 'countdown':

client/src/components/TankGame.tsx

@@ -8,6 +8,7 @@ import {
     BIOMES, BotLevel, drawTanks, FLASH_MS, MuzzleFlash, PICKUPS, PickupType, tankColor, TankMode, TankPhase,
     TankPlayer, TankState, TEAM_COLORS, TEAM_NAMES,
 } from "../games/tankRender";
+import LobbyChat from "./LobbyChat";
 import "./TankGame.scss";
 
 const OPEN_EVENT = 'luncher:open-tanks';
@@ -426,6 +427,7 @@ export default function TankGame() {
                 {state.hardcore && ' V aréně je tma: vidíte jen okolí tanku a kužel reflektoru ve směru věže, světlo zastaví zdi a bedny.'
                     + (state.teams ? ' Co osvítí spoluhráč, vidíte také.' : '') + ' Výbuchy a výstřely prosvítí i tmou.'}
             </p>
+            {isPlayer && <LobbyChat game="tanks" />}
         </>
     );
 

client/src/components/TetrisGame.tsx

@@ -9,6 +9,7 @@ import { TetrisSession, WIDTH, HEIGHT, pieceCells, Piece } from "../games/tetris
 import { useGameIcon } from "../games/themeIcons";
 import { useTouchDevice } from "../hooks/useTouchDevice";
 import TouchButton from "./TouchButton";
+import LobbyChat from "./LobbyChat";
 import "./TetrisGame.scss";
 
 // Typy musí odpovídat server/src/tetrisGame.ts (stav chodí přes websocket, ne přes OpenAPI)
@@ -554,6 +555,7 @@ export default function TetrisGame() {
                         {state && state.players.length < state.minPlayers &&
                             <p className="text-muted">Čeká se na další hráče… Pro hru o samotě použijte Trénink.</p>}
                         {renderSettings()}
+                        {isPlayer && <LobbyChat game="tetris" />}
                     </>
                 );
             case 'countdown':