aex/src/components/sidebar/hit_points.rs

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.
#[component]
pub fn HitPoints () -> impl IntoView {
    let state = expect_context::<Context>();
    let player = state.player();

    let hp = player.hp();
    let max_hp = player.max_hp();
    let temp_hp = player.temp_hp();

    // All three inputs parse via `utils::adjust_checked`; invalid text
    // restores the previous value.
    let adjust_hp = move |ev: Targeted<Event, HtmlInputElement>| {
        utils::adjust_checked(ev, hp);
    };

    let adjust_max_hp = move |ev: Targeted<Event, HtmlInputElement>| {
        utils::adjust_checked(ev, max_hp);
    };

    let adjust_temp_hp = move |ev: Targeted<Event, HtmlInputElement>| {
        utils::adjust_checked(ev, temp_hp);
    };


    let pc_hp = move |a: u16, b: u16| -> String {
        format!("width: {}%", utils::filled_pc(a, b).min(100.))
    };

    view! {
        <h6>hp/оз:</h6>
        <div class="hp">
            <div class="perm">
                <div style=move || pc_hp(hp.get(), max_hp.get()) class="bar"></div>
                <div class="val">
                    <input min=0 title="Текущее количество хитпойнтов" id="current_hp" type="number" class="header-input" on:input:target=move |e| adjust_hp(e) prop:value=move || hp.get() />
                    "/"
                    <input min=1 title="Максимальное количество хитпойнтов" id="max_hp" type="number" class="header-input" on:input:target=move |e| adjust_max_hp(e) prop:value=move || max_hp.get() />
                </div>
            </div>
            <div class="temp">
                <div style=move || pc_hp(temp_hp.get(), 10) class="bar"></div>
                <div class="val">
                    <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>
    }
}