dioxus/examples/svg.rs
2022-03-04 14:29:45 -05:00

101 lines
2.7 KiB
Rust

// Thanks to @japsu and their project https://github.com/japsu/jatsi for the example!
use dioxus::{events::MouseEvent, prelude::*};
fn main() {
dioxus::desktop::launch(app);
}
fn app(cx: Scope) -> Element {
let val = use_state(&cx, || 5);
cx.render(rsx! {
div {
user_select: "none",
webkit_user_select: "none",
margin_left: "10%",
margin_right: "10%",
h1 { "Click die to generate a new value" }
div {
cursor: "pointer",
height: "80%",
width: "80%",
Die {
value: **val,
keep: true,
onclick: move |_| {
use rand::Rng;
let mut rng = rand::thread_rng();
val.set(rng.gen_range(1..6));
}
}
}
}
})
}
#[derive(Props)]
pub struct DieProps<'a> {
pub value: u64,
pub keep: bool,
pub onclick: EventHandler<'a, MouseEvent>,
}
const DOTS: [(i64, i64); 7] = [(-1, -1), (-1, -0), (-1, 1), (1, -1), (1, 0), (1, 1), (0, 0)];
const DOTS_FOR_VALUE: [[bool; 7]; 6] = [
[false, false, false, false, false, false, true],
[false, false, true, true, false, false, false],
[false, false, true, true, false, false, true],
[true, false, true, true, false, true, false],
[true, false, true, true, false, true, true],
[true, true, true, true, true, true, false],
];
const OFFSET: i64 = 600;
const DOT_RADIUS: &str = "200";
const HELD_COLOR: &str = "#aaa";
const UNHELD_COLOR: &str = "#ddd";
// A six-sided die (D6) with dots.
#[allow(non_snake_case)]
pub fn Die<'a>(cx: Scope<'a, DieProps<'a>>) -> Element {
let &DieProps { value, keep, .. } = cx.props;
let active_dots = &DOTS_FOR_VALUE[(value - 1) as usize];
let fill = if keep { HELD_COLOR } else { UNHELD_COLOR };
let dots = DOTS
.iter()
.zip(active_dots.iter())
.filter(|(_, &active)| active)
.map(|((x, y), _)| {
let dcx = x * OFFSET;
let dcy = y * OFFSET;
rsx!(circle {
cx: "{dcx}",
cy: "{dcy}",
r: "{DOT_RADIUS}",
fill: "#333"
})
});
rsx!(cx,
svg {
onclick: move |e| cx.props.onclick.call(e),
prevent_default: "onclick",
"dioxus-prevent-default": "onclick",
class: "die",
view_box: "-1000 -1000 2000 2000",
rect {
x: "-1000",
y: "-1000",
width: "2000",
height: "2000",
rx: "{DOT_RADIUS}",
fill: "{fill}",
}
dots
}
)
}