sidebar part 2: hit dice block

src/components/sidebar.rs

@@ -26,13 +26,14 @@ pub fn Sidebar () -> impl IntoView {
 
     let image = player.image();
 
+    let hit_dice = player.hit_dice();
+
     let adjust_level = move |adjustment: i8| level.update(|l| {
         if let Some(new) = l.checked_add_signed(adjustment) {
             *l = new;
         }
     });
 
-
     let adjust_xp = move |ev: Targeted<Event, HtmlInputElement>| {
         utils::adjust_checked(ev, xp);
     };
@@ -54,6 +55,17 @@ pub fn Sidebar () -> impl IntoView {
         format!("width: {}%", utils::filled_pc(a, b).min(100.))
     };
 
+    let process_die_click = move |slot_id: u8| {
+        hit_dice.update(|d| {
+            if slot_id < d.used {
+                d.used = slot_id;
+            } else {
+                d.used = slot_id + 1;
+            }
+        })
+
+    };
+
     view! {
         <aside>
             <Show when=move || !image.get().is_empty() >
@@ -104,6 +116,43 @@ pub fn Sidebar () -> impl IntoView {
                     </div>
                 </div>
             </div>
+            <h6>hit dice/кости хитов:</h6>
+            <div class="hit-dice">
+                <div class="die-selector">
+                    <select
+                        id="die-kind"
+                        on:change:target=move |ev| {
+                            let val = ev.target().value();
+                            if let Ok(v) = val.parse() {
+                                hit_dice.update(|d| d.kind = v);
+                            }
+                        }
+                        prop:value=move || hit_dice.get().kind
+                    >
+                        <option value=4>4</option>
+                        <option value=6>6</option>
+                        <option value=8>8</option>
+                        <option value=10>10</option>
+                        <option value=12>12</option>
+                        <option value=20>20</option>
+                    </select>
+                </div>
+                <For
+                    each=move || (0..level.get())
+                    key=|slot| slot.clone()
+                    let (slot)
+                >
+                    <div
+                        class=move || {
+                            let d = hit_dice.get();
+                            format!("die-{} die {}", d.kind, if slot < d.used { "spent" } else { "" })
+                        }
+                        on:click=move |_| process_die_click(slot)
+                    >
+                        {move || hit_dice.get().kind}
+                    </div>
+                </For>
+            </div>
         </aside>
     }
 }