adds score display and about page to app

src/App.vue

@@ -6,4 +6,16 @@
 
 <script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
+import { provide, ref} from 'vue';
+
+const gameScores = ref<number[]>([])
+
+const addGameScore = (score: number) => {
+  gameScores.value.push(score)
+}
+
+provide('gameScores', {
+  gameScores, addGameScore
+})
+
 </script>

src/components/PhaserContainer.vue

@@ -5,9 +5,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, onUnmounted, ref, inject } from 'vue'
 import { IonButton } from '@ionic/vue';
 import { launch } from '@/game/game.js';
+import { GameScoresProvider } from '@/types'
+
+// injects addGameScore method
+const { addGameScore } = inject<GameScoresProvider>('gameScores')!;
 
 // binds to the v-if on our button to toggle visibility
 const showButton = ref(true)
@@ -19,6 +23,22 @@ function handleClickStart() {
   // Runs the launch function
   launch();
 }
+
+// adds score when event emitted from Phaser
+function handleGameEnded(event: Event) {
+  const customEvent = event as CustomEvent;
+  addGameScore(customEvent.detail.score);
+}
+
+// adds event listener for gameEnded event
+onMounted(() => {
+  window.addEventListener("gameEnded", handleGameEnded);
+});
+
+// removes event listener for gameEnded event
+onUnmounted(() => {
+  window.removeEventListener("gameEnded", handleGameEnded);
+});
 </script>
 
 <style scoped>

src/game/PlayScene.js

@@ -160,6 +160,13 @@ export class PlayScene extends Scene {
     createBombLoop.destroy();
     this.physics.pause();
 
+    // When the game ends, dispatch the event with the score and rating
+    const gameEndEvent = new CustomEvent("gameEnded", {
+       detail: { score: this.score }
+    });
+
+    window.dispatchEvent(gameEndEvent);
+
     // stops Play Scene and starts Score Scene
 
     this.scene.stop('PlayScene')

src/types.ts

@@ -0,0 +1,4 @@
+export interface GameScoresProvider {
+    gameScores: number[];
+    addGameScore: (score: number) => void;
+  }

src/views/AboutPage.vue

@@ -6,12 +6,11 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <ExploreContainer name="About page" />
+      <h1>This is a game built with Phaser, Vue, Ionic, and Capacitor!</h1>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
-import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>

src/views/ScoresPage.vue

@@ -6,12 +6,24 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <ExploreContainer name="Scores page" />
+      <h3 v-show="!gameScores.length">No scores yet!</h3>
+      <ion-list>
+        <ion-item v-for="(score, index) in gameScores" :key="index">
+          <ion-label>
+            <h2>Score: {{ score }} </h2>
+          </ion-label>
+        </ion-item>
+      </ion-list>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
-import ExploreContainer from '@/components/ExploreContainer.vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel } from '@ionic/vue';
+import { inject } from 'vue'
+import { GameScoresProvider } from '@/types'
+
+// injects gameScores array ref
+const { gameScores } = inject<GameScoresProvider>('gameScores')!;
+
 </script>