font picker

package-lock.json

@@ -5037,6 +5037,22 @@
         }
       }
     },
+    "font-picker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/font-picker/-/font-picker-2.2.1.tgz",
+      "integrity": "sha512-y+WmoTxrpHQB5cXzhETO3opVDvACq108InNV9oC6aLNObq1/FG5MW0N+/MgiY6vObnodNCRsqWJHyEarpRfaWw==",
+      "requires": {
+        "lodash.throttle": "^4.1.1"
+      }
+    },
+    "font-picker-vue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/font-picker-vue/-/font-picker-vue-1.0.3.tgz",
+      "integrity": "sha512-cX3TxdszpjSmN18sKh4egPrkDFptCmSCVDSI4pV/kaBF2WDBpy8s9Fxb4SW4FShv5eIcRAVYWxj3hepfDnp1HA==",
+      "requires": {
+        "font-picker": "^2.0.6"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -7126,6 +7142,11 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "main": "./src/main.js",
   "dependencies": {
     "core-js": "^3.6.4",
+    "font-picker-vue": "^1.0.3",
     "vue": "^2.6.11",
     "vuetify": "^2.2.29"
   },

src/App.vue

@@ -2,7 +2,7 @@
   <v-app>
     <v-content>
       <v-container>
-        <div id="gamediv" style="width: 640px; height: 480px; display: block; position: relative">
+        <div id="gamediv" style="width: 640px; height: 480px; display: block; position: relative" class="apply-font">
           <div style="width: 640px; height: 480px; position: absolute; overflow: hidden;">
             <video loop autoplay muted :src="webmsource"></video>
           </div>
@@ -18,7 +18,7 @@
               v-if="showoverlay"
             ></div>
             <template v-if="currentLevel==0">
-              <v-card-title class="pa-6 font-weight-black levelscore">
+              <v-card-title class="pa-6 font-weight-black levelscore apply-font">
                 High Score: {{ highscore }} by {{ highscorer }}
                 <br />
               </v-card-title>
@@ -140,6 +140,13 @@
                 ></v-select>
                 <v-btn @click="startoverlay">Start Cutscene</v-btn>
               </v-col>
+              <v-col cols="1">
+                <font-picker 
+                  :api-key="'AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs'" 
+                  :options="options" 
+                  :active-font="fontFamily" @change="fontChanged"></font-picker>
+                  </v-col>
+
             </v-row>
           </v-card-text>
         </v-card>
@@ -149,8 +156,14 @@
 </template>
     <script>
 import Vuetify from "vuetify";
+// api key AIzaSyCAW_4WvUsVuikytJw_yvJKxHKRHrCsBAs
+import FontPicker from 'font-picker-vue';
+
 export default {
   vuetify: new Vuetify(),
+  components: {
+    FontPicker
+  },
   beforeMount: function() {
     for (var x = 0; x < this.slides.length; x++) {
       this.slides[x].index = x;
@@ -240,6 +253,11 @@ export default {
     },
     stopoverlay: function() {
       this.showoverlay = false;
+    },
+    fontChanged: function(e) {
+      console.log(e);
+      this.fontFamily=e.family;
+    
     }
   },
   computed: {
@@ -249,6 +267,11 @@ export default {
   },
   data: function() {
     return {
+      options: {
+        sort: 'popularity',
+      },
+      fontFamily: 'Roboto',
+
       overlayimages: [
         { name: "Mask Heart", file: "assets/maskheart.gif" },
         { name: "Fry Dancing", file: "assets/frydancing.gif" },