Add ability to count down

pomo/Cargo.lock

@@ -172,6 +172,7 @@ name = "pomo"
 version = "0.1.0"
 dependencies = [
  "sycamore",
+ "wasm-bindgen",
 ]
 
 [[package]]

pomo/Cargo.toml

@@ -7,3 +7,4 @@ edition = "2021"
 
 [dependencies]
 sycamore = "0.6.3"
+wasm-bindgen = "0.2.78"

pomo/src/components.rs

@@ -0,0 +1,44 @@
+use sycamore::prelude::*;
+use crate::interval::{set_interval, clear_interval};
+use wasm_bindgen::closure::Closure;
+
+#[component(WorkingView<G>)]
+pub fn working_view() -> Template<G> {
+    let time_left = Signal::new(1500);
+    let id = Signal::new(0i32);
+
+    let cb = Closure::wrap(Box::new(cloned!((time_left) => move || {
+        let time = *time_left.get();
+        time_left.set(time - 1);
+    })) as Box<dyn Fn()>);
+
+    id.set(set_interval(&cb, 1_000));
+
+    on_cleanup(cloned!((id) => move || {
+        clear_interval(*id.get());
+    }));
+
+    cb.forget();
+
+    template! {
+        p {
+            (format_time(*time_left.get()))
+        }
+    }
+}
+
+fn format_time(seconds_left: u32) -> String {
+    let minutes = (seconds_left / 60) % 60;
+    let seconds = seconds_left % 60;
+
+    format!("{}:{}", add_leading_zeroes(minutes), add_leading_zeroes(seconds))
+}
+
+fn add_leading_zeroes(num: u32) -> String {
+    if num < 10 {
+        format!("0{}", num)
+    } else {
+        // quick and easy string making
+        format!("{}", num)
+    }
+}

pomo/src/interval.rs

@@ -0,0 +1,9 @@
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_name = setInterval)]
+    pub fn set_interval(closure: &Closure<dyn Fn()>, time: u32) -> i32;
+    #[wasm_bindgen(js_name = clearInterval)]
+    pub fn clear_interval(id: i32);
+}

pomo/src/main.rs

@@ -1,9 +1,19 @@
+mod components;
+mod interval;
+
 use sycamore::prelude::*;
 
+#[allow(unused)]
+enum AppMode {
+    Working,
+    Break
+}
+
 fn main() {
     sycamore::render(|| template! {
         div(class="wrapper") {
-            h1(style="text-align: center") { "Hello, World!" }
+            h1(style="text-align: center") { "Pomo" }
+            components::WorkingView()
         }
     });
 }