src/components/sidebar.rs

@@ -29,8 +29,6 @@ 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;
@@ -80,20 +78,6 @@ 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() >
@@ -202,7 +186,7 @@ pub fn Sidebar () -> impl IntoView {
                 <div class="reset">
                     <button
                         title="Сбросить кости"
-                        on:click=move |_| dt.get().reset()
+                        on:click=move |_| dt.update(|d| d.reset())
                     >
                         "⟳"
                     </button>
@@ -224,25 +208,6 @@ 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: 120px;
+        width: 100px;
         img {
             width: 100%;
             height: 100%;

style/_sidebar.scss

@@ -252,51 +252,6 @@ 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: 120px 1fr;
+    grid-template-rows: 100px 1fr;
     grid-template-columns: 2fr 6fr;
     grid-gap: 20px;
 }