sidebar part 3: death save throws block

src/components/sidebar.rs

@@ -27,6 +27,7 @@ pub fn Sidebar () -> impl IntoView {
     let image = player.image();
 
     let hit_dice = player.hit_dice();
+    let dt = player.death_save_throws();
 
     let adjust_level = move |adjustment: i8| level.update(|l| {
         if let Some(new) = l.checked_add_signed(adjustment) {
@@ -63,7 +64,18 @@ pub fn Sidebar () -> impl IntoView {
                 d.used = slot_id + 1;
             }
         })
+    };
 
+    let process_dt_click = move |success: bool, slot_id: u8| {
+        dt.update(|d| {
+            let v = if success { &mut d.succeeded } else { &mut d.failed };
+            if slot_id < *v {
+                *v = slot_id;
+            } else {
+                *v = slot_id + 1;
+            }
+
+        });
     };
 
     view! {
@@ -153,6 +165,44 @@ pub fn Sidebar () -> impl IntoView {
                     </div>
                 </For>
             </div>
+            <h6>death throws/cб от смерти:</h6>
+            <div class="death-throws">
+                <div class="failed dt-list">
+                    <For
+                        each=||0..3
+                        key=|slot| slot.clone()
+                        let (slot)
+                    >
+                        <div
+                            class=move || {
+                                let d = dt.get();
+                                format!("dt-fail dt {}", if slot < d.failed { "filled" } else { "" })
+                            }
+                            on:click=move |_| process_dt_click(false, slot)
+                        >
+                        </div>
+                    </For>
+                </div>
+                <div class="reset">
+                    <button title="Сбросить кости">"⟳"</button>
+                </div>
+                <div class="succeeded dt-list">
+                    <For
+                        each=||0..3
+                        key=|slot| slot.clone()
+                        let (slot)
+                    >
+                        <div
+                            class=move || {
+                                let d = dt.get();
+                                format!("dt-success dt {}", if slot < d.succeeded { "filled" } else { "" })
+                            }
+                            on:click=move |_| process_dt_click(true, slot)
+                        >
+                        </div>
+                    </For>
+                </div>
+            </div>
         </aside>
     }
 }