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

style/_header.scss

@@ -6,7 +6,7 @@ header {
     display: flex;
 
     .campaign-image {
-        width: 100px;
+        width: 120px;
         img {
             width: 100%;
             height: 100%;

style/_sidebar.scss

@@ -252,6 +252,51 @@ aside {
         }
     }
 
+    .slots {
+        margin: 0 7px;
+
+        .slot-level {
+            display: flex;
+            justify-content: flex-start;
+
+            @for $i from 1 through 9 {
+                &-#{$i} .spell-slot {
+                    background: hsl((348 + ($i * 3)) * 1deg, 83%, 47%);
+                }
+            }
+        }
+
+        .slot-level-title {
+            font-family: vars.$t;
+            font-weight: 100;
+            color: #aaa;
+            text-align: right;
+            display: block;
+            width: 32px;
+            &::after {
+                content: " |";
+            }
+        }
+
+        .spell-slot {
+            $size: 20px;
+            width: $size;
+            height: $size;
+            margin: 2px;
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        .spell-slot:has(~ .spell-slot:hover), .spell-slot:hover, .spell-slot.used {
+            filter: contrast(20%);
+        }
+
+        .spell-slot.used:hover, .spell-slot.used:hover ~ .spell-slot.used {
+            filter: contrast(70%);
+        }
+    }
+
     input {
         max-width: 100%;
         width: fit-content;

style/main.scss

@@ -30,7 +30,7 @@ h1, h2, h3, h4, h5, h6 {
     width: 90vw;
     height: 90vh;
     display: grid;
-    grid-template-rows: 100px 1fr;
+    grid-template-rows: 120px 1fr;
     grid-template-columns: 2fr 6fr;
     grid-gap: 20px;
 }