feat(GameOptions): Options for game repartition. Closes #123

antoinezanardi · Feb 16, 2021 · 48468c1 · 48468c1
1 parent 0f85c37
commit 48468c1
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 110 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### 🚀 New features
 
 * [#121](https://github.com/antoinezanardi/werewolves-assistant-web/issues/121) - Add option for raven mark penalty.
+* [#123](https://github.com/antoinezanardi/werewolves-assistant-web/issues/123) - Options for game repartition.
 * [#124](https://github.com/antoinezanardi/werewolves-assistant-web/issues/124) - Add guard protection on little girl option.
 * [#125](https://github.com/antoinezanardi/werewolves-assistant-web/issues/125) - Add idiot dies on ancient death option.
 
@@ -31,7 +32,8 @@
 * `@vue/test-utils` updated to version `1.1.3`.
 * `chai` updated to version `4.3.0`.
 * `eslint` updated to version `7.20.0`.
-* `sweetalert2` updated to version `10.14.1`.
+* `eslint-plugin-vue` updated to version `7.6.0`.
+* `sweetalert2` updated to version `10.15.0`.
 * `vue-gtag` updated to version `1.11.0`.
 
 ---

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.vue b/src/App.vue
@@ -51,9 +51,9 @@ export default {
                 this.$error.display(err);
             }
         },
-        showGameOptionsModal() {
+        showGameOptionsModal(options) {
             if (this.$refs.navBar) {
-                this.$refs.navBar.showGameOptionsModal();
+                this.$refs.navBar.showGameOptionsModal(options);
             }
         },
     },

diff --git a/src/classes/UserPreferences.js b/src/classes/UserPreferences.js
@@ -2,13 +2,14 @@ import { getProp } from "@/helpers/functions/Class";
 
 class UserPreferences {
     constructor() {
-        const localUserPreferences = localStorage.getItem("userPreferences");
+        const localUserPreferences = JSON.parse(localStorage.getItem("userPreferences"));
         this.game = {
             repartition: {
-                forbiddenRoles: getProp(localUserPreferences, "game.repartition.forbidden-roles", []),
+                forbiddenRoles: getProp(localUserPreferences, "game.repartition.forbiddenRoles", []),
                 areRecommendedMinPlayersRespected: getProp(localUserPreferences, "game.repartition.areRecommendedMinPlayersRespected", true),
                 arePowerfulVillagerRolesPrioritized: getProp(localUserPreferences, "game.repartition.arePowerfulVillagerRolesPrioritized", true),
                 arePowerfulWerewolfRolesPrioritized: getProp(localUserPreferences, "game.repartition.arePowerfulWerewolfRolesPrioritized", false),
+                isProTipShown: getProp(localUserPreferences, "game.repartition.isProTipShown", true),
             },
         };
     }

diff --git a/src/components/GameLobby/GameLobby.vue b/src/components/GameLobby/GameLobby.vue
@@ -41,7 +41,9 @@
                     </div>
                     <div class="row my-2">
                         <div class="col-12 text-center">
-                            <button class="btn btn-outline-primary btn-sm" @click.prevent="$emit('show-game-options-modal')">
+                            <button ref="showGameOptionsModalButton" class="btn btn-outline-primary btn-sm"
+                                    :class="{ 'animate__animated animate__heartBeat': gameOptionsModalButton.isHighlighted }"
+                                    @click.prevent="$emit('show-game-options-modal')">
                                 <i class="fa fa-dice mr-2"/>
                                 <span v-html="$t('GameLobby.gameOptions')"/>
                             </button>
@@ -159,6 +161,8 @@ export default {
                 createGame: false,
                 getGameRepartition: false,
             },
+            gameRepartitionRequestCount: 0,
+            gameOptionsModalButton: { isHighlighted: false },
             playerName: "",
         };
     },
@@ -187,6 +191,25 @@ export default {
             };
         },
     },
+    watch: {
+        gameRepartitionRequestCount(value) {
+            if (value === 3 && this.userPreferences.game.repartition.isProTipShown) {
+                const options = {
+                    icon: "exclamation-circle", duration: 7000,
+                    action: [
+                        {
+                            text: this.$t("GameLobby.seeOptions"),
+                            onClick: this.highlightAndSeeGameRepartitionOptions,
+                        }, {
+                            text: this.$t("GameLobby.dontShowMeAgain"),
+                            onClick: this.hideGameRepartitionProTipForever,
+                        },
+                    ],
+                };
+                this.$toasted.info(this.$t("GameLobby.youCanChangeGameRepartitionOptions"), options);
+            }
+        },
+    },
     async created() {
         try {
             await this.setGame(new Game());
@@ -206,7 +229,10 @@ export default {
         }
     },
     methods: {
-        ...mapActions("user", { checkUserAuthentication: "checkUserAuthentication" }),
+        ...mapActions("user", {
+            checkUserAuthentication: "checkUserAuthentication",
+            setPreferenceGameRepartitionIsProTipShown: "setPreferenceGameRepartitionIsProTipShown",
+        }),
         ...mapActions("game", {
             setGame: "setGame",
             setGamePlayers: "setGamePlayers",
@@ -242,6 +268,7 @@ export default {
             } catch (e) {
                 this.$error.display(e);
             } finally {
+                this.gameRepartitionRequestCount++;
                 this.loading.getGameRepartition = false;
             }
         },
@@ -285,6 +312,18 @@ export default {
         showRolePickerModal(player) {
             this.$refs.gameLobbyRolePickerModal.show(player);
         },
+        highlightAndSeeGameRepartitionOptions(e, toastObject) {
+            toastObject.goAway(0);
+            this.gameOptionsModalButton.isHighlighted = true;
+            setTimeout(() => {
+                this.gameOptionsModalButton.isHighlighted = false;
+                this.$emit("show-game-options-modal", { panel: "game-repartition-options" });
+            }, 1000);
+        },
+        hideGameRepartitionProTipForever(e, toastObject) {
+            toastObject.goAway(0);
+            this.setPreferenceGameRepartitionIsProTipShown(false);
+        },
     },
 };
 </script>