Evan AlmloffandJonathan Kelley
519ec9d294
* add a default head method through eval * remove the old document trait * implement document for each platform * pull out document into a dedicated crate to cut down on shared dependencies --------- Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>
46 lines
1.1 KiB
Rust
46 lines
1.1 KiB
Rust
//! A simple little clock that updates the time every few milliseconds.
|
|
//!
|
|
|
|
use async_std::task::sleep;
|
|
use dioxus::prelude::*;
|
|
use web_time::Instant;
|
|
|
|
const STYLE: &str = asset!("./examples/assets/clock.css");
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
let mut millis = use_signal(|| 0);
|
|
|
|
use_future(move || async move {
|
|
// Save our initial timea
|
|
let start = Instant::now();
|
|
|
|
loop {
|
|
sleep(std::time::Duration::from_millis(27)).await;
|
|
|
|
// Update the time, using a more precise approach of getting the duration since we started the timer
|
|
millis.set(start.elapsed().as_millis() as i64);
|
|
}
|
|
});
|
|
|
|
// Format the time as a string
|
|
// This is rather cheap so it's fine to leave it in the render function
|
|
let time = format!(
|
|
"{:02}:{:02}:{:03}",
|
|
millis() / 1000 / 60 % 60,
|
|
millis() / 1000 % 60,
|
|
millis() % 1000
|
|
);
|
|
|
|
rsx! {
|
|
document::Link { rel: "stylesheet", href: STYLE }
|
|
div { id: "app",
|
|
div { id: "title", "Carpe diem 🎉" }
|
|
div { id: "clock-display", "{time}" }
|
|
}
|
|
}
|
|
}
|