Add cookie notice

3 files changed, 46 insertions, 0 deletions

diff --git a/dist/assets/gwenbarf.png b/dist/assets/gwenbarf.png
new file mode 100644
index 0000000..6fa0a36
--- /dev/null
+++ b/dist/assets/gwenbarf.png
diff --git a/src/IntroBox.vue b/src/IntroBox.vue
new file mode 100644
index 0000000..457f9f5
--- /dev/null
+++ b/src/IntroBox.vue
@@ -0,0 +1,42 @@
+<template>
+  <div :class="'notification ' + (hideIntro? 'is-hidden' : '')">
+    <button class="delete" @click="hideIntro = true"></button>
+    <div class="content">
+      <h3>Hi There!</h3>
+        <img style="float: right" class="image is-64x64" src="/dist/assets/gwenbarf.png"></img>
+      <p>
+        Broken Talents Fun will help you find the best Talents for the Vainglory mobile MOBA game.
+        <br />
+        Talents are special boosts for Vainglory's Brawl modes that upgrade and change hero abilities in a variety of different ways.
+        <br />
+        Information on this site has been gathered from a small number of real Vainglory matches.
+        The data can be imprecise and can be contrary to your personal experience.
+      </p>
+      <p>
+        This site shares visitor data with Google Analytics and Google AdSense which store cookies. If you do not want that, you can <a href="https://tools.google.com/dlpage/gaoptout">use the Google Analytics opt out service</a> and <a href="http://www.youronlinechoices.com/">opt out of targeted advertisements</a>.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import RouterParamMixin from './RouterParamMixin';
+
+export default Vue.component('intro-box', {
+  mixins: [ RouterParamMixin ],
+  data: function() {
+    return {
+      hideIntro: !!localStorage.getItem('hideIntro'),
+    };
+  },
+  watch: {
+    hideIntro: function(value) {
+      localStorage.setItem('hideIntro', value);
+    },
+    selectedMode: function(value) {
+      this.hideIntro = !!localStorage.getItem('hideIntro');
+    },
+  },
+});
+</script>
diff --git a/src/ModeTab.vue b/src/ModeTab.vue
index 09bc343..681b219 100644
--- a/src/ModeTab.vue
+++ b/src/ModeTab.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    <intro-box></intro-box>
+
     <div class="columns is-multiline">
       <div class="column" v-if="hasTalents">
         <h2 class="title is-2">Highlights</h2>
@@ -37,6 +39,7 @@ import HeroDraftGrid from './HeroDraftGrid.vue';
 import HeroTalentTable from './HeroTalentTable.vue';
 import ReportTable from './ReportTable.vue';
 import RouterParamMixin from './RouterParamMixin';
+import IntroBox from './IntroBox.vue';
 import * as maps from './maps/maps.js';
 
 export default Vue.component('mode-tab', {
@@ -53,6 +56,7 @@ export default Vue.component('mode-tab', {
     HeroDraftGrid,
     HeroTalentTable,
     ReportTable,
+    IntroBox,
   },
 });
 </script>