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

update ui

Browse source
This commit is contained in:
Henri Bourcereau 2026-04-26 21:13:52 +02:00
parent c69891605e
commit 5b00154b50
2 changed files with 42 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -257,10 +257,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
</button>
})}
{move || auth_username.get().map(|u| view! {
<span class="playing-as">"▶ " <strong>{u}</strong></span>
})}
<a class="quit-link" href="#" on:click=move |e| {
e.prevent_default();
cmd_tx_quit.unbounded_send(NetCommand::Disconnect).ok();
@ -281,10 +277,39 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
</div>
})}
// ── Opponent score (above board) ─────────────────────────────────
// ── Opponent score ─────────────────────────────────
<PlayerScorePanel score=opp_score is_you=false />
// ── Player score ────────────────────────────────────
<PlayerScorePanel score=my_score is_you=true />
// ── Status bar — full width, above board (§10b) ──────────────────
// ── 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>
// ── Status bar — full width ──────────────────
<div class="game-status">
{move || {
if let Some(ref reason) = pause_reason {
@ -325,33 +350,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! {
@ -396,9 +394,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
}}
</div>
// ── Player score (below board) ────────────────────────────────────
<PlayerScorePanel score=my_score is_you=true />
// ── Pre-game ceremony overlay ─────────────────────────────────────
{is_ceremony.then(|| {
let pgr = pre_game_roll_data.unwrap_or(PreGameRollState {

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

@ -1,8 +1,8 @@
use leptos::prelude::*;
use trictrac_store::Jan;
use crate::i18n::*;
use crate::game::trictrac::types::PlayerScore;
use crate::i18n::*;
pub fn jan_label(jan: &Jan) -> String {
let i18n = use_i18n();
@ -35,7 +35,11 @@ pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
// 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" };
let cls = if i <= holes {
"peg-hole filled"
} else {
"peg-hole"
};
view! { <div class=cls></div> }.into_any()
})
.collect();
@ -49,6 +53,11 @@ pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
</span>
</div>
<div class="score-bars">
<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>
<div class="score-bar-row">
<span class="score-bar-label">{t!(i18n, points_label)}</span>
<div class="score-bar">
@ -59,11 +68,6 @@ pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
<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>
</div>
</div>
}