Merge pull request #8 from Cadiac/feature/multiple-games-state-refactor

Feature/multiple games state refactor
La-Lojban · Jan 22, 2022 · f9befc2 · f9befc2
2 parents 95d4e31 + 1b8080e
commit f9befc2
Show file tree

Hide file tree

Showing 10 changed files with 900 additions and 669 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,22 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+
+## v1.8 - 2022-01-22
+
+### Added
+- User can now switch between different game modes and settings without losing the old game state or streaks
+- Lots of internal refactoring to how game state is persisted
+
+### Changed
+- Profanities are now disallowed by default
+- Streaks are now per game mode, and you can no longer cheat and restart the word by changing settings
+    - This unfortunately also means that some users will lose their current streak if daily game mode was the last selected mode. Sorry.
+
+### Fixed
+- Animation when sixth word is correct and new game is started
+
+
 ## v1.7 - 2022-01-16
 
 ### Added

diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -11,10 +11,16 @@ serde_scan = "0.4.1"
 rand = "0.8.4"
 getrandom = { version = "0.2", features = ["js"] }
 wasm-bindgen = "0.2.78"
+serde_json = "1.0"
+gloo-storage = "0.2.0"
+
+[dependencies.serde]
+version = "1.0"
+features = ["derive"]
 
 [dependencies.chrono]
 version = "0.4"
-features = ["wasmbind"]
+features = ["wasmbind", "serde"]
 
 [dependencies.web-sys]
 version = "0.3"

diff --git a/src/components/header.rs b/src/components/header.rs
@@ -34,7 +34,7 @@ pub fn header(props: &Props) -> Html {
         <header>
             <nav onclick={onclick_help} class="title-icon">{"?"}</nav>
             {
-                if props.game_mode == GameMode::DailyWord {
+                if let GameMode::DailyWord(_) = props.game_mode {
                     html! { <h1 class="title">{format!("Päivän sanuli #{}", props.daily_word_number)}</h1> }
                 } else if props.streak > 0 {
                     html! { <h1 class="title">{format!("Sanuli — Putki: {}", props.streak)}</h1> }

diff --git a/src/components/keyboard.rs b/src/components/keyboard.rs
@@ -117,7 +117,7 @@ pub fn keyboard(props: &Props) -> Html {
                                 { "ARVAA" }
                             </button>
                         }
-                    } else if props.game_mode == GameMode::DailyWord {
+                    } else if let GameMode::DailyWord(_) = props.game_mode {
                         let callback = props.callback.clone();
                         let onmousedown = Callback::from(move |e: MouseEvent| {
                             e.prevent_default();
@@ -134,7 +134,7 @@ pub fn keyboard(props: &Props) -> Html {
                         let callback = props.callback.clone();
                         let onmousedown = Callback::from(move |e: MouseEvent| {
                             e.prevent_default();
-                            callback.emit(Msg::NewGame);
+                            callback.emit(Msg::NextWord);
                         });
 
                         html! {

diff --git a/src/components/modal.rs b/src/components/modal.rs
@@ -1,11 +1,12 @@
 use yew::prelude::*;
+use chrono::{Local};
 
 use crate::state::{GameMode, WordList, Theme};
 use crate::Msg;
 
 const FORMS_LINK_TEMPLATE_ADD: &str = "https://docs.google.com/forms/d/e/1FAIpQLSfH8gs4sq-Ynn8iGOvlc99J_zOG2rJEC4m8V0kCgF_en3RHFQ/viewform?usp=pp_url&entry.461337706=Lis%C3%A4yst%C3%A4&entry.560255602=";
 const CHANGELOG_URL: &str = "https://github.com/Cadiac/sanuli/blob/master/CHANGELOG.md";
-const VERSION: &str = "v1.7";
+const VERSION: &str = "v1.8";
 
 macro_rules! onmousedown {
     ( $cb:ident, $msg:expr ) => {
@@ -86,61 +87,73 @@ pub struct MenuModalProps {
 pub fn menu_modal(props: &MenuModalProps) -> Html {
     let callback = props.callback.clone();
 
+    let today = Local::now().naive_local().date();
+
     let toggle_menu = onmousedown!(callback, Msg::ToggleMenu);
     let change_word_length_5 = onmousedown!(callback, Msg::ChangeWordLength(5));
     let change_word_length_6 = onmousedown!(callback, Msg::ChangeWordLength(6));
     let change_game_mode_classic = onmousedown!(callback, Msg::ChangeGameMode(GameMode::Classic));
     let change_game_mode_relay = onmousedown!(callback, Msg::ChangeGameMode(GameMode::Relay));
-    let change_game_mode_daily = onmousedown!(callback, Msg::ChangeGameMode(GameMode::DailyWord));
+    let change_game_mode_daily = onmousedown!(callback, Msg::ChangeGameMode(GameMode::DailyWord(today)));
     let change_word_list_full = onmousedown!(callback, Msg::ChangeWordList(WordList::Full));
     let change_word_list_common = onmousedown!(callback, Msg::ChangeWordList(WordList::Common));
     let change_allow_profanities_yes = onmousedown!(callback, Msg::ChangeAllowProfanities(true));
     let change_allow_profanities_no = onmousedown!(callback, Msg::ChangeAllowProfanities(false));
     let change_theme_dark = onmousedown!(callback, Msg::ChangeTheme(Theme::Dark));
     let change_theme_colorblind = onmousedown!(callback, Msg::ChangeTheme(Theme::Colorblind));
 
+    let is_daily_word = matches!(props.game_mode, GameMode::DailyWord(_));
+
     html! {
         <div class="modal">
             <span onmousedown={toggle_menu} class="modal-close">{"✖"}</span>
-            <div>
-                <label class="label">{"Sanulien pituus:"}</label>
-                <div class="select-container">
-                    <button class={classes!("select", (props.word_length == 5).then(|| Some("select-active")))}
-                        onmousedown={change_word_length_5}>
-                        {"5 merkkiä"}
-                    </button>
-                    <button class={classes!("select", (props.word_length == 6).then(|| Some("select-active")))}
-                        onmousedown={change_word_length_6}>
-                        {"6 merkkiä"}
-                    </button>
-                </div>
-            </div>
-            <div>
-                <label class="label">{"Sanulista:"}</label>
-                <div class="select-container">
-                    <button class={classes!("select", (props.current_word_list == WordList::Common).then(|| Some("select-active")))}
-                        onmousedown={change_word_list_common}>
-                        {"Suppea"}
-                    </button>
-                    <button class={classes!("select", (props.current_word_list == WordList::Full).then(|| Some("select-active")))}
-                        onmousedown={change_word_list_full}>
-                        {"Laaja"}
-                    </button>
-                </div>
-            </div>
-            <div>
-                <label class="label">{"Rumat sanulit:"}</label>
-                <div class="select-container">
-                    <button class={classes!("select", (!props.allow_profanities).then(|| Some("select-active")))}
-                        onmousedown={change_allow_profanities_no}>
-                        {"Ei"}
-                    </button>
-                    <button class={classes!("select", (props.allow_profanities).then(|| Some("select-active")))}
-                        onmousedown={change_allow_profanities_yes}>
-                        {"Kyllä"}
-                    </button>
-                </div>
-            </div>
+            {if !is_daily_word {
+                html! {
+                    <>
+                        <div>
+                            <label class="label">{"Sanulien pituus:"}</label>
+                            <div class="select-container">
+                                <button class={classes!("select", (props.word_length == 5).then(|| Some("select-active")))}
+                                    onmousedown={change_word_length_5}>
+                                    {"5 merkkiä"}
+                                </button>
+                                <button class={classes!("select", (props.word_length == 6).then(|| Some("select-active")))}
+                                    onmousedown={change_word_length_6}>
+                                    {"6 merkkiä"}
+                                </button>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="label">{"Sanulista:"}</label>
+                            <div class="select-container">
+                                <button class={classes!("select", (props.current_word_list == WordList::Common).then(|| Some("select-active")))}
+                                    onmousedown={change_word_list_common}>
+                                    {"Suppea"}
+                                </button>
+                                <button class={classes!("select", (props.current_word_list == WordList::Full).then(|| Some("select-active")))}
+                                    onmousedown={change_word_list_full}>
+                                    {"Laaja"}
+                                </button>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="label">{"Rumat sanulit:"}</label>
+                            <div class="select-container">
+                                <button class={classes!("select", (!props.allow_profanities).then(|| Some("select-active")))}
+                                    onmousedown={change_allow_profanities_no}>
+                                    {"Ei"}
+                                </button>
+                                <button class={classes!("select", (props.allow_profanities).then(|| Some("select-active")))}
+                                    onmousedown={change_allow_profanities_yes}>
+                                    {"Kyllä"}
+                                </button>
+                            </div>
+                        </div>
+                    </>
+                }
+            } else {
+                html! {}
+            }}
             <div>
                 <label class="label">{"Pelimuoto:"}</label>
                 <div class="select-container">
@@ -152,7 +165,7 @@ pub fn menu_modal(props: &MenuModalProps) -> Html {
                         onmousedown={change_game_mode_relay}>
                         {"Sanuliketju"}
                     </button>
-                    <button class={classes!("select", (props.game_mode == GameMode::DailyWord).then(|| Some("select-active")))}
+                    <button class={classes!("select", is_daily_word.then(|| Some("select-active")))}
                         onclick={change_game_mode_daily}>
                         {"Päivän sanuli"}
                     </button>