yk/aex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sidebar part 3: death save throws block

Browse Source
This commit is contained in:
YK 2025-09-13 12:48:01 +03:00
parent fc13befcfb
commit 4e232e97e0
2 changed files with 106 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/sidebar.rs
View File

@ -27,6 +27,7 @@ pub fn Sidebar () -> impl IntoView {
let image = player.image();
let hit_dice = player.hit_dice();
let dt = player.death_save_throws();
let adjust_level = move |adjustment: i8| level.update(|l| {
if let Some(new) = l.checked_add_signed(adjustment) {
@ -63,7 +64,18 @@ pub fn Sidebar () -> impl IntoView {
d.used = slot_id + 1;
}
})
};
let process_dt_click = move |success: bool, slot_id: u8| {
dt.update(|d| {
let v = if success { &mut d.succeeded } else { &mut d.failed };
if slot_id < *v {
*v = slot_id;
} else {
*v = slot_id + 1;
}
});
};
view! {
@ -153,6 +165,44 @@ pub fn Sidebar () -> impl IntoView {
</div>
</For>
</div>
<h6>death throws/cб от смерти:</h6>
<div class="death-throws">
<div class="failed dt-list">
<For
each=||0..3
key=|slot| slot.clone()
let (slot)
>
<div
class=move || {
let d = dt.get();
format!("dt-fail dt {}", if slot < d.failed { "filled" } else { "" })
}
on:click=move |_| process_dt_click(false, slot)
>
</div>
</For>
</div>
<div class="reset">
<button title="Сбросить кости">"⟳"</button>
</div>
<div class="succeeded dt-list">
<For
each=||0..3
key=|slot| slot.clone()
let (slot)
>
<div
class=move || {
let d = dt.get();
format!("dt-success dt {}", if slot < d.succeeded { "filled" } else { "" })
}
on:click=move |_| process_dt_click(true, slot)
>
</div>
</For>
</div>
</div>
</aside>
}
}

56
style/_sidebar.scss
View File

@ -202,6 +202,62 @@ aside {
}
}
.death-throws {
display: flex;
justify-content: center;
align-items: center;
.dt-list {
display: flex;
&.failed {
flex-direction: row-reverse;
}
}
.dt {
width: 20px;
height: 20px;
border-radius: 10px;
margin: 3px;
&.dt-fail {
background: hsl(0deg, 10%, 50%);
}
&.dt-success {
background: hsl(120deg, 10%, 50%);
}
&:hover {
cursor: pointer;
}
}
.dt:has(~ .dt:hover), .dt:hover, .dt.filled {
filter: contrast(700%);
}
.dt.filled:hover, .dt.filled:hover ~ .dt.filled {
filter: contrast(50%);
}
.reset {
margin: 0 10px;
button {
color: white;
background: #29AAB3;
width: 22px;
height: 22px;
text-align: center;
border-radius: 11px;
margin-top: 2px;
padding-left: 2px;
padding-top: 3px;
&:hover {
transform: rotateY(360deg) scale(1.2);
transition: transform .4s;
}
}
}
}
input {
max-width: 100%;
width: fit-content;