From f64da5ac863a97200aca4666107b14f5b2342c86 Mon Sep 17 00:00:00 2001
From: MrEgosar <debisge@gmail.com>
Date: Sun, 1 Nov 2026 20:09:35 +0100
Subject: [PATCH] Lobby: Einladungslinks unter dem jeweiligen Team

Der Organisator sieht Code, Link, Kopieren und Neuer Code jetzt unten in der Team-Karte. Im Bereich Einladungen bleiben Zuschauer-, Stream- und Organisator-Links.
---
 client/src/components/OrganizerPanel.jsx | 64 ++++++++++++++----------
 client/src/components/TeamCard.jsx       |  2 +
 client/src/styles.css                    |  4 ++
 3 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/client/src/components/OrganizerPanel.jsx b/client/src/components/OrganizerPanel.jsx
index a289200..63c2792 100644
--- a/client/src/components/OrganizerPanel.jsx
+++ b/client/src/components/OrganizerPanel.jsx
@@ -1,40 +1,52 @@
 import CopyField from './CopyField.jsx';
 
+function regenerate(act, target, label) {
+  if (!window.confirm(`Neuen Code für ${label} erzeugen? Der alte Link funktioniert dann nicht mehr. Bereits beigetretene Spieler bleiben im Team.`)) return;
+  act('codes/regenerate', { target }, `Neuer Code für ${label}`);
+}
+
+/** Einladungslink eines Teams, steht für den Organisator unten in der Team-Karte. */
+export function TeamInvite({ state, side, act, busy }) {
+  const { codes, links } = state.organizer;
+  const open = !['finished', 'cancelled'].includes(state.status);
+  const name = state.teams[side].name;
+  return (
+    <div className={`invite team-invite team-${side}`}>
+      <div className="invite-head">
+        <strong>Einladung</strong>
+        <span className="invite-code">{codes[side]}</span>
+        {open && <button className="link-btn" disabled={!!busy} onClick={() => regenerate(act, side, name)}>Neuer Code</button>}
+      </div>
+      <CopyField value={links[side]} />
+      <p className="small muted">Führt nur in {name}. Nur an dieses Team weitergeben.</p>
+    </div>
+  );
+}
+
 export default function OrganizerPanel({ state, act, busy, matchId, token }) {
   const { codes, links } = state.organizer;
   const open = !['finished', 'cancelled'].includes(state.status);
   const orgLink = `${window.location.origin}/m/${matchId}#org=${token}`;
-
-  const regen = (target, label) =>
-    window.confirm(`Neuen Code für ${label} erzeugen? Der alte Link funktioniert dann nicht mehr. Bereits beigetretene Spieler bleiben im Team.`) &&
-    act('codes/regenerate', { target }, `Neuer Code für ${label}`);
+  const label = 'Zuschauer (Stream, Kommentatoren)';
 
   return (
     <section className="panel organizer-panel">
       <h2>Einladungen</h2>
-      <p className="small muted">Jeder Link führt nur in das jeweilige Team. Gib ihn ausschließlich an dieses Team weiter.</p>
-      {[
-        ['A', state.teams.A.name, 'team-A'],
-        ['B', state.teams.B.name, 'team-B'],
-        ['spectator', 'Zuschauer (Stream, Kommentatoren)', 'spectator'],
-      ].map(([key, label, cls]) => (
-        <div key={key} className={`invite ${cls}`}>
-          <div className="invite-head">
-            <strong>{label}</strong>
-            <span className="invite-code">{codes[key]}</span>
-            {open && <button className="link-btn" disabled={!!busy} onClick={() => regen(key, label)}>Neuer Code</button>}
-          </div>
-          <CopyField value={links[key]} />
-          {key === 'spectator' && (
-            <div className="stream-link">
-              <CopyField label="Stream-Übersicht (als Browserquelle in OBS, 1920×1080)" value={links.stream} />
-              <a className="btn btn-sm" href={links.stream} target="_blank" rel="noreferrer">Stream-Ansicht öffnen</a>
-              <CopyField label="Match-Übersicht (nur dieses Match, ohne Zuschauercode)" value={links.overview} />
-              <a className="btn btn-sm" href={links.overview} target="_blank" rel="noreferrer">Match-Übersicht öffnen</a>
-            </div>
-          )}
+      <p className="small muted">Die Einladungslinks der Teams stehen unten in der jeweiligen Team-Karte.</p>
+      <div className="invite spectator">
+        <div className="invite-head">
+          <strong>{label}</strong>
+          <span className="invite-code">{codes.spectator}</span>
+          {open && <button className="link-btn" disabled={!!busy} onClick={() => regenerate(act, 'spectator', label)}>Neuer Code</button>}
         </div>
-      ))}
+        <CopyField value={links.spectator} />
+        <div className="stream-link">
+          <CopyField label="Stream-Übersicht (als Browserquelle in OBS, 1920×1080)" value={links.stream} />
+          <a className="btn btn-sm" href={links.stream} target="_blank" rel="noreferrer">Stream-Ansicht öffnen</a>
+          <CopyField label="Match-Übersicht (nur dieses Match, ohne Zuschauercode)" value={links.overview} />
+          <a className="btn btn-sm" href={links.overview} target="_blank" rel="noreferrer">Match-Übersicht öffnen</a>
+        </div>
+      </div>
       <details className="org-link">
         <summary>Organisator-Zugang auf einem anderen Gerät öffnen</summary>
         <p className="small muted">Dieser Link gibt volle Kontrolle über das Match. Nicht weitergeben.</p>
diff --git a/client/src/components/TeamCard.jsx b/client/src/components/TeamCard.jsx
index dc15850..0552385 100644
--- a/client/src/components/TeamCard.jsx
+++ b/client/src/components/TeamCard.jsx
@@ -1,3 +1,4 @@
+import { TeamInvite } from './OrganizerPanel.jsx';
 export default function TeamCard({ team, side, state, viewer, isOrg, act, busy }) {
   const isOwnTeam = viewer.team === side;
   const inLobby = state.status === 'lobby';
@@ -59,6 +60,7 @@ export default function TeamCard({ team, side, state, viewer, isOrg, act, busy }
         </div>
       )}
       {inLobby && !readiness.enough && <p className="small muted">Es fehlen noch {team.teamSize - readiness.count} Spieler.</p>}
+      {isOrg && state.organizer && <TeamInvite state={state} side={side} act={act} busy={busy} />}
     </section>
   );
 }
diff --git a/client/src/styles.css b/client/src/styles.css
index a541252..dd72573 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -775,3 +775,7 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
 .knife-connect { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-top: 10px; }
 .knife-connect > :first-child { flex: 1 1 260px; }
 .knife-actions { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
+.team-invite { margin-top: 12px; padding-right: 0; }
+.team-invite .copy-row { flex-wrap: wrap; }
+.team-invite .copy-row code { flex: 1 1 100%; font-size: .78rem; white-space: normal; word-break: break-all; overflow: visible; }
+.team-invite p { margin: 6px 0 0; }