Chat im Match: Match-Chat und Team-Chat in Tabs, Zuschauer ausgeschlossen, nach Matchende nur lesbar

client/src/components/ChatBox.jsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+import { api } from '../lib/api.js';
+
+const time = (ms) => new Date(ms).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+const SEEN_KEY = (matchId) => `cs2mv:chat-seen:${matchId}`;
+
+function readSeen(matchId) {
+  try {
+    return JSON.parse(localStorage.getItem(SEEN_KEY(matchId))) ?? {};
+  } catch {
+    return {};
+  }
+}
+
+/** Chat im Match: Tabs für Match-Chat und Team-Chat über der Nachrichtenliste. */
+export default function ChatBox({ chat, matchId, token, playerToken }) {
+  const [active, setActive] = useState(chat.channels[0].key);
+  const [text, setText] = useState('');
+  const [error, setError] = useState(null);
+  const [sending, setSending] = useState(false);
+  const [seen, setSeen] = useState(() => readSeen(matchId));
+  const listRef = useRef(null);
+  const channel = chat.channels.some((c) => c.key === active) ? active : chat.channels[0].key;
+  const messages = chat.messages[channel] ?? [];
+  const lastId = (key) => chat.messages[key]?.at(-1)?.id ?? 0;
+
+  // Aktiven Kanal als gelesen merken und ans Ende scrollen, wenn neue Nachrichten kommen
+  useEffect(() => {
+    const id = lastId(channel);
+    if (id && seen[channel] !== id) {
+      const next = { ...seen, [channel]: id };
+      setSeen(next);
+      try {
+        localStorage.setItem(SEEN_KEY(matchId), JSON.stringify(next));
+      } catch {
+        /* ignorieren */
+      }
+    }
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [channel, messages.length]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const send = async (e) => {
+    e.preventDefault();
+    if (!text.trim() || sending) return;
+    setSending(true);
+    setError(null);
+    try {
+      await api(`/matches/${matchId}/chat`, { method: 'POST', body: { channel, text }, token, playerToken });
+      setText('');
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <section className="panel chat-box" aria-label="Chat">
+      <div className="chat-tabs" role="tablist">
+        {chat.channels.map((c) => {
+          const unread = c.key !== channel && lastId(c.key) > (seen[c.key] ?? 0);
+          return (
+            <button key={c.key} role="tab" aria-selected={c.key === channel}
+              className={`chat-tab chat-tab-${c.key.toLowerCase()} ${c.key === channel ? 'is-active' : ''}`}
+              onClick={() => setActive(c.key)}>
+              {c.label}
+              {unread && <span className="chat-unread" aria-label="neue Nachrichten" />}
+            </button>
+          );
+        })}
+      </div>
+      <ol className="chat-list" ref={listRef} aria-live="polite">
+        {messages.length === 0 && (
+          <li className="chat-empty muted small">
+            {channel === 'match' ? 'Noch keine Nachricht. Hier schreiben beide Teams und der Organisator.' : 'Noch keine Nachricht. Diesen Chat sieht nur dein Team.'}
+          </li>
+        )}
+        {messages.map((m) => (
+          <li key={m.id} className={`chat-msg ${m.mine ? 'is-mine' : ''}`}>
+            <span className="chat-meta">
+              <strong className={m.team ? `team-${m.team.toLowerCase()}` : 'chat-org'}>{m.author}</strong>
+              {m.organizer && m.team && <span className="chat-role">Organisator</span>}
+              <time className="muted">{time(m.at)}</time>
+            </span>
+            <span className="chat-text">{m.text}</span>
+          </li>
+        ))}
+      </ol>
+      {chat.canWrite ? (
+        <form className="chat-form" onSubmit={send}>
+          <input
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            maxLength={chat.maxLength}
+            placeholder={channel === 'match' ? 'Nachricht an alle im Match' : 'Nachricht an dein Team'}
+            aria-label="Nachricht"
+          />
+          <button className="btn btn-primary" disabled={!text.trim() || sending}>Senden</button>
+        </form>
+      ) : (
+        <p className="small muted chat-closed">Das Match ist beendet, der Chat ist nur noch lesbar.</p>
+      )}
+      {error && <p className="field-error">{error}</p>}
+    </section>
+  );
+}

client/src/pages/MatchPage.jsx

@@ -12,6 +12,7 @@ import SeriesList from '../components/SeriesList.jsx';
 import EventLog from '../components/EventLog.jsx';
 import MapImage from '../components/MapImage.jsx';
 import SelfJoin from '../components/SelfJoin.jsx';
+import ChatBox from '../components/ChatBox.jsx';
 
 export default function MatchPage() {
   const { id } = useParams();
@@ -137,6 +138,7 @@ export default function MatchPage() {
 
       {viewer.role !== 'public' && (
         <div className="match-lower">
+          {state.chat && <ChatBox chat={state.chat} matchId={id} token={token} playerToken={playerToken} />}
           <ServerPanel {...ctx} />
           {isOrg && <OrganizerPanel {...ctx} token={token} />}
           <EventLog events={state.events} />

client/src/styles.css

@@ -729,3 +729,26 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
 .knife-decide .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
 .knife-team-a { border-color: var(--team-a); color: var(--team-a); }
 .knife-team-b { border-color: var(--team-b); color: var(--team-b); }
+/* Chat im Match */
+.chat-box { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
+.chat-tabs { display: flex; border-bottom: 1px solid var(--line); }
+.chat-tab { position: relative; flex: 1; font: 700 1rem var(--display); color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 12px 14px 10px; cursor: pointer; }
+.chat-tab:hover { color: var(--text); }
+.chat-tab.is-active { color: var(--text); border-bottom-color: var(--primary); }
+.chat-tab-a.is-active { border-bottom-color: var(--team-a); }
+.chat-tab-b.is-active { border-bottom-color: var(--team-b); }
+.chat-unread { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--brand-red); vertical-align: middle; }
+.chat-list { list-style: none; margin: 0; padding: 10px 16px; height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
+.chat-empty { margin: auto 0; text-align: center; }
+.chat-msg { display: flex; flex-direction: column; gap: 1px; max-width: 92%; }
+.chat-msg.is-mine { align-self: flex-end; text-align: right; }
+.chat-meta { display: flex; gap: 6px; align-items: baseline; font-size: .8rem; }
+.chat-msg.is-mine .chat-meta { justify-content: flex-end; }
+.chat-org { color: var(--text); }
+.chat-role { font-size: .7rem; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); }
+.chat-text { display: inline-block; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); overflow-wrap: anywhere; }
+.chat-msg.is-mine .chat-text { background: color-mix(in srgb, var(--primary) 30%, var(--surface-2)); }
+.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
+.chat-form input { flex: 1; min-width: 0; }
+.chat-closed { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); }
+.chat-box .field-error { margin: 0 16px 10px; }