sidebar part 4: spell slot block

src/components/sidebar.rs

@@ -29,6 +29,8 @@ pub fn Sidebar () -> impl IntoView {
     let hit_dice = player.hit_dice();
     let dt = player.death_save_throws();
 
+    let slots = player.spell_slots();
+
     let adjust_level = move |adjustment: i8| level.update(|l| {
         if let Some(new) = l.checked_add_signed(adjustment) {
             *l = new;
@@ -78,6 +80,20 @@ pub fn Sidebar () -> impl IntoView {
         });
     };
 
+
+    let process_spell_slot_click = move |level: usize, slot_id: u8| {
+        slots.update(|s| {
+            let l = &mut s.0[level];
+            if slot_id < l.used {
+                l.used = slot_id;
+            } else {
+                l.used = slot_id + 1;
+            }
+        })
+    };
+
+
+
     view! {
         <aside>
             <Show when=move || !image.get().is_empty() >
@@ -186,7 +202,7 @@ pub fn Sidebar () -> impl IntoView {
                 <div class="reset">
                     <button
                         title="Сбросить кости"
-                        on:click=move |_| dt.update(|d| d.reset())
+                        on:click=move |_| dt.get().reset()
                     >
                         "⟳"
                     </button>
@@ -208,6 +224,25 @@ pub fn Sidebar () -> impl IntoView {
                     </For>
                 </div>
             </div>
+            <h6>spell slots/ячейки заклинаний:</h6>
+            <div class="slots">
+                <For
+                    each=move || slots.get().0.into_iter().enumerate()
+                    key=|(idx, ssl)| format!("{}-{}-{}", idx, ssl.used, ssl.total)
+                    let((index, level))
+                >
+                    <div class=move || format!("slot-level slot-level-{}", index + 1)>
+                        <span class="slot-level-title">{move || index + 1}</span>
+                        <For each=move || 0..level.total key=|i| i.clone() let(slot)>
+                            <div
+                                class=move || format!("spell-slot {}", if slot < level.used { "used" } else { "" })
+                                on:click=move |_| process_spell_slot_click(index, slot)
+                            >
+                            </div>
+                        </For>
+                    </div>
+                </For>
+            </div>
         </aside>
     }
 }