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

refact(layout): score bars next to board

Browse source
This commit is contained in:
Henri Bourcereau 2026-04-13 21:08:45 +02:00
parent 0b65bdbf88
commit b4dc86eecb
2 changed files with 16 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client_web/src/components/game_screen.rs
View file

@ -236,9 +236,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
}>{t!(i18n, quit)}</a> }>{t!(i18n, quit)}</a>
</div> </div>
// ── Opponent score (above board) ─────────────────────────────────
<PlayerScorePanel score=opp_score is_you=false />
// ── Status bar — full width, above board (§10b) ────────────────── // ── Status bar — full width, above board (§10b) ──────────────────
<div class="game-status"> <div class="game-status">
{move || { {move || {
@ -279,6 +276,9 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
(!hint.is_empty()).then(|| view! { <p class="game-sub-prompt">{hint}</p> }) (!hint.is_empty()).then(|| view! { <p class="game-sub-prompt">{hint}</p> })
}} }}
// ── Opponent score (above board) ─────────────────────────────────
<PlayerScorePanel score=opp_score is_you=false />
// ── Board + side panel ─────────────────────────────────────────── // ── Board + side panel ───────────────────────────────────────────
<div class="board-and-panel"> <div class="board-and-panel">
<Board <Board
@ -306,7 +306,10 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
</div> </div>
</div> </div>
// ── Action buttons below board (§10c) ──────────────────────────── // ── Player score (below board) ────────────────────────────────────
<PlayerScorePanel score=my_score is_you=true />
// ── Action buttons below board ────────────────────────────
<div class="board-actions"> <div class="board-actions">
{waiting_for_confirm.then(|| view! { {waiting_for_confirm.then(|| view! {
<button class="btn btn-primary" on:click=move |_| { <button class="btn btn-primary" on:click=move |_| {
@ -350,8 +353,7 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
}} }}
</div> </div>
// ── Player score (below board) ────────────────────────────────────
<PlayerScorePanel score=my_score is_you=true />
<div> <div>
{format!("{message}")} {format!("{message}")}
</div> </div>

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

@ -35,7 +35,11 @@ pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
// 12 peg holes; filled up to `holes` // 12 peg holes; filled up to `holes`
let pegs: Vec<AnyView> = (1u8..=12) let pegs: Vec<AnyView> = (1u8..=12)
.map(|i| { .map(|i| {
let cls = if i <= holes { "peg-hole filled" } else { "peg-hole" }; let cls = if i <= holes {
"peg-hole filled"
} else {
"peg-hole"
};
view! { <div class=cls></div> }.into_any() view! { <div class=cls></div> }.into_any()
}) })
.collect(); .collect();
@ -50,14 +54,14 @@ pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
</div> </div>
<div class="score-bars"> <div class="score-bars">
<div class="score-bar-row"> <div class="score-bar-row">
{can_bredouille.then(|| view! {
<span class="bredouille-badge" title=move || t_string!(i18n, bredouille_title).to_owned()>"B"</span>
})}
<span class="score-bar-label">{t!(i18n, points_label)}</span> <span class="score-bar-label">{t!(i18n, points_label)}</span>
<div class="score-bar"> <div class="score-bar">
<div class="score-bar-fill score-bar-points" style=format!("width:{points_pct}")></div> <div class="score-bar-fill score-bar-points" style=format!("width:{points_pct}")></div>
</div> </div>
<span class="score-bar-value">{points_val}</span> <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>
<div class="score-bar-row"> <div class="score-bar-row">
<span class="score-bar-label">{t!(i18n, holes_label)}</span> <span class="score-bar-label">{t!(i18n, holes_label)}</span>