2026-06-10 14:25:59 +00:00
11 changed files with 223 additions and 69 deletions
--- a/apps/server/src/game/engine.ts
+++ b/apps/server/src/game/engine.ts
@ -198,7 +198,7 @@ export class GameEngine implements RoomGameController {
  private eligibleVoters(): string[] {
    const secret = this.runtime?.secretPlayerId
    return [...this.room.players.values()]
-      .filter((p) => p.connected && p.id !== secret)
+      .filter((p) => p.connected && p.name !== "" && p.id !== secret)
      .map((p) => p.id)
  }

--- a/apps/server/src/handlers.ts
+++ b/apps/server/src/handlers.ts
@ -53,11 +53,8 @@ export function registerRoomHandlers(
  }

  socket.on("room:create", (payload, ack) => {
-    const name = cleanName(payload?.playerName)
-    if (!name) {
-      ack({ ok: false, error: { code: "INVALID_NAME", message: "Pseudo invalide." } })
-      return
-    }
+    // Le pseudo est choisi dans la room (player:setName) : on crée sans nom.
+    const name = cleanName(payload?.playerName) ?? ""
    try {
      const { room, player } = rooms.create(name, socket.id)
      socket.data.playerId = player.id
@ -71,12 +68,8 @@ export function registerRoomHandlers(
  })

  socket.on("room:join", (payload, ack) => {
-    const name = cleanName(payload?.playerName)
+    const name = cleanName(payload?.playerName) ?? ""
    const code = typeof payload?.roomCode === "string" ? payload.roomCode.trim().toUpperCase() : ""
-    if (!name) {
-      ack({ ok: false, error: { code: "INVALID_NAME", message: "Pseudo invalide." } })
-      return
-    }
    try {
      const { room, player } = rooms.join(code, name, socket.id)
      socket.data.playerId = player.id
@ -89,6 +82,22 @@ export function registerRoomHandlers(
    }
  })

+  socket.on("player:setName", (payload) => {
+    const code = socket.data.roomCode
+    const playerId = socket.data.playerId
+    const room = code ? rooms.get(code) : undefined
+    const name = cleanName(payload?.name)
+    if (!room || !playerId || !name) {
+      return
+    }
+    const player = room.players.get(playerId)
+    if (!player) {
+      return
+    }
+    player.name = name
+    broadcastState(room)
+  })
+
  socket.on("lobby:updateSettings", (payload) => {
    const code = socket.data.roomCode
    const room = code ? rooms.get(code) : undefined
@ -129,7 +138,9 @@ export function registerRoomHandlers(
      return
    }
    const hasBlindtest = room.settings.rounds.some((r) => r.type === "blindtest")
-    const connected = [...room.players.values()].filter((p) => p.connected).length
+    const connected = [...room.players.values()].filter(
+      (p) => p.connected && p.name !== ""
+    ).length
    if (hasBlindtest && connected < 3) {
      ack({
        ok: false,
--- a/apps/server/src/rooms.ts
+++ b/apps/server/src/rooms.ts
@ -112,23 +112,25 @@ export class RoomManager {

  /** Projette la room vers la vue publique diffusée aux clients (sans secrets). */
  toSnapshot(room: ServerRoom): RoomSnapshot {
+    // Seuls les joueurs ayant choisi un pseudo sont visibles dans la room.
+    const named = [...room.players.values()].filter((p) => p.name !== "")
    return {
      code: room.code,
      status: room.status,
      hostId: room.hostId,
-      players: [...room.players.values()].map((p) => ({
+      players: named.map((p) => ({
        id: p.id,
        name: p.name,
        connected: p.connected,
      })),
      settings: room.settings,
-      scores: [...room.scores.entries()].map(([playerId, score]) => ({
-        playerId,
-        score,
+      scores: named.map((p) => ({
+        playerId: p.id,
+        score: room.scores.get(p.id) ?? 0,
      })),
      currentRound: room.currentRound,
      totalRounds: room.settings.rounds.length,
-      submissions: [...room.players.values()].map((p) => ({
+      submissions: named.map((p) => ({
        playerId: p.id,
        count: room.blindtestTracks.filter((t) => t.submittedBy === p.id).length,
      })),
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@ -1,11 +1,15 @@
 import { Route, Switch } from "wouter"
 import { HomePage } from "@/pages/home"
+import { JoinPage } from "@/pages/join"
 import { RoomPage } from "@/pages/room"

 export function App() {
  return (
    <Switch>
      <Route path="/" component={HomePage} />
+      <Route path="/join/:code">
+        {(params) => <JoinPage code={params.code.toUpperCase()} />}
+      </Route>
      <Route path="/room/:code">
        {(params) => <RoomPage code={params.code.toUpperCase()} />}
      </Route>
--- a/apps/web/src/components/pseudo-screen.tsx
+++ b/apps/web/src/components/pseudo-screen.tsx
@ -0,0 +1,45 @@
+import { useState } from "react"
+import { Button } from "@workspace/ui/components/button"
+import { useRoomStore } from "@/store/room"
+import { Avatar } from "@/components/avatar"
+
+const inputClass =
+  "border-input bg-background h-10 w-full rounded-md border px-3 py-2 text-center text-sm focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
+
+/** Choix du pseudo dans la room, avec aperçu de l'avatar en temps réel. */
+export function PseudoScreen({ code }: { code: string }) {
+  const setName = useRoomStore((s) => s.setName)
+  const [name, setName_] = useState("")
+  const canSubmit = name.trim().length > 0
+
+  return (
+    <div className="flex min-h-svh items-center justify-center p-6">
+      <div className="flex w-full max-w-xs flex-col items-center gap-5">
+        <p className="text-muted-foreground text-xs uppercase">
+          Room {code}
+        </p>
+        <Avatar
+          seed={name.trim() || "?"}
+          className="size-28 ring-2 ring-primary/30"
+        />
+        <p className="font-heading text-lg font-bold">Choisis ton pseudo</p>
+        <input
+          className={inputClass}
+          placeholder="Ton pseudo"
+          value={name}
+          maxLength={24}
+          autoFocus
+          onChange={(e) => setName_(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && canSubmit && setName(name)}
+        />
+        <Button
+          className="w-full"
+          disabled={!canSubmit}
+          onClick={() => setName(name)}
+        >
+          Entrer dans la room
+        </Button>
+      </div>
+    </div>
+  )
+}
--- a/apps/web/src/components/room-code.tsx
+++ b/apps/web/src/components/room-code.tsx
@ -1,23 +1,29 @@
 import { useState } from "react"
-import { Check, Copy } from "lucide-react"
+import { Check, Copy, Link2 } from "lucide-react"
+import { Button } from "@workspace/ui/components/button"

-/** Code de room cliquable : copie dans le presse-papier avec retour visuel. */
+type Copied = "code" | "link" | null
+
+/** Code de room copiable + bouton pour copier le lien d'invitation. */
 export function RoomCode({ code }: { code: string }) {
-  const [copied, setCopied] = useState(false)
+  const [copied, setCopied] = useState<Copied>(null)

-  async function copy() {
+  async function copy(what: Copied, text: string) {
    try {
-      await navigator.clipboard.writeText(code)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 1500)
+      await navigator.clipboard.writeText(text)
+      setCopied(what)
+      setTimeout(() => setCopied(null), 1500)
    } catch {
      // presse-papier indisponible (http non sécurisé) : on ignore silencieusement
    }
  }

+  const link = `${window.location.origin}/join/${code}`
+
  return (
+    <div className="flex items-center gap-3">
      <button
-      onClick={copy}
+        onClick={() => copy("code", code)}
        title="Copier le code"
        className="group flex items-center gap-2 text-left"
      >
@ -29,11 +35,22 @@ export function RoomCode({ code }: { code: string }) {
            {code}
          </span>
        </span>
-      {copied ? (
+        {copied === "code" ? (
          <Check className="size-4 text-green-500" />
        ) : (
          <Copy className="text-muted-foreground group-hover:text-foreground size-4 transition-colors" />
        )}
      </button>
+
+      <Button
+        size="sm"
+        variant="secondary"
+        onClick={() => copy("link", link)}
+        title="Copier le lien d'invitation"
+      >
+        {copied === "link" ? <Check className="text-green-500" /> : <Link2 />}
+        {copied === "link" ? "Copié" : "Lien"}
+      </Button>
+    </div>
  )
 }
--- a/apps/web/src/pages/home.tsx
+++ b/apps/web/src/pages/home.tsx
@ -12,18 +12,15 @@ export function HomePage() {
  const joinRoom = useRoomStore((s) => s.joinRoom)
  const connected = useRoomStore((s) => s.connected)

-  const [name, setName] = useState("")
  const [code, setCode] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [busy, setBusy] = useState(false)

-  const canSubmit = name.trim().length > 0 && connected && !busy
-
  async function handleCreate() {
    setError(null)
    setBusy(true)
    try {
-      const { roomCode } = await createRoom(name.trim())
+      const { roomCode } = await createRoom()
      navigate(`/room/${roomCode}`)
    } catch (err) {
      setError((err as { message?: string }).message ?? "Erreur")
@ -36,7 +33,7 @@ export function HomePage() {
    setError(null)
    setBusy(true)
    try {
-      const { roomCode } = await joinRoom(code.trim().toUpperCase(), name.trim())
+      const { roomCode } = await joinRoom(code.trim().toUpperCase())
      navigate(`/room/${roomCode}`)
    } catch (err) {
      setError((err as { message?: string }).message ?? "Erreur")
@ -57,15 +54,7 @@ export function HomePage() {
          </p>
        </header>

-        <input
-          className={inputClass}
-          placeholder="Ton pseudo"
-          value={name}
-          maxLength={24}
-          onChange={(e) => setName(e.target.value)}
-        />
-
-        <Button disabled={!canSubmit} onClick={handleCreate}>
+        <Button disabled={!connected || busy} onClick={handleCreate}>
          Créer une room
        </Button>

@ -82,10 +71,11 @@ export function HomePage() {
            value={code}
            maxLength={4}
            onChange={(e) => setCode(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && code.trim() && handleJoin()}
          />
          <Button
            variant="secondary"
-            disabled={!canSubmit || code.trim().length === 0}
+            disabled={!connected || busy || code.trim().length === 0}
            onClick={handleJoin}
          >
            Rejoindre
--- a/apps/web/src/pages/join.tsx
+++ b/apps/web/src/pages/join.tsx
@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from "react"
+import { Link, useLocation } from "wouter"
+import { Button } from "@workspace/ui/components/button"
+import { useRoomStore } from "@/store/room"
+
+/** Lien d'invitation /join/:code → rejoint la room puis redirige vers le lobby. */
+export function JoinPage({ code }: { code: string }) {
+  const [, navigate] = useLocation()
+  const joinRoom = useRoomStore((s) => s.joinRoom)
+  const connected = useRoomStore((s) => s.connected)
+  const [error, setError] = useState<string | null>(null)
+  const tried = useRef(false)
+
+  useEffect(() => {
+    if (!connected || tried.current) {
+      return
+    }
+    tried.current = true
+    joinRoom(code)
+      .then(({ roomCode }) => navigate(`/room/${roomCode}`, { replace: true }))
+      .catch((err) =>
+        setError((err as { message?: string }).message ?? "Room introuvable.")
+      )
+  }, [connected, code, joinRoom, navigate])
+
+  return (
+    <div className="flex min-h-svh flex-col items-center justify-center gap-4 p-6 text-center">
+      {error ? (
+        <>
+          <p className="text-muted-foreground text-sm">{error}</p>
+          <Link href="/">
+            <Button variant="secondary">Retour à l'accueil</Button>
+          </Link>
+        </>
+      ) : (
+        <p className="text-muted-foreground text-sm">
+          Connexion à la room {code}…
+        </p>
+      )}
+    </div>
+  )
+}
--- a/apps/web/src/pages/room.tsx
+++ b/apps/web/src/pages/room.tsx
@ -9,19 +9,22 @@ import { PlayerCards } from "@/components/player-cards"
 import { RoomCode } from "@/components/room-code"
 import { Boom } from "@/components/boom"
 import { RoundTransition } from "@/components/round-transition"
+import { PseudoScreen } from "@/components/pseudo-screen"

 export function RoomPage({ code }: { code: string }) {
  const snapshot = useRoomStore((s) => s.snapshot)
+  const roomCode = useRoomStore((s) => s.roomCode)
  const playerId = useRoomStore((s) => s.playerId)
  const connected = useRoomStore((s) => s.connected)
+  const pseudoSet = useRoomStore((s) => s.pseudoSet)
  const boomKey = useRoomStore((s) => s.boomKey)
  const roundKey = useRoomStore((s) => s.roundKey)
  const voteProgress = useRoomStore((s) => s.voteProgress)
  const round = useRoomStore((s) => s.round)
  const roundModeChanged = useRoomStore((s) => s.roundModeChanged)

-  // Pas de snapshot pour ce code (accès direct / refresh) : retour à l'accueil.
-  if (!snapshot || snapshot.code !== code) {
+  // Pas dans cette room (accès direct sans rejoindre / refresh) : retour accueil.
+  if (roomCode !== code) {
    return (
      <div className="flex min-h-svh flex-col items-center justify-center gap-4 p-6 text-center">
        <p className="text-muted-foreground text-sm">
@ -34,6 +37,20 @@ export function RoomPage({ code }: { code: string }) {
    )
  }

+  // Pseudo pas encore choisi : on l'affiche d'abord.
+  if (!pseudoSet) {
+    return <PseudoScreen code={code} />
+  }
+
+  // En attente du premier snapshot.
+  if (!snapshot || snapshot.code !== code) {
+    return (
+      <div className="flex min-h-svh items-center justify-center p-6">
+        <p className="text-muted-foreground text-sm">Chargement…</p>
+      </div>
+    )
+  }
+
  // Cards de scores visibles en permanence pendant le jeu (suivi continu).
  const inGame =
    snapshot.status === "in_round" ||
--- a/apps/web/src/store/room.ts
+++ b/apps/web/src/store/room.ts
@ -37,6 +37,8 @@ interface RoomState {
  connected: boolean
  playerId: string | null
  roomCode: string | null
+  /** Le joueur local a-t-il choisi son pseudo dans la room ? */
+  pseudoSet: boolean
  snapshot: RoomSnapshot | null
  lastError: ErrorPayload | null

@ -53,8 +55,9 @@ interface RoomState {
  /** Le type d'épreuve a-t-il changé par rapport à la manche précédente ? */
  roundModeChanged: boolean

-  createRoom: (playerName: string) => Promise<RoomCreatedPayload>
-  joinRoom: (roomCode: string, playerName: string) => Promise<RoomCreatedPayload>
+  createRoom: () => Promise<RoomCreatedPayload>
+  joinRoom: (roomCode: string) => Promise<RoomCreatedPayload>
+  setName: (name: string) => void
  updateSettings: (partial: Partial<UpdateSettingsPayload>) => void
  startGame: (rounds: RoundConfig[]) => Promise<void>
  submitTrack: (youtubeUrl: string) => Promise<SubmitOkPayload>
@ -73,6 +76,7 @@ export const useRoomStore = create<RoomState>((set, get) => ({
  connected: socket.connected,
  playerId: null,
  roomCode: null,
+  pseudoSet: false,
  snapshot: null,
  lastError: null,
  round: null,
@ -86,11 +90,15 @@ export const useRoomStore = create<RoomState>((set, get) => ({
  roundKey: 0,
  roundModeChanged: false,

-  createRoom: (playerName) =>
+  createRoom: () =>
    new Promise((resolve, reject) => {
-      socket.emit("room:create", { playerName }, (res) => {
+      socket.emit("room:create", {}, (res) => {
        if (res.ok) {
-          set({ playerId: res.data.playerId, roomCode: res.data.roomCode })
+          set({
+            playerId: res.data.playerId,
+            roomCode: res.data.roomCode,
+            pseudoSet: false,
+          })
          resolve(res.data)
        } else {
          set({ lastError: res.error })
@ -99,11 +107,15 @@ export const useRoomStore = create<RoomState>((set, get) => ({
      })
    }),

-  joinRoom: (roomCode, playerName) =>
+  joinRoom: (roomCode) =>
    new Promise((resolve, reject) => {
-      socket.emit("room:join", { roomCode, playerName }, (res) => {
+      socket.emit("room:join", { roomCode }, (res) => {
        if (res.ok) {
-          set({ playerId: res.data.playerId, roomCode: res.data.roomCode })
+          set({
+            playerId: res.data.playerId,
+            roomCode: res.data.roomCode,
+            pseudoSet: false,
+          })
          resolve(res.data)
        } else {
          set({ lastError: res.error })
@ -112,6 +124,14 @@ export const useRoomStore = create<RoomState>((set, get) => ({
      })
    }),

+  setName: (name) => {
+    if (name.trim().length === 0) {
+      return
+    }
+    socket.emit("player:setName", { name: name.trim() })
+    set({ pseudoSet: true })
+  },
+
  updateSettings: (partial) => {
    const current = get().snapshot?.settings ?? DEFAULT_ROOM_SETTINGS
    socket.emit("lobby:updateSettings", {
@ -184,6 +204,7 @@ export const useRoomStore = create<RoomState>((set, get) => ({
  reset: () =>
    set({
      roomCode: null,
+      pseudoSet: false,
      snapshot: null,
      lastError: null,
      round: null,
--- a/packages/shared/src/events.ts
+++ b/packages/shared/src/events.ts
@ -14,7 +14,7 @@ import type {
 // --- Payloads ------------------------------------------------------------

 export interface RoomCreatePayload {
-  playerName: string
+  playerName?: string
 }

 export interface RoomCreatedPayload {
@ -24,7 +24,11 @@ export interface RoomCreatedPayload {

 export interface RoomJoinPayload {
  roomCode: string
-  playerName: string
+  playerName?: string
+}
+
+export interface SetNamePayload {
+  name: string
 }

 export interface UpdateSettingsPayload {
@ -126,6 +130,7 @@ export type Ack<T> = (result: { ok: true; data: T } | { ok: false; error: ErrorP
 export interface ClientToServerEvents {
  "room:create": (payload: RoomCreatePayload, ack: Ack<RoomCreatedPayload>) => void
  "room:join": (payload: RoomJoinPayload, ack: Ack<RoomCreatedPayload>) => void
+  "player:setName": (payload: SetNamePayload) => void
  "lobby:updateSettings": (payload: UpdateSettingsPayload) => void
  "lobby:return": () => void
  "game:start": (ack: Ack<null>) => void