From 6995f9c888f4d6b8a7d2b85992b401a9a0c88b44 Mon Sep 17 00:00:00 2001
From: Henri Bourcereau <henri.bourcereau@gmail.com>
Date: Sat, 18 Apr 2026 16:10:09 +0200
Subject: [PATCH] feat(client_web): show a '?' when a die is not yet rolled

---
 client_web/assets/style.css      |  3 +++
 client_web/src/components/die.rs | 13 +++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/client_web/assets/style.css b/client_web/assets/style.css
index 9b80fbb..3034f38 100644
--- a/client_web/assets/style.css
+++ b/client_web/assets/style.css
@@ -520,6 +520,9 @@ body {
 .die-face.die-used rect { fill: #d4d0c4; stroke: #9a8a70; }
 .die-face.die-used circle { fill: #9a8a70; }
 
+.die-face .die-question { fill: #1a0a00; font-family: sans-serif; }
+.die-face.die-used .die-question { fill: #9a8a70; }
+
 /* ── Jan panel ──────────────────────────────────────────────────────── */
 .jan-panel {
     display: flex;
diff --git a/client_web/src/components/die.rs b/client_web/src/components/die.rs
index 7b701e7..7576280 100644
--- a/client_web/src/components/die.rs
+++ b/client_web/src/components/die.rs
@@ -22,7 +22,7 @@ pub fn Die(
     value: u8,
     used: bool,
     #[prop(default = false)] is_double: bool,
-) -> impl IntoView {
+) -> AnyView {
     let mut cls = if used {
         "die-face die-used".to_string()
     } else {
@@ -31,6 +31,15 @@ pub fn Die(
     if is_double && !used {
         cls.push_str(" die-double");
     }
+    if value == 0 {
+        return view! {
+            <svg class=cls width="48" height="48" viewBox="0 0 48 48">
+                <rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7" />
+                <text x="24" y="32" text-anchor="middle" font-size="24" font-weight="bold"
+                    class="die-question">{"?"}</text>
+            </svg>
+        }.into_any();
+    }
     let dots: Vec<AnyView> = dot_positions(value)
         .iter()
         .map(|&(cx, cy)| view! { <circle cx=cx cy=cy r="4.5" /> }.into_any())
@@ -40,5 +49,5 @@ pub fn Die(
             <rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7" />
             {dots}
         </svg>
-    }
+    }.into_any()
 }