From ea89630b2ae0d98dd0d429ee789da912fe2c8513 Mon Sep 17 00:00:00 2001
From: Yash Karandikar <nerdstep710@gmail.com>
Date: Sat, 11 Dec 2021 11:36:25 -0600
Subject: [PATCH] Track elapsed time

---
 riddlrs/src/main.rs | 45 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/riddlrs/src/main.rs b/riddlrs/src/main.rs
index ed29748..9c9f0e2 100644
--- a/riddlrs/src/main.rs
+++ b/riddlrs/src/main.rs
@@ -23,6 +23,7 @@ enum AppMode {
 struct Props {
     mode: Signal<AppMode>,
     errors: Signal<usize>,
+    time_elapsed: Signal<usize>,
 }
 
 macro_rules! indexmap {
@@ -56,7 +57,7 @@ macro_rules! wasm_import {
         #[wasm_bindgen]
         extern "C" {
             #[wasm_bindgen]
-            pub fn $name($($arg: $type)*) -> $ret;
+            pub fn $name($($arg: $type),*) -> $ret;
         }
     };
     ($name:ident() > $ret:ty) => {
@@ -100,6 +101,8 @@ macro_rules! create_question {
 }
 
 wasm_import!(log(s: String));
+wasm_import!(setInterval(closure: &Closure<dyn FnMut()>, ms: u32) > f64);
+wasm_import!(clearInterval(id: f64));
 
 #[component(QuizComponent<G>)]
 fn quiz_component(props: Props) -> View<G> {
@@ -171,6 +174,7 @@ fn quiz_component(props: Props) -> View<G> {
     let correct = Signal::new(true);
     let errors = props.errors;
     let mode = props.mode;
+    let time_elapsed = props.time_elapsed;
 
     let answer_question = cloned!((index, questions, correct, errors) => move |e: Event| {
         let answer = questions[*index.get()].answer;
@@ -189,6 +193,22 @@ fn quiz_component(props: Props) -> View<G> {
         }
     });
 
+    create_effect(cloned!(time_elapsed => move || {
+        log(format!("{}", time_elapsed.get()));
+    }));
+
+    let cb = Closure::wrap(Box::new(move || {
+        let current_time = *time_elapsed.get();
+        time_elapsed.set(current_time + 1);
+    }) as Box<dyn FnMut()>);
+
+    let id = setInterval(&cb, 1000);
+
+    on_cleanup(move || {
+        clearInterval(id);
+        cb.forget();
+    });
+
     view! {
             div(class="card") {
                 p(class="text-align-center") { (current_prompt.get()) }
@@ -216,6 +236,7 @@ fn quiz_component(props: Props) -> View<G> {
 fn end_game_component(props: Props) -> View<G> {
     let mode = props.mode;
     let errors = props.errors;
+    let time_elapsed = props.time_elapsed;
 
     let (failed, grade) = cloned!(errors => {
         let num_errors = (*errors.get()) as f64;
@@ -226,6 +247,12 @@ fn end_game_component(props: Props) -> View<G> {
         (percentage > 70f64, format!("{:.2}%", 100f64 - percentage))
     });
 
+    let time = format!(
+        "{}:{}",
+        add_leading_zeroes(*time_elapsed.get() / 60),
+        add_leading_zeroes(*time_elapsed.get() % 60)
+    );
+
     let restart = cloned!((mode, errors) => move |_| {
         errors.set(0);
         mode.set(AppMode::Quiz);
@@ -243,6 +270,10 @@ fn end_game_component(props: Props) -> View<G> {
         })
         br
         div(class="text-align-center") {
+            div(class="card text-align-center inline") {
+                p {"Time taken:"}
+                p { (time) }
+            }
             div(class="card text-align-center inline", style="color: red") {
                 p {"Errors:"}
                 p { (errors.get()) }
@@ -257,10 +288,18 @@ fn end_game_component(props: Props) -> View<G> {
     }
 }
 
+fn add_leading_zeroes(num: usize) -> String {
+    if num < 10 {
+        return format!("0{}", num);
+    }
+    return format!("{}", num);
+}
+
 fn main() {
     panic::set_hook(Box::new(console_error_panic_hook::hook));
     let mode = Signal::new(AppMode::Endgame);
     let errors = Signal::new(0usize);
+    let time_elapsed = Signal::new(0usize);
 
     create_effect(cloned!(errors => move || {
         log(format!("{}", errors.get()));
@@ -271,8 +310,8 @@ fn main() {
             div(class="wrapper") {
                 h1(class="text-align-center") { "RiddlRS" }
                 (match *mode.get() {
-                    AppMode::Quiz => view! { QuizComponent(Props { mode: cloned!(mode => mode), errors: cloned!(errors => errors) }) },
-                    _ => view! { EndGameComponent(Props { mode: cloned!(mode => mode), errors: cloned!(errors => errors) }) }
+                    AppMode::Quiz => view! { QuizComponent(Props { mode: cloned!(mode => mode), errors: cloned!(errors => errors), time_elapsed: cloned!(time_elapsed => time_elapsed) }) },
+                    _ => view! { EndGameComponent(Props { mode: cloned!(mode => mode), errors: cloned!(errors => errors), time_elapsed: cloned!(time_elapsed => time_elapsed) }) }
                 })
             }
         }