feat(client_web): show holes & points progress bars

client_web/src/components/score_panel.rs

@@ -1,25 +1,135 @@
 use leptos::prelude::*;
+use trictrac_store::{CheckerMove, Jan};
 
-use crate::trictrac::types::PlayerScore;
+use crate::trictrac::types::{JanEntry, PlayerScore};
 
+fn jan_label(jan: &Jan) -> &'static str {
+    match jan {
+        Jan::FilledQuarter => "Remplissage",
+        Jan::TrueHitSmallJan => "Battage à vrai (petit jan)",
+        Jan::TrueHitBigJan => "Battage à vrai (grand jan)",
+        Jan::TrueHitOpponentCorner => "Battage coin adverse",
+        Jan::FirstPlayerToExit => "Premier sorti",
+        Jan::SixTables => "Six tables",
+        Jan::TwoTables => "Deux tables",
+        Jan::Mezeas => "Mezeas",
+        Jan::FalseHitSmallJan => "Battage à faux (petit jan)",
+        Jan::FalseHitBigJan => "Battage à faux (grand jan)",
+        Jan::ContreTwoTables => "Contre deux tables",
+        Jan::ContreMezeas => "Contre mezeas",
+        Jan::HelplessMan => "Dame impuissante",
+    }
+}
+
+fn format_move_pair(m1: CheckerMove, m2: CheckerMove) -> String {
+    let fmt = |m: CheckerMove| -> String {
+        let (f, t) = (m.get_from(), m.get_to());
+        if f == 0 && t == 0 {
+            "—".to_string()
+        } else if t == 0 {
+            format!("{f}↑")
+        } else {
+            format!("{f}→{t}")
+        }
+    };
+    format!("{} & {}", fmt(m1), fmt(m2))
+}
+
+fn jan_row(idx: usize, entry: JanEntry, expanded: RwSignal<Option<usize>>) -> impl IntoView {
+    let row_class = if entry.total >= 0 {
+        "jan-row jan-expandable jan-positive"
+    } else {
+        "jan-row jan-expandable jan-negative"
+    };
+    let label = jan_label(&entry.jan);
+    let double_tag = if entry.is_double { "double" } else { "simple" };
+    let ways_tag = format!("×{}", entry.ways);
+    let pts_str = if entry.total >= 0 {
+        format!("+{}", entry.total)
+    } else {
+        format!("{}", entry.total)
+    };
+
+    let moves = entry.moves.clone();
+
+    view! {
+        <div>
+            <div
+                class=row_class
+                on:click=move |_| {
+                    expanded.update(|s| {
+                        *s = if *s == Some(idx) { None } else { Some(idx) };
+                    });
+                }
+            >
+                <span class="jan-label">{label}</span>
+                <span class="jan-tag">{double_tag}</span>
+                <span class="jan-tag">{ways_tag}</span>
+                <span class="jan-pts">{pts_str}</span>
+            </div>
+            {
+                let move_lines: Vec<_> = moves.iter()
+                    .map(|&(m1, m2)| {
+                        let text = format_move_pair(m1, m2);
+                        view! { <div class="jan-move-line">{text}</div> }
+                    })
+                    .collect();
+                view! {
+                    <div class="jan-moves" class:hidden=move || expanded.get() != Some(idx)>
+                        {move_lines}
+                    </div>
+                }
+            }
+        </div>
+    }
+}
+
+/// One player's score panel: name, progress bars (points & holes), bredouille indicator,
+/// and the list of jans scored by this player in the last roll.
+/// `jans` should already be filtered and sign-corrected for this player's perspective.
 #[component]
-pub fn ScorePanel(scores: [PlayerScore; 2], player_id: u16) -> impl IntoView {
-    let rows: Vec<_> = scores
+pub fn PlayerScorePanel(score: PlayerScore, jans: Vec<JanEntry>, is_you: bool) -> impl IntoView {
+    let label = if is_you { " (vous)" } else { "" };
+    let points_pct = format!("{}%", (score.points as u32 * 100 / 12).min(100));
+    let holes_pct = format!("{}%", (score.holes as u32 * 100 / 12).min(100));
+    let points_val = format!("{}/12", score.points);
+    let holes_val = format!("{}/12", score.holes);
+    let can_bredouille = score.can_bredouille;
+
+    let expanded: RwSignal<Option<usize>> = RwSignal::new(None);
+    let jan_rows: Vec<_> = jans
         .into_iter()
         .enumerate()
-        .map(|(i, score)| {
-            let label = if i as u16 == player_id { " (you)" } else { "" };
-            view! {
-                <div class="score-row">
-                    <span class="score-name">{score.name}{label}</span>
-                    <span class="score-points">"Points: "{score.points}</span>
-                    <span class="score-holes">"Holes: "{score.holes}</span>
-                </div>
-            }
-        })
+        .map(|(i, entry)| jan_row(i, entry, expanded))
         .collect();
 
     view! {
-        <div class="score-panel">{rows}</div>
+        <div class="player-score-panel">
+            <div class="player-score-header">
+                <span class="player-name">{score.name}{label}</span>
+            </div>
+            <div class="score-bars">
+                <div class="score-bar-row">
+                    <span class="score-bar-label">"Points"</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="Peut faire bredouille">"B"</span>
+                    })}
+                </div>
+                <div class="score-bar-row">
+                    <span class="score-bar-label">"Trous"</span>
+                    <div class="score-bar">
+                        <div class="score-bar-fill score-bar-holes" style=format!("width:{holes_pct}")></div>
+                    </div>
+                    <span class="score-bar-value">{holes_val}</span>
+                </div>
+            </div>
+            {(!jan_rows.is_empty()).then(|| view! {
+                <div class="player-jans">{jan_rows}</div>
+            })}
+        </div>
     }
 }