From b4dc86eecb63c96db8d8d20527450002321ae444 Mon Sep 17 00:00:00 2001
From: Henri Bourcereau <henri.bourcereau@gmail.com>
Date: Mon, 13 Apr 2026 21:08:45 +0200
Subject: [PATCH] refact(layout): score bars next to board

---
 client_web/src/components/game_screen.rs | 14 ++++++++------
 client_web/src/components/score_panel.rs | 12 ++++++++----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/client_web/src/components/game_screen.rs b/client_web/src/components/game_screen.rs
index 8bf9a5b..6108d95 100644
--- a/client_web/src/components/game_screen.rs
+++ b/client_web/src/components/game_screen.rs
@@ -236,9 +236,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                 }>{t!(i18n, quit)}</a>
             </div>
 
-            // ── Opponent score (above board) ─────────────────────────────────
-            <PlayerScorePanel score=opp_score is_you=false />
-
             // ── Status bar — full width, above board (§10b) ──────────────────
             <div class="game-status">
                 {move || {
@@ -279,6 +276,9 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                 (!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 ───────────────────────────────────────────
             <div class="board-and-panel">
                 <Board
@@ -306,7 +306,10 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                 </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">
                 {waiting_for_confirm.then(|| view! {
                     <button class="btn btn-primary" on:click=move |_| {
@@ -350,8 +353,7 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                 }}
             </div>
 
-            // ── Player score (below board) ────────────────────────────────────
-            <PlayerScorePanel score=my_score is_you=true />
+
                     <div>
             {format!("{message}")}
                     </div>
diff --git a/client_web/src/components/score_panel.rs b/client_web/src/components/score_panel.rs
index ab97a39..062951b 100644
--- a/client_web/src/components/score_panel.rs
+++ b/client_web/src/components/score_panel.rs
@@ -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();
@@ -50,14 +54,14 @@ pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
             </div>
             <div class="score-bars">
                 <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>
                     <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>