feat(client_web): add right panel for status messages and dice

client_web/assets/style.css

@@ -54,7 +54,6 @@ input[type="text"] {
     align-items: center;
     gap: 0.75rem;
     width: 100%;
-    max-width: 900px;
 }
 
 /* ── Language switcher ──────────────────────────────────────────────── */
@@ -108,7 +107,6 @@ input[type="text"] {
     font-size: 0.9rem;
     box-shadow: 0 1px 4px rgba(0,0,0,0.2);
     width: 100%;
-    max-width: 900px;
 }
 
 .player-score-header {
@@ -180,6 +178,28 @@ input[type="text"] {
     padding-top: 0.25rem;
 }
 
+/* ── Board + side panel ─────────────────────────────────────────────── */
+.board-and-panel {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.side-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-width: 160px;
+    padding-top: 0.25rem;
+}
+
+.action-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
 /* ── Status bar ─────────────────────────────────────────────────────── */
 .status-bar {
     display: flex;
@@ -189,7 +209,7 @@ input[type="text"] {
     font-weight: 500;
 }
 
-/* ── Dice bars ──────────────────────────────────────────────────────── */
+/* ── Dice bar ───────────────────────────────────────────────────────── */
 .dice-bar {
     display: flex;
     align-items: center;

client_web/src/components/game_screen.rs

@@ -157,7 +157,18 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
             // ── Opponent score (above board) ─────────────────────────────────
             <PlayerScorePanel score=opp_score jans=opp_jans is_you=false />
 
-            // ── Status ───────────────────────────────────────────────────────
+            // ── Board + side panel ───────────────────────────────────────────
+            <div class="board-and-panel">
+                <Board
+                    view_state=vs
+                    player_id=player_id
+                    selected_origin=selected_origin
+                    staged_moves=staged_moves
+                />
+
+                // ── Side panel ───────────────────────────────────────────────
+                <div class="side-panel">
+                    // Status message
                     <div class="status-bar">
                         <span>{move || {
                             let n = staged_moves.get().len();
@@ -176,36 +187,25 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                         }}</span>
                     </div>
 
-            // ── Opponent dice (top) ──────────────────────────────────────────
+                    // Dice (always shown when rolled, used state depends on whose turn)
-            {(!is_my_turn && show_dice).then(|| view! {
+                    {show_dice.then(|| view! {
-                <div class="dice-bar dice-bar-opponent">
+                        <div class="dice-bar">
-                    <Die value=dice.0 used=true />
-                    <Die value=dice.1 used=true />
-                </div>
-            })}
-
-            // ── Board ────────────────────────────────────────────────────────
-            <Board
-                view_state=vs
-                player_id=player_id
-                selected_origin=selected_origin
-                staged_moves=staged_moves
-            />
-
-            // ── Player action bar (bottom) ───────────────────────────────────
-            {is_my_turn.then(|| view! {
-                <div class="dice-bar dice-bar-player">
                             {move || {
                                 let (d0, d1) = if is_move_stage {
                                     matched_dice_used(&staged_moves.get(), dice)
                                 } else {
-                            (false, false)
+                                    (true, true)
                                 };
                                 view! {
                                     <Die value=dice.0 used=d0 />
                                     <Die value=dice.1 used=d1 />
                                 }
                             }}
+                        </div>
+                    })}
+
+                    // Action buttons
+                    <div class="action-buttons">
                         {show_roll.then(|| view! {
                             <button class="btn btn-primary" on:click=move |_| {
                                 cmd_tx_roll.unbounded_send(NetCommand::Action(PlayerAction::Roll)).ok();
@@ -227,7 +227,8 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                             >{t!(i18n, empty_move)}</button>
                         })}
                     </div>
-            })}
+                </div>
+            </div>
 
             // ── Player score (below board) ────────────────────────────────────
             <PlayerScorePanel score=my_score jans=my_jans is_you=true />