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

feat(client_web): update UI/UX

Browse source
This commit is contained in:
Henri Bourcereau 2026-04-09 15:33:47 +02:00
parent 1a24e7c960
commit cdadb26f14
9 changed files with 1127 additions and 431 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client_web/src/components/score_panel.rs
View file

@ -28,11 +28,18 @@ pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
let i18n = use_i18n();
let points_pct = format!("{}%", (score.points as u32 * 100 / 12).min(100));
let holes_pct = format!("{}%", (score.holes as u32 * 100 / 12).min(100));
let points_val = format!("{}/12", score.points);
let holes_val = format!("{}/12", score.holes);
let holes = score.holes;
let can_bredouille = score.can_bredouille;
// 12 peg holes; filled up to `holes`
let 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()
})
.collect();
view! {
<div class="player-score-panel">
<div class="player-score-header">
@ -54,10 +61,8 @@ pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
</div>
<div class="score-bar-row">
<span class="score-bar-label">{t!(i18n, holes_label)}</span>
<div class="score-bar">
<div class="score-bar-fill score-bar-holes" style=format!("width:{holes_pct}")></div>
</div>
<span class="score-bar-value">{holes_val}</span>
<div class="peg-track">{pegs}</div>
<span class="score-bar-value">{format!("{holes}/12")}</span>
</div>
</div>
</div>