backend/app/models.py

@@ -1,19 +1,30 @@
 import enum
 import uuid
-from sqlalchemy import String, Boolean, DateTime, ForeignKey, Integer, SmallInteger, UniqueConstraint
+from sqlalchemy import (
+    String,
+    Boolean,
+    DateTime,
+    ForeignKey,
+    Integer,
+    SmallInteger,
+    UniqueConstraint,
+)
 from sqlalchemy.orm import Mapped, mapped_column
 from sqlalchemy.sql import func
 from .db import Base
 
+
 class Role(str, enum.Enum):
     admin = "admin"
     user = "user"
 
+
 class Category(str, enum.Enum):
     suspect = "suspect"
     item = "item"
     location = "location"
 
+
 class User(Base):
     __tablename__ = "users"
     id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
@@ -21,40 +32,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)
+    created_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())
 
-    # UI preferences (persisted server-side)
+    # NEW: Theme im Userprofil (damit es auf anderen Geräten mitkommt)
     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
+    # NEW: Host (nur Host darf Winner setzen)
-    owner_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
+    host_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
 
     name: Mapped[str] = mapped_column(String)
     seed: Mapped[int] = mapped_column(Integer)
+    created_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())
 
-    # "Kahoot"-style join code
+    # NEW: Join-Code (Kahoot-Style)
-    join_code: Mapped[str] = mapped_column(String, unique=True, index=True)
+    code: Mapped[str] = mapped_column(String, unique=True, index=True)
 
-    # Winner (shared for the game)
+    # NEW: Winner (aus Users, nicht Freitext)
     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__ = (
+    __table_args__ = (UniqueConstraint("game_id", "user_id", name="uq_game_member"),)
-        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())
+    joined_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())
+
 
 class Entry(Base):
     __tablename__ = "entries"
@@ -62,11 +72,13 @@ class Entry(Base):
     category: Mapped[str] = mapped_column(String, index=True)
     label: Mapped[str] = mapped_column(String)
 
+
 class SheetState(Base):
     __tablename__ = "sheet_state"
     __table_args__ = (
         UniqueConstraint("game_id", "owner_user_id", "entry_id", name="uq_sheet"),
     )
+
     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)
     owner_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
@@ -75,6 +87,6 @@ class SheetState(Base):
     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)
+    # NEW: Chip persistieren (statt LocalStorage)
-    chip_code: Mapped[str | None] = mapped_column(String, nullable=True)
+    chip: Mapped[str | None] = mapped_column(String, nullable=True)
     

backend/app/routes/auth.py

@@ -1,6 +1,5 @@
 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 (
@@ -14,21 +13,25 @@ from ..security import (
 
 router = APIRouter(prefix="/auth", tags=["auth"])
 
+
 @router.post("/login")
 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()  # noqa: E712
+    user = db.query(User).filter(User.email == email, User.disabled == False).first()
     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, "theme_key": user.theme_key}
 
+
 @router.post("/logout")
 def logout(resp: Response):
     clear_session(resp)
     return {"ok": True}
 
+
 @router.get("/me")
 def me(req: Request, db: Session = Depends(get_db)):
     uid = get_session_user_id(req)
@@ -39,6 +42,7 @@ def me(req: Request, db: Session = Depends(get_db)):
         raise HTTPException(status_code=401, detail="not logged in")
     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)):
     uid = get_session_user_id(req)
@@ -49,19 +53,18 @@ 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()  # noqa: E712
+    user = db.query(User).filter(User.id == uid, User.disabled == False).first()
     if not user:
         raise HTTPException(status_code=401, detail="not logged in")
 
     user.password_hash = hash_password(password)
     db.add(user)
     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")
@@ -70,7 +73,7 @@ def set_theme(data: dict, req: Request, db: Session = Depends(get_db)):
     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
+    user = db.query(User).filter(User.id == uid, User.disabled == False).first()
     if not user:
         raise HTTPException(status_code=401, detail="not logged in")
 

backend/app/routes/games.py

@@ -1,151 +1,193 @@
-import hashlib
+import hashlib, random
-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, GameMember, Entry, SheetState, Category, User, Role
+from ..models import Game, Entry, SheetState, Category, GameMember, User, Role
 from ..security import get_session_user_id
 
 router = APIRouter(prefix="/games", tags=["games"])
 
-def require_user(req: Request, db: Session) -> str:
+
+def require_user(req: Request, db: Session):
     uid = get_session_user_id(req)
     if not uid:
         raise HTTPException(status_code=401, detail="not logged in")
     return uid
 
+
 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:
+CODE_ALPHABET = "23456789ABCDEFGHJKMNPQRSTUVWXYZ"
-    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)
+def gen_code(n=6) -> str:
+    return "".join(random.choice(CODE_ALPHABET) for _ in range(n))
+
+
+def ensure_member(db: Session, game_id: str, user_id: str):
+    ex = db.query(GameMember).filter(GameMember.game_id == game_id, GameMember.user_id == user_id).first()
+    if ex:
+        return
+    db.add(GameMember(game_id=game_id, user_id=user_id))
+    db.commit()
+
+
+def require_game_member(db: Session, game_id: str, user_id: str) -> Game:
     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:
+    mem = db.query(GameMember).filter(GameMember.game_id == game_id, GameMember.user_id == user_id).first()
+    if not mem:
         raise HTTPException(403, "not a member of this game")
-    return uid, g
+    return 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)
-    join_code = _new_unique_join_code(db)
 
-    g = Game(owner_user_id=uid, name=name, seed=seed, join_code=join_code)
+    # unique code
+    code = gen_code()
+    while db.query(Game).filter(Game.code == code).first():
+        code = gen_code()
+
+    g = Game(host_user_id=uid, name=name, seed=seed, code=code, winner_user_id=None)
     db.add(g)
     db.commit()
 
-    # creator becomes member
+    # creator joins automatically
-    db.add(GameMember(game_id=g.id, user_id=uid))
+    ensure_member(db, g.id, uid)
-    db.commit()
+
+    return {"id": g.id, "name": g.name, "code": g.code, "host_user_id": g.host_user_id}
 
-    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()
+    code = (data.get("code") or "").strip().upper()
-    if not code or len(code) < 4:
+    if not code:
         raise HTTPException(400, "code required")
 
-    g = db.query(Game).filter(Game.join_code == code).first()
+    g = db.query(Game).filter(Game.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()
+    ensure_member(db, g.id, uid)
-    if not exists:
+    return {"ok": True, "id": g.id, "name": g.name, "code": g.code, "host_user_id": g.host_user_id}
-        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 = (
+    # list games where user is member
+    q = (
         db.query(Game)
         .join(GameMember, GameMember.game_id == Game.id)
         .filter(GameMember.user_id == uid)
         .order_by(Game.created_at.desc())
-        .all()
     )
+    games = q.all()
 
+    # winner email (optional)
     out = []
     for g in games:
-        winner = None
+        winner_email = None
         if g.winner_user_id:
             wu = db.query(User).filter(User.id == g.winner_user_id).first()
-            if wu:
+            winner_email = wu.email if wu else None
-                winner = {"id": wu.id, "email": wu.email}
+        out.append(
-        out.append({"id": g.id, "name": g.name, "seed": g.seed, "join_code": g.join_code, "winner": winner})
+            {
+                "id": g.id,
+                "name": g.name,
+                "seed": g.seed,
+                "code": g.code,
+                "host_user_id": g.host_user_id,
+                "winner_user_id": g.winner_user_id,
+                "winner_email": winner_email,
+            }
+        )
     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
+@router.get("/{game_id}")
+def get_game_meta(req: Request, game_id: str, db: Session = Depends(get_db)):
+    uid = require_user(req, db)
+    g = require_game_member(db, game_id, uid)
+
+    winner_email = None
     if g.winner_user_id:
         wu = db.query(User).filter(User.id == g.winner_user_id).first()
-        if wu:
+        winner_email = wu.email if wu else None
-            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")
+    return {
-def list_players(req: Request, game_id: str, db: Session = Depends(get_db)):
+        "id": g.id,
-    _uid, g = require_member(req, db, game_id)
+        "name": g.name,
+        "code": g.code,
+        "host_user_id": g.host_user_id,
+        "winner_user_id": g.winner_user_id,
+        "winner_email": winner_email,
+    }
 
-    # only non-admin users (admin doesn't play)
+
-    players = (
+@router.get("/{game_id}/members")
+def list_members(req: Request, game_id: str, db: Session = Depends(get_db)):
+    uid = require_user(req, db)
+    _g = require_game_member(db, game_id, uid)
+
+    # return only "user" role (admin excluded)
+    members = (
         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
+        .filter(GameMember.game_id == game_id, User.role == Role.user.value, User.disabled == False)
         .order_by(User.email.asc())
         .all()
     )
-    return [{"id": u.id, "email": u.email} for u in players]
+    return [{"id": u.id, "email": u.email} for u in members]
+
 
 @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)
+    uid = require_user(req, db)
+    g = require_game_member(db, game_id, uid)
+
+    # only host can set winner
+    if g.host_user_id != uid:
+        raise HTTPException(403, "only host can set winner")
 
     winner_user_id = data.get("winner_user_id")
-    if winner_user_id is not None:
+    if winner_user_id is None:
-        # must be a member + non-admin
+        g.winner_user_id = None
-        u = db.query(User).filter(User.id == winner_user_id, User.disabled == False).first()  # noqa: E712
+        db.add(g)
-        if not u or u.role != Role.user.value:
+        db.commit()
-            raise HTTPException(400, "invalid winner_user_id")
+        return {"ok": True, "winner_user_id": None}
 
-        member = db.query(GameMember).filter(GameMember.game_id == g.id, GameMember.user_id == u.id).first()
+    # must be a member AND role=user
-        if not member:
+    member = db.query(GameMember).filter(GameMember.game_id == game_id, GameMember.user_id == winner_user_id).first()
-            raise HTTPException(400, "winner is not in this game")
+    if not member:
+        raise HTTPException(400, "winner must be a member of the game")
+
+    u = db.query(User).filter(User.id == winner_user_id).first()
+    if not u or u.role != Role.user.value or u.disabled:
+        raise HTTPException(400, "invalid winner")
 
     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, g = require_member(req, db, game_id)
+    uid = require_user(req, db)
+    g = require_game_member(db, game_id, uid)
 
     entries = db.query(Entry).all()
     states = (
@@ -163,12 +205,11 @@ 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,
+            "chip": st.chip if st else None,  # NEW
             "order": stable_order(g.seed, uid, e.id),
         }
         out[e.category].append(item)
 
-    # sort within category
     for k in out:
         out[k].sort(key=lambda x: x["order"])
         for i in out[k]:
@@ -176,49 +217,58 @@ def get_sheet(req: Request, game_id: str, db: Session = Depends(get_db)):
 
     return out
 
+
 @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, g = require_member(req, db, game_id)
+    uid = require_user(req, db)
+    g = require_game_member(db, game_id, uid)
 
     status = data.get("status")
     note_tag = data.get("note_tag")
-    chip_code = data.get("chip_code")
+    chip = data.get("chip")
 
     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 is not None:
-    if chip_code is not None:
+        chip = (chip or "").strip().upper()
-        if not isinstance(chip_code, str) or len(chip_code) > 16:
+        if chip == "":
-            raise HTTPException(400, "invalid chip_code")
+            chip = None
+        if chip is not None:
+            if len(chip) > 8:
+                raise HTTPException(400, "invalid chip")
 
-    st = db.query(SheetState).filter(
+    st = (
-        SheetState.game_id == g.id,
+        db.query(SheetState)
-        SheetState.owner_user_id == uid,
+        .filter(
-        SheetState.entry_id == entry_id
+            SheetState.game_id == g.id,
-    ).first()
+            SheetState.owner_user_id == uid,
+            SheetState.entry_id == entry_id,
+        )
+        .first()
+    )
 
     if not st:
-        st = SheetState(game_id=g.id, owner_user_id=uid, entry_id=entry_id, status=0, note_tag=None, chip_code=None)
+        st = SheetState(game_id=g.id, owner_user_id=uid, entry_id=entry_id, status=0, note_tag=None, chip=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:
+        # wenn note_tag zurück auf null -> chip auch löschen
-        # chip_code is only meaningful when note_tag is 's'
+        if note_tag is None:
-        effective_tag = st.note_tag
+            st.chip = None
-        if effective_tag != "s":
+
-            raise HTTPException(400, "chip_code requires note_tag 's'")
+    # chip nur speichern wenn note_tag "s" ist (ansonsten löschen wir es)
-        st.chip_code = chip_code
+    if "chip" in data:
+        if st.note_tag == "s":
+            st.chip = chip
+        else:
+            st.chip = None
 
     db.commit()
     return {"ok": True}

frontend/src/App.jsx

@@ -1,12 +1,11 @@
-// 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 { useHpGlobalStyles } from "./styles/hooks/useHpGlobalStyles";
 import { styles } from "./styles/styles";
-
 import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
 
 import AdminPanel from "./components/AdminPanel";
@@ -20,7 +19,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";
+import NewGameModal from "./components/NewGameModal";
 
 export default function App() {
   useHpGlobalStyles();
@@ -37,17 +36,17 @@ export default function App() {
   const [sheet, setSheet] = useState(null);
   const [pulseId, setPulseId] = useState(null);
 
-  // Game meta / players / winner
+  // Game meta
-  const [gameMeta, setGameMeta] = useState(null);
+  const [gameMeta, setGameMeta] = useState(null); // {code, host_user_id, winner_email, winner_user_id}
-  const [players, setPlayers] = useState([]);
+  const [members, setMembers] = useState([]);
-  const [winnerUserId, setWinnerUserId] = useState(null);
+
+  // Winner selection (host only)
+  const [winnerUserId, setWinnerUserId] = useState("");
 
   // Modals
   const [helpOpen, setHelpOpen] = useState(false);
-
   const [chipOpen, setChipOpen] = useState(false);
   const [chipEntry, setChipEntry] = useState(null);
-
   const [userMenuOpen, setUserMenuOpen] = useState(false);
 
   const [pwOpen, setPwOpen] = useState(false);
@@ -60,15 +59,9 @@ export default function App() {
   const [designOpen, setDesignOpen] = useState(false);
   const [themeKey, setThemeKey] = useState(DEFAULT_THEME_KEY);
 
-  // Join game
+  // New Game Modal
-  const [joinOpen, setJoinOpen] = useState(false);
+  const [newGameOpen, setNewGameOpen] = 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);
@@ -89,21 +82,16 @@ export default function App() {
     setSheet(sh);
   };
 
-  const reloadMeta = async () => {
+  const loadGameMeta = async () => {
     if (!gameId) return;
-    const meta = await api(`/games/${gameId}/meta`);
+    const meta = await api(`/games/${gameId}`);
     setGameMeta(meta);
-    setWinnerUserId(meta?.winner?.id || null);
+    setWinnerUserId(meta?.winner_user_id || "");
-  };
 
-  const reloadPlayers = async () => {
+    const mem = await api(`/games/${gameId}/members`);
-    if (!gameId) return;
+    setMembers(mem);
-    const ps = await api(`/games/${gameId}/players`);
-    setPlayers(ps);
   };
 
-  // ===== Effects =====
-
   // Dropdown outside click
   useEffect(() => {
     const onDown = (e) => {
@@ -114,24 +102,23 @@ export default function App() {
     return () => document.removeEventListener("mousedown", onDown);
   }, [userMenuOpen]);
 
-  // initial load (try session)
+  // initial load
   useEffect(() => {
     (async () => {
       try {
         await load();
-      } catch {
+      } catch {}
-        // not logged in
-      }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // load sheet/meta when game changes
+  // on game change
   useEffect(() => {
     (async () => {
       if (!gameId) return;
       try {
-        await Promise.all([reloadSheet(), reloadMeta(), reloadPlayers()]);
+        await reloadSheet();
+        await loadGameMeta();
       } catch {}
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -153,11 +140,11 @@ export default function App() {
     setGameId(null);
     setSheet(null);
     setGameMeta(null);
-    setPlayers([]);
+    setMembers([]);
-    setWinnerUserId(null);
+    setWinnerUserId("");
   };
 
-  // ===== Password change =====
+  // ===== Password =====
   const openPwModal = () => {
     setPwMsg("");
     setPw1("");
@@ -194,7 +181,7 @@ export default function App() {
     }
   };
 
-  // ===== Theme actions =====
+  // ===== Theme =====
   const openDesignModal = () => {
     setDesignOpen(true);
     setUserMenuOpen(false);
@@ -209,26 +196,24 @@ export default function App() {
         method: "PATCH",
         body: JSON.stringify({ theme_key: key }),
       });
-      setMe((prev) => (prev ? { ...prev, theme_key: key } : prev));
     } catch {
-      // ignore; UI already switched
+      // theme locally already applied; ignore backend error
     }
   };
 
-  // ===== Game actions =====
+  // ===== New game flow =====
-  const newGame = async () => {
+  const createGame = async () => {
     const g = await api("/games", {
       method: "POST",
       body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
     });
+
     const gs = await api("/games");
     setGames(gs);
     setGameId(g.id);
-  };
 
-  const openJoinModal = () => {
+    // meta/members will load via gameId effect
-    setJoinOpen(true);
+    return g; // includes code
-    setUserMenuOpen(false);
   };
 
   const joinGame = async (code) => {
@@ -236,19 +221,20 @@ export default function App() {
       method: "POST",
       body: JSON.stringify({ code }),
     });
+
     const gs = await api("/games");
     setGames(gs);
-    setGameId(res?.game?.id || null);
+    setGameId(res.id);
   };
 
-  // ===== Winner actions (shared per game) =====
+  // ===== Winner =====
   const saveWinner = async () => {
     if (!gameId) return;
     await api(`/games/${gameId}/winner`, {
       method: "PATCH",
       body: JSON.stringify({ winner_user_id: winnerUserId || null }),
     });
-    await reloadMeta();
+    await loadGameMeta();
   };
 
   // ===== Sheet actions =====
@@ -278,9 +264,11 @@ 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 }),
+      body: JSON.stringify({ note_tag: next, chip: null }),
     });
 
     await reloadSheet();
@@ -293,10 +281,12 @@ 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", chip_code: chip }),
+        body: JSON.stringify({ note_tag: "s", chip }),
       });
     } finally {
       await reloadSheet();
@@ -313,10 +303,12 @@ export default function App() {
     setChipOpen(false);
     setChipEntry(null);
 
+    clearChipLS(gameId, entry.entry_id);
+
     try {
       await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
         method: "PATCH",
-        body: JSON.stringify({ note_tag: null }),
+        body: JSON.stringify({ note_tag: null, chip: null }),
       });
     } finally {
       await reloadSheet();
@@ -326,10 +318,14 @@ export default function App() {
   const displayTag = (entry) => {
     const t = entry.note_tag;
     if (!t) return "—";
+
     if (t === "s") {
-      return entry.chip_code ? `s.${entry.chip_code}` : "s";
+      // Prefer backend chip, fallback localStorage
+      const chip = entry.chip || getChipLS(gameId, entry.entry_id);
+      return chip ? `s.${chip}` : "s";
     }
-    return t;
+
+    return t; // i oder m
   };
 
   // ===== Login page =====
@@ -355,7 +351,7 @@ export default function App() {
       ]
     : [];
 
-  const winnerObj = gameMeta?.winner || null;
+  const isHost = !!(me?.id && gameMeta?.host_user_id && me.id === gameMeta.host_user_id);
 
   return (
     <div style={styles.page}>
@@ -370,9 +366,8 @@ export default function App() {
           setUserMenuOpen={setUserMenuOpen}
           openPwModal={openPwModal}
           openDesignModal={openDesignModal}
-          openJoinModal={openJoinModal}
           doLogout={doLogout}
-          newGame={newGame}
+          onOpenNewGame={() => setNewGameOpen(true)}
         />
 
         {me.role === "admin" && <AdminPanel />}
@@ -381,11 +376,11 @@ export default function App() {
           games={games}
           gameId={gameId}
           setGameId={setGameId}
-          joinCode={currentGame?.join_code || ""}
           onOpenHelp={() => setHelpOpen(true)}
         />
 
-        {winnerObj && <WinnerBadge winnerEmail={winnerObj.email} />}
+        {/* Sieger Badge: zwischen Spiel und Verdächtigte Person */}
+        <WinnerBadge winnerEmail={gameMeta?.winner_email || ""} />
 
         <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
 
@@ -403,9 +398,10 @@ export default function App() {
           ))}
         </div>
 
-        {/* Sieger (shared per Spiel) */}
+        {/* Host-only Winner Auswahl */}
         <WinnerCard
-          players={players}
+          isHost={isHost}
+          members={members}
           winnerUserId={winnerUserId}
           setWinnerUserId={setWinnerUserId}
           onSave={saveWinner}
@@ -430,19 +426,17 @@ export default function App() {
         open={designOpen}
         onClose={() => setDesignOpen(false)}
         themeKey={themeKey}
-        onSelect={async (k) => {
+        onSelect={(k) => {
-          await selectTheme(k);
+          selectTheme(k);
           setDesignOpen(false);
         }}
       />
 
-      <JoinGameModal
+      <NewGameModal
-        open={joinOpen}
+        open={newGameOpen}
-        onClose={() => setJoinOpen(false)}
+        onClose={() => setNewGameOpen(false)}
-        onJoin={async (code) => {
+        onCreate={createGame}
-          await joinGame(code);
+        onJoin={joinGame}
-          setJoinOpen(false);
-        }}
       />
 
       <ChipModal

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 && (
+        {/* kleine Code Zeile unter dem Picker (optional nice) */}
-          <div
+        {(() => {
-            style={{
+          const cur = games.find((x) => x.id === gameId);
-              padding: "0 12px 12px",
+          if (!cur?.code) return null;
-              fontSize: 12,
+          return (
-              opacity: 0.85,
+            <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim, opacity: 0.9 }}>
-              color: stylesTokens.textDim,
+              Code: <b style={{ color: stylesTokens.textGold }}>{cur.code}</b>
-            }}
+            </div>
-          >
+          );
-            Spiel-Code: <b style={{ color: stylesTokens.textGold }}>{joinCode}</b>
+        })()}
-          </div>
-        )}
       </div>
     </div>
   );

frontend/src/components/NewGameModal.jsx

@@ -0,0 +1,180 @@
+import React, { useMemo, useState } from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+
+export default function NewGameModal({
+  open,
+  onClose,
+  onCreate,
+  onJoin,
+}) {
+  const [mode, setMode] = useState("choice"); // choice | create | join
+  const [joinCode, setJoinCode] = useState("");
+  const [err, setErr] = useState("");
+  const [created, setCreated] = useState(null); // { code }
+  const [toast, setToast] = useState("");
+
+  const canJoin = useMemo(() => joinCode.trim().length >= 4, [joinCode]);
+
+  if (!open) return null;
+
+  const showToast = (msg) => {
+    setToast(msg);
+    setTimeout(() => setToast(""), 1100);
+  };
+
+  const doCreate = async () => {
+    setErr("");
+    try {
+      const res = await onCreate();
+      setCreated({ code: res.code });
+      setMode("create");
+    } catch (e) {
+      setErr("❌ Fehler: " + (e?.message || "unknown"));
+    }
+  };
+
+  const doJoin = async () => {
+    setErr("");
+    try {
+      await onJoin(joinCode.trim().toUpperCase());
+      onClose();
+    } catch (e) {
+      setErr("❌ Fehler: " + (e?.message || "unknown"));
+    }
+  };
+
+  const copyCode = async () => {
+    try {
+      await navigator.clipboard.writeText(created?.code || "");
+      showToast("✅ Code kopiert");
+    } catch {
+      showToast("❌ Copy nicht möglich");
+    }
+  };
+
+  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
+          </div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+            ✕
+          </button>
+        </div>
+
+        {/* Toast */}
+        {toast && (
+          <div
+            style={{
+              marginTop: 10,
+              padding: "10px 12px",
+              borderRadius: 12,
+              border: `1px solid ${stylesTokens.panelBorder}`,
+              background: stylesTokens.panelBg,
+              color: stylesTokens.textMain,
+              fontWeight: 900,
+              textAlign: "center",
+              animation: "fadeIn 120ms ease-out",
+            }}
+          >
+            {toast}
+          </div>
+        )}
+
+        <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+          {mode === "choice" && (
+            <>
+              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
+                Willst du ein Spiel <b>erstellen</b> oder einem Spiel <b>beitreten</b>?
+              </div>
+
+              <button onClick={doCreate} style={styles.primaryBtn}>
+                ✦ Spiel erstellen
+              </button>
+
+              <button onClick={() => setMode("join")} style={styles.secondaryBtn}>
+                ⎆ Spiel beitreten
+              </button>
+            </>
+          )}
+
+          {mode === "join" && (
+            <>
+              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
+                Gib den <b>Code</b> ein:
+              </div>
+
+              <input
+                value={joinCode}
+                onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
+                placeholder="z.B. 8K3MZQ"
+                style={styles.input}
+                autoFocus
+              />
+
+              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+                <button onClick={() => setMode("choice")} style={styles.secondaryBtn}>
+                  Zurück
+                </button>
+                <button onClick={doJoin} style={styles.primaryBtn} disabled={!canJoin}>
+                  Beitreten
+                </button>
+              </div>
+            </>
+          )}
+
+          {mode === "create" && created && (
+            <>
+              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
+                Dein Spiel wurde erstellt. Dieser Code bleibt auch bei „Alte Spiele“ sichtbar:
+              </div>
+
+              <div
+                style={{
+                  display: "grid",
+                  gap: 8,
+                  padding: 12,
+                  borderRadius: 16,
+                  border: `1px solid ${stylesTokens.panelBorder}`,
+                  background: stylesTokens.panelBg,
+                  textAlign: "center",
+                }}
+              >
+                <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+                  Spiel-Code
+                </div>
+
+                <div
+                  style={{
+                    fontSize: 28,
+                    fontWeight: 1100,
+                    letterSpacing: 2,
+                    color: stylesTokens.textGold,
+                    fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
+                  }}
+                >
+                  {created.code}
+                </div>
+
+                <button onClick={copyCode} style={styles.primaryBtn}>
+                  ⧉ Code kopieren
+                </button>
+              </div>
+
+              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+                <button onClick={onClose} style={styles.primaryBtn}>
+                  Fertig
+                </button>
+              </div>
+            </>
+          )}
+
+          {err && <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>{err}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/TopBar.jsx

@@ -8,22 +8,27 @@ export default function TopBar({
   setUserMenuOpen,
   openPwModal,
   openDesignModal,
-  openJoinModal,
   doLogout,
-  newGame,
+  onOpenNewGame, // NEW
 }) {
   return (
     <div style={styles.topBar}>
-      {/* LINKS */}
       <div>
-        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
+        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>
-        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>{me.email}</div>
+          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ü">
+          <button
+            onClick={() => setUserMenuOpen((v) => !v)}
+            style={styles.userBtn}
+            title="User Menü"
+          >
             <span style={{ fontSize: 16 }}>👤</span>
             <span>User</span>
             <span style={{ opacity: 0.7 }}>▾</span>
@@ -31,14 +36,13 @@ 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 ${stylesTokens.goldLine}`,
+                  borderBottom: "1px solid rgba(233,216,166,0.12)",
                 }}
               >
                 {me.email}
@@ -48,26 +52,10 @@ export default function TopBar({
                 Passwort setzen
               </button>
 
-              <button
+              <button onClick={openDesignModal} style={styles.userDropdownItem}>
-                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
@@ -83,8 +71,8 @@ export default function TopBar({
           )}
         </div>
 
-        <button onClick={newGame} style={styles.primaryBtn}>
+        <button onClick={onOpenNewGame} style={styles.primaryBtn}>
-          ✦ Neues Spiel
+          ✦ New Game
         </button>
       </div>
     </div>

frontend/src/components/WinnerBadge.jsx

@@ -8,20 +8,29 @@ export default function WinnerBadge({ winnerEmail }) {
     <div
       style={{
         marginTop: 14,
-        padding: "12px 14px",
+        padding: "10px 12px",
         borderRadius: 16,
         border: `1px solid ${stylesTokens.panelBorder}`,
         background: stylesTokens.panelBg,
-        boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
+        boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
         backdropFilter: "blur(6px)",
         display: "flex",
-        gap: 10,
         alignItems: "center",
+        justifyContent: "space-between",
+        gap: 10,
       }}
     >
-      <span style={{ fontSize: 16 }}>🏆</span>
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-      <span style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Sieger:</span>
+        <div style={{ fontSize: 18 }}>🏆</div>
-      <span style={{ color: stylesTokens.textMain }}>{winnerEmail}</span>
+        <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
+          Sieger:
+          <span style={{ color: stylesTokens.textGold }}>{" "}{winnerEmail}</span>
+        </div>
+      </div>
+
+      <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+        festgelegt
+      </div>
     </div>
   );
 }

frontend/src/components/WinnerCard.jsx

@@ -1,55 +1,42 @@
-// src/components/WinnerCard.jsx
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
-/**
+export default function WinnerCard({
- * props:
+  isHost,
- * - players: [{id,email}]
+  members,
- * - winnerUserId: string|null
+  winnerUserId,
- * - setWinnerUserId: fn
+  setWinnerUserId,
- * - onSave: fn (async ok)
+  onSave,
- */
+}) {
-export default function WinnerCard({ players, winnerUserId, setWinnerUserId, onSave }) {
+  if (!isHost) return null;
-  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={{ padding: 12, display: "grid", gap: 10 }}>
+        <div style={styles.cardBody}>
-          {!hasPlayers ? (
+          <select
-            <div style={{ color: stylesTokens.textDim, opacity: 0.9 }}>
+            value={winnerUserId || ""}
-              Keine Spieler gefunden (Admin wird nicht angezeigt).
+            onChange={(e) => setWinnerUserId(e.target.value || "")}
-            </div>
+            style={{ ...styles.input, flex: 1 }}
-          ) : (
+          >
-            <select
+            <option value="">— kein Sieger —</option>
-              value={winnerUserId || ""}
+            {members.map((m) => (
-              onChange={(e) => setWinnerUserId(e.target.value || null)}
+              <option key={m.id} value={m.id}>
-              style={styles.input}
+                {m.email}
-            >
+              </option>
-              <option value="">— kein Sieger gesetzt —</option>
+            ))}
-              {players.map((p) => (
+          </select>
-                <option key={p.id} value={p.id}>
-                  {p.email}
-                </option>
-              ))}
-            </select>
-          )}
 
-          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+          <button onClick={onSave} style={styles.primaryBtn}>
-            <button onClick={() => setWinnerUserId(null)} style={styles.secondaryBtn}>
+            Speichern
-              Leeren
+          </button>
-            </button>
+        </div>
-            <button onClick={onSave} style={styles.primaryBtn} disabled={!hasPlayers}>
-              Speichern
-            </button>
-          </div>
 
-          <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+        <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim, opacity: 0.9 }}>
-            Der Sieger wird im Spiel gespeichert und ist für alle Spieler sichtbar.
+          Nur der Host (Spiel-Ersteller) kann den Sieger setzen.
-          </div>
         </div>
       </div>
     </div>