Integrate join codes, player management, and themes

This update introduces "join codes" for games to simplify game joining. Enhancements include player role and winner management for better organization. Additionally, theme preferences are now user-configurable and persisted server-side.

frontend/src/components/WinnerCard.jsx

@@ -1,31 +1,55 @@
+// src/components/WinnerCard.jsx
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
-export default function WinnerCard({ value, setValue, onSave }) {
+/**
+ * props:
+ * - players: [{id,email}]
+ * - winnerUserId: string|null
+ * - setWinnerUserId: fn
+ * - onSave: fn (async ok)
+ */
+export default function WinnerCard({ players, winnerUserId, setWinnerUserId, onSave }) {
+  const hasPlayers = Array.isArray(players) && players.length > 0;
+
   return (
     <div style={{ marginTop: 14 }}>
       <div style={styles.card}>
         <div style={styles.sectionHeader}>Sieger</div>
 
-        <div style={styles.cardBody}>
-          <input
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            placeholder="Name des Siegers"
-            style={{ ...styles.input, flex: 1 }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") onSave();
-            }}
-          />
+        <div style={{ padding: 12, display: "grid", gap: 10 }}>
+          {!hasPlayers ? (
+            <div style={{ color: stylesTokens.textDim, opacity: 0.9 }}>
+              Keine Spieler gefunden (Admin wird nicht angezeigt).
+            </div>
+          ) : (
+            <select
+              value={winnerUserId || ""}
+              onChange={(e) => setWinnerUserId(e.target.value || null)}
+              style={styles.input}
+            >
+              <option value="">— kein Sieger gesetzt —</option>
+              {players.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.email}
+                </option>
+              ))}
+            </select>
+          )}
 
-          <button onClick={onSave} style={styles.primaryBtn} title="Speichern">
-            Speichern
-          </button>
-        </div>
+          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+            <button onClick={() => setWinnerUserId(null)} style={styles.secondaryBtn}>
+              Leeren
+            </button>
+            <button onClick={onSave} style={styles.primaryBtn} disabled={!hasPlayers}>
+              Speichern
+            </button>
+          </div>
 
-        <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim }}>
-          Wird pro Spiel lokal gespeichert.
+          <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+            Der Sieger wird im Spiel gespeichert und ist für alle Spieler sichtbar.
+          </div>
         </div>
       </div>
     </div>