feat(ui): show jan points next to hole counts

clients/web/assets/style.css

@@ -1154,66 +1154,105 @@ a:hover { text-decoration: underline; }
 
 .game-over-actions { display: flex; gap: 0.75rem; justify-content: center; }
 
+/* ── Score-area: position:relative wrapper for merged panel + scoring ── */
+.score-area {
+    position: relative;
+    width: 100%;
+}
+
+/* ── Scoring panels container — right of the hole counter ───────────── */
+/* Stacked column, right-aligned, covering the free space in each row.  */
+/* overflow:visible lets tall panels float over the board below.         */
+.scoring-panels-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: flex-end;
+    padding: 4px 8px;
+    z-index: 10;
+    pointer-events: none;
+    overflow: visible;
+}
+
 /* ── Scoring notification panel (§6b) ───────────────────────────────── */
 @keyframes scoring-panel-enter {
-    from { transform: translateX(100%); }
-    to   { transform: translateX(0); }
+    from { opacity: 0; transform: translateX(10px); }
+    to   { opacity: 1; transform: translateX(0); }
 }
 
 .scoring-panel-wrapper {
     pointer-events: auto;
-    animation: scoring-panel-enter 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    filter: drop-shadow(-4px 0 14px rgba(0,0,0,0.38));
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 3px;
+    animation: scoring-panel-enter 0.3s ease-out;
 }
 
-.scoring-panel-wrapper.peeked {
-    transform: translateX(100%);
+/* "+" expand button: hidden while the panel is expanded */
+.scoring-panel-wrapper:not(.scoring-minimized) .scoring-expand-btn {
+    display: none;
 }
 
-.scoring-panel-wrapper.revealed {
-    transform: translateX(0);
+/* Full panel card: hidden once minimised */
+.scoring-panel-wrapper.scoring-minimized .scoring-panel {
+    display: none;
 }
 
-.scoring-panel-wrapper.peeked:not(.revealed) {
+/* "+" expand button ─────────────────────────────────────────────────── */
+.scoring-expand-btn {
+    font-family: var(--font-display);
+    font-size: 0.9rem;
+    line-height: 1;
+    background: var(--ui-parchment);
+    border: 1.5px solid var(--ui-gold-dark);
+    border-radius: 3px;
+    padding: 2px 7px;
     cursor: pointer;
+    color: var(--ui-ink);
+    opacity: 0.72;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
+    transition: opacity 0.15s;
+}
+.scoring-expand-btn:hover { opacity: 1; }
+
+/* ── Panel head: scoring total + "−" collapse link ──────────────────── */
+.scoring-panel-head {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
 }
 
-/* ── Inline scoring panel (in bottom strip, expands downward) ───────── */
-@keyframes scoring-expand-in {
-    from { opacity: 0; transform: translateY(-5px); }
-    to   { opacity: 1; transform: translateY(0); }
-}
-
-.scoring-panel-wrapper.scoring-panel-inline-wrap {
-    animation: none;
-    filter: none;
-    transform: none !important;
-    pointer-events: auto;
-    cursor: default;
-    width: 100%;
-}
-
-.scoring-panel-wrapper.scoring-panel-inline-wrap .scoring-panel {
-    animation: scoring-expand-in 0.28s ease-out;
-    background: transparent;
-    box-shadow: none;
-    border-radius: 0;
-    border-top: 1px solid rgba(0,0,0,0.07);
-    padding: 0.4rem 0;
+.scoring-collapse-btn {
+    font-size: 0.78rem;
+    line-height: 1;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: rgba(0,0,0,0.35);
+    padding: 0 1px;
+    margin-left: auto;
+    flex-shrink: 0;
+    transition: color 0.15s;
 }
+.scoring-collapse-btn:hover { color: rgba(0,0,0,0.65); }
 
+/* ── Inner scoring card ─────────────────────────────────────────────── */
 .scoring-panel {
     background: var(--ui-parchment);
     border-radius: 5px;
     padding: 0.45rem 0.85rem;
     font-size: 0.84rem;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
     border-left: 3px solid var(--ui-green-accent);
     display: flex;
     flex-direction: column;
     gap: 4px;
-    width: 100%;
+    width: 320px;
 }
 
 .scoring-total {
@@ -1256,11 +1295,6 @@ a:hover { text-decoration: underline; }
         right: auto;
         left: calc(100% + 1rem);
     }
-    .scoring-panel-wrapper.peeked,
-    .scoring-panel-wrapper.revealed {
-        transform: none;
-        cursor: default;
-    }
 }
 
 /* ── Board wrapper ──────────────────────────────────────────────────── */
@@ -1401,6 +1435,26 @@ a:hover { text-decoration: underline; }
     animation: exit-glow 2s ease-in-out infinite;
 }
 
+/* ── Exit sign (§8c) — circle+arrow outside the board ──────────────── */
+.exit-btn {
+    pointer-events: none;
+    opacity: 0.3;
+    transition: opacity 0.2s, transform 0.15s;
+}
+.exit-btn.exit-active {
+    pointer-events: auto;
+    cursor: pointer;
+    opacity: 1;
+    animation: exit-btn-pulse 1.4s ease-in-out infinite;
+}
+.exit-btn.exit-active:hover {
+    transform: scale(1.1);
+}
+@keyframes exit-btn-pulse {
+    0%, 100% { filter: drop-shadow(0 0 3px rgba(200,160,20,0.3)); }
+    50%       { filter: drop-shadow(0 0 9px rgba(200,160,20,0.85)); }
+}
+
 .field.jan-hovered {
     --fc: rgba(190, 140, 35, 0.8) !important;
 }

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

@@ -294,6 +294,14 @@ pub fn Board(
         exit_field_test = |f| matches!(f, 1..=6);
     }
 
+    // Show a clickable exit sign outside the board when bearing off is possible.
+    let has_exit_move = valid_sequences
+        .iter()
+        .any(|(m1, m2)| m1.get_to() == 0 || m2.get_to() == 0);
+    let show_exit_btn = all_in_exit && is_move_stage && has_exit_move;
+    let seqs_exit_cls = valid_sequences.clone();
+    let seqs_exit_click = valid_sequences.clone();
+
     // `valid_sequences` is cloned per field (the Vec is small; Send-safe unlike Rc).
     let fields_from = |nums: &[u8], is_top_row: bool| -> Vec<AnyView> {
         nums.iter()
@@ -583,6 +591,72 @@ pub fn Board(
                             .collect()
                     }}
                 </svg>
+                // Exit sign: circle+arrow outside the board, next to the last exit field.
+                // White exits to the right (top-right quarter); Black exits to the left (top-left).
+                {show_exit_btn.then(|| {
+                    let (pos_style, line_x1, line_x2, head_pts): (&str, &str, &str, &str) =
+                        if is_white {
+                            (
+                                "position:absolute;right:-60px;top:15px;width:50px;height:50px",
+                                "10", "31", "23,17 32,25 23,33",
+                            )
+                        } else {
+                            (
+                                "position:absolute;left:-60px;top:15px;width:50px;height:50px",
+                                "40", "19", "27,17 18,25 27,33",
+                            )
+                        };
+                    view! {
+                        <div
+                            title="Exit"
+                            style=pos_style
+                            class=move || {
+                                let staged = staged_moves.get();
+                                let sel = selected_origin.get();
+                                let active = match sel {
+                                    Some(origin) => seqs_exit_cls.is_empty()
+                                        || valid_dests_for(&seqs_exit_cls, &staged, origin)
+                                            .iter()
+                                            .any(|&d| d == 0),
+                                    None => false,
+                                };
+                                if active { "exit-btn exit-active" } else { "exit-btn" }
+                            }
+                            on:click=move |_| {
+                                if !is_move_stage { return; }
+                                let staged = staged_moves.get_untracked();
+                                if staged.len() >= 2 { return; }
+                                let Some(origin) = selected_origin.get_untracked() else {
+                                    return;
+                                };
+                                let valid = seqs_exit_click.is_empty()
+                                    || valid_dests_for(&seqs_exit_click, &staged, origin)
+                                        .iter()
+                                        .any(|&d| d == 0);
+                                if valid {
+                                    staged_moves.update(|v| v.push((origin, 0)));
+                                    selected_origin.set(None);
+                                }
+                            }
+                        >
+                            <svg width="50" height="50" viewBox="0 0 50 50">
+                                <circle
+                                    cx="25" cy="25" r="20"
+                                    style="fill:rgba(10,20,10,0.75);stroke:rgba(210,170,30,0.75);stroke-width:2.5"
+                                />
+                                <line
+                                    x1=line_x1 y1="25" x2=line_x2 y2="25"
+                                    style="stroke:rgba(210,170,30,0.85);stroke-width:2.5;stroke-linecap:round"
+                                />
+                                <polyline
+                                    points=head_pts
+                                    style="fill:none;stroke:rgba(210,170,30,0.85);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+                                />
+                            </svg>
+                        </div>
+                    }
+                    .into_any()
+                })}
             </div>
             <div class="zone-labels-row">
                 <div class="zone-label zone-label-quarter">{label_bl}</div>

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

@@ -287,7 +287,10 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                 </div>
             })}
 
-            // ── Merged scoreboard (both players, above board) ────────────────
+            // ── Merged scoreboard + scoring panels (above board) ─────────────
+            // score-area is position:relative so the scoring-panels-container
+            // can be absolute-positioned at the right of the hole counter.
+            <div class="score-area">
                 <MergedScorePanel
                     my_score=my_score
                     opp_score=opp_score
@@ -297,6 +300,16 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                     opp_holes_gained=opp_holes_gained_score
                     my_bredouille=my_bredouille_flash
                 />
+                // Scoring detail panels — stacked at the right, overlapping if needed.
+                <div class="scoring-panels-container">
+                    {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>
 
             // ── Board ────────────────────────────────────────────────────────
             <Board
@@ -392,13 +405,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
                         })
                     }}
                 </div>
-                // ── Scoring detail panels — expand downward in the strip ──────
-                {my_scored_event.map(|event| view! {
-                    <ScoringPanel event=event turn_stage=turn_stage_for_panel inline=true />
-                })}
-                {opp_scored_event.map(|event| view! {
-                    <ScoringPanel event=event turn_stage=SerTurnStage::RollDice is_opponent=true inline=true />
-                })}
             </div>
 
             // ── Pre-game ceremony overlay ─────────────────────────────────────

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

@@ -2,15 +2,18 @@ use futures::channel::mpsc::UnboundedSender;
 #[cfg(target_arch = "wasm32")]
 use gloo_timers::future::TimeoutFuture;
 use leptos::prelude::*;
+#[cfg(target_arch = "wasm32")]
+use std::sync::{
+    atomic::{AtomicBool, Ordering},
+    Arc,
+};
 use trictrac_store::CheckerMove;
 #[cfg(target_arch = "wasm32")]
 use wasm_bindgen_futures::spawn_local;
-#[cfg(target_arch = "wasm32")]
-use std::sync::{Arc, atomic::{AtomicBool, Ordering}};
 
 use crate::app::NetCommand;
-use crate::i18n::*;
 use crate::game::trictrac::types::{JanEntry, PlayerAction, ScoredEvent, SerTurnStage};
+use crate::i18n::*;
 
 use super::score_panel::jan_label;
 
@@ -48,14 +51,19 @@ fn scoring_jan_row(entry: JanEntry) -> impl IntoView {
     }
 }
 
+/// Scoring detail panel, shown to the right of the hole counter in the merged
+/// score panel area.
+///
+/// Lifecycle:
+/// 1. Mounts expanded — shows all jan details and draws board arrows.
+/// 2. After 3.4 s the arrows clear and the panel auto-minimises to a small "+"
+///    button (unless Hold/Go buttons are still needed).
+/// 3. The "+" / "−" buttons let the player toggle between states at any time.
 #[component]
 pub fn ScoringPanel(
     event: ScoredEvent,
     turn_stage: SerTurnStage,
     #[prop(default = false)] is_opponent: bool,
-    /// When true the panel renders inline in the bottom strip instead of as
-    /// a right-side overlay: no slide-in animation, no peek/reveal behaviour.
-    #[prop(default = false)] inline: bool,
 ) -> impl IntoView {
     let i18n = use_i18n();
     let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
@@ -72,91 +80,28 @@ pub fn ScoringPanel(
         "scoring-panel"
     };
 
-    // ── Lifecycle signals ──────────────────────────────────────────────────
-    // peeked: added after 3.4 s (slide to peek strip)
-    // revealed: added on first hover of the peek strip (stay open permanently)
-    let peeked = RwSignal::new(false);
-    let revealed = RwSignal::new(false);
+    // minimized: starts false (expanded), becomes true after 3.4 s unless
+    // the Hold/Go choice still needs the player's attention.
+    let minimized = RwSignal::new(false);
 
-    // ── Collect all moves from all jans for automatic arrow display ────────
+    // Collect all moves from all jans for automatic arrow display.
     let all_moves: Vec<(CheckerMove, CheckerMove)> = event
         .jans
         .iter()
         .flat_map(|e| e.moves.iter().cloned())
         .collect();
-    let all_moves_click   = all_moves.clone();
+    let all_moves_auto = all_moves.clone();
+    let all_moves_expand = all_moves.clone();
     let all_moves_enter = all_moves.clone();
 
     let hovered_ctx = use_context::<RwSignal<Vec<(CheckerMove, CheckerMove)>>>();
-
-    // On mount: show all this event's moves as board arrows immediately,
-    // then after 3.4 s slide to peek and clear the arrows.
-    //
-    // Two important constraints:
-    // 1. The initial hm.set() must be deferred (spawn_local, not sync in body)
-    //    to avoid writing a reactive signal mid-render while Board reads it —
-    //    that triggers Leptos's cycle guard → `unreachable` WASM panic.
-    // 2. The cancellation flag must be Rc<Cell<bool>>, NOT RwSignal<bool>.
-    //    RwSignal is a NodeId into Leptos's arena; the arena slot is freed
-    //    when ScoringPanel's owner drops (on every GameScreen remount). If the
-    //    3.4 s future outlives the component and calls is_alive.get_untracked()
-    //    on a freed slot, that also panics with `unreachable`. Rc<Cell<bool>>
-    //    is reference-counted outside the arena and stays valid for as long as
-    //    the future holds onto it.
-    #[cfg(target_arch = "wasm32")]
-    if let Some(hm) = hovered_ctx {
-        let is_alive = Arc::new(AtomicBool::new(true));
-        let is_alive_cleanup = is_alive.clone();
-        // on_cleanup requires Send + Sync; Arc<AtomicBool> satisfies both.
-        on_cleanup(move || is_alive_cleanup.store(false, Ordering::Relaxed));
-
-        spawn_local(async move {
-            // Show arrows (runs in the next microtask, after render settles).
-            hm.set(all_moves);
-
-            TimeoutFuture::new(3_400).await;
-            // Guard: component may have been destroyed while we were waiting.
-            // is_alive was set to false by on_cleanup, which runs before Leptos
-            // frees the signal arena slots — so peeked is still valid iff this
-            // returns true.
-            if !is_alive.load(Ordering::Relaxed) {
-                return;
-            }
-            hm.set(vec![]);
-            // Inline panels are always visible; only the overlay variant peeks.
-            if !inline {
-                peeked.set(true);
-            }
-        });
-    }
-
     let jan_rows: Vec<_> = event.jans.into_iter().map(scoring_jan_row).collect();
 
     view! {
-        // ── Outer wrapper: overlay mode has slide/peek/reveal animation;
-        // inline mode suppresses all of that via scoring-panel-inline-wrap.
         <div
             class="scoring-panel-wrapper"
-            class:scoring-panel-inline-wrap=inline
-            class:peeked=move || peeked.get()
-            class:revealed=move || revealed.get()
-            on:click=move |_| {
-                // Inline panels don't have the peek/reveal toggle.
-                if !inline {
-                    if peeked.get_untracked() {
-                        revealed.update(|r| *r = !*r);
-                    }
-                    if let Some(hm) = hovered_ctx {
-                        if !revealed.get_untracked() {
-                            hm.set(all_moves_click.clone());
-                        } else {
-                            hm.set(vec![]);
-                        }
-                    }
-                }
-            }
+            class:scoring-minimized=move || minimized.get()
             on:mouseenter=move |_| {
-                // Show all event moves as arrows while the cursor is inside.
                 if let Some(hm) = hovered_ctx {
                     hm.set(all_moves_enter.clone());
                 }
@@ -167,7 +112,24 @@ pub fn ScoringPanel(
                 }
             }
         >
+            // "+" expand button — shown only when minimised (CSS hides it otherwise).
+            <button
+                class="scoring-expand-btn"
+                title="Show scoring details"
+                on:click=move |ev: leptos::web_sys::MouseEvent| {
+                    ev.stop_propagation();
+                    minimized.set(false);
+                    if let Some(hm) = hovered_ctx {
+                        hm.set(all_moves_expand.clone());
+                    }
+                }
+            >
+                "+"
+            </button>
+
+            // Full panel — hidden when minimised via CSS.
             <div class=panel_class>
+                <div class="scoring-panel-head">
                     <div class="scoring-total">
                         {move || if is_opponent {
                             t_string!(i18n, opp_scored_pts, n = points_earned)
@@ -175,6 +137,20 @@ pub fn ScoringPanel(
                             t_string!(i18n, scored_pts, n = points_earned)
                         }}
                     </div>
+                    <button
+                        class="scoring-collapse-btn"
+                        title="Minimise"
+                        on:click=move |ev: leptos::web_sys::MouseEvent| {
+                            ev.stop_propagation();
+                            minimized.set(true);
+                            if let Some(hm) = hovered_ctx {
+                                hm.set(vec![]);
+                            }
+                        }
+                    >
+                        "−"
+                    </button>
+                </div>
                 {jan_rows}
                 {(holes_gained > 0).then(|| view! {
                     <div class="scoring-hole">
@@ -194,17 +170,22 @@ pub fn ScoringPanel(
                     let dismissed = RwSignal::new(false);
                     view! {
                         <div class="hold-go-buttons" class:hidden=move || dismissed.get()>
-                            // stop_propagation so these buttons don't also toggle the panel
-                            <button class="btn btn-secondary" on:click=move |ev: leptos::web_sys::MouseEvent| {
+                            <button class="btn btn-secondary"
+                                on:click=move |ev: leptos::web_sys::MouseEvent| {
                                     ev.stop_propagation();
                                     dismissed.set(true);
-                            }>
+                                }
+                            >
                                 {t!(i18n, hold)}
                             </button>
-                            <button class="btn btn-primary" on:click=move |ev: leptos::web_sys::MouseEvent| {
+                            <button class="btn btn-primary"
+                                on:click=move |ev: leptos::web_sys::MouseEvent| {
                                     ev.stop_propagation();
-                                cmd_tx.unbounded_send(NetCommand::Action(PlayerAction::Go)).ok();
-                            }>
+                                    cmd_tx
+                                        .unbounded_send(NetCommand::Action(PlayerAction::Go))
+                                        .ok();
+                                }
+                            >
                                 {t!(i18n, go)}
                             </button>
                         </div>