feat: add ability to manage game status and navigate between minigames

Author: bencodezen

js/src/components/MiniGame.vue

@@ -20,9 +20,16 @@ export default defineComponent({
       }
     }
 
+    const returnToGameStatus = () => {
+      ctx.emit('select-minigame', {
+        id: ''
+      })
+    }
+
     return {
       ...toRefs(state),
-      checkPassword
+      checkPassword,
+      returnToGameStatus
     }
   }
 })
@@ -41,6 +48,9 @@ export default defineComponent({
       @keyup.enter="checkPassword"
     />
     <button type="submit" @click="checkPassword">Submit</button>
+    <div>
+      <button @click="returnToGameStatus">Back to Game Status</button>
+    </div>
   </section>
 </template>
 

js/src/components/MiniGame2.vue

@@ -28,6 +28,12 @@ export default defineComponent({
       state.userSequence = []
     }
 
+    const returnToGameStatus = () => {
+      ctx.emit('select-minigame', {
+        id: ''
+      })
+    }
+
     watchEffect(() => {
       if (state.userSequence.length === 3) {
         checkColorSequence()
@@ -37,7 +43,8 @@ export default defineComponent({
     return {
       ...toRefs(state),
       addColorToSequence,
-      colorOptions
+      colorOptions,
+      returnToGameStatus
     }
   }
 })
@@ -60,6 +67,7 @@ export default defineComponent({
         {{ color }}
       </button>
     </div>
+    <button @click="returnToGameStatus">Back to Game Status</button>
   </section>
 </template>
 

js/src/components/MiniGame3.vue

@@ -42,13 +42,20 @@ export default defineComponent({
       state.userSelection.selectedWire = colorName
     }
 
+    const returnToGameStatus = () => {
+      ctx.emit('select-minigame', {
+        id: ''
+      })
+    }
+
     return {
       ...toRefs(state),
       checkWireColors,
       registerMatchColor,
       registerWireColor,
       mousePosition,
-      registerPosition
+      registerPosition,
+      returnToGameStatus
     }
   }
 })
@@ -61,9 +68,6 @@ export default defineComponent({
     @mousemove="registerPosition"
   >
     <h1>MiniGame 3</h1>
-    <p>{{ mousePosition }}</p>
-    <p>{{ userSelection }}</p>
-    <p>{{ matchStatus }}</p>
     <div :class="$style.wireboard">
       <div :class="$style.panel">
         <ul>
@@ -77,23 +81,7 @@ export default defineComponent({
           </li>
         </ul>
       </div>
-      <svg
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        xml:space="preserve"
-        style="border: 1px solid red; flex: 1;"
-      >
-        <path
-          class="path2"
-          fill="#01a09e"
-          stroke-width="5"
-          stroke="black"
-          :d="`M0 11 L ${mousePosition.x} ${mousePosition.y - 250}`"
-        />
-      </svg>
+
       <div :class="$style.panel">
         <ul>
           <li
@@ -108,6 +96,7 @@ export default defineComponent({
         </ul>
       </div>
     </div>
+    <button @click="returnToGameStatus">Back to Game Status</button>
   </section>
 </template>
 

js/src/components/MiniGameStatus.vue

@@ -0,0 +1,53 @@
+<script>
+import { reactive, toRefs } from 'vue'
+
+export default {
+  setup(props, ctx) {
+    const state = reactive({
+      minigames: [
+        {
+          id: 'mg-enter-password',
+          label: 'Enter Password'
+        },
+        {
+          id: 'mg-sequence-solver',
+          label: 'Sequence Solver'
+        },
+        {
+          id: 'mg-wire-matcher',
+          label: 'Wire Matcher'
+        }
+      ]
+    })
+
+    const sendSelection = minigame => {
+      ctx.emit('select-minigame', {
+        ...minigame
+      })
+    }
+
+    return {
+      ...toRefs(state),
+      sendSelection
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h2>Mission</h2>
+    <p>Complete all three mini-games to win!</p>
+    <ul>
+      <li
+        v-for="minigame in minigames"
+        :key="minigame.id"
+        @click="sendSelection(minigame)"
+      >
+        {{ minigame.label }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style></style>

js/src/views/SpaceGame.vue

@@ -3,16 +3,19 @@ import { reactive, toRefs } from 'vue'
 import MiniGame from '../components/MiniGame'
 import MiniGame2 from '../components/MiniGame2'
 import MiniGame3 from '../components/MiniGame3'
+import MiniGameStatus from '../components/MiniGameStatus'
 
 export default {
   components: {
     MiniGame,
     MiniGame2,
-    MiniGame3
+    MiniGame3,
+    MiniGameStatus
   },
   setup() {
     const state = reactive({
-      gameStatus: 'Not Started'
+      gameStatus: 'Not Started',
+      selectedGame: 'Tests'
     })
 
     const user = reactive({
@@ -23,13 +26,18 @@ export default {
       state.gameStatus = 'Game Started'
     }
 
+    const registerSelection = payload => {
+      state.selectedGame = payload.id
+    }
+
     const updateUserMiniGame = () => {
       user.miniGamesWon++
     }
 
     return {
       ...toRefs(state),
       ...toRefs(user),
+      registerSelection,
       updateUserMiniGame,
       startGame
     }
@@ -39,16 +47,30 @@ export default {
 
 <template>
   <div>
-    <!-- <h1>Space Game</h1>
+    <h1>Space Game</h1>
     <h2>Game Status</h2>
     <p>{{ gameStatus }}</p>
-    <h2>User Properties</h2> -->
+    <p>Selected Game: {{ selectedGame }}</p>
+    <h2>User Properties</h2>
     <p>Mini-Games Won: {{ miniGamesWon }}</p>
     <div class="game-stage">
       <div class="mini-game-wrapper">
-        <MiniGame v-if="false" @mini-game-won="updateUserMiniGame" />
-        <MiniGame2 v-if="false" @mini-game-won="updateUserMiniGame" />
-        <MiniGame3 @mini-game-won="updateUserMiniGame" />
+        <MiniGame
+          v-if="selectedGame === 'mg-enter-password'"
+          @mini-game-won="updateUserMiniGame"
+          @select-minigame="registerSelection"
+        />
+        <MiniGame2
+          v-else-if="selectedGame === 'mg-sequence-solver'"
+          @mini-game-won="updateUserMiniGame"
+          @select-minigame="registerSelection"
+        />
+        <MiniGame3
+          v-else-if="selectedGame === 'mg-wire-matcher'"
+          @mini-game-won="updateUserMiniGame"
+          @select-minigame="registerSelection"
+        />
+        <MiniGameStatus v-else @select-minigame="registerSelection" />
       </div>
       <div
         class="panel"