backend/app/main.py

@@ -1,9 +1,14 @@
 import os
+import random
+import string
+
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from sqlalchemy import text
 from sqlalchemy.orm import Session
+
 from .db import Base, engine, SessionLocal
-from .models import User, Entry, Category, Role
+from .models import User, Entry, Category, Role, Game, GameMember
 from .security import hash_password
 from .routes.auth import router as auth_router
 from .routes.admin import router as admin_router
@@ -14,7 +19,10 @@ app = FastAPI(title="Cluedo Sheet")
 # Intern: Frontend läuft auf :8081
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["http://localhost:8081", "http://127.0.0.1:8081"],
+    allow_origins=[
+        "http://localhost:8081",
+        "http://127.0.0.1:8081",
+    ],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -24,9 +32,71 @@ app.include_router(auth_router)
 app.include_router(admin_router)
 app.include_router(games_router)
 
+def _rand_join_code(n: int = 6) -> str:
+    # digits only (kahoot style)
+    return "".join(random.choice(string.digits) for _ in range(n))
+
+def _auto_migrate(db: Session):
+    """
+Very small, pragmatic auto-migration (no alembic).
+- creates missing tables via create_all
+- adds missing columns via ALTER TABLE (best effort)
+    """
+    # Users.theme_key
+    try:
+        db.execute(text("ALTER TABLE users ADD COLUMN theme_key VARCHAR DEFAULT 'default'"))
+        db.commit()
+    except Exception:
+        db.rollback()
+
+    # Games.join_code + winner_user_id
+    try:
+        db.execute(text("ALTER TABLE games ADD COLUMN join_code VARCHAR"))
+        db.commit()
+    except Exception:
+        db.rollback()
+
+    try:
+        db.execute(text("ALTER TABLE games ADD COLUMN winner_user_id VARCHAR"))
+        db.commit()
+    except Exception:
+        db.rollback()
+
+    # SheetState.chip_code
+    try:
+        db.execute(text("ALTER TABLE sheet_state ADD COLUMN chip_code VARCHAR"))
+        db.commit()
+    except Exception:
+        db.rollback()
+
+    # Ensure unique index for join_code (best effort)
+    try:
+        db.execute(text("CREATE UNIQUE INDEX IF NOT EXISTS ix_games_join_code ON games (join_code)"))
+        db.commit()
+    except Exception:
+        db.rollback()
+
+    # Backfill join_code for existing games
+    games = db.query(Game).filter((Game.join_code == None) | (Game.join_code == "")).all()  # noqa: E711
+    if games:
+        used = set([r[0] for r in db.execute(text("SELECT join_code FROM games WHERE join_code IS NOT NULL")).all() if r[0]])
+        for g in games:
+            code = _rand_join_code()
+            while code in used:
+                code = _rand_join_code()
+            g.join_code = code
+            used.add(code)
+        db.commit()
+
+    # Backfill membership: ensure owner is member
+    all_games = db.query(Game).all()
+    for g in all_games:
+        exists = db.query(GameMember).filter(GameMember.game_id == g.id, GameMember.user_id == g.owner_user_id).first()
+        if not exists:
+            db.add(GameMember(game_id=g.id, user_id=g.owner_user_id))
+    db.commit()
+
 def seed_entries(db: Session):
-    # Du kannst hier deine HP-Edition Einträge reinschreiben.
-    # (Für rein private Nutzung ok – öffentlich würde ich’s generisch machen.)
     if db.query(Entry).count() > 0:
         return
     suspects = ["Draco Malfoy","Crabbe & Goyle","Lucius Malfoy","Dolores Umbridge","Peter Pettigrew","Bellatrix Lestrange"]
@@ -46,14 +116,24 @@ def ensure_admin(db: Session):
     admin_pw = os.environ.get("ADMIN_PASSWORD", "ChangeMeNow123!")
     u = db.query(User).filter(User.email == admin_email).first()
     if not u:
-        db.add(User(email=admin_email, password_hash=hash_password(admin_pw), role=Role.admin.value))
+        db.add(
+            User(
+                email=admin_email,
+                password_hash=hash_password(admin_pw),
+                role=Role.admin.value,
+                theme_key="default",
+            )
+        )
         db.commit()
 
 @app.on_event("startup")
 def on_startup():
+    # create new tables
     Base.metadata.create_all(bind=engine)
+
     db = SessionLocal()
     try:
+        _auto_migrate(db)
         ensure_admin(db)
         seed_entries(db)
     finally:

backend/app/models.py

@@ -1,7 +1,7 @@
 import enum
 import uuid
 from sqlalchemy import String, Boolean, DateTime, ForeignKey, Integer, SmallInteger, UniqueConstraint
-from sqlalchemy.orm import Mapped, mapped_column, relationship
+from sqlalchemy.orm import Mapped, mapped_column
 from sqlalchemy.sql import func
 from .db import Base
 
@@ -21,14 +21,39 @@ class User(Base):
     password_hash: Mapped[str] = mapped_column(String)
     role: Mapped[str] = mapped_column(String, default=Role.user.value)
     disabled: Mapped[bool] = mapped_column(Boolean, default=False)
+
+    # UI preferences (persisted server-side)
+    theme_key: Mapped[str] = mapped_column(String, default="default")
+
     created_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())
 
 class Game(Base):
     __tablename__ = "games"
     id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+
+    # Creator/owner (for audit), membership controls access
     owner_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
+
     name: Mapped[str] = mapped_column(String)
     seed: Mapped[int] = mapped_column(Integer)
+
+    # "Kahoot"-style join code
+    join_code: Mapped[str] = mapped_column(String, unique=True, index=True)
+
+    # Winner (shared for the game)
+    winner_user_id: Mapped[str | None] = mapped_column(String, ForeignKey("users.id"), nullable=True)
+
+    created_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())
+
+class GameMember(Base):
+    __tablename__ = "game_members"
+    __table_args__ = (
+        UniqueConstraint("game_id", "user_id", name="uq_game_member"),
+    )
+
+    id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    game_id: Mapped[str] = mapped_column(String, ForeignKey("games.id"), index=True)
+    user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
     created_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())
 
 class Entry(Base):
@@ -46,6 +71,10 @@ class SheetState(Base):
     game_id: Mapped[str] = mapped_column(String, ForeignKey("games.id"), index=True)
     owner_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
     entry_id: Mapped[str] = mapped_column(String, ForeignKey("entries.id"), index=True)
-    status: Mapped[int] = mapped_column(SmallInteger, default=0)  # 0 unknown, 1 crossed, 2 confirmed
+
+    status: Mapped[int] = mapped_column(SmallInteger, default=0)  # 0 unknown, 1 crossed, 2 confirmed, 3 maybe
     note_tag: Mapped[str | None] = mapped_column(String, nullable=True)  # null | 'i' | 'm' | 's'
 
+    # Frontend "s.XX" chip selection (persisted)
+    chip_code: Mapped[str | None] = mapped_column(String, nullable=True)
+    

backend/app/routes/auth.py

@@ -1,8 +1,16 @@
 from fastapi import APIRouter, Depends, HTTPException, Request, Response
 from sqlalchemy.orm import Session
+
 from ..db import get_db
 from ..models import User
-from ..security import verify_password, make_session_value, set_session, clear_session, get_session_user_id, hash_password
+from ..security import (
+    verify_password,
+    make_session_value,
+    set_session,
+    clear_session,
+    get_session_user_id,
+    hash_password,
+)
 
 router = APIRouter(prefix="/auth", tags=["auth"])
 
@@ -10,11 +18,11 @@ router = APIRouter(prefix="/auth", tags=["auth"])
 def login(data: dict, resp: Response, db: Session = Depends(get_db)):
     email = (data.get("email") or "").lower().strip()
     password = data.get("password") or ""
-    user = db.query(User).filter(User.email == email, User.disabled == False).first()
+    user = db.query(User).filter(User.email == email, User.disabled == False).first()  # noqa: E712
     if not user or not verify_password(password, user.password_hash):
         raise HTTPException(status_code=401, detail="invalid credentials")
     set_session(resp, make_session_value(user.id))
-    return {"ok": True, "role": user.role, "email": user.email}
+    return {"ok": True, "role": user.role, "email": user.email, "theme_key": user.theme_key}
 
 @router.post("/logout")
 def logout(resp: Response):
@@ -29,7 +37,7 @@ def me(req: Request, db: Session = Depends(get_db)):
     user = db.query(User).filter(User.id == uid).first()
     if not user:
         raise HTTPException(status_code=401, detail="not logged in")
-    return {"id": user.id, "email": user.email, "role": user.role}
+    return {"id": user.id, "email": user.email, "role": user.role, "theme_key": user.theme_key}
 
 @router.patch("/password")
 def set_password(data: dict, req: Request, db: Session = Depends(get_db)):
@@ -41,7 +49,7 @@ def set_password(data: dict, req: Request, db: Session = Depends(get_db)):
     if len(password) < 8:
         raise HTTPException(status_code=400, detail="password too short (min 8)")
 
-    user = db.query(User).filter(User.id == uid, User.disabled == False).first()
+    user = db.query(User).filter(User.id == uid, User.disabled == False).first()  # noqa: E712
     if not user:
         raise HTTPException(status_code=401, detail="not logged in")
 
@@ -50,3 +58,25 @@ def set_password(data: dict, req: Request, db: Session = Depends(get_db)):
     db.commit()
 
     return {"ok": True}
+
+@router.patch("/theme")
+def set_theme(data: dict, req: Request, db: Session = Depends(get_db)):
+    """Persist user design selection server-side."""
+    uid = get_session_user_id(req)
+    if not uid:
+        raise HTTPException(status_code=401, detail="not logged in")
+
+    theme_key = (data.get("theme_key") or "").strip()
+    if not theme_key:
+        raise HTTPException(status_code=400, detail="theme_key required")
+
+    user = db.query(User).filter(User.id == uid, User.disabled == False).first()  # noqa: E712
+    if not user:
+        raise HTTPException(status_code=401, detail="not logged in")
+
+    user.theme_key = theme_key
+    db.add(user)
+    db.commit()
+
+    return {"ok": True, "theme_key": user.theme_key}
+    

backend/app/routes/games.py

@@ -1,13 +1,16 @@
-import hashlib, random
+import hashlib
+import random
+import string
 from fastapi import APIRouter, Depends, HTTPException, Request
 from sqlalchemy.orm import Session
+
 from ..db import get_db
-from ..models import Game, Entry, SheetState, Category
+from ..models import Game, GameMember, Entry, SheetState, Category, User, Role
 from ..security import get_session_user_id
 
 router = APIRouter(prefix="/games", tags=["games"])
 
-def require_user(req: Request, db: Session):
+def require_user(req: Request, db: Session) -> str:
     uid = get_session_user_id(req)
     if not uid:
         raise HTTPException(status_code=401, detail="not logged in")
@@ -17,30 +20,139 @@ def stable_order(seed: int, user_id: str, entry_id: str) -> str:
     s = f"{seed}:{user_id}:{entry_id}".encode()
     return hashlib.sha256(s).hexdigest()
 
+def _rand_join_code(n: int = 6) -> str:
+    return "".join(random.choice(string.digits) for _ in range(n))
+
+def _new_unique_join_code(db: Session) -> str:
+    for _ in range(50):
+        code = _rand_join_code()
+        if not db.query(Game).filter(Game.join_code == code).first():
+            return code
+    raise HTTPException(500, "failed to generate join code")
+
+def require_member(req: Request, db: Session, game_id: str) -> tuple[str, Game]:
+    uid = require_user(req, db)
+    g = db.query(Game).filter(Game.id == game_id).first()
+    if not g:
+        raise HTTPException(404, "game not found")
+    m = db.query(GameMember).filter(GameMember.game_id == g.id, GameMember.user_id == uid).first()
+    if not m:
+        raise HTTPException(403, "not a member of this game")
+    return uid, g
+
 @router.post("")
 def create_game(req: Request, data: dict, db: Session = Depends(get_db)):
     uid = require_user(req, db)
     name = data.get("name") or "Neues Spiel"
     seed = random.randint(1, 2_000_000_000)
-    g = Game(owner_user_id=uid, name=name, seed=seed)
+    join_code = _new_unique_join_code(db)
-    db.add(g); db.commit()
+
-    return {"id": g.id, "name": g.name}
+    g = Game(owner_user_id=uid, name=name, seed=seed, join_code=join_code)
+    db.add(g)
+    db.commit()
+
+    # creator becomes member
+    db.add(GameMember(game_id=g.id, user_id=uid))
+    db.commit()
+
+    return {"id": g.id, "name": g.name, "join_code": g.join_code}
+
+@router.post("/join")
+def join_game(req: Request, data: dict, db: Session = Depends(get_db)):
+    uid = require_user(req, db)
+    code = (data.get("code") or "").strip()
+    if not code or len(code) < 4:
+        raise HTTPException(400, "code required")
+
+    g = db.query(Game).filter(Game.join_code == code).first()
+    if not g:
+        raise HTTPException(404, "game not found")
+
+    exists = db.query(GameMember).filter(GameMember.game_id == g.id, GameMember.user_id == uid).first()
+    if not exists:
+        db.add(GameMember(game_id=g.id, user_id=uid))
+        db.commit()
+
+    return {"ok": True, "game": {"id": g.id, "name": g.name, "join_code": g.join_code}}
 
 @router.get("")
 def list_games(req: Request, db: Session = Depends(get_db)):
     uid = require_user(req, db)
-    games = db.query(Game).filter(Game.owner_user_id == uid).order_by(Game.created_at.desc()).all()
+
-    return [{"id": g.id, "name": g.name, "seed": g.seed} for g in games]
+    games = (
+        db.query(Game)
+        .join(GameMember, GameMember.game_id == Game.id)
+        .filter(GameMember.user_id == uid)
+        .order_by(Game.created_at.desc())
+        .all()
+    )
+
+    out = []
+    for g in games:
+        winner = None
+        if g.winner_user_id:
+            wu = db.query(User).filter(User.id == g.winner_user_id).first()
+            if wu:
+                winner = {"id": wu.id, "email": wu.email}
+        out.append({"id": g.id, "name": g.name, "seed": g.seed, "join_code": g.join_code, "winner": winner})
+    return out
+
+@router.get("/{game_id}/meta")
+def game_meta(req: Request, game_id: str, db: Session = Depends(get_db)):
+    uid, g = require_member(req, db, game_id)
+
+    winner = None
+    if g.winner_user_id:
+        wu = db.query(User).filter(User.id == g.winner_user_id).first()
+        if wu:
+            winner = {"id": wu.id, "email": wu.email}
+    return {"id": g.id, "name": g.name, "join_code": g.join_code, "winner": winner}
+
+@router.get("/{game_id}/players")
+def list_players(req: Request, game_id: str, db: Session = Depends(get_db)):
+    _uid, g = require_member(req, db, game_id)
+
+    # only non-admin users (admin doesn't play)
+    players = (
+        db.query(User)
+        .join(GameMember, GameMember.user_id == User.id)
+        .filter(GameMember.game_id == g.id, User.disabled == False, User.role == Role.user.value)  # noqa: E712
+        .order_by(User.email.asc())
+        .all()
+    )
+    return [{"id": u.id, "email": u.email} for u in players]
+
+@router.patch("/{game_id}/winner")
+def set_winner(req: Request, game_id: str, data: dict, db: Session = Depends(get_db)):
+    _uid, g = require_member(req, db, game_id)
+
+    winner_user_id = data.get("winner_user_id")
+    if winner_user_id is not None:
+        # must be a member + non-admin
+        u = db.query(User).filter(User.id == winner_user_id, User.disabled == False).first()  # noqa: E712
+        if not u or u.role != Role.user.value:
+            raise HTTPException(400, "invalid winner_user_id")
+
+        member = db.query(GameMember).filter(GameMember.game_id == g.id, GameMember.user_id == u.id).first()
+        if not member:
+            raise HTTPException(400, "winner is not in this game")
+
+    g.winner_user_id = winner_user_id
+    db.add(g)
+    db.commit()
+
+    return {"ok": True, "winner_user_id": g.winner_user_id}
 
 @router.get("/{game_id}/sheet")
 def get_sheet(req: Request, game_id: str, db: Session = Depends(get_db)):
-    uid = require_user(req, db)
+    uid, g = require_member(req, db, game_id)
-    g = db.query(Game).filter(Game.id == game_id, Game.owner_user_id == uid).first()
-    if not g:
-        raise HTTPException(404, "game not found")
 
     entries = db.query(Entry).all()
-    states = db.query(SheetState).filter(SheetState.game_id == g.id, SheetState.owner_user_id == uid).all()
+    states = (
+        db.query(SheetState)
+        .filter(SheetState.game_id == g.id, SheetState.owner_user_id == uid)
+        .all()
+    )
     state_map = {st.entry_id: st for st in states}
 
     out = {"suspect": [], "item": [], "location": []}
@@ -51,6 +163,7 @@ def get_sheet(req: Request, game_id: str, db: Session = Depends(get_db)):
             "label": e.label,
             "status": st.status if st else 0,
             "note_tag": st.note_tag if st else None,
+            "chip_code": st.chip_code if st else None,
             "order": stable_order(g.seed, uid, e.id),
         }
         out[e.category].append(item)
@@ -65,19 +178,22 @@ def get_sheet(req: Request, game_id: str, db: Session = Depends(get_db)):
 
 @router.patch("/{game_id}/sheet/{entry_id}")
 def patch_sheet(req: Request, game_id: str, entry_id: str, data: dict, db: Session = Depends(get_db)):
-    uid = require_user(req, db)
+    uid, g = require_member(req, db, game_id)
-    g = db.query(Game).filter(Game.id == game_id, Game.owner_user_id == uid).first()
-    if not g:
-        raise HTTPException(404, "game not found")
 
     status = data.get("status")
     note_tag = data.get("note_tag")
+    chip_code = data.get("chip_code")
 
     if note_tag not in (None, "i", "m", "s"):
         raise HTTPException(400, "invalid note_tag")
     if status is not None and status not in (0, 1, 2, 3):
         raise HTTPException(400, "invalid status")
 
+    # chip_code only allowed if note_tag == 's' (or if note_tag not provided but current is 's')
+    if chip_code is not None:
+        if not isinstance(chip_code, str) or len(chip_code) > 16:
+            raise HTTPException(400, "invalid chip_code")
+
     st = db.query(SheetState).filter(
         SheetState.game_id == g.id,
         SheetState.owner_user_id == uid,
@@ -85,13 +201,24 @@ def patch_sheet(req: Request, game_id: str, entry_id: str, data: dict, db: Sessi
     ).first()
 
     if not st:
-        st = SheetState(game_id=g.id, owner_user_id=uid, entry_id=entry_id, status=0, note_tag=None)
+        st = SheetState(game_id=g.id, owner_user_id=uid, entry_id=entry_id, status=0, note_tag=None, chip_code=None)
         db.add(st)
 
     if status is not None:
         st.status = status
+
     if "note_tag" in data:
         st.note_tag = note_tag
+        # if leaving 's', clear chip
+        if note_tag != "s":
+            st.chip_code = None
+
+    if "chip_code" in data:
+        # chip_code is only meaningful when note_tag is 's'
+        effective_tag = st.note_tag
+        if effective_tag != "s":
+            raise HTTPException(400, "chip_code requires note_tag 's'")
+        st.chip_code = chip_code
 
     db.commit()
     return {"ok": True}

frontend/src/App.jsx

@@ -1,16 +1,13 @@
 // src/App.jsx
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
-import { getChipLS, setChipLS, clearChipLS } from "./utils/chipStorage";
-
-import { getWinnerLS, setWinnerLS, clearWinnerLS } from "./utils/winnerStorage";
 
 import { useHpGlobalStyles } from "./styles/hooks/useHpGlobalStyles";
 import { styles } from "./styles/styles";
 
-import { applyTheme, loadThemeKey, saveThemeKey, DEFAULT_THEME_KEY } from "./styles/themes";
+import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
 
 import AdminPanel from "./components/AdminPanel";
 import LoginPage from "./components/LoginPage";
@@ -23,6 +20,7 @@ import SheetSection from "./components/SheetSection";
 import DesignModal from "./components/DesignModal";
 import WinnerCard from "./components/WinnerCard";
 import WinnerBadge from "./components/WinnerBadge";
+import JoinGameModal from "./components/JoinGameModal";
 
 export default function App() {
   useHpGlobalStyles();
@@ -39,8 +37,10 @@ export default function App() {
   const [sheet, setSheet] = useState(null);
   const [pulseId, setPulseId] = useState(null);
 
-  // Winner (per game)
+  // Game meta / players / winner
-  const [winnerName, setWinnerName] = useState("");
+  const [gameMeta, setGameMeta] = useState(null);
+  const [players, setPlayers] = useState([]);
+  const [winnerUserId, setWinnerUserId] = useState(null);
 
   // Modals
   const [helpOpen, setHelpOpen] = useState(false);
@@ -60,13 +60,20 @@ export default function App() {
   const [designOpen, setDesignOpen] = useState(false);
   const [themeKey, setThemeKey] = useState(DEFAULT_THEME_KEY);
 
+  // Join game
+  const [joinOpen, setJoinOpen] = useState(false);
+
+  const currentGame = useMemo(
+    () => games.find((g) => String(g.id) === String(gameId)) || null,
+    [games, gameId]
+  );
+
   // ===== Data loaders =====
   const load = async () => {
     const m = await api("/auth/me");
     setMe(m);
 
-    // Theme pro User laden & anwenden
+    const tk = m?.theme_key || DEFAULT_THEME_KEY;
-    const tk = loadThemeKey(m?.email);
     setThemeKey(tk);
     applyTheme(tk);
 
@@ -82,6 +89,19 @@ export default function App() {
     setSheet(sh);
   };
 
+  const reloadMeta = async () => {
+    if (!gameId) return;
+    const meta = await api(`/games/${gameId}/meta`);
+    setGameMeta(meta);
+    setWinnerUserId(meta?.winner?.id || null);
+  };
+
+  const reloadPlayers = async () => {
+    if (!gameId) return;
+    const ps = await api(`/games/${gameId}/players`);
+    setPlayers(ps);
+  };
+
   // ===== Effects =====
 
   // Dropdown outside click
@@ -106,19 +126,13 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // load sheet + winner when game changes
+  // load sheet/meta when game changes
   useEffect(() => {
     (async () => {
       if (!gameId) return;
-
       try {
-        await reloadSheet();
+        await Promise.all([reloadSheet(), reloadMeta(), reloadPlayers()]);
-      } catch {
+      } catch {}
-        // ignore
-      }
-
-      // Sieger pro Game aus localStorage laden
-      setWinnerName(getWinnerLS(gameId));
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gameId]);
@@ -138,7 +152,9 @@ export default function App() {
     setGames([]);
     setGameId(null);
     setSheet(null);
-    setWinnerName("");
+    setGameMeta(null);
+    setPlayers([]);
+    setWinnerUserId(null);
   };
 
   // ===== Password change =====
@@ -184,10 +200,19 @@ export default function App() {
     setUserMenuOpen(false);
   };
 
-  const selectTheme = (key) => {
+  const selectTheme = async (key) => {
     setThemeKey(key);
     applyTheme(key);
-    saveThemeKey(me?.email, key);
+
+    try {
+      await api("/auth/theme", {
+        method: "PATCH",
+        body: JSON.stringify({ theme_key: key }),
+      });
+      setMe((prev) => (prev ? { ...prev, theme_key: key } : prev));
+    } catch {
+      // ignore; UI already switched
+    }
   };
 
   // ===== Game actions =====
@@ -196,29 +221,34 @@ export default function App() {
       method: "POST",
       body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
     });
-
     const gs = await api("/games");
     setGames(gs);
     setGameId(g.id);
-
-    // Neues Spiel -> Sieger leer
-    clearWinnerLS(g.id);
-    setWinnerName("");
   };
 
-  // ===== Winner actions =====
+  const openJoinModal = () => {
-  const saveWinner = () => {
+    setJoinOpen(true);
+    setUserMenuOpen(false);
+  };
+
+  const joinGame = async (code) => {
+    const res = await api("/games/join", {
+      method: "POST",
+      body: JSON.stringify({ code }),
+    });
+    const gs = await api("/games");
+    setGames(gs);
+    setGameId(res?.game?.id || null);
+  };
+
+  // ===== Winner actions (shared per game) =====
+  const saveWinner = async () => {
     if (!gameId) return;
-    const v = (winnerName || "").trim();
+    await api(`/games/${gameId}/winner`, {
-
+      method: "PATCH",
-    if (!v) {
+      body: JSON.stringify({ winner_user_id: winnerUserId || null }),
-      clearWinnerLS(gameId);
+    });
-      setWinnerName("");
+    await reloadMeta();
-      return;
-    }
-
-    setWinnerLS(gameId, v);
-    setWinnerName(v);
   };
 
   // ===== Sheet actions =====
@@ -248,8 +278,6 @@ export default function App() {
       return;
     }
 
-    if (next === null) clearChipLS(gameId, entry.entry_id);
-
     await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
       method: "PATCH",
       body: JSON.stringify({ note_tag: next }),
@@ -265,12 +293,10 @@ export default function App() {
     setChipOpen(false);
     setChipEntry(null);
 
-    setChipLS(gameId, entry.entry_id, chip);
-
     try {
       await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
         method: "PATCH",
-        body: JSON.stringify({ note_tag: "s" }),
+        body: JSON.stringify({ note_tag: "s", chip_code: chip }),
       });
     } finally {
       await reloadSheet();
@@ -287,8 +313,6 @@ export default function App() {
     setChipOpen(false);
     setChipEntry(null);
 
-    clearChipLS(gameId, entry.entry_id);
-
     try {
       await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
         method: "PATCH",
@@ -303,8 +327,7 @@ export default function App() {
     const t = entry.note_tag;
     if (!t) return "—";
     if (t === "s") {
-      const chip = getChipLS(gameId, entry.entry_id);
+      return entry.chip_code ? `s.${entry.chip_code}` : "s";
-      return chip ? `s.${chip}` : "s";
     }
     return t;
   };
@@ -332,6 +355,8 @@ export default function App() {
       ]
     : [];
 
+  const winnerObj = gameMeta?.winner || null;
+
   return (
     <div style={styles.page}>
       <div style={styles.bgFixed} aria-hidden="true">
@@ -345,6 +370,7 @@ export default function App() {
           setUserMenuOpen={setUserMenuOpen}
           openPwModal={openPwModal}
           openDesignModal={openDesignModal}
+          openJoinModal={openJoinModal}
           doLogout={doLogout}
           newGame={newGame}
         />
@@ -355,13 +381,13 @@ export default function App() {
           games={games}
           gameId={gameId}
           setGameId={setGameId}
+          joinCode={currentGame?.join_code || ""}
           onOpenHelp={() => setHelpOpen(true)}
         />
 
-        <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
+        {winnerObj && <WinnerBadge winnerEmail={winnerObj.email} />}
 
-        {/* Sieger Badge: nur wenn gesetzt */}
+        <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
-        <WinnerBadge winner={(winnerName || "").trim()} />
 
         <div style={{ marginTop: 14, display: "grid", gap: 14 }}>
           {sections.map((sec) => (
@@ -377,8 +403,13 @@ export default function App() {
           ))}
         </div>
 
-        {/* Sieger ganz unten */}
+        {/* Sieger (shared per Spiel) */}
-        <WinnerCard value={winnerName} setValue={setWinnerName} onSave={saveWinner} />
+        <WinnerCard
+          players={players}
+          winnerUserId={winnerUserId}
+          setWinnerUserId={setWinnerUserId}
+          onSave={saveWinner}
+        />
 
         <div style={{ height: 24 }} />
       </div>
@@ -399,12 +430,21 @@ export default function App() {
         open={designOpen}
         onClose={() => setDesignOpen(false)}
         themeKey={themeKey}
-        onSelect={(k) => {
+        onSelect={async (k) => {
-          selectTheme(k);
+          await selectTheme(k);
           setDesignOpen(false);
         }}
       />
 
+      <JoinGameModal
+        open={joinOpen}
+        onClose={() => setJoinOpen(false)}
+        onJoin={async (code) => {
+          await joinGame(code);
+          setJoinOpen(false);
+        }}
+      />
+
       <ChipModal
         chipOpen={chipOpen}
         closeChipModalToDash={closeChipModalToDash}

frontend/src/components/GamePickerCard.jsx

@@ -1,13 +1,9 @@
 // src/components/GamePickerCard.jsx
 import React from "react";
 import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
 
-export default function GamePickerCard({
+export default function GamePickerCard({ games, gameId, setGameId, joinCode, onOpenHelp }) {
-  games,
-  gameId,
-  setGameId,
-  onOpenHelp,
-}) {
   return (
     <div style={{ marginTop: 14 }}>
       <div style={styles.card}>
@@ -30,6 +26,19 @@ export default function GamePickerCard({
             Hilfe
           </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>
+        )}
       </div>
     </div>
   );

frontend/src/components/JoinGameModal.jsx

@@ -0,0 +1,74 @@
+// src/components/JoinGameModal.jsx
+import React, { useEffect, useState } from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+
+export default function JoinGameModal({ open, onClose, onJoin }) {
+  const [code, setCode] = useState("");
+  const [msg, setMsg] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setCode("");
+    setMsg("");
+    setBusy(false);
+  }, [open]);
+
+  if (!open) return null;
+
+  const doJoin = async () => {
+    const c = (code || "").trim();
+    if (!c) return setMsg("❌ Bitte Code eingeben.");
+    setBusy(true);
+    setMsg("");
+    try {
+      await onJoin(c);
+    } catch (e) {
+      setMsg("❌ Fehler: " + (e?.message || "unknown"));
+      setBusy(false);
+    }
+  };
+
+  return (
+    <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 }}>Spiel beitreten</div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+            ✕
+          </button>
+        </div>
+
+        <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+          <input
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="z.B. 123456"
+            style={styles.input}
+            inputMode="numeric"
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Enter") doJoin();
+            }}
+          />
+
+          {msg && <div style={{ opacity: 0.92, color: stylesTokens.textMain }}>{msg}</div>}
+
+          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 4 }}>
+            <button onClick={onClose} style={styles.secondaryBtn} disabled={busy}>
+              Abbrechen
+            </button>
+            <button onClick={doJoin} style={styles.primaryBtn} disabled={busy}>
+              {busy ? "Beitreten..." : "Beitreten"}
+            </button>
+          </div>
+
+          <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+            Tipp: Der Spiel-Code steht beim Host unter dem Spiel-Dropdown.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/TopBar.jsx

@@ -8,16 +8,19 @@ export default function TopBar({
   setUserMenuOpen,
   openPwModal,
   openDesignModal,
+  openJoinModal,
   doLogout,
   newGame,
 }) {
   return (
     <div style={styles.topBar}>
+      {/* LINKS */}
       <div>
         <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
         <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>{me.email}</div>
       </div>
 
+      {/* RECHTS */}
       <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
         <div style={{ position: "relative" }}>
           <button onClick={() => setUserMenuOpen((v) => !v)} style={styles.userBtn} title="User Menü">
@@ -28,13 +31,14 @@ export default function TopBar({
 
           {userMenuOpen && (
             <div style={styles.userDropdown}>
+              {/* Email Info */}
               <div
                 style={{
                   padding: "10px 12px",
                   fontSize: 13,
                   opacity: 0.85,
                   color: stylesTokens.textDim,
-                  borderBottom: "1px solid rgba(233,216,166,0.12)",
+                  borderBottom: `1px solid ${stylesTokens.goldLine}`,
                 }}
               >
                 {me.email}
@@ -44,10 +48,26 @@ export default function TopBar({
                 Passwort setzen
               </button>
 
-              <button onClick={openDesignModal} style={styles.userDropdownItem}>
+              <button
+                onClick={() => {
+                  setUserMenuOpen(false);
+                  openDesignModal();
+                }}
+                style={styles.userDropdownItem}
+              >
                 Design ändern
               </button>
 
+              <button
+                onClick={() => {
+                  setUserMenuOpen(false);
+                  openJoinModal();
+                }}
+                style={styles.userDropdownItem}
+              >
+                Spiel beitreten
+              </button>
+
               <div style={styles.userDropdownDivider} />
 
               <button
@@ -64,7 +84,7 @@ export default function TopBar({
         </div>
 
         <button onClick={newGame} style={styles.primaryBtn}>
-          ✦ New Game
+          ✦ Neues Spiel
         </button>
       </div>
     </div>

frontend/src/components/WinnerBadge.jsx

@@ -1,43 +1,27 @@
-// src/components/WinnerBadge.jsx
 import React from "react";
-import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
-export default function WinnerBadge({ winner }) {
+export default function WinnerBadge({ winnerEmail }) {
-  const w = (winner || "").trim();
+  if (!winnerEmail) return null;
-  if (!w) return null;
 
   return (
-    <div style={{ marginTop: 14 }}>
     <div
       style={{
-          ...styles.card,
+        marginTop: 14,
-          padding: 12,
+        padding: "12px 14px",
-          display: "flex",
+        borderRadius: 16,
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 10,
-        }}
-      >
-        <div>
-          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>🏆 Sieger</div>
-          <div style={{ marginTop: 2, color: stylesTokens.textMain, opacity: 0.95 }}>{w}</div>
-        </div>
-
-        <div
-          style={{
-            padding: "8px 12px",
-            borderRadius: 999,
         border: `1px solid ${stylesTokens.panelBorder}`,
         background: stylesTokens.panelBg,
-            color: stylesTokens.textGold,
+        boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
-            fontWeight: 1000,
+        backdropFilter: "blur(6px)",
-            whiteSpace: "nowrap",
+        display: "flex",
+        gap: 10,
+        alignItems: "center",
       }}
     >
-          Gewonnen
+      <span style={{ fontSize: 16 }}>🏆</span>
-        </div>
+      <span style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Sieger:</span>
-      </div>
+      <span style={{ color: stylesTokens.textMain }}>{winnerEmail}</span>
     </div>
   );
 }

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}>
+        <div style={{ padding: 12, display: "grid", gap: 10 }}>
-          <input
+          {!hasPlayers ? (
-            value={value}
+            <div style={{ color: stylesTokens.textDim, opacity: 0.9 }}>
-            onChange={(e) => setValue(e.target.value)}
+              Keine Spieler gefunden (Admin wird nicht angezeigt).
-            placeholder="Name des Siegers"
+            </div>
-            style={{ ...styles.input, flex: 1 }}
+          ) : (
-            onKeyDown={(e) => {
+            <select
-              if (e.key === "Enter") onSave();
+              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">
+          <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 }}>
+          <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
-          Wird pro Spiel lokal gespeichert.
+            Der Sieger wird im Spiel gespeichert und ist für alle Spieler sichtbar.
+          </div>
         </div>
       </div>
     </div>