Update npm scripts.

Added openssl-legacy-provider.
Updated styling.
Added Cover Selection.
Added Task Editing in Real Time.

package.json

@@ -4,9 +4,9 @@
   "private": true,
   "homepage": "./",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
+    "lint": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
   },
   "main": "./src/main.js",
   "dependencies": {

src/App.vue

@@ -6,11 +6,12 @@
         <!-- Background (webm's) -->
         <div id="gamediv" class="apply-font game-size">
           <div id="gamebackground" class="game-size">
-            <video v-if="levels[currentLevel].background" loop autoplay muted :src="levels[currentLevel].background"></video>
+            <video v-if="currentLevel != 0" loop autoplay muted :src="levels[currentLevel].background"></video>
+            <video v-if="currentLevel == 0" loop autoplay muted :src="gamecovers[currentcover].coverbackground"></video>
           </div>
 
-          <!-- Foreground (png's) -->
-          <v-card id="gameforegound" class="game-size" :img="levels[currentLevel].foreground">
+          <!-- Level Foreground (png's) -->
+          <v-card v-if="currentLevel != 0" id="gameforegound" class="game-size" :img="levels[currentLevel].foreground">
 
             <!-- Triggered Overlay (gif's) -->
             <div id-="gameoverlay" class="game-size"
@@ -47,7 +48,50 @@
                   </v-col>
                 </v-row>
               </v-container>
-            </v-card-text><v-card-text v-else></v-card-text></v-card></div>
+            </v-card-text><v-card-text v-else></v-card-text></v-card>
+
+          <!-- Cover Foreground (png's) -->
+          <v-card v-if="currentLevel == 0" id="gameforegound" class="game-size" :img="gamecovers[currentcover].coverforeground">
+
+            <!-- Triggered Overlay (gif's) -->
+            <div id-="gameoverlay" class="game-size"
+                 :style="{
+              backgroundImage: 'url(' + overlayimg + ')',
+              backgroundSize: 'cover',
+              }"
+                 v-if="showoverlay">
+            </div>
+
+            <!-- Countdown Timer -->
+            <div id="timer" class="game-size" v-if="showtimer">
+              <base-timer
+                  :timeLimit="timer"
+                  :afterTimer="stoptimer"
+              ></base-timer>
+            </div>
+
+            <!-- Player Score -->
+            <template v-if="currentLevel != 0">
+              <v-card-title class="score"> Score: {{ score }}</v-card-title>
+            </template>
+
+            <!-- Task Description -->
+            <v-card-text v-if="currentLevel > 0" style="height: 400px;">
+              <v-container class="task" @click="completetask">
+                <v-row align="center" style="height: 300px;">
+                  <v-col :class="{ completed: levels[currentLevel].completed }">
+                    {{ levels[currentLevel].task }}
+                    <br />
+                    <br />
+                    <v-icon x-large color="green" v-if="levels[currentLevel].completed">mdi-check</v-icon>
+                    {{ levels[currentLevel].points }} Points
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card-text><v-card-text v-else></v-card-text></v-card>
+        </div>
+
+
 
         <!-- Task Skip Scroller -->
         <div id="levelselect"> <v-virtual-scroll item-height="36" :items="levels">
@@ -93,26 +137,42 @@
             </v-list-item>
             <v-divider />
           </template>
-        </v-virtual-scroll></div>
+        </v-virtual-scroll>
+          <!-- Font Picker Combobox -->
+          <font-picker id="fontpicker"
+                       v-if="true"
+                       style=""
+                       :api-key="'AIzaSyDwe8tl4YMbg8asbjzbXDDFuxzR1Wm9EQ0'"
+                       :options="options"
+                       :active-font="fontFamily"
+                       @change="fontChanged">
+          </font-picker>
+        </div>
+
 
         <!-- Main Game Controls -->
         <div id="gamecontrol">
           <div class="subgamecontrols">
-            <!-- Rest Game Button -->
-            <v-btn id="resetbutton" medium color="error" @click="reset">Reset</v-btn>
-            <!-- Previous Level Button -->
-            <v-btn id="prevbutton" medium :disabled="currentLevel < 1" @click="previouslevel">Prev Level</v-btn>
-            <!-- Next Level Button -->
-            <v-btn id="nextbutton" medium :disabled="currentLevel >= levels.length - 1" @click="nextlevel">Next Level</v-btn>
-            <!-- Font Picker Combobox -->
-            <font-picker id="fontpicker"
-                         v-if="true"
-                         style=""
-                         :api-key="'AIzaSyDwe8tl4YMbg8asbjzbXDDFuxzR1Wm9EQ0'"
-                         :options="options"
-                         :active-font="fontFamily"
-                         @change="fontChanged"
-            ></font-picker>
+            <v-row class="subgamecontrols">
+              <!-- Rest Game Button -->
+              <v-btn id="resetbutton" medium color="error" @click="reset">Reset</v-btn>
+              <!-- Previous Level Button -->
+              <v-btn id="prevbutton" medium :disabled="currentLevel < 1" @click="previouslevel">Prev Level</v-btn>
+              <!-- Next Level Button -->
+              <v-btn id="nextbutton" medium :disabled="currentLevel >= levels.length - 1" @click="nextlevel">Next Level</v-btn>
+              <!-- Select Cover -->
+              <v-col class="pt-0 pb-0 mt-0 mb-0">
+                <v-select
+                    dense
+                    :items="gamecovers"
+                    v-model="cover"
+                    item-text="covername"
+                    item-value="index"
+                    @input="changecover"
+                >
+                </v-select>
+              </v-col>
+            </v-row>
           </div>
           <v-divider class="divider"></v-divider>
 
@@ -125,6 +185,15 @@
             </v-col>
           </v-row>
           <v-divider class="divider"></v-divider>
+          <!-- Other Task Skip Buttons -->
+          <v-row class="subgamecontrols pt-0 pb-0 mb-0">
+            <v-col class="pt-0 pb-0 mt-0 mb-0" :cols="12">
+              <template v-for="(l,i) in levels">
+                <v-btn class="skiptaskbutton" :key="i" v-if="l.jumptask && l.jumptask.type=='other'" @click="leveljump(l.index)" small rounded color="success">{{ l.jumptask.name }}</v-btn>
+              </template>
+            </v-col>
+          </v-row>
+          <v-divider class="divider"></v-divider>
           <!-- Toy Task Skip Buttons -->
           <v-row class="subgamecontrols pt-0 pb-0 mb-0">
             <v-col class="pt-0 pb-0 mt-0 mb-0" :cols="12">
@@ -185,6 +254,16 @@
               <v-btn v-else x-small @click="stoptimer">Stop</v-btn>
             </v-col>
           </v-row>
+          <!-- Custom Task Button -->
+          <v-row v-if="currentLevel !== 0">
+            <v-col cols="10">
+              <v-text-field dense v-model="levels[currentLevel].task" label="Current Task"
+                            placeholder="Current Task"></v-text-field>
+            </v-col>
+            <v-col cols="2">
+              <v-btn x-small dense @click="reset_task">X</v-btn>
+            </v-col>
+          </v-row>
         </div>
 
       </v-container>
@@ -206,16 +285,25 @@ export default {
   beforeMount: function() {},
   mounted: function() {
     this.reset();
+    this.resetcover()
   },
   methods: {
     copycomp: function() {
       navigator.clipboard.writeText(this.levels[this.currentLevel].compliment)
     },
+    resetcover: function() {
+      for (var x = 0; x < this.gamecovers.length; x++) {
+        this.gamecovers[x].index = x;
+      }
+    },
+    reset_task: function() {
+      this.levels[this.currentLevel].task = "";
+      this.levels[this.currentLevel].completed = false;
+    },
     reset: function() {
       this.currentLevel = 0;
       this.score = 0;
       this.currenttask = 0;
-      this.name = "";
       for (var x = 0; x < this.levels.length; x++) {
         this.levels[x].completed = false;
         this.levels[x].index = x;
@@ -248,7 +336,7 @@ export default {
     },
     givebonuspoints: function() {
       this.score += parseInt(this.bonuspoints);
-      this.overlayimg = "assets/bonuspoints.png";
+      this.overlayimg = "assets/00Extras/bonuspoints.png";
       this.showoverlay = true;
       setTimeout(this.stopoverlay, 2000);
     },
@@ -257,6 +345,13 @@ export default {
       this.currentLevel = i;
       this.ready = true;
     },
+    changecover: function() {
+      this.ready = false;
+      this.currentcover = this.cover;
+      this.currentforeground = this.gamecovers[this.currentcover].background;
+      this.ready = true;
+      this.reset();
+    },
     stopoverlay: function() {
       this.showoverlay = false;
     },
@@ -283,11 +378,18 @@ export default {
         limit: 200,
       },
       fontFamily: "Abel",
+
+      gamecovers: [
+        { covername: "Sample 1", coverforeground: "assets/00Covers/samplegame1.png", coverbackground: "assets/00Covers/samplegame1.webm" },
+        { covername: "Sample 2", coverforeground: "assets/00Covers/samplegame2.png", coverbackground: "assets/00Covers/samplegame2.webm" },
+        { covername: "Sample 3", coverforeground: "assets/00Covers/samplegame3.png", coverbackground: "assets/00Covers/samplegame3.webm" },
+      ],
+
       levels: [
         {
           title: "START - Cover",
-          foreground: "assets/gamecover.png",
-          background: "assets/gamebackground.webm",
+          foreground: "",
+          background: "",
           task: "",
           points: 0,
         },
@@ -783,14 +885,14 @@ export default {
         {
           title: "SPOON - Task 3",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webmspoon03.webm",
+          background: "",
           task: "Task 3",
           points: 2000,
         },
         {
           title: "HAIRBRUSH - Task 1",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm118.webm",
+          background: "",
           task: "Task 1",
           points: 2000,
           jumptask: {
@@ -801,21 +903,21 @@ export default {
         {
           title: "HAIRBRUSH - Task 2",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm119.webm",
+          background: "",
           task: "Task 2",
           points: 2000,
         },
         {
           title: "HAIRBRUSH - Task 3",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm120.webm",
+          background: "",
           task: "Task 3",
           points: 2000,
         },
         {
           title: "BELT - Task 1",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm134.webm",
+          background: "",
           task: "Task 1",
           points: 2000,
           jumptask: {
@@ -826,21 +928,21 @@ export default {
         {
           title: "BELT - Task 2",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm135.webm",
+          background: "",
           task: "Task 2",
           points: 2000,
         },
         {
           title: "BELT - Task 3",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm136.webm",
+          background: "",
           task: "Task 3",
           points: 2000,
         },
         {
           title: "BOTTLE - Task 1",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm137.webm",
+          background: "",
           task: "Task 1",
           points: 2000,
           jumptask: {
@@ -851,21 +953,21 @@ export default {
         {
           title: "BOTTLE - Task 2",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm138.webm",
+          background: "",
           task: "Task 2",
           points: 2000,
         },
         {
           title: "BOTTLE - Task 3",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm139.webm",
+          background: "",
           task: "Task 3",
           points: 2000,
         },
         {
           title: "VEG - Task 1",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm137a.webm",
+          background: "",
           task: "Task 1",
           points: 2000,
           jumptask: {
@@ -876,21 +978,21 @@ export default {
         {
           title: "VEG - Task 2",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm137b.webm",
+          background: "",
           task: "Task 2",
           points: 2000,
         },
         {
           title: "VEG - Task 3",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm137c.webm",
+          background: "",
           task: "Task 3",
           points: 2000,
         },
         {
           title: "TRUTH - Question 1",
-          foreground: "assets/truthbonus.png",
-          background: "",
+          foreground: "assets/white.png-trans.png",
+          background: "assets/00Extras/truthbonus.webm",
           task: "Question 1",
           points: 100,
           jumptask: {
@@ -900,8 +1002,8 @@ export default {
         },
         {
           title: "TRUTH - Question 2",
-          foreground: "assets/truthbonus.png",
-          background: "",
+          foreground: "assets/white.png-trans.png",
+          background: "assets/00Extras/truthbonus.webm",
           task: "Question 2",
           points: 100,
           jumptask: {
@@ -911,8 +1013,8 @@ export default {
         },
         {
           title: "TRUTH - Question 3",
-          foreground: "assets/truthbonus.png",
-          background: "",
+          foreground: "assets/white.png-trans.png",
+          background: "assets/00Extras/truthbonus.webm",
           task: "Question 3",
           points: 100,
           jumptask: {
@@ -923,16 +1025,19 @@ export default {
         {
           title: "YOU WON!! HIGHEST SCORE!",
           foreground: "assets/white.png-trans.png",
-          background: "assets/webm129.webm",
+          background: "assets/00Extras/truthbonus.webm",
           task: "YOU WON! You have completed everything!  Do something EXTRA crazy CUMMMMM HARDDD!!",
           points: 2000,
         },
       ],
-      /*overlayselect: "",*/
+      overlayselect: "",
       levelselect: "",
       currentLevel: 0,
       score: 0,
       currenttask: 0,
+      currentcover: 0,
+      currentforeground: "assets/00Extras/gamecover1.png",
+      cover: "",
       name: "",
       autonext: false,
       ready: false,

src/style.css

@@ -65,8 +65,8 @@ video {
     padding: 20px;
     font-size: 50px;
     font-weight: bolder;
-    color: fuchsia;
-    justify-content: flex-end;
+    color: #644af1;
+    justify-content: center;
 }
 
 #levelselect {
@@ -106,7 +106,7 @@ video {
 }
 
 #resetbutton {
-
+    margin-left: 15px;
 }
 
 #prevbutton {
@@ -118,7 +118,8 @@ video {
 }
 
 #fontpicker {
-    margin-left: 50px;
+    margin-top: 10px;
+    margin-left: 30px;
 }
 .skiptaskbutton {
     margin-right: 5px;