ac fix

src/components/sidebar.rs

@@ -6,6 +6,7 @@ mod image;
 mod names;
 mod about;
 mod hit_points;
+mod armor_class;
 mod hit_dice;
 mod death_saving_throws;
 mod spell_slots;
@@ -20,6 +21,7 @@ pub fn Sidebar () -> impl IntoView {
             <names::Names />
             <about::About />
             <hit_points::HitPoints />
+            <armor_class::ArmorClass />
             <hit_dice::HitDice />
             <death_saving_throws::DeathSavingThrows />
             <spell_slots::SpellSlots />

src/components/sidebar/armor_class.rs

@@ -0,0 +1,22 @@
+use crate::prelude::*;
+use leptos::prelude::*;
+
+/// AC counter: for now is to be set manually
+#[component]
+pub fn ArmorClass () -> impl IntoView {
+    let state = expect_context::<Context>();
+    let player = state.player();
+
+    let ac = player.ac();
+
+    let adjust_ac = move |ev: Targeted<Event, HtmlInputElement>| {
+        utils::adjust_checked(ev, ac);
+    };
+
+    view! {
+        <h6>"ac/кд:"</h6>
+        <div class="ac">
+            <input min=0 title="Класс доспеха (вручную)" id="ac" type="number" class="header-input" on:input:target=move |e| adjust_ac(e) prop:value=move || ac.get() />
+        </div>
+    }
+}

src/components/sidebar/hit_points.rs

@@ -2,8 +2,8 @@ use crate::prelude::*;
 use leptos::prelude::*;
 
 /// Current/max HP with a fill bar, plus temp HP with its own bar.
-/// All three numbers are editable `type="number"` inputs; AC sits
-/// next to them and is set manually.
+/// All three numbers are editable `type="number"` inputs
+
 #[component]
 pub fn HitPoints() -> impl IntoView {
     let state = expect_context::<Context>();
@@ -12,7 +12,6 @@ pub fn HitPoints () -> impl IntoView {
     let hp = player.hp();
     let max_hp = player.max_hp();
     let temp_hp = player.temp_hp();
-    let ac = player.ac();
 
     // All three inputs parse via `utils::adjust_checked`; invalid text
     // restores the previous value.
@@ -28,16 +27,10 @@ pub fn HitPoints () -> impl IntoView {
         utils::adjust_checked(ev, temp_hp);
     };
 
-    let adjust_ac = move |ev: Targeted<Event, HtmlInputElement>| {
-        utils::adjust_checked(ev, ac);
-    };
-
-
-    let pc_hp = move |a: u16, b: u16| -> String {
-        format!("width: {}%", utils::filled_pc(a, b).min(100.))
-    };
+    let pc_hp =
+        move |a: u16, b: u16| -> String { format!("width: {}%", utils::filled_pc(a, b).min(100.)) };
     view! {
-        <h6>"hp/оз, ac/КД:"</h6>
+        <h6>"hp/оз:"</h6>
         <div class="hp">
             <div class="perm">
                 <div style=move || pc_hp(hp.get(), max_hp.get()) class="bar"></div>
@@ -53,10 +46,6 @@ pub fn HitPoints () -> impl IntoView {
                     <input min=0 title="Временные хитпойнты" id="temp_hp" type="number" class="header-input" on:input:target=move |e| adjust_temp_hp(e) prop:value=move || temp_hp.get() />
                 </div>
             </div>
-            <div class="ac">
-                <span>"КД:"</span>
-                <input min=0 title="Класс доспеха (вручную)" id="ac" type="number" class="header-input" on:input:target=move |e| adjust_ac(e) prop:value=move || ac.get() />
-            </div>
         </div>
     }
 }

style/_sidebar.scss

@@ -202,6 +202,14 @@ aside {
         }
     }
     
+    .ac {
+      margin-left: auto;
+      justify-content: flex-end;
+      text-align: right;
+      width: 20%;
+      background: rgba(green, 0.15);
+    }
+
     .death-throws {
         display: flex;
         justify-content: center;