257f254b13
Doc comments on all modules, components, entities, helpers and type aliases; larger comments on the important entities (Dashboard, PlayerData, Context, App, Numput, item data). No behavior changes.
54 lines
2.1 KiB
Rust
54 lines
2.1 KiB
Rust
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>
|
||
}
|
||
}
|