From cc2c4c6891580d6c091e4ffd5fee82b79b05fae5 Mon Sep 17 00:00:00 2001
From: Jayant Shrivastava <jshrivastava03@gmail.com>
Date: Tue, 16 Apr 2024 10:51:39 -0400
Subject: [PATCH] rules button

---
 Cargo.lock             | 16 ++++++++++++
 Cargo.toml             |  1 +
 src/main.rs            | 58 ++++++++++++++++++++++++++++++++----------
 src/styles.module.scss | 17 +++++++++++++
 styles/bundled.scss    | 17 +++++++++++++
 5 files changed, 95 insertions(+), 14 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index e832aa9..ffc52fb 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -462,6 +462,21 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-storage"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fbc8031e8c92758af912f9bc08fbbadd3c6f3cfcbf6b64cdf3d6a81f0139277a"
+dependencies = [
+ "gloo-utils",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-utils"
 version = "0.2.0"
@@ -1925,6 +1940,7 @@ version = "0.1.0"
 dependencies = [
  "chrono",
  "console_error_panic_hook",
+ "gloo-storage",
  "lazy_static",
  "leptos",
  "rand",
diff --git a/Cargo.toml b/Cargo.toml
index cd74635..ce72fc5 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -12,6 +12,7 @@ stylance = "0.3.0"
 rand = "0.9.0-alpha.1"
 chrono = "0.4.37"
 lazy_static = "1.4.0"
+gloo-storage = "0.3.0"
 
 [package.metadata.stylance]
 
diff --git a/src/main.rs b/src/main.rs
index c2ace9a..f1c9ef8 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -5,15 +5,18 @@ mod trie;
 mod words;
 mod scoring;
 
+use gloo_storage::Storage;
 use leptos::*;
 use stylance::import_crate_style;
 use leptos::logging::log;
 use core::time::Duration;
+use std::ops::Deref;
 use crate::letter_gen::{Generator, LetterGenerator, TestGenerator, MIN_WORD_SIZE};
 use crate::scoring::get_score_single;
 use crate::trie::TrieNode;
 use crate::words::WORDS;
 
+
 import_crate_style!(styles, "./src/styles.module.scss");
 
 // NB: The width variable exists separately in scss as well.
@@ -107,8 +110,8 @@ fn InfoModal(display: ReadSignal<bool>, set_display: WriteSignal<bool>) -> impl
 
             <p
                 class=styles::modal_close
-                 on:mouseup=move |_| { set_display.update(|d| {*d = false}); }
-                 on:touchend=move |ev| {ev.prevent_default();set_display.update(|d| {*d = false}); }
+                 on:mouseup=move |_| { set_wordfall_first_time(); set_display.update(|d| {*d = false}); }
+                 on:touchend=move |ev| { ev.prevent_default(); set_wordfall_first_time(); set_display.update(|d| {*d = false}); }
             >
                 close
             </p>
@@ -121,8 +124,21 @@ fn InfoModal(display: ReadSignal<bool>, set_display: WriteSignal<bool>) -> impl
    }
 }
 
+const WORDFALL_FIRST_TIME: &str = "WORDFALL_FIRST_TIME";
+
+fn set_wordfall_first_time() {
+   let s = gloo_storage::LocalStorage::raw();
+   s.set("WORDFALL_FIRST_TIME", "true").unwrap();
+}
+
 #[component]
 fn App() -> impl IntoView {
+
+
+    let storage = gloo_storage::LocalStorage::raw();
+    logging::log!("{storage:?}");
+    let first_time = storage.get(WORDFALL_FIRST_TIME).unwrap().is_none();
+
     let (gen, set_gen) = create_signal(TestGenerator::new());
     let (grid, set_grid) = create_signal(make_block_vec(set_gen));
     let (current, set_current) = create_signal(GRID_WIDTH / 2);
@@ -133,7 +149,7 @@ fn App() -> impl IntoView {
     let (score, set_score) = create_signal(0);
     let (last_words, set_last_words) = create_signal(vec![]);
     let (words_found, set_words_found) = create_signal(0);
-    let (show_intro_modal, set_show_intro_modal) = create_signal(true);
+    let (show_intro_modal, set_show_intro_modal) = create_signal(first_time);
 
     // Set next letters and num remaining initially.
     create_effect(move |_| {
@@ -382,7 +398,14 @@ fn App() -> impl IntoView {
                     on:touchend=move |ev| {ev.prevent_default(); handle_key_press(KEY_D); }
                 > "➡️"</button>
             </div>
-
+            // RULES
+            <div class=styles::rules>
+                <p
+                    class=styles::rules_text
+                    on:mouseup=move |_| { set_show_intro_modal.update(|show| {*show=true});}
+                    on:touchend=move |ev| {ev.prevent_default(); set_show_intro_modal.update(|show| {*show=true});}
+                >"⇱ Rules"</p>
+            </div>
             // Next chars and remaining count.
             <div class=styles::meta_container>
                 <div class=styles::left_meta>
@@ -404,18 +427,25 @@ fn App() -> impl IntoView {
                 </div>
             </div>
             // Previous words
-            <div>
-                <p class=styles::game_meta_text>{"Previous Words:"}</p>
-                <div class=styles::last_words_indent>
-                    <For
-                        each=last_words
-                        key=|word_with_key| word_with_key.key.clone()
-                        let: wwk
-                    >
-                    <p class=styles::game_meta_text>{format!("{} - {}", wwk.word, get_score_single(wwk.word))}</p>
-                    </For>
+            <div class=styles::meta_container>
+                <div class=styles::left_meta>
+                    <div>
+                        <p class=styles::game_meta_text>{"Previous Words:"}</p>
+                        <div class=styles::last_words_indent>
+                            <For
+                                each=last_words
+                                key=|word_with_key| word_with_key.key.clone()
+                                let: wwk
+                            >
+                            <p class=styles::game_meta_text>{format!("{} - {}", wwk.word, get_score_single(wwk.word))}</p>
+                            </For>
+                        </div>
+                    </div>
+
                 </div>
+
             </div>
+
         </div>
     }
 }
diff --git a/src/styles.module.scss b/src/styles.module.scss
index b459770..624b05c 100644
--- a/src/styles.module.scss
+++ b/src/styles.module.scss
@@ -63,6 +63,23 @@ body {
   margin-right: 0;
 }
 
+.rules {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.rules-text {
+  margin: 10px auto;
+  text-decoration: underline;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.rules-text:hover,
+.rules-text:focus {
+  text-decoration: none;
+  cursor: pointer;
+}
+
 // ARROWS
 .arrow-container {
   margin-top: 10px;
diff --git a/styles/bundled.scss b/styles/bundled.scss
index 25378ba..de65da6 100644
--- a/styles/bundled.scss
+++ b/styles/bundled.scss
@@ -63,6 +63,23 @@ body {
   margin-right: 0;
 }
 
+.rules-94e563a {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.rules-text-94e563a {
+  margin: 10px auto;
+  text-decoration: underline;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.rules-text-94e563a:hover,
+.rules-text-94e563a:focus {
+  text-decoration: none;
+  cursor: pointer;
+}
+
 // ARROWS
 .arrow-container-94e563a {
   margin-top: 10px;