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>
     }
 }

style/_sidebar.scss

@@ -202,6 +202,62 @@ aside {
         }
     }
 
+    .death-throws {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .dt-list {
+            display: flex;
+            &.failed {
+                flex-direction: row-reverse;
+            }
+        }
+
+        .dt {
+            width: 20px;
+            height: 20px;
+            border-radius: 10px;
+            margin: 3px;
+            &.dt-fail {
+                background: hsl(0deg, 10%, 50%);
+            }
+            &.dt-success {
+                background: hsl(120deg, 10%, 50%);
+            }
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+        .dt:has(~ .dt:hover), .dt:hover, .dt.filled {
+            filter: contrast(700%);
+        }
+
+        .dt.filled:hover, .dt.filled:hover ~ .dt.filled {
+            filter: contrast(50%);
+        }
+
+        .reset {
+            margin: 0 10px;
+            button {
+                color: white;
+                background: #29AAB3;
+                width: 22px;
+                height: 22px;
+                text-align: center;
+                border-radius: 11px;
+                margin-top: 2px;
+                padding-left: 2px;
+                padding-top: 3px;
+                &:hover {
+                    transform: rotateY(360deg) scale(1.2);
+                    transition: transform .4s;
+                }
+            }
+        }
+    }
+
     input {
         max-width: 100%;
         width: fit-content;