henri/trictrac
1
1
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

feat(ui): merge score panels, move message below board

Browse source
This commit is contained in:
Henri Bourcereau 2026-04-29 21:52:47 +02:00
parent c69891605e
commit d3455def33
5 changed files with 555 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

220
clients/web/assets/style.css
View file

@ -763,6 +763,202 @@ a:hover { text-decoration: underline; }
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* ── Merged scoreboard (both players, above board) ──────────────────── */
.merged-score-panel {
background: var(--ui-parchment);
border-radius: 5px;
padding: 0.5rem 1.25rem 0.45rem;
font-size: 0.88rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
width: 100%;
border-top: 2px solid var(--ui-gold-dark);
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.score-row {
display: flex;
align-items: center;
gap: 1rem;
}
.score-row-name {
min-width: 120px;
flex-shrink: 0;
display: flex;
align-items: baseline;
gap: 0.35rem;
overflow: hidden;
}
.you-tag {
font-family: var(--font-ui);
font-size: 0.7rem;
color: #887766;
font-style: italic;
white-space: nowrap;
flex-shrink: 0;
}
/* ── Jackpot points counter ─────────────────────────────────────────── */
.pts-counter-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 72px;
flex-shrink: 0;
padding-bottom: 4px;
}
.pts-ghost-bar-track {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(0,0,0,0.07);
border-radius: 2px;
overflow: hidden;
}
.pts-ghost-bar-fill {
height: 100%;
background: rgba(58,107,42,0.45);
border-radius: 2px;
}
.pts-ghost-bar-opp {
background: rgba(122,30,42,0.4);
}
.pts-counter-row {
display: flex;
align-items: baseline;
gap: 0.1rem;
}
.pts-counter {
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 600;
color: var(--ui-ink);
line-height: 1;
font-variant-numeric: tabular-nums;
min-width: 1.4em;
text-align: right;
}
.pts-max {
font-family: var(--font-ui);
font-size: 0.7rem;
color: #998877;
line-height: 1;
padding-bottom: 2px;
}
/* ── Hole pegs — larger and coloured (me = green, opp = red) ─────────── */
.merged-score-panel .peg-track {
gap: 4px;
}
.merged-score-panel .peg-hole {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.5px solid rgba(138,106,40,0.3);
background: rgba(0,0,0,0.06);
flex-shrink: 0;
transition: background 0.3s ease-out, border-color 0.3s, box-shadow 0.3s;
}
.merged-score-panel .peg-hole.filled {
background: #5aab38;
border-color: #3a7828;
box-shadow: 0 0 5px rgba(90,171,56,0.55);
}
.merged-score-panel .peg-hole.peg-opp.filled {
background: #c05030;
border-color: #8a3018;
box-shadow: 0 0 5px rgba(192,80,48,0.55);
}
/* Peg pop-in animation when a new hole is scored */
@keyframes peg-pop {
0% { transform: scale(0.15); opacity: 0; }
45% { transform: scale(1.55); }
70% { transform: scale(0.88); }
100% { transform: scale(1.0); opacity: 1; }
}
.merged-score-panel .peg-hole.peg-new {
animation: peg-pop 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
/* Thin separator between the two player rows */
.score-row-sep {
height: 1px;
background: rgba(0,0,0,0.07);
margin: 0.05rem 0;
}
/* ── Non-blocking hole flash (replaces old toast) ───────────────────── */
@keyframes hole-flash-in-out {
0% { opacity: 0; transform: translateY(-3px); }
14% { opacity: 1; transform: translateY(0); }
65% { opacity: 1; }
100% { opacity: 0; transform: translateY(2px); }
}
.hole-flash {
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
font-family: var(--font-display);
font-size: 0.88rem;
font-weight: 600;
color: var(--ui-green-accent);
letter-spacing: 0.05em;
animation: hole-flash-in-out 2.5s ease-out forwards;
pointer-events: none;
}
.hole-flash.hole-flash-bredouille {
color: var(--ui-gold-dark);
}
/* ── Game bottom strip — status, hints, buttons on cream ────────────── */
.game-bottom-strip {
background: var(--ui-parchment);
border-radius: 5px;
padding: 0.55rem 1.25rem 0.65rem;
width: 100%;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
border-top: 2px solid var(--ui-gold-dark);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
min-height: 3.2rem;
}
/* Override text colours for the parchment background context */
.game-bottom-strip .game-status {
color: var(--ui-ink);
text-shadow: none;
padding: 0;
font-size: 1.05rem;
width: auto;
}
.game-bottom-strip .game-sub-prompt {
color: #887766;
padding: 0;
width: auto;
}
/* ── Board + side panel ─────────────────────────────────────────────── */
.board-and-panel {
position: relative;
@ -983,6 +1179,30 @@ a:hover { text-decoration: underline; }
cursor: pointer;
}
/* ── Inline scoring panel (in bottom strip, expands downward) ───────── */
@keyframes scoring-expand-in {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.scoring-panel-wrapper.scoring-panel-inline-wrap {
animation: none;
filter: none;
transform: none !important;
pointer-events: auto;
cursor: default;
width: 100%;
}
.scoring-panel-wrapper.scoring-panel-inline-wrap .scoring-panel {
animation: scoring-expand-in 0.28s ease-out;
background: transparent;
box-shadow: none;
border-radius: 0;
border-top: 1px solid rgba(0,0,0,0.07);
padding: 0.4rem 0;
}
.scoring-panel {
background: var(--ui-parchment);
border-radius: 5px;

106
clients/web/src/game/components/game_screen.rs
View file

@ -12,7 +12,7 @@ use crate::i18n::*;
use crate::portal::lobby::{qr_svg, room_url};
use super::board::Board;
use super::score_panel::PlayerScorePanel;
use super::score_panel::MergedScorePanel;
use super::scoring::ScoringPanel;
#[component]
@ -149,10 +149,17 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
// ── Scoring notifications ──────────────────────────────────────────────────
let my_scored_event = state.my_scored_event.clone();
let opp_scored_event = state.opp_scored_event.clone();
let hole_toast_info = my_scored_event
.as_ref()
.filter(|e| e.holes_gained > 0)
.map(|e| (e.holes_total, e.bredouille));
// Values for MergedScorePanel — extracted before events are consumed.
// Don't animate points when a hole was gained (points wrap around 12).
let my_pts_earned: u8 = my_scored_event.as_ref()
.map_or(0, |e| if e.holes_gained == 0 { e.points_earned } else { 0 });
let opp_pts_earned: u8 = opp_scored_event.as_ref()
.map_or(0, |e| if e.holes_gained == 0 { e.points_earned } else { 0 });
let my_holes_gained_score: u8 = my_scored_event.as_ref().map_or(0, |e| e.holes_gained);
let opp_holes_gained_score: u8 = opp_scored_event.as_ref().map_or(0, |e| e.holes_gained);
let my_bredouille_flash: bool = my_scored_event.as_ref()
.map_or(false, |e| e.bredouille && e.holes_gained > 0);
let is_double_dice = dice.0 == dice.1 && dice.0 != 0;
@ -199,12 +206,11 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
if last_moves.is_some() {
crate::game::sound::play_checker_move();
}
// Scoring: hole takes priority over plain points.
// Scoring: hole fanfare plays immediately; per-point ticks are driven by
// MergedScorePanel's counter animation so play_points_scored is not called here.
if let Some(ref ev) = my_scored_event {
if ev.holes_gained > 0 {
crate::game::sound::play_hole_scored();
} else {
crate::game::sound::play_points_scored();
}
}
@ -281,10 +287,34 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
</div>
})}
// ── Opponent score (above board) ─────────────────────────────────
<PlayerScorePanel score=opp_score is_you=false />
// ── Merged scoreboard (both players, above board) ────────────────
<MergedScorePanel
my_score=my_score
opp_score=opp_score
my_points_earned=my_pts_earned
opp_points_earned=opp_pts_earned
my_holes_gained=my_holes_gained_score
opp_holes_gained=opp_holes_gained_score
my_bredouille=my_bredouille_flash
/>
// ── Status bar — full width, above board (§10b) ──────────────────
// ── Board ────────────────────────────────────────────────────────
<Board
view_state=vs
player_id=player_id
selected_origin=selected_origin
staged_moves=staged_moves
valid_sequences=valid_sequences
bar_dice=show_dice.then_some(dice)
bar_is_move=is_move_stage
is_my_turn=is_my_turn
bar_is_double=is_double_dice
last_moves=last_moves
hit_fields=hit_fields
/>
// ── Status, hints, and actions — cream strip below board (§10b/c) ─
<div class="game-bottom-strip">
<div class="game-status">
{move || {
if let Some(ref reason) = pause_reason {
@ -310,8 +340,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
}
}}
</div>
// ── Contextual sub-prompt (§8a) ──────────────────────────────────
{move || {
let hint: String = if waiting_for_confirm {
t_string!(i18n, hint_continue).to_owned()
@ -324,35 +352,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
};
(!hint.is_empty()).then(|| view! { <p class="game-sub-prompt">{hint}</p> })
}}
// ── Board + side panel ───────────────────────────────────────────
<div class="board-and-panel">
<Board
view_state=vs
player_id=player_id
selected_origin=selected_origin
staged_moves=staged_moves
valid_sequences=valid_sequences
bar_dice=show_dice.then_some(dice)
bar_is_move=is_move_stage
is_my_turn=is_my_turn
bar_is_double=is_double_dice
last_moves=last_moves
hit_fields=hit_fields
/>
// ── Side panel (scoring panels only) ─────────────────────────
<div class="side-panel">
{my_scored_event.map(|event| view! {
<ScoringPanel event=event turn_stage=turn_stage_for_panel />
})}
{opp_scored_event.map(|event| view! {
<ScoringPanel event=event turn_stage=SerTurnStage::RollDice is_opponent=true />
})}
</div>
</div>
// ── Action buttons below board (§10c) ────────────────────────────
<div class="board-actions">
{waiting_for_confirm.then(|| view! {
<button class="btn btn-primary" on:click=move |_| {
@ -366,8 +365,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
}>{t!(i18n, go)}</button>
})}
{move || {
// Show the empty-move button only when (0,0) is a valid
// first or second move given what has already been staged.
let staged = staged_moves.get();
let show = is_move_stage && staged.len() < 2 && (
valid_seqs_empty.is_empty() || match staged.len() {
@ -395,9 +392,14 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
})
}}
</div>
// ── Player score (below board) ────────────────────────────────────
<PlayerScorePanel score=my_score is_you=true />
// ── Scoring detail panels — expand downward in the strip ──────
{my_scored_event.map(|event| view! {
<ScoringPanel event=event turn_stage=turn_stage_for_panel inline=true />
})}
{opp_scored_event.map(|event| view! {
<ScoringPanel event=event turn_stage=SerTurnStage::RollDice is_opponent=true inline=true />
})}
</div>
// ── Pre-game ceremony overlay ─────────────────────────────────────
{is_ceremony.then(|| {
@ -483,16 +485,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
}
})}
// ── Hole toast (§6a) — board-centered overlay when a hole is won ──
{hole_toast_info.map(|(holes_total, bredouille)| view! {
<div class="hole-toast" class:hole-toast-bredouille=bredouille>
<div class="hole-toast-title">"Trou !"</div>
<div class="hole-toast-count">{format!("{holes_total} / 12")}</div>
{bredouille.then(|| view! {
<div class="hole-toast-bredouille">"× 2 bredouille"</div>
})}
</div>
})}
</div>
}
}

206
clients/web/src/game/components/score_panel.rs
View file

@ -1,5 +1,11 @@
use leptos::prelude::*;
use trictrac_store::Jan;
#[cfg(target_arch = "wasm32")]
use gloo_timers::future::TimeoutFuture;
#[cfg(target_arch = "wasm32")]
use wasm_bindgen_futures::spawn_local;
#[cfg(target_arch = "wasm32")]
use std::sync::{Arc, atomic::{AtomicBool, Ordering}};
use crate::i18n::*;
use crate::game::trictrac::types::PlayerScore;
@ -23,47 +29,193 @@ 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 PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
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 {
let i18n = use_i18n();
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;
// ── 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<u8> = RwSignal::new(my_pts_start);
// 12 peg holes; filled up to `holes`
let pegs: Vec<AnyView> = (1u8..=12)
#[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<u8> = 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(200).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(200).await;
if !is_alive.load(Ordering::Relaxed) { return; }
opp_displayed_pts.set(p);
}
});
}
}
// ── 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<AnyView> = (1u8..=12)
.map(|i| {
let cls = if i <= holes { "peg-hole filled" } else { "peg-hole" };
view! { <div class=cls></div> }.into_any()
let filled = i <= my_holes;
let is_new = filled && i == my_holes && my_holes_gained > 0;
view! {
<div class="peg-hole"
class:filled=filled
class:peg-new=is_new>
</div>
}.into_any()
})
.collect();
let opp_pegs: Vec<AnyView> = (1u8..=12)
.map(|i| {
let filled = i <= opp_holes;
let is_new = filled && i == opp_holes && opp_holes_gained > 0;
view! {
<div class="player-score-panel">
<div class="player-score-header">
<span class="player-name">
{score.name}
{is_you.then(|| t!(i18n, you_suffix))}
<div class="peg-hole peg-opp"
class:filled=filled
class:peg-new=is_new>
</div>
}.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! {
<div class="merged-score-panel">
// ── My player row ───────────────────────────────────────────
<div class="score-row score-row-me">
<div class="score-row-name">
<span class="player-name">{my_name}</span>
<span class="you-tag">{t!(i18n, you_suffix)}</span>
</div>
<div class="pts-counter-wrap">
<div class="pts-ghost-bar-track">
<div class="pts-ghost-bar-fill" style=my_bar_style></div>
</div>
<div class="pts-counter-row">
<span class="pts-counter">{move || my_displayed_pts.get()}</span>
<span class="pts-max">"/12"</span>
</div>
</div>
<div class="peg-track">{my_pegs}</div>
{my_can_bredouille.then(|| view! {
<span class="bredouille-badge"
title=move || t_string!(i18n, bredouille_title).to_owned()>
"B"
</span>
})}
// 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! {
<div class="hole-flash"
class:hole-flash-bredouille=my_bredouille>
{label}
</div>
<div class="score-bars">
<div class="score-bar-row">
<span class="score-bar-label">{t!(i18n, points_label)}</span>
<div class="score-bar">
<div class="score-bar-fill score-bar-points" style=format!("width:{points_pct}")></div>
</div>
<span class="score-bar-value">{points_val}</span>
{can_bredouille.then(|| view! {
<span class="bredouille-badge" title=move || t_string!(i18n, bredouille_title).to_owned()>"B"</span>
}
})}
</div>
<div class="score-bar-row">
<span class="score-bar-label">{t!(i18n, holes_label)}</span>
<div class="peg-track">{pegs}</div>
<span class="score-bar-value">{format!("{holes}/12")}</span>
<div class="score-row-sep"></div>
// ── Opponent row ────────────────────────────────────────────
<div class="score-row score-row-opp">
<div class="score-row-name">
<span class="player-name">{opp_name}</span>
</div>
<div class="pts-counter-wrap">
<div class="pts-ghost-bar-track">
<div class="pts-ghost-bar-fill pts-ghost-bar-opp" style=opp_bar_style></div>
</div>
<div class="pts-counter-row">
<span class="pts-counter">{move || opp_displayed_pts.get()}</span>
<span class="pts-max">"/12"</span>
</div>
</div>
<div class="peg-track">{opp_pegs}</div>
{opp_can_bredouille.then(|| view! {
<span class="bredouille-badge"
title=move || t_string!(i18n, bredouille_title).to_owned()>
"B"
</span>
})}
</div>
</div>
}

17
clients/web/src/game/components/scoring.rs
View file

@ -53,6 +53,9 @@ pub fn ScoringPanel(
event: ScoredEvent,
turn_stage: SerTurnStage,
#[prop(default = false)] is_opponent: bool,
/// When true the panel renders inline in the bottom strip instead of as
/// a right-side overlay: no slide-in animation, no peek/reveal behaviour.
#[prop(default = false)] inline: bool,
) -> impl IntoView {
let i18n = use_i18n();
let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
@ -120,26 +123,29 @@ pub fn ScoringPanel(
return;
}
hm.set(vec![]);
// Inline panels are always visible; only the overlay variant peeks.
if !inline {
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).
// ── Outer wrapper: overlay mode has slide/peek/reveal animation;
// inline mode suppresses all of that via scoring-panel-inline-wrap.
<div
class="scoring-panel-wrapper"
class:scoring-panel-inline-wrap=inline
class:peeked=move || peeked.get()
class:revealed=move || revealed.get()
// Click toggles revealed↔peeked when the panel is in its peeked state.
on:click=move |_| {
// Inline panels don't have the peek/reveal toggle.
if !inline {
if peeked.get_untracked() {
revealed.update(|r| *r = !*r);
}
// Show arrows when clicking to open, clear when clicking to close.
if let Some(hm) = hovered_ctx {
if !revealed.get_untracked() {
hm.set(all_moves_click.clone());
@ -148,6 +154,7 @@ pub fn ScoringPanel(
}
}
}
}
on:mouseenter=move |_| {
// Show all event moves as arrows while the cursor is inside.
if let Some(hm) = hovered_ctx {

12
clients/web/src/game/sound.rs
View file

@ -146,6 +146,14 @@ mod inner {
});
}
/// Brief high tick for the jackpot-style points counter (one call per increment).
pub fn play_points_tick() {
with_ctx(|ctx| {
play_tone(ctx, 880.0, 0.18, 0.055, 0.000, OscillatorType::Sine);
play_tone(ctx, 1320.0, 0.07, 0.035, 0.000, OscillatorType::Sine);
});
}
/// Triumphant four-note fanfare (C5 – E5 – G5 – C6).
pub fn play_hole_scored() {
with_ctx(|ctx| {
@ -167,7 +175,7 @@ mod inner {
#[cfg(target_arch = "wasm32")]
pub use inner::{
play_checker_move, play_dice_roll, play_dice_roll_cinematic, play_hole_scored,
play_points_scored,
play_points_scored, play_points_tick,
};
#[cfg(not(target_arch = "wasm32"))]
@ -179,4 +187,6 @@ pub fn play_dice_roll_cinematic() {}
#[cfg(not(target_arch = "wasm32"))]
pub fn play_points_scored() {}
#[cfg(not(target_arch = "wasm32"))]
pub fn play_points_tick() {}
#[cfg(not(target_arch = "wasm32"))]
pub fn play_hole_scored() {}