update ui

clients/web/src/game/components/game_screen.rs

@@ -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 {

clients/web/src/game/components/score_panel.rs

@@ -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>
     }