you shall not pass... or maybe yes

docs/.vuepress/store/index.js

@@ -7,6 +7,8 @@ import monsterFilters from './modules/monsterFilters'
 
 Vue.use(Vuex)
 
+import Cookies from 'js-cookie'
+
 export default new Vuex.Store({
   modules: {
     spellFilters,
@@ -76,6 +78,8 @@ export default new Vuex.Store({
     },
     setIsThemeDark: (state, payload) => {
       state.isThemeDark = payload
+      console.log(payload)
+      Cookies.set('heros-et-dragons-is-dark', state.isThemeDark)
     },
     setIsOpenAboutDialog: (state, payload) => {
       state.isOpenAboutDialog = payload

docs/.vuepress/theme/components/NavDrawer.vue

@@ -99,7 +99,7 @@
           <v-divider/>
           <div class="pa-2 d-flex">
             <v-spacer/>
-            <v-btn @click.stop="$vuetify.theme.dark = !$vuetify.theme.dark" icon>
+            <v-btn @click.stop="setIsThemeDark" icon>
               <v-icon v-html="$vuetify.theme.dark ? 'mdi-brightness-4' : 'mdi-brightness-7'"></v-icon>
             </v-btn>
           </div>
@@ -191,6 +191,10 @@ export default {
     },
     toggleAboutDialog () {
       this.$store.commit('setIsOpenAboutDialog', !this.$store.state.isOpenAboutDialog)
+    },
+    setIsThemeDark () {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      this.$store.commit('setIsThemeDark', this.$vuetify.theme.dark)
     }
   }
 }

docs/.vuepress/theme/components/Navbar.vue

@@ -6,7 +6,7 @@
     </v-toolbar-title>
     <SRDSearchBox v-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
     <v-spacer />
-    <v-btn class="hidden-sm-and-down" @click.stop="$vuetify.theme.dark = !$vuetify.theme.dark" icon>
+    <v-btn class="hidden-sm-and-down" @click.stop="setIsThemeDark" icon>
       <v-icon v-html="$vuetify.theme.dark ? 'mdi-brightness-4' : 'mdi-brightness-7'"></v-icon>
     </v-btn>
     <v-btn class="hidden-sm-and-down" @click.stop="toggleAboutDialog" icon>
@@ -70,6 +70,10 @@ export default {
     },
     toggleAboutDialog () {
       this.$store.commit('setIsOpenAboutDialog', !this.$store.state.isOpenAboutDialog)
+    },
+    setIsThemeDark () {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      this.$store.commit('setIsThemeDark', this.$vuetify.theme.dark)
     }
   },
 

docs/.vuepress/theme/layouts/GlobalLayout.vue

@@ -16,6 +16,27 @@
       </v-container>
     </v-content>
 
+    <v-dialog v-model="shallNotPass" persistent max-width="600">
+      <v-card>
+        <v-card-title class="headline">Meneur de jeu</v-card-title>
+        <v-card-text>
+          <p>Tu te trouves seul dans l'obscurité du repaire du dragon noir. Tu serres ton bâton de magicien entre tes mains et t'apprêtes à réagir à la moindre menace.</p>
+          <p>Que fais-tu ?</p>
+          <v-text-field label="Je veux..." v-model="iWantTo"></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" text @click="setShallPass">Valider</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-bottom-sheet v-model="cookieConsentDialog" persistent>
+      <v-sheet class="text-center" tile>
+        <div class="py-3">Ce site utilise des cookies pour son bon fonctionnement et pour l'analyse de la fréquentation. Sans ces cookies, vous ne pourriez pas écrire vos sorts dans votre grimoire ou recruter tous ces monstres pour garnir votre repaire maléfique.</div>
+        <v-btn class="my-6" color="primary" @click="setCookieConsent">Compris</v-btn>
+      </v-sheet>
+    </v-bottom-sheet>
+
   </v-app>
 </template>
 
@@ -26,6 +47,7 @@ import NavDrawer from '@theme/components/NavDrawer.vue'
 import RightDrawer from '@theme/components/RightDrawer.vue'
 import Vue from 'vue'
 import RuleTooltip from '@theme/global-components/RT'
+import Cookies from 'js-cookie'
 
 export default {
   name: 'GlobalLayout',
@@ -39,6 +61,9 @@ export default {
 
   data () {
     return {
+      shallNotPass: true,
+      iWantTo: null,
+      cookieConsentDialog: true,
     }
   },
 
@@ -60,6 +85,22 @@ export default {
 
   mounted () {
     this.$store.commit('setDrawer', this.$vuetify.breakpoint.lgAndUp)
+    const AUTHORIZED = Cookies.get('shallpass')
+    if (AUTHORIZED) {
+      this.shallNotPass = false
+    }
+
+    // Cookie consent
+    const COOKIECONSENT = Cookies.get('heros-et-dragons-cookies')
+    if (COOKIECONSENT == 'compris') {
+      this.cookieConsentDialog = false
+    }
+
+    // Cookie consent
+    const THEMEISDARK = Cookies.get('heros-et-dragons-is-dark')
+    if (THEMEISDARK === 'true') {
+      this.$vuetify.theme.dark = true
+    }
     // this.$vuetify.theme.dark = this.$store.state.isThemeDark
 
     // let conditionLinks = document.links
@@ -79,6 +120,16 @@ export default {
   },
 
   methods: {
+    setShallPass () {
+      if (this.iWantTo == 'Je veux lancer un projectile magique !') {
+        Cookies.set('shallpass', true)
+        this.shallNotPass = false
+      }
+    },
+    setCookieConsent () {
+      Cookies.set('heros-et-dragons-cookies', 'compris')
+      this.cookieConsentDialog = false
+    }
   }
 }
 </script>

package.json

@@ -14,6 +14,7 @@
     "@vuepress/plugin-blog": "^1.9.2",
     "@vuepress/plugin-pwa": "^1.4.1",
     "flexsearch": "nextapps-de/flexsearch",
+    "js-cookie": "^2.2.1",
     "markdown-it-div": "^1.1.0",
     "markdown-it-multimd-table": "^4.0.1",
     "material-design-icons-iconfont": "^5.0.1",

yarn.lock

@@ -4694,6 +4694,11 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
   integrity sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"