+ }
+}
+
+#[component]
+pub fn ScoringPanel(
+ event: ScoredEvent,
+ turn_stage: SerTurnStage,
+ #[prop(default = false)] is_opponent: bool,
+) -> impl IntoView {
+ let i18n = use_i18n();
+ let cmd_tx = use_context::>()
+ .expect("UnboundedSender not found in context");
+
+ let points_earned = event.points_earned;
+ let holes_gained = event.holes_gained;
+ let holes_total = event.holes_total;
+ let bredouille = event.bredouille;
+ let show_hold_go = !is_opponent && turn_stage == SerTurnStage::HoldOrGoChoice;
+ let panel_class = if is_opponent {
+ "scoring-panel scoring-panel-opp"
+ } else {
+ "scoring-panel"
+ };
+
+ // ── Lifecycle signals ──────────────────────────────────────────────────
+ // peeked: added after 3.4 s (slide to peek strip)
+ // revealed: added on first hover of the peek strip (stay open permanently)
+ let peeked = RwSignal::new(false);
+ let revealed = RwSignal::new(false);
+
+ // ── Collect all moves from all jans for automatic arrow display ────────
+ let all_moves: Vec<(CheckerMove, CheckerMove)> = event
+ .jans
+ .iter()
+ .flat_map(|e| e.moves.iter().cloned())
+ .collect();
+ let all_moves_click = all_moves.clone();
+ let all_moves_enter = all_moves.clone();
+
+ let hovered_ctx = use_context::>>();
+
+ // On mount: show all this event's moves as board arrows immediately,
+ // then after 3.4 s slide to peek and clear the arrows.
+ //
+ // Two important constraints:
+ // 1. The initial hm.set() must be deferred (spawn_local, not sync in body)
+ // to avoid writing a reactive signal mid-render while Board reads it —
+ // that triggers Leptos's cycle guard → `unreachable` WASM panic.
+ // 2. The cancellation flag must be Rc>, NOT RwSignal.
+ // RwSignal is a NodeId into Leptos's arena; the arena slot is freed
+ // when ScoringPanel's owner drops (on every GameScreen remount). If the
+ // 3.4 s future outlives the component and calls is_alive.get_untracked()
+ // on a freed slot, that also panics with `unreachable`. Rc>
+ // is reference-counted outside the arena and stays valid for as long as
+ // the future holds onto it.
+ #[cfg(target_arch = "wasm32")]
+ if let Some(hm) = hovered_ctx {
+ let is_alive = Arc::new(AtomicBool::new(true));
+ let is_alive_cleanup = is_alive.clone();
+ // on_cleanup requires Send + Sync; Arc satisfies both.
+ on_cleanup(move || is_alive_cleanup.store(false, Ordering::Relaxed));
+
+ spawn_local(async move {
+ // Show arrows (runs in the next microtask, after render settles).
+ hm.set(all_moves);
+
+ TimeoutFuture::new(3_400).await;
+ // Guard: component may have been destroyed while we were waiting.
+ // is_alive was set to false by on_cleanup, which runs before Leptos
+ // frees the signal arena slots — so peeked is still valid iff this
+ // returns true.
+ if !is_alive.load(Ordering::Relaxed) {
+ return;
+ }
+ hm.set(vec![]);
+ peeked.set(true);
+ });
+ }
+
+ let jan_rows: Vec<_> = event.jans.into_iter().map(scoring_jan_row).collect();
+
+ view! {
+ // ── Outer wrapper: owns the slide / peek / reveal animation ───────
+ // pointer-events are on by default (parent .side-panel sets none,
+ // and .scoring-panel-wrapper overrides back to auto in CSS).
+
+
+
+ {move || if is_opponent {
+ t_string!(i18n, opp_scored_pts, n = points_earned)
+ } else {
+ t_string!(i18n, scored_pts, n = points_earned)
+ }}
+
})}
- // ── Merged scoreboard + scoring panels ─────────────
- // score-area is position:relative so the scoring-panels-container
- // can be absolute-positioned at the right of the hole counter.
-
-
+ // ── Player score ────────────────────────────────────
+
+
+ // ── Board + side panel ───────────────────────────────────────────
+
+
- // Scoring detail panels — stacked at the right, overlapping if needed.
-
}
}
diff --git a/clients/web/src/game/components/score_panel.rs b/clients/web/src/game/components/score_panel.rs
index bd531f3..914c8c0 100644
--- a/clients/web/src/game/components/score_panel.rs
+++ b/clients/web/src/game/components/score_panel.rs
@@ -1,14 +1,5 @@
-#[cfg(target_arch = "wasm32")]
-use gloo_timers::future::TimeoutFuture;
use leptos::prelude::*;
-#[cfg(target_arch = "wasm32")]
-use std::sync::{
- atomic::{AtomicBool, Ordering},
- Arc,
-};
use trictrac_store::Jan;
-#[cfg(target_arch = "wasm32")]
-use wasm_bindgen_futures::spawn_local;
use crate::game::trictrac::types::PlayerScore;
use crate::i18n::*;
@@ -32,203 +23,51 @@ pub fn jan_label(jan: &Jan) -> String {
}
}
-/// Merged scoreboard showing both players above the board.
-///
-/// - Two stacked rows for a clear race-to-12 visual comparison.
-/// - Points shown as an animated jackpot counter (ticks up on each new point).
-/// - Hole pegs are larger and use green (me) / red (opponent) instead of gold.
-/// - When a hole is gained, the new peg pops in and a brief non-blocking label
-/// appears instead of the old blocking toast popup.
#[component]
-pub fn MergedScorePanel(
- my_score: PlayerScore,
- opp_score: PlayerScore,
- /// Points just earned this turn; 0 = no animation. Set to 0 when a hole
- /// was gained (points wrap around 12, counter stays at end value).
- #[prop(default = 0)]
- my_points_earned: u8,
- #[prop(default = 0)] opp_points_earned: u8,
- /// Non-zero when a new hole was just scored (triggers peg-pop animation).
- #[prop(default = 0)]
- my_holes_gained: u8,
- #[prop(default = 0)] opp_holes_gained: u8,
- /// True when my hole was scored under bredouille (shows ×2 in the flash).
- #[prop(default = false)]
- my_bredouille: bool,
-) -> impl IntoView {
+pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
let i18n = use_i18n();
- // ── Points counter signals ──────────────────────────────────────────────
- // When no hole was gained: start from (current - earned) and tick up.
- // When a hole was gained: points wrapped around 12, so skip the animation.
- // On non-WASM there is no animation; start directly at the final value.
- // Suppress the unused-variable warning for animation-only params.
- #[cfg(not(target_arch = "wasm32"))]
- let _ = (my_points_earned, opp_points_earned);
- #[cfg(not(target_arch = "wasm32"))]
- let my_pts_start = my_score.points;
- #[cfg(target_arch = "wasm32")]
- let my_pts_start = if my_holes_gained == 0 {
- my_score.points.saturating_sub(my_points_earned)
- } else {
- my_score.points
- };
- let my_displayed_pts: RwSignal = RwSignal::new(my_pts_start);
+ let points_pct = format!("{}%", (score.points as u32 * 100 / 12).min(100));
+ let points_val = format!("{}/12", score.points);
+ let holes = score.holes;
+ let can_bredouille = score.can_bredouille;
- #[cfg(not(target_arch = "wasm32"))]
- let opp_pts_start = opp_score.points;
- #[cfg(target_arch = "wasm32")]
- let opp_pts_start = if opp_holes_gained == 0 {
- opp_score.points.saturating_sub(opp_points_earned)
- } else {
- opp_score.points
- };
- let opp_displayed_pts: RwSignal = RwSignal::new(opp_pts_start);
-
- // ── Jackpot counter animation (WASM only) ───────────────────────────────
- #[cfg(target_arch = "wasm32")]
- {
- let my_pts_end = my_score.points;
- if my_pts_start < my_pts_end {
- let is_alive = Arc::new(AtomicBool::new(true));
- let alive_c = is_alive.clone();
- on_cleanup(move || alive_c.store(false, Ordering::Relaxed));
- spawn_local(async move {
- for p in (my_pts_start + 1)..=my_pts_end {
- TimeoutFuture::new(100).await;
- if !is_alive.load(Ordering::Relaxed) {
- return;
- }
- my_displayed_pts.set(p);
- crate::game::sound::play_points_tick();
- }
- });
- }
- let opp_pts_end = opp_score.points;
- if opp_pts_start < opp_pts_end {
- let is_alive = Arc::new(AtomicBool::new(true));
- let alive_c = is_alive.clone();
- on_cleanup(move || alive_c.store(false, Ordering::Relaxed));
- spawn_local(async move {
- for p in (opp_pts_start + 1)..=opp_pts_end {
- TimeoutFuture::new(100).await;
- if !is_alive.load(Ordering::Relaxed) {
- return;
- }
- opp_displayed_pts.set(p);
- crate::game::sound::play_opp_points_tick();
- }
- });
- }
- }
-
- // ── Ghost bar widths (show the end value immediately — static reference) ─
- let my_bar_style = format!("width:{}%", (my_score.points as u32 * 100 / 12).min(100));
- let opp_bar_style = format!("width:{}%", (opp_score.points as u32 * 100 / 12).min(100));
-
- // ── Hole peg tracks ─────────────────────────────────────────────────────
- let my_holes = my_score.holes;
- let opp_holes = opp_score.holes;
-
- let my_pegs: Vec = (1u8..=12)
+ // 12 peg holes; filled up to `holes`
+ let pegs: Vec = (1u8..=12)
.map(|i| {
- let filled = i <= my_holes;
- let is_new = filled && i == my_holes && my_holes_gained > 0;
- view! {
-
-
- }
- .into_any()
+ let cls = if i <= holes {
+ "peg-hole filled"
+ } else {
+ "peg-hole"
+ };
+ view! { }.into_any()
})
.collect();
- let opp_pegs: Vec = (1u8..=12)
- .map(|i| {
- let filled = i <= opp_holes;
- let is_new = filled && i == opp_holes && opp_holes_gained > 0;
- view! {
-
-
- }
- .into_any()
- })
- .collect();
-
- let my_name = my_score.name.clone();
- let opp_name = opp_score.name.clone();
- let my_can_bredouille = my_score.can_bredouille;
- let opp_can_bredouille = opp_score.can_bredouille;
-
view! {
-
-
- // ── My player row ───────────────────────────────────────────
-
-
- {my_name}
- {t!(i18n, you_suffix)}
-
-
-
-
-
-
- {move || my_displayed_pts.get()}
- "/12"
-
-
-
{my_pegs}
- {my_can_bredouille.then(|| view! {
-
- "B"
-
- })}
- // Flash sits in the free space to the right of the pegs.
- // margin-left:auto keeps it right-aligned inside the flex row
- // without adding a new row, so the board never shifts down.
- {(my_holes_gained > 0).then(|| {
- let label = if my_bredouille {
- format!("Trou {} · ×2 bredouille", my_holes)
- } else {
- format!("Trou {}", my_holes)
- };
- view! {
-
}
diff --git a/clients/web/src/game/components/scoring.rs b/clients/web/src/game/components/scoring.rs
index a3f939b..d1966be 100644
--- a/clients/web/src/game/components/scoring.rs
+++ b/clients/web/src/game/components/scoring.rs
@@ -2,18 +2,15 @@ use futures::channel::mpsc::UnboundedSender;
#[cfg(target_arch = "wasm32")]
use gloo_timers::future::TimeoutFuture;
use leptos::prelude::*;
-#[cfg(target_arch = "wasm32")]
-use std::sync::{
- atomic::{AtomicBool, Ordering},
- Arc,
-};
use trictrac_store::CheckerMove;
#[cfg(target_arch = "wasm32")]
use wasm_bindgen_futures::spawn_local;
+#[cfg(target_arch = "wasm32")]
+use std::sync::{Arc, atomic::{AtomicBool, Ordering}};
use crate::app::NetCommand;
-use crate::game::trictrac::types::{JanEntry, PlayerAction, ScoredEvent, SerTurnStage};
use crate::i18n::*;
+use crate::game::trictrac::types::{JanEntry, PlayerAction, ScoredEvent, SerTurnStage};
use super::score_panel::jan_label;
@@ -51,14 +48,6 @@ fn scoring_jan_row(entry: JanEntry) -> impl IntoView {
}
}
-/// Scoring detail panel, shown to the right of the hole counter in the merged
-/// score panel area.
-///
-/// Lifecycle:
-/// 1. Mounts expanded — shows all jan details and draws board arrows.
-/// 2. After 3.4 s the arrows clear and the panel auto-minimises to a small "+"
-/// button (unless Hold/Go buttons are still needed).
-/// 3. The "+" / "−" buttons let the player toggle between states at any time.
#[component]
pub fn ScoringPanel(
event: ScoredEvent,
@@ -80,21 +69,22 @@ pub fn ScoringPanel(
"scoring-panel"
};
- // minimized: starts false (expanded)
- let minimized = RwSignal::new(false);
+ // ── Lifecycle signals ──────────────────────────────────────────────────
+ // peeked: added after 3.4 s (slide to peek strip)
+ // revealed: added on first hover of the peek strip (stay open permanently)
+ let peeked = RwSignal::new(false);
+ let revealed = RwSignal::new(false);
- // Collect all moves from all jans for automatic arrow display.
+ // ── Collect all moves from all jans for automatic arrow display ────────
let all_moves: Vec<(CheckerMove, CheckerMove)> = event
.jans
.iter()
.flat_map(|e| e.moves.iter().cloned())
.collect();
- let all_moves_auto = all_moves.clone();
- let all_moves_expand = all_moves.clone();
- let all_moves_enter = all_moves.clone();
+ let all_moves_click = all_moves.clone();
+ let all_moves_enter = all_moves.clone();
let hovered_ctx = use_context::>>();
- let jan_rows: Vec<_> = event.jans.into_iter().map(scoring_jan_row).collect();
// On mount: show all this event's moves as board arrows immediately,
// then after 3.4 s slide to peek and clear the arrows.
@@ -130,14 +120,36 @@ pub fn ScoringPanel(
return;
}
hm.set(vec![]);
+ peeked.set(true);
});
}
+ let jan_rows: Vec<_> = event.jans.into_iter().map(scoring_jan_row).collect();
+
view! {
+ // ── Outer wrapper: owns the slide / peek / reveal animation ───────
+ // pointer-events are on by default (parent .side-panel sets none,
+ // and .scoring-panel-wrapper overrides back to auto in CSS).
- // "+" expand button — shown only when minimised (CSS hides it otherwise).
-
-
- // Full panel — hidden when minimised via CSS.
-
-
- {move || if is_opponent {
- t_string!(i18n, opp_scored_pts, n = points_earned)
- } else {
- t_string!(i18n, scored_pts, n = points_earned)
- }}
-
-
+
+ {move || if is_opponent {
+ t_string!(i18n, opp_scored_pts, n = points_earned)
+ } else {
+ t_string!(i18n, scored_pts, n = points_earned)
+ }}
// Hidden "join by code" fallback
@@ -244,7 +175,8 @@ fn IdleCard(
{t!(i18n, join_code_label)}
{move || {
- let cmd = cmd_join.clone();
+ // Clone the sender on each reactive run to keep the outer closure FnMut
+ let cmd = cmd_tx_join.clone();
join_open.get().then(|| view! {