feat(web client): ask nickname when joining a room

clients/web/assets/style.css

@@ -1776,3 +1776,63 @@ a:hover { text-decoration: underline; }
     color: var(--ui-red-accent);
     font-style: italic;
 }
+
+/* ── Nickname modal (anonymous player name chooser) ─────────────────── */
+.nickname-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 300;
+}
+
+.nickname-modal {
+    background: var(--ui-parchment);
+    border-radius: 8px;
+    padding: 2rem 2rem 1.75rem;
+    width: min(360px, 90vw);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    box-shadow:
+        0 20px 60px rgba(0,0,0,0.55),
+        0 0 0 1px rgba(200,164,72,0.35),
+        0 0 0 5px rgba(42,21,8,0.9),
+        0 0 0 6px rgba(200,164,72,0.2);
+    animation: game-over-appear 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+.nickname-modal-title {
+    font-family: var(--font-display);
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--ui-ink);
+    text-align: center;
+    letter-spacing: 0.04em;
+}
+
+.nickname-modal-hint {
+    font-family: var(--font-ui);
+    font-size: 0.8rem;
+    color: rgba(42,26,8,0.6);
+    text-align: center;
+    margin-bottom: -0.25rem;
+}
+
+.nickname-modal-alt {
+    text-align: center;
+    font-size: 0.8rem;
+    color: rgba(42,26,8,0.55);
+    padding-top: 0.5rem;
+    border-top: 1px solid rgba(138,106,40,0.2);
+}
+
+.nickname-modal-alt a {
+    color: var(--ui-gold-dark);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.nickname-modal-alt a:hover { text-decoration: underline; }

clients/web/locales/en.json

@@ -121,5 +121,11 @@
   "scan_qr": "or scan the QR code",
   "join_code_label": "Join by code",
   "join_code_placeholder": "Room code",
-  "share_btn": "Share"
+  "share_btn": "Share",
+  "nickname_modal_title": "Choose your nickname",
+  "nickname_modal_hint": "You will play as:",
+  "nickname_modal_play": "Play",
+  "nickname_modal_or": "or",
+  "nickname_modal_sign_in": "Sign in",
+  "nickname_modal_register": "Create account"
 }

clients/web/locales/fr.json

@@ -121,5 +121,11 @@
   "scan_qr": "ou scannez le QR code",
   "join_code_label": "Rejoindre par code",
   "join_code_placeholder": "Code de salle",
-  "share_btn": "Partager"
+  "share_btn": "Partager",
+  "nickname_modal_title": "Choisissez votre pseudo",
+  "nickname_modal_hint": "Vous jouerez sous le nom de :",
+  "nickname_modal_play": "Jouer",
+  "nickname_modal_or": "ou",
+  "nickname_modal_sign_in": "Se connecter",
+  "nickname_modal_register": "Créer un compte"
 }

clients/web/src/app.rs

@@ -154,11 +154,19 @@ pub fn App() -> impl IntoView {
     let auth_email_verified: RwSignal<bool> = RwSignal::new(false);
     provide_context(auth_username);
     provide_context(auth_email_verified);
+    // Set to true once get_me resolves (success or failure) so lobby can
+    // decide immediately whether to show the nickname modal.
+    let auth_loaded: RwSignal<bool> = RwSignal::new(false);
+    provide_context(auth_loaded);
+    // Nickname chosen by an anonymous player; used instead of "Anonymous".
+    let anon_nickname: RwSignal<Option<String>> = RwSignal::new(None);
+    provide_context(anon_nickname);
     spawn_local(async move {
         if let Ok(me) = api::get_me().await {
             auth_username.set(Some(me.username));
             auth_email_verified.set(me.email_verified);
         }
+        auth_loaded.set(true);
     });
 
     let (cmd_tx, mut cmd_rx) = mpsc::unbounded::<NetCommand>();
@@ -242,6 +250,7 @@ pub fn App() -> impl IntoView {
             if remote_config.is_none() {
                 let player_name = auth_username
                     .get_untracked()
+                    .or_else(|| anon_nickname.get_untracked())
                     .unwrap_or_else(|| untrack(|| t_string!(i18n, anonymous_name).to_string()));
                 loop {
                     let restart =
@@ -287,7 +296,11 @@ pub fn App() -> impl IntoView {
             let reconnect_token = session.reconnect_token;
             let my_name = auth_username
                 .get_untracked()
+                .or_else(|| anon_nickname.get_untracked())
                 .unwrap_or_else(|| t_string!(i18n, anonymous_name).to_string());
+            // Announce our name to the host backend so it can broadcast it to
+            // the opponent. Done once immediately after connecting.
+            session.send_action(PlayerAction::SetName(my_name.clone()));
             let mut vs = ViewState::default_with_names("", "");
             let mut result_submitted = false;
 

clients/web/src/game/trictrac/backend.rs

@@ -202,6 +202,16 @@ impl BackEndArchitecture<PlayerAction, GameDelta, ViewState> for TrictracBackend
     }
 
     fn inform_rpc(&mut self, mp_player: u16, action: PlayerAction) {
+        // SetName is always accepted regardless of game stage or whose turn it is.
+        if let PlayerAction::SetName(name) = action {
+            let store_id = if mp_player == 0 { HOST_PLAYER_ID } else { GUEST_PLAYER_ID };
+            if let Some(p) = self.game.players.get_mut(&store_id) {
+                p.name = name;
+            }
+            self.broadcast_state();
+            return;
+        }
+
         // During the first-player ceremony only PreGameRoll actions are accepted.
         if self.ceremony_started {
             if matches!(action, PlayerAction::PreGameRoll) {
@@ -262,6 +272,7 @@ impl BackEndArchitecture<PlayerAction, GameDelta, ViewState> for TrictracBackend
                 }
             }
             PlayerAction::PreGameRoll => {} // ignored outside ceremony
+            PlayerAction::SetName(_) => {}  // handled at the top of inform_rpc
         }
 
         self.broadcast_state();

clients/web/src/game/trictrac/types.rs

@@ -16,6 +16,8 @@ pub enum PlayerAction {
     Mark,
     /// Roll a single die during the pre-game ceremony to decide who goes first.
     PreGameRoll,
+    /// Declare the player's display name; sent once immediately after connecting.
+    SetName(String),
 }
 
 // ── Incremental state update broadcast to all clients ────────────────────────

clients/web/src/portal/lobby.rs

@@ -1,11 +1,12 @@
 use futures::channel::mpsc::UnboundedSender;
 use leptos::prelude::*;
+use leptos_router::components::A;
 use leptos_router::hooks::use_query_map;
 
 use crate::app::{NetCommand, Screen};
 use crate::i18n::*;
 
-// ── Room code generation ──────────────────────────────────────────────────────
+// ── Room/nickname generation ──────────────────────────────────────────────────
 
 fn generate_room_code() -> String {
     use rand::Rng;
@@ -16,6 +17,23 @@ fn generate_room_code() -> String {
         .collect()
 }
 
+fn generate_nickname() -> String {
+    use rand::Rng;
+    let mut rng = rand::rng();
+    const ADJ: &[&str] = &[
+        "swift", "brave", "noble", "fierce", "clever", "bold", "cunning",
+        "agile", "sharp", "golden", "iron", "silver", "quick", "daring", "wild",
+    ];
+    const NOUN: &[&str] = &[
+        "fox", "hawk", "wolf", "lion", "bear", "rook", "knight",
+        "duke", "earl", "lance", "blade", "crown", "dame", "ace", "star",
+    ];
+    let adj = ADJ[rng.random_range(0..ADJ.len())];
+    let noun = NOUN[rng.random_range(0..NOUN.len())];
+    let num: u8 = rng.random_range(10..=99);
+    format!("{adj}-{noun}-{num}")
+}
+
 // ── QR code SVG rendering ─────────────────────────────────────────────────────
 
 pub(crate) fn qr_svg(text: &str) -> String {
@@ -62,7 +80,14 @@ pub(crate) fn room_url(code: &str) -> String {
     format!("http://localhost:9091/?room={}", code)
 }
 
-// ── Lobby component ───────────────────────────────────────────────────────────
+// ── Lobby state ───────────────────────────────────────────────────────────────
+
+/// Action to execute once the anonymous player has chosen their nickname.
+#[derive(Clone)]
+enum PendingLobbyAction {
+    Create { code: String },
+    Join { code: String },
+}
 
 #[derive(Clone)]
 enum LobbyView {
@@ -70,24 +95,38 @@ enum LobbyView {
     Waiting { code: String },
 }
 
+// ── LobbyPage ─────────────────────────────────────────────────────────────────
+
 #[component]
 pub fn LobbyPage() -> impl IntoView {
-    let screen = use_context::<RwSignal<Screen>>().expect("Screen context not found");
+    let screen = use_context::<RwSignal<Screen>>().expect("Screen context");
-    let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
+    let cmd_tx = use_context::<UnboundedSender<NetCommand>>().expect("NetCommand sender");
-        .expect("UnboundedSender<NetCommand> not found in context");
+    let auth_username = use_context::<RwSignal<Option<String>>>().expect("auth_username context");
+    let auth_loaded = use_context::<RwSignal<bool>>().expect("auth_loaded context");
+    let anon_nickname = use_context::<RwSignal<Option<String>>>().expect("anon_nickname context");
     let query = use_query_map();
 
     let view_state: RwSignal<LobbyView> = RwSignal::new(LobbyView::Idle);
+    // Non-None while the nickname-chooser modal is open.
+    let pending_action: RwSignal<Option<PendingLobbyAction>> = RwSignal::new(None);
 
-    // Auto-join when the URL contains ?room=CODE
+    // ── Auto-join when URL has ?room=CODE ──────────────────────────────────
-    let cmd_tx_query = cmd_tx.clone();
+    // Wait for auth to resolve so we join directly when already logged in,
+    // or show the nickname modal when anonymous.
+    let join_processed = StoredValue::new(false);
+    let cmd_tx_q = cmd_tx.clone();
     Effect::new(move |_| {
-        if let Some(code) = query.read().get("room") {
+        if join_processed.get_value() || !auth_loaded.get() {
-            if !code.is_empty() {
+            return;
-                cmd_tx_query
+        }
-                    .unbounded_send(NetCommand::JoinRoom { room: code })
+        let Some(code) = query.read().get("room").filter(|s| !s.is_empty()) else {
-                    .ok();
+            return;
-            }
+        };
+        join_processed.set_value(true);
+        if auth_username.get_untracked().is_some() {
+            cmd_tx_q.unbounded_send(NetCommand::JoinRoom { room: code }).ok();
+        } else {
+            pending_action.set(Some(PendingLobbyAction::Join { code }));
         }
     });
 
@@ -96,7 +135,8 @@ pub fn LobbyPage() -> impl IntoView {
         _ => None,
     };
 
-    let cmd_tx_idle = cmd_tx;
+    let cmd_idle = cmd_tx.clone();
+    let cmd_modal = cmd_tx;
 
     view! {
         <div class="portal-main" style="display:flex;justify-content:center;align-items:flex-start;padding-top:5vh">
@@ -114,54 +154,73 @@ pub fn LobbyPage() -> impl IntoView {
                     {move || error().map(|err| view! { <p class="error-msg">{err}</p> })}
 
                     {move || match view_state.get() {
-                        LobbyView::Idle => {
+                        LobbyView::Idle => view! {
-                            // Create fresh closures each render so they are FnMut-compatible
+                            <IdleCard
-                            let cmd_tx_create = cmd_tx_idle.clone();
+                                cmd_tx=cmd_idle.clone()
-                            let cmd_tx_bot = cmd_tx_idle.clone();
+                                auth_username=auth_username
-                            let on_create = move |_: leptos::ev::MouseEvent| {
+                                view_state=view_state
-                                let code = generate_room_code();
+                                pending_action=pending_action
-                                cmd_tx_create
+                            />
-                                    .unbounded_send(NetCommand::CreateRoom { room: code.clone() })
+                        }.into_any(),
-                                    .ok();
-                                view_state.set(LobbyView::Waiting { code });
-                            };
-                            view! {
-                                <IdleCard on_create=on_create cmd_tx_bot=cmd_tx_bot />
-                            }.into_any()
-                        }
                         LobbyView::Waiting { code } => view! {
                             <WaitingCard code=code />
                         }.into_any(),
                     }}
                 </div>
             </div>
+
+            // Fixed-position modal overlay; rendered here but escapes layout.
+            {move || pending_action.get().map(|action| view! {
+                <NicknameModal
+                    pending=action
+                    cmd_tx=cmd_modal.clone()
+                    view_state=view_state
+                    pending_action=pending_action
+                    anon_nickname=anon_nickname
+                />
+            })}
         </div>
     }
 }
 
-// ── Idle card: Create + vs Bot + hidden join-by-code ─────────────────────────
+// ── IdleCard: Create + vs Bot + hidden join-by-code ──────────────────────────
 
 #[component]
 fn IdleCard(
-    on_create: impl Fn(leptos::ev::MouseEvent) + 'static,
+    cmd_tx: UnboundedSender<NetCommand>,
-    cmd_tx_bot: UnboundedSender<NetCommand>,
+    auth_username: RwSignal<Option<String>>,
+    view_state: RwSignal<LobbyView>,
+    pending_action: RwSignal<Option<PendingLobbyAction>>,
 ) -> impl IntoView {
     let i18n = use_i18n();
     let join_open = RwSignal::new(false);
     let join_code = RwSignal::new(String::new());
-    let cmd_tx_join = cmd_tx_bot.clone();
+
+    let cmd_bot = cmd_tx.clone();
+    let cmd_create = cmd_tx.clone();
+    let cmd_join = cmd_tx;
+
+    let on_create = move |_: leptos::ev::MouseEvent| {
+        let code = generate_room_code();
+        if auth_username.get_untracked().is_some() {
+            cmd_create.unbounded_send(NetCommand::CreateRoom { room: code.clone() }).ok();
+            view_state.set(LobbyView::Waiting { code });
+        } else {
+            pending_action.set(Some(PendingLobbyAction::Create { code }));
+        }
+    };
 
     view! {
         <div class="login-actions">
-            <button class="login-btn login-btn-primary" on:click=on_create>
-                {t!(i18n, create_room)}
-            </button>
             <button
                 class="login-btn login-btn-bot"
-                on:click=move |_| { cmd_tx_bot.unbounded_send(NetCommand::PlayVsBot).ok(); }
+                on:click=move |_| { cmd_bot.unbounded_send(NetCommand::PlayVsBot).ok(); }
             >
                 {t!(i18n, play_vs_bot)}
             </button>
+            <button class="login-btn login-btn-primary" on:click=on_create>
+                {t!(i18n, create_room)}
+            </button>
         </div>
 
         // Hidden "join by code" fallback
@@ -175,8 +234,7 @@ fn IdleCard(
                 {t!(i18n, join_code_label)}
             </button>
             {move || {
-                // Clone the sender on each reactive run to keep the outer closure FnMut
+                let cmd = cmd_join.clone();
-                let cmd = cmd_tx_join.clone();
                 join_open.get().then(|| view! {
                     <div style="margin-top:0.75rem;display:flex;gap:0.5rem">
                         <input
@@ -192,8 +250,12 @@ fn IdleCard(
                             style="margin:0;padding:0 1rem"
                             disabled=move || join_code.get().is_empty()
                             on:click=move |_| {
-                                cmd.unbounded_send(NetCommand::JoinRoom { room: join_code.get() })
+                                let code = join_code.get();
-                                    .ok();
+                                if auth_username.get_untracked().is_some() {
+                                    cmd.unbounded_send(NetCommand::JoinRoom { room: code }).ok();
+                                } else {
+                                    pending_action.set(Some(PendingLobbyAction::Join { code }));
+                                }
                             }
                         >
                             {t!(i18n, join_room)}
@@ -205,7 +267,68 @@ fn IdleCard(
     }
 }
 
-// ── Waiting card: URL + copy + QR ────────────────────────────────────────────
+// ── NicknameModal ─────────────────────────────────────────────────────────────
+
+#[component]
+fn NicknameModal(
+    pending: PendingLobbyAction,
+    cmd_tx: UnboundedSender<NetCommand>,
+    view_state: RwSignal<LobbyView>,
+    pending_action: RwSignal<Option<PendingLobbyAction>>,
+    anon_nickname: RwSignal<Option<String>>,
+) -> impl IntoView {
+    let i18n = use_i18n();
+    // Pre-fill with a random nickname; the player can edit it.
+    let nick = RwSignal::new(generate_nickname());
+
+    let on_play = move |_: leptos::ev::MouseEvent| {
+        let chosen = nick.get().trim().to_string();
+        let chosen = if chosen.is_empty() { generate_nickname() } else { chosen };
+        anon_nickname.set(Some(chosen));
+        match &pending {
+            PendingLobbyAction::Create { code } => {
+                cmd_tx.unbounded_send(NetCommand::CreateRoom { room: code.clone() }).ok();
+                view_state.set(LobbyView::Waiting { code: code.clone() });
+            }
+            PendingLobbyAction::Join { code } => {
+                cmd_tx.unbounded_send(NetCommand::JoinRoom { room: code.clone() }).ok();
+            }
+        }
+        pending_action.set(None);
+    };
+
+    view! {
+        <div class="nickname-backdrop">
+            <div class="nickname-modal">
+                <h2 class="nickname-modal-title">{t!(i18n, nickname_modal_title)}</h2>
+                <p class="nickname-modal-hint">{t!(i18n, nickname_modal_hint)}</p>
+                <input
+                    class="login-input"
+                    type="text"
+                    style="margin:0"
+                    prop:value=move || nick.get()
+                    on:input=move |ev| nick.set(event_target_value(&ev))
+                />
+                <button
+                    class="login-btn login-btn-primary"
+                    disabled=move || nick.get().trim().is_empty()
+                    on:click=on_play
+                >
+                    {t!(i18n, nickname_modal_play)}
+                </button>
+                <p class="nickname-modal-alt">
+                    {t!(i18n, nickname_modal_or)}
+                    " "
+                    <A href="/account">{t!(i18n, nickname_modal_sign_in)}</A>
+                    " · "
+                    <A href="/account">{t!(i18n, nickname_modal_register)}</A>
+                </p>
+            </div>
+        </div>
+    }
+}
+
+// ── WaitingCard: URL + copy + QR ─────────────────────────────────────────────
 
 #[component]
 fn WaitingCard(code: String) -> impl IntoView {
@@ -221,12 +344,9 @@ fn WaitingCard(code: String) -> impl IntoView {
             {
                 let url = url.clone();
                 wasm_bindgen_futures::spawn_local(async move {
-                    if let Some(clipboard) = web_sys::window()
+                    if let Some(clipboard) = web_sys::window().map(|w| w.navigator().clipboard()) {
-                        .map(|w| w.navigator().clipboard())
+                        let _ =
-                    {
+                            wasm_bindgen_futures::JsFuture::from(clipboard.write_text(&url)).await;
-                        let _ = wasm_bindgen_futures::JsFuture::from(
-                            clipboard.write_text(&url)
-                        ).await;
                         copied.set(true);
                         gloo_timers::future::TimeoutFuture::new(2000).await;
                         copied.set(false);