add feedback form

site/.vuepress/components/CodeList.vue

@@ -1,7 +1,8 @@
 <template>
   <ul>
     <li
-      v-for="code in availableCodes"
+      v-for="(code, idx) in availableCodes"
+      v-bind:key="idx"
       :class="code.selected ? 'checked' : ''"
       @click="toggle(code)"
       @mouseover="inspect(code)"

site/.vuepress/components/DownloadButton.vue

@@ -1,14 +1,17 @@
 <template>
-  <ButtonComponent
+  <div>
-    label="Download"
+    <ButtonComponent
-    :onClick="onClick"
+      label="Download"
-    :disabled="(!codes || codes.length === 0) && !stageLoaderCode"
+      :onClick="onClick"
-  />
+      :disabled="(!codes || codes.length === 0) && !stageLoaderCode"
+    ></ButtonComponent>
+    <FeedbackModal v-if="showFeedbackModal" />
+  </div>
 </template>
 
 <script>
 // Components
-import ButtonComponent from './ButtonComponent';
+import FeedbackModal from './FeedbackModal';
 
 // Data
 import gameVersions from '../data/gameVersions.json';
@@ -23,6 +26,11 @@ export default {
     format: { type: String },
     versionIdentifier: { type: String },
   },
+  data() {
+    return {
+      showFeedbackModal: false,
+    };
+  },
   methods: {
     onClick() {
       if (!(this.codes || this.codes.length === 0) && !this.stageLoaderCode) {
@@ -55,7 +63,7 @@ export default {
         ]);
       } catch {}
 
-      console.log(`Preparing download for ${this.format}`);
+      console.log(`Preparing jdownload for ${this.format}`);
       const fileName = gameVersions.find((v) => v.identifier === this.versionIdentifier).version;
 
       switch (this.format) {
@@ -69,6 +77,10 @@ export default {
           this.generateCheatManagerTXT(c, fileName);
           break;
       }
+
+      if (!this.showFeedbackModal) {
+        this.showFeedbackModal = true;
+      }
     },
     generateGCT(codes, version) {
       let code = '00D0C0DE00D0C0DE';

site/.vuepress/components/FeedbackModal.vue

@@ -0,0 +1,95 @@
+<template>
+  <transition v-if="showModal" name="modal">
+    <div class="modal-mask">
+      <div class="modal-wrapper">
+        <div class="modal-container">
+          <div v-if="showModal" class="modal-body">
+            <p>
+              If you have 5 minutes please fill in our
+              <a href="https://forms.gle/WYdGEYARPArd7uYx5" target="_blank">feedback form</a>.
+              Thanks!
+            </p>
+            <div>
+              <ButtonComponent
+                label="Ok"
+                :onClick="
+                  () => {
+                    this.showModal = false;
+                  }
+                "
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+// Components
+import ButtonComponent from './ButtonComponent';
+
+export default {
+  name: 'FeedbackModal',
+  data() {
+    return {
+      showModal: false,
+    };
+  },
+  mounted() {
+    if (localStorage.getItem('feedback-modal-displayed') !== 'y') {
+      this.showModal = true;
+      localStorage.setItem('feedback-modal-displayed', 'y');
+    }
+  },
+};
+</script>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+  transition: opacity 0.3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 300px;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.modal-body {
+  margin: 20px 0;
+}
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>

site/.vuepress/components/Generator.vue

@@ -99,15 +99,6 @@
 </template>
 
 <script>
-// Components
-import VersionSelect from './VersionSelect';
-import FormatSelect from './FormatSelect';
-import SelectComponent from './SelectComponent';
-import StageLoader from './StageLoader';
-import CodeInfo from './CodeInfo';
-import CodeList from './CodeList';
-import DownloadButton from './DownloadButton';
-
 // Data
 import gameVersions from '../data/gameVersions.json';
 

site/.vuepress/components/GroupSelectComponent.vue

@@ -4,9 +4,14 @@
       <option v-if="placeholder != null" value="placeholder" selected disabled>
         {{ placeholder }}
       </option>
-      <optgroup v-for="optGroup in optGroups" :label="getLabel(optGroup.label)">
+      <optgroup
+        v-for="(optGroup, oIdx) in optGroups"
+        v-bind:key="oIdx"
+        :label="getLabel(optGroup.label)"
+      >
         <option
-          v-for="option in optGroup.options"
+          v-for="(option, iIdx) in optGroup.options"
+          v-bind:key="iIdx"
           :value="option.value"
           :selected="selectedValue && option.value === selectedValue"
         >

site/.vuepress/components/SelectComponent.vue

@@ -5,7 +5,8 @@
         {{ placeholder }}
       </option>
       <option
-        v-for="option in options"
+        v-for="(option, idx) in options"
+        v-bind:key="idx"
         :value="option.value"
         :selected="selectedValue && option.value === selectedValue"
       >

site/.vuepress/components/StageLoader.vue

@@ -42,18 +42,16 @@
           ghost-class="ghost"
           @end="onDragEnd"
         >
-          <li v-for="(level, index) in selectedRoute">
+          <li v-for="(level, idx) in selectedRoute" v-bind:key="idx">
             <div class="route-drag">&#8801;</div>
 
             <GroupSelectComponent
               :selectedValue="level.value"
               :optGroups="stageLoaderLevelOptions"
-              :onChange="(e) => onStageLoaderLevelChanged(index, e)"
+              :onChange="(e) => onStageLoaderLevelChanged(idx, e)"
-              :key="index"
+              :key="idx"
             />
-            <button @click="onLevelDeleted(index)" type="button" class="route-remove">
+            <button @click="onLevelDeleted(idx)" type="button" class="route-remove">&#215;</button>
-              &#215;
-            </button>
           </li>
         </draggable>
       </ul>

site/.vuepress/components/VersionCards.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="wrapper">
-    <div v-for="version in gameVersions" class="card" @click="onCardClick(version)">
+    <div
+      v-for="(version, idx) in gameVersions"
+      v-bind:key="idx"
+      class="card"
+      @click="onCardClick(version)"
+    >
       <h3>{{ getLabel(`common.${version.identifier}`) }}</h3>
     </div>
   </div>
@@ -22,8 +27,6 @@ export default {
   },
   methods: {
     onCardClick(v) {
-      const localePaths = Object.keys(locales);
-
       let localePath = '';
 
       Object.keys(locales).forEach((l) => {

site/.vuepress/enhanceApp.js

@@ -9,8 +9,10 @@ export default ({
   options, // the options for the root Vue instance
   router, // the router instance for the app
   siteData, // site metadata
+  isServer,
 }) => {
-  if (typeof document === 'undefined') return;
+  if (isServer) return;
+
   document.onreadystatechange = () => {
     if (document.readyState === 'complete') {
       if (location.hash && location.hash.length > 0) {