Refactor and enhance game management, user roles, and state handling

This commit introduces significant changes across the backend and frontend to improve game creation, joining, and member management. Key updates include adding a host role, structured handling of winners, and a New Game modal in the frontend. The refactor also simplifies join codes, improves persistence for user themes, and enhances overall user interaction with better UI feedback and logic.

frontend/src/components/GamePickerCard.jsx

@@ -1,9 +1,8 @@
-// src/components/GamePickerCard.jsx
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
-export default function GamePickerCard({ games, gameId, setGameId, joinCode, onOpenHelp }) {
+export default function GamePickerCard({ games, gameId, setGameId, onOpenHelp }) {
   return (
     <div style={{ marginTop: 14 }}>
       <div style={styles.card}>
@@ -17,7 +16,7 @@ export default function GamePickerCard({ games, gameId, setGameId, joinCode, onO
           >
             {games.map((g) => (
               <option key={g.id} value={g.id}>
-                {g.name}
+                {g.name} {g.code ? `• ${g.code}` : ""}
               </option>
             ))}
           </select>
@@ -27,18 +26,16 @@ export default function GamePickerCard({ games, gameId, setGameId, joinCode, onO
           </button>
         </div>
 
-        {!!joinCode && (
-          <div
-            style={{
-              padding: "0 12px 12px",
-              fontSize: 12,
-              opacity: 0.85,
-              color: stylesTokens.textDim,
-            }}
-          >
-            Spiel-Code: <b style={{ color: stylesTokens.textGold }}>{joinCode}</b>
-          </div>
-        )}
+        {/* kleine Code Zeile unter dem Picker (optional nice) */}
+        {(() => {
+          const cur = games.find((x) => x.id === gameId);
+          if (!cur?.code) return null;
+          return (
+            <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim, opacity: 0.9 }}>
+              Code: <b style={{ color: stylesTokens.textGold }}>{cur.code}</b>
+            </div>
+          );
+        })()}
       </div>
     </div>
   );