Restructure HelpModal with lobby workflow and improve content organization

Reorganized help sections to match game flow: lobby/start, game selection, status marking, notes/chips, game end, and user menu. Updated section titles and descriptions for clarity, added lobby mechanics explanation with host controls and chip generation, and included game completion details with read-only enforcement. Removed source file comment, simplified badge styling with inline styles, and refined text for better readability. Moved privacy tip to end and adjusted section numb

frontend/src/App.jsx

@@ -698,7 +698,9 @@ export default function App() {
           onOpenNewGame={() => setNewGameOpen(true)}
         />
 
-        <AdminPanel open={me.role === "admin" && adminOpen} onClose={() => setAdminOpen(false)} />
+        {me.role === "admin" && (
+          <AdminPanel open={adminOpen} onClose={() => setAdminOpen(false)} />
+        )}
 
         <GamePickerCard
           games={games}

frontend/src/components/HelpModal.jsx

@@ -1,4 +1,3 @@
-// src/components/HelpModal.jsx
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
@@ -10,177 +9,170 @@ export default function HelpModal({ open, onClose }) {
     <div style={styles.modalOverlay} onMouseDown={onClose}>
       <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
         <div style={styles.modalHeader}>
-          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Hilfe</div>
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Hilfe & Spielablauf</div>
           <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
             ✕
           </button>
         </div>
 
         <div style={styles.helpBody}>
-          {/* ===== 0) Spiele & Navigation ===== */}
+          <div style={styles.helpSectionTitle}>1) Lobby & Spielstart</div>
-          <div style={styles.helpSectionTitle}>0) Spiele auswählen / Neues Spiel</div>
           <div style={styles.helpText}>
-            Oben im Bereich <b>Spiel</b> kannst du zwischen bestehenden Spielen wechseln oder ein neues
+            Ein neues Spiel startet zunächst als Lobby. Teile den angezeigten <b>Spiel-Code</b> mit den
-            Spiel erstellen:
+            anderen Spielern. Sie können dem Spiel beitreten, solange es noch nicht gestartet wurde.
+          </div>
+
+          <div style={styles.helpList}>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>👑</span>
+              <div>
+                Der <b>Host</b> sieht alle beigetretenen Spieler und startet das Spiel.
+              </div>
+            </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>▶</span>
+              <div>
+                Der Start ist ab <b>zwei Spielern</b> möglich. Danach können keine weiteren Spieler
+                beitreten.
+              </div>
+            </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>SNE</span>
+              <div>
+                Beim Start werden die Spieler-Chips automatisch erstellt. Beispiel: Sascha Nesterovic
+                wird zu <b>SNE</b>.
+              </div>
+            </div>
+          </div>
+
+          <div style={styles.helpDivider} />
+
+          <div style={styles.helpSectionTitle}>2) Spiel auswählen</div>
+          <div style={styles.helpText}>
+            Mit dem Dropdown im Bereich <b>Spiel</b> wechselst du zwischen deinen Spielen. Über
+            <b> New Game</b> kannst du ein neues Spiel erstellen oder einem bestehenden Spiel beitreten.
           </div>
 
           <div style={styles.helpList}>
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>▼</span>
               <div>
-                <b>Spiel-Auswahl</b> (Dropdown neben dem Hilfe-Button) = vorhandene / alte Spiele öffnen
+                <b>Spiel-Auswahl</b> = vorhandene Spiele öffnen
               </div>
             </div>
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>✦</span>
               <div>
-                <b>„Neues Spiel“</b> = erstellt ein neues Spiel und öffnet es automatisch
+                <b>New Game</b> = neues Spiel erstellen oder per Code beitreten
               </div>
             </div>
           </div>
 
           <div style={styles.helpDivider} />
 
-          {/* ===== 1) Status per Tippen ===== */}
+          <div style={styles.helpSectionTitle}>3) Namen antippen – Status</div>
-          <div style={styles.helpSectionTitle}>1) Namen antippen (Status)</div>
           <div style={styles.helpText}>
-            Tippe auf einen Namen, um den Status zu ändern. Reihenfolge:
+            Tippe während des laufenden Spiels auf den Namen eines Eintrags. Die Statusfolge ist:
           </div>
 
           <div style={styles.helpList}>
             <div style={styles.helpListRow}>
-              <span
+              <span style={{ ...styles.helpBadge, background: "rgba(0,190,80,0.18)", color: "#baf3c9" }}>✓</span>
-                style={{
+              <div><b>Grün</b> = bestätigt / vorhanden</div>
-                  ...styles.helpBadge,
-                  background: "rgba(0,190,80,0.18)",
-                  color: "#baf3c9",
-                }}
-              >
-                ✓
-              </span>
-              <div>
-                <b>Grün</b> = bestätigt / fix richtig
-              </div>
             </div>
-
             <div style={styles.helpListRow}>
-              <span
+              <span style={{ ...styles.helpBadge, background: "rgba(255,35,35,0.18)", color: "#ffb3b3" }}>✕</span>
-                style={{
+              <div><b>Rot</b> = ausgeschlossen / nicht vorhanden</div>
-                  ...styles.helpBadge,
-                  background: "rgba(255,35,35,0.18)",
-                  color: "#ffb3b3",
-                }}
-              >
-                ✕
-              </span>
-              <div>
-                <b>Rot</b> = ausgeschlossen / fix falsch
-              </div>
             </div>
-
             <div style={styles.helpListRow}>
-              <span
+              <span style={{ ...styles.helpBadge, background: "rgba(140,140,140,0.14)", color: "rgba(233,216,166,0.85)" }}>?</span>
-                style={{
+              <div><b>Grau</b> = unsicher / vielleicht</div>
-                  ...styles.helpBadge,
-                  background: "rgba(140,140,140,0.14)",
-                  color: "rgba(233,216,166,0.85)",
-                }}
-              >
-                ?
-              </span>
-              <div>
-                <b>Grau</b> = unsicher / „vielleicht“
-              </div>
             </div>
-
             <div style={styles.helpListRow}>
-              <span
+              <span style={{ ...styles.helpBadge, background: "rgba(255,255,255,0.08)", color: "rgba(233,216,166,0.75)" }}>–</span>
-                style={{
+              <div><b>Leer</b> = noch nicht bewertet</div>
-                  ...styles.helpBadge,
-                  background: "rgba(255,255,255,0.08)",
-                  color: "rgba(233,216,166,0.75)",
-                }}
-              >
-                –
-              </span>
-              <div>
-                <b>Leer</b> = noch nicht bewertet
-              </div>
             </div>
           </div>
 
           <div style={styles.helpDivider} />
 
-          {/* ===== 2) i / m / s Notizen ===== */}
+          <div style={styles.helpSectionTitle}>4) Notizen & Spieler-Chips</div>
-          <div style={styles.helpSectionTitle}>2) i / m / s Button (Notizen)</div>
           <div style={styles.helpText}>
-            Rechts pro Zeile gibt es einen Button, der durch diese Werte rotiert:
+            Der Button rechts in jeder Zeile rotiert durch deine persönlichen Notizen:
           </div>
 
           <div style={styles.helpList}>
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>i</span>
-              <div>
+              <div><b>i</b> = Ich habe diese Karte</div>
-                <b>i</b> = „Ich habe diese Karte“
-              </div>
             </div>
-
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>m</span>
-              <div>
+              <div><b>m</b> = Karte aus dem mittleren Deck</div>
-                <b>m</b> = „Karte aus dem mittleren Deck“
-              </div>
             </div>
-
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>s</span>
-              <div>
+              <div><b>s</b> = Ein anderer Spieler hat die Karte; danach wählst du den passenden Chip</div>
-                <b>s</b> = „Ein anderer Spieler hat die Karte“ → danach Chip auswählen (z.B. <b>s.AL</b>)
+            </div>
-              </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>SNE</span>
+              <div><b>s.SNE</b> = Sascha Nesterovic besitzt die Karte</div>
             </div>
-
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>—</span>
-              <div>
+              <div><b>—</b> = keine Zusatznotiz</div>
-                <b>—</b> = keine Notiz
-              </div>
             </div>
           </div>
 
           <div style={styles.helpDivider} />
 
-          {/* ===== 3) User-Menü ===== */}
+          <div style={styles.helpSectionTitle}>5) Spielende</div>
-          <div style={styles.helpSectionTitle}>3) User-Menü (Passwort / Logout)</div>
           <div style={styles.helpText}>
-            Oben rechts im <b>User</b>-Menü findest du persönliche Einstellungen:
+            Nur der Host kann den Sieger festlegen. Sobald ein Sieger gespeichert wurde, gilt das Spiel
+            als beendet:
           </div>
-
           <div style={styles.helpList}>
             <div style={styles.helpListRow}>
-              <span style={styles.helpMiniTag}>👤</span>
+              <span style={styles.helpMiniTag}>🔒</span>
-              <div>
+              <div>Alle Notizzettel werden <b>schreibgeschützt</b>.</div>
-                <b>User</b> öffnen = zeigt die aktuell verwendete Email-Adresse
+            </div>
-              </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>🏆</span>
+              <div>Der Sieger wird für alle Spieler angezeigt.</div>
+            </div>
+          </div>
+
+          <div style={styles.helpDivider} />
+
+          <div style={styles.helpSectionTitle}>6) User-Menü</div>
+          <div style={styles.helpText}>
+            Oben rechts findest du abhängig von deiner Rolle das <b>User</b>- oder <b>Admin</b>-Menü.
+          </div>
+          <div style={styles.helpList}>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>📊</span>
+              <div><b>Statistik</b> = persönliche Spiele- und Siegstatistik</div>
+            </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>🎨</span>
+              <div><b>Design ändern</b> = Theme auswählen</div>
             </div>
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>🔒</span>
-              <div>
+              <div><b>Passwort setzen</b> = eigenes Passwort ändern</div>
-                <b>Passwort setzen</b> = eigenes Passwort ändern
-              </div>
             </div>
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>⎋</span>
-              <div>
+              <div><b>Logout</b> = abmelden</div>
-                <b>Logout</b> = ausloggen
+            </div>
-              </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>🛡️</span>
+              <div><b>Admin Dashboard</b> = nur für Administratoren</div>
             </div>
           </div>
 
-          <div style={styles.helpDivider} />
+          <div style={{ ...styles.helpText, marginTop: 16 }}>
-
+            Deine Notizen bleiben privat. Jeder Spieler sieht nur seinen eigenen Notizzettel.
-          <div style={styles.helpText}>
-            Tipp: Jeder Spieler sieht nur seine eigenen Notizen – andere Spieler können nicht in deinen
-            Zettel schauen.
           </div>
         </div>
       </div>