feat(client_web): dice with dots

client_web/assets/style.css

@@ -83,7 +83,7 @@ input[type="text"] {
 .score-row { display: flex; gap: 1rem; align-items: center; }
 .score-name { font-weight: bold; min-width: 80px; }
 
-/* ── Status / action bars ───────────────────────────────────────────── */
+/* ── Status bar ─────────────────────────────────────────────────────── */
 .status-bar {
     display: flex;
     gap: 1rem;
@@ -91,10 +91,30 @@ input[type="text"] {
     font-size: 1.05rem;
     font-weight: 500;
 }
-.dice { font-weight: bold; color: #2a4a8a; }
-.dice-used { opacity: 0.35; text-decoration: line-through; }
 
-.action-bar { display: flex; gap: 0.75rem; min-height: 2.5rem; }
+/* ── Dice bars ──────────────────────────────────────────────────────── */
+.dice-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+/* ── Die face (SVG) ─────────────────────────────────────────────────── */
+.die-face rect {
+    fill: #fffff0;
+    stroke: #2a1a00;
+    stroke-width: 2;
+}
+.die-face circle {
+    fill: #1a0a00;
+}
+.die-face.die-used rect {
+    fill: #d8d4c8;
+    stroke: #8a7a60;
+}
+.die-face.die-used circle {
+    fill: #8a7a60;
+}
 
 /* ── Jan panel ──────────────────────────────────────────────────────── */
 .jan-panel {

client_web/src/components/die.rs

@@ -0,0 +1,32 @@
+use leptos::prelude::*;
+
+/// (cx, cy) positions for dots on a 48×48 die face.
+fn dot_positions(value: u8) -> &'static [(&'static str, &'static str)] {
+    match value {
+        1 => &[("24", "24")],
+        2 => &[("35", "13"), ("13", "35")],
+        3 => &[("35", "13"), ("24", "24"), ("13", "35")],
+        4 => &[("13", "13"), ("35", "13"), ("13", "35"), ("35", "35")],
+        5 => &[("13", "13"), ("35", "13"), ("24", "24"), ("13", "35"), ("35", "35")],
+        6 => &[("13", "13"), ("35", "13"), ("13", "24"), ("35", "24"), ("13", "35"), ("35", "35")],
+        _ => &[],
+    }
+}
+
+/// A single die face rendered as SVG.
+/// `value` 1–6 shows dots; 0 shows an empty face (not-yet-rolled).
+/// `used` dims the die.
+#[component]
+pub fn Die(value: u8, used: bool) -> impl IntoView {
+    let cls = if used { "die-face die-used" } else { "die-face" };
+    let dots: Vec<AnyView> = dot_positions(value)
+        .iter()
+        .map(|&(cx, cy)| view! { <circle cx=cx cy=cy r="4.5" /> }.into_any())
+        .collect();
+    view! {
+        <svg class=cls width="48" height="48" viewBox="0 0 48 48">
+            <rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7" />
+            {dots}
+        </svg>
+    }
+}

client_web/src/components/game_screen.rs

@@ -6,6 +6,7 @@ use crate::app::{GameUiState, NetCommand};
 use crate::trictrac::types::{PlayerAction, SerStage, SerTurnStage};
 
 use super::board::Board;
+use super::die::Die;
 use super::score_panel::ScorePanel;
 
 #[allow(dead_code)]
@@ -15,7 +16,11 @@ fn matched_dice_used(staged: &[(u8, u8)], dice: (u8, u8)) -> (bool, bool) {
     let mut d0 = false;
     let mut d1 = false;
     for &(from, to) in staged {
-        let dist = to.saturating_sub(from); // 0 for empty/same-field moves
+        let dist = if from < to {
+            to.saturating_sub(from)
+        } else {
+            from.saturating_sub(to)
+        };
         if !d0 && dist == dice.0 {
             d0 = true;
         } else if !d1 && dist == dice.1 {
@@ -31,19 +36,19 @@ fn matched_dice_used(staged: &[(u8, u8)], dice: (u8, u8)) -> (bool, bool) {
 
 fn jan_label(jan: &Jan) -> &'static str {
     match jan {
-        Jan::FilledQuarter => "Rempli",
+        Jan::FilledQuarter          => "Remplissage",
-        Jan::TrueHitSmallJan => "Atteinte vraie (petit jan)",
+        Jan::TrueHitSmallJan        => "Battage à vrai (petit jan)",
-        Jan::TrueHitBigJan => "Atteinte vraie (grand jan)",
+        Jan::TrueHitBigJan          => "Battage à vrai (grand jan)",
-        Jan::TrueHitOpponentCorner => "Atteinte coin adverse",
+        Jan::TrueHitOpponentCorner  => "Battage coin adverse",
-        Jan::FirstPlayerToExit => "Premier sorti",
+        Jan::FirstPlayerToExit      => "Premier sorti",
-        Jan::SixTables => "Six tables",
+        Jan::SixTables              => "Six tables",
-        Jan::TwoTables => "Deux tables",
+        Jan::TwoTables              => "Deux tables",
-        Jan::Mezeas => "Mezeas",
+        Jan::Mezeas                 => "Mezeas",
-        Jan::FalseHitSmallJan => "Faux (petit jan)",
+        Jan::FalseHitSmallJan       => "Battage à faux (petit jan)",
-        Jan::FalseHitBigJan => "Faux (grand jan)",
+        Jan::FalseHitBigJan         => "Battage à faux (grand jan)",
-        Jan::ContreTwoTables => "Contre deux tables",
+        Jan::ContreTwoTables        => "Contre deux tables",
-        Jan::ContreMezeas => "Contre mezeas",
+        Jan::ContreMezeas           => "Contre mezeas",
-        Jan::HelplessMan => "Homme en route",
+        Jan::HelplessMan            => "Dame impuissante",
     }
 }
 
@@ -53,16 +58,12 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
     let player_id = state.player_id;
     let is_my_turn = vs.active_mp_player == Some(player_id);
     let is_move_stage = is_my_turn
-        && matches!(
+        && matches!(vs.turn_stage, SerTurnStage::Move | SerTurnStage::HoldOrGoChoice);
-            vs.turn_stage,
-            SerTurnStage::Move | SerTurnStage::HoldOrGoChoice
-        );
 
     // ── Staged move state ──────────────────────────────────────────────────────
     let selected_origin: RwSignal<Option<u8>> = RwSignal::new(None);
     let staged_moves: RwSignal<Vec<(u8, u8)>> = RwSignal::new(Vec::new());
 
-    // When both move slots are filled, send the action to the backend.
     let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
         .expect("UnboundedSender<NetCommand> not found in context");
     let cmd_tx_effect = cmd_tx.clone();
@@ -85,35 +86,41 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
 
     // ── Status text ────────────────────────────────────────────────────────────
     let status = match &vs.stage {
-        SerStage::Ended => "Game over".to_string(),
+        SerStage::Ended   => "Game over".to_string(),
         SerStage::PreGame => "Waiting for opponent…".to_string(),
-        SerStage::InGame => match (is_my_turn, &vs.turn_stage) {
+        SerStage::InGame  => match (is_my_turn, &vs.turn_stage) {
-            (true, SerTurnStage::RollDice) => "Your turn — roll the dice".to_string(),
+            (true, SerTurnStage::RollDice)      => "Your turn — roll the dice".to_string(),
             (true, SerTurnStage::HoldOrGoChoice) => "Hold or Go?".to_string(),
-            (true, SerTurnStage::Move) => "Select move 1 of 2".to_string(),
+            (true, SerTurnStage::Move)           => "Select move 1 of 2".to_string(),
-            (true, _) => "Your turn".to_string(),
+            (true, _)                            => "Your turn".to_string(),
-            (false, _) => "Opponent's turn".to_string(),
+            (false, _)                           => "Opponent's turn".to_string(),
         },
     };
 
     let dice = vs.dice;
+    let show_dice = dice != (0, 0);
 
-    // ── Action bar buttons ─────────────────────────────────────────────────────
+    // ── Button senders ─────────────────────────────────────────────────────────
-    let cmd_tx2 = cmd_tx.clone();
+    let cmd_tx_roll = cmd_tx.clone();
+    let cmd_tx_go   = cmd_tx.clone();
     let cmd_tx_quit = cmd_tx.clone();
-    let show_roll = is_my_turn && vs.turn_stage == SerTurnStage::RollDice;
+    let show_roll     = is_my_turn && vs.turn_stage == SerTurnStage::RollDice;
-    let show_hold_go = is_my_turn && vs.turn_stage == SerTurnStage::HoldOrGoChoice;
+    let show_hold_go  = is_my_turn && vs.turn_stage == SerTurnStage::HoldOrGoChoice;
 
     view! {
         <div class="game-container">
+            // ── Top bar ──────────────────────────────────────────────────────
             <div class="top-bar">
-                <span>{state.room_id}</span>
+                <span>Room: {state.room_id}</span>
                 <a class="quit-link" href="#" on:click=move |e| {
                     e.prevent_default();
                     cmd_tx_quit.unbounded_send(NetCommand::Disconnect).ok();
                 }>"Quit"</a>
             </div>
+
             <ScorePanel scores=vs.scores.clone() player_id=player_id />
+
+            // ── Status ───────────────────────────────────────────────────────
             <div class="status-bar">
                 <span>{move || {
                     if is_move_stage {
@@ -123,57 +130,21 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                         status.clone()
                     }
                 }}</span>
-                {(dice != (0, 0)).then(|| view! {
-                    <span class="dice-label">"Dice: "</span>
-                    <span class={move || {
-                        let (d0, _) = if is_move_stage {
-                            matched_dice_used(&staged_moves.get(), dice)
-                        } else {
-                            (!is_my_turn || !is_move_stage, !is_my_turn || !is_move_stage)
-                        };
-                        if d0 { "dice dice-used" } else { "dice" }
-                    }}>{dice.0}</span>
-                    <span class="dice-sep">" & "</span>
-                    <span class={move || {
-                        let (_, d1) = if is_move_stage {
-                            matched_dice_used(&staged_moves.get(), dice)
-                        } else {
-                            (!is_my_turn || !is_move_stage, !is_my_turn || !is_move_stage)
-                        };
-                        if d1 { "dice dice-used" } else { "dice" }
-                    }}>{dice.1}</span>
-                })}
-            </div>
-            <div class="action-bar">
-                {show_roll.then(|| view! {
-                    <button class="btn btn-primary" on:click=move |_| {
-                        cmd_tx.unbounded_send(NetCommand::Action(PlayerAction::Roll)).ok();
-                    }>"Roll dice"</button>
-                })}
-                {show_hold_go.then(|| view! {
-                    <button class="btn btn-primary" on:click=move |_| {
-                        cmd_tx2.unbounded_send(NetCommand::Action(PlayerAction::Go)).ok();
-                    }>"Go"</button>
-                })}
-                {is_move_stage.then(|| view! {
-                    <button
-                        class="btn btn-secondary"
-                        disabled=move || 2 <= staged_moves.get().len()
-                        on:click=move |_| {
-                            selected_origin.set(None);
-                            staged_moves.update(|v| v.push((0, 0)));
-                        }
-                    >"Empty move"</button>
-                })}
             </div>
+
+            // ── Opponent dice (top) ──────────────────────────────────────────
+            {(!is_my_turn && show_dice).then(|| view! {
+                <div class="dice-bar dice-bar-opponent">
+                    <Die value=dice.0 used=true />
+                    <Die value=dice.1 used=true />
+                </div>
+            })}
+
+            // ── Jan panel ────────────────────────────────────────────────────
             {(!vs.dice_jans.is_empty()).then(|| {
                 let rows: Vec<_> = vs.dice_jans.iter().map(|(jan, pts)| {
                     let label = jan_label(jan);
-                    let pts_str = if *pts >= 0 {
+                    let pts_str = if *pts >= 0 { format!("+{}", pts) } else { format!("{}", pts) };
-                        format!("+{}", pts)
-                    } else {
-                        format!("{}", pts)
-                    };
                     let row_class = if *pts >= 0 { "jan-row jan-positive" } else { "jan-row jan-negative" };
                     view! {
                         <div class=row_class>
@@ -184,12 +155,55 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                 }).collect();
                 view! { <div class="jan-panel">{rows}</div> }
             })}
+
+            // ── Board ────────────────────────────────────────────────────────
             <Board
                 view_state=vs
                 player_id=player_id
                 selected_origin=selected_origin
                 staged_moves=staged_moves
             />
+
+            // ── Player action bar (bottom) ───────────────────────────────────
+            {is_my_turn.then(|| view! {
+                <div class="dice-bar dice-bar-player">
+                    // Dice (reactive greying as moves are staged)
+                    {move || {
+                        let (d0, d1) = if is_move_stage {
+                            matched_dice_used(&staged_moves.get(), dice)
+                        } else {
+                            (false, false)
+                        };
+                        view! {
+                            <Die value=dice.0 used=d0 />
+                            <Die value=dice.1 used=d1 />
+                        }
+                    }}
+                    // Roll button (shown next to the dice during RollDice stage)
+                    {show_roll.then(|| view! {
+                        <button class="btn btn-primary" on:click=move |_| {
+                            cmd_tx_roll.unbounded_send(NetCommand::Action(PlayerAction::Roll)).ok();
+                        }>"Roll dice"</button>
+                    })}
+                    // Go button (HoldOrGoChoice)
+                    {show_hold_go.then(|| view! {
+                        <button class="btn btn-primary" on:click=move |_| {
+                            cmd_tx_go.unbounded_send(NetCommand::Action(PlayerAction::Go)).ok();
+                        }>"Go"</button>
+                    })}
+                    // Empty move button
+                    {is_move_stage.then(|| view! {
+                        <button
+                            class="btn btn-secondary"
+                            disabled=move || 2 <= staged_moves.get().len()
+                            on:click=move |_| {
+                                selected_origin.set(None);
+                                staged_moves.update(|v| v.push((0, 0)));
+                            }
+                        >"Empty move"</button>
+                    })}
+                </div>
+            })}
         </div>
     }
 }

client_web/src/components/mod.rs

@@ -1,9 +1,12 @@
 mod board;
 mod connecting_screen;
+mod die;
 mod game_screen;
 mod login_screen;
 mod score_panel;
 
+pub use die::Die;
+
 pub use connecting_screen::ConnectingScreen;
 pub use game_screen::GameScreen;
 pub use login_screen::LoginScreen;