Feature images

package.json

@@ -15,6 +15,7 @@
     "@types/katex": "^0.16.0",
     "@vue/test-utils": "^2.2.7",
     "axios": "^1.7.4",
+    "buffer": "^6.0.3",
     "highlight.js": "^11.7.0",
     "katex": "^0.16.10",
     "marked": "^4.3.0",

src/App.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from "vue";
 import backgroundMusicSource from "@/assets/music/background_music.mp3";
 import { MemoryController } from "@/types/memory-controller";
 
@@ -15,8 +15,9 @@ let backgroundMusic: HTMLAudioElement;
  * Lifecycle hook that runs when the component is mounted
  */
 onMounted(async () => {
-  await memoryController.fetchData();
-  backgroundMusic = memoryController.createAudioWithVolume(backgroundMusicSource);
+  backgroundMusic = memoryController.createAudioWithVolume(
+    backgroundMusicSource
+  );
 
   backgroundMusic.loop = true;
   backgroundMusic.play();

src/components/ContentModal.vue

@@ -10,9 +10,10 @@
       <img
         alt="image"
         id="modal-image"
-        :src="cardData.content"
+        :src="cardData.imageURL"
         class="img-responsive"
         v-else-if="isImage"
+        loading="eager"
       />
       <!-- Markdown content is displayed if the card type is MARKDOWN -->
       <div id="markdown" v-else-if="isMarkdown" v-html="markdownContent"></div>
@@ -52,7 +53,6 @@ const isMarkdown = ref(props.cardData.type == CardType.MARKDOWN);
  */
 const markdownContent = computed(() => marked(props.cardData.content));
 
-
 /**
  * Run onMounted hook to initialize syntax highlighting when the component is mounted
  */

src/components/GamePanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- Button to navigate back to the start page -->
+  <!-- Button to navigate back to the start page -->
   <button class="goback-button" @click="redirectToStartPage()">
     <span>Go Back</span>
   </button>
@@ -11,6 +11,7 @@
     transmitted.
   </div>
   <!-- Game panel with memory game cards and summary -->
+  <div style="display: contents" v-if="showGame">
   <div id="game-panel">
     <!-- Memory panel with the grid of cards -->
     <div id="memory-panel" class="shadowed-panel" @click="manualReset">
@@ -44,26 +45,30 @@
       </div>
     </div>
     <!-- Modal for displaying detailed content of a card -->
-    <ContentModal v-if="showModal" :cardData="modalContent">
+    <ContentModal v-if="showModal" :cardData="modalContent" @click.self="closeModal()">
       <button id="close-button" @click="closeModal">Close</button>
     </ContentModal>
   </div>
+  </div>
+  <div class="container">
+    <b>loading ...</b>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { computed, onMounted, ref, watch } from "vue";
+import {computed, nextTick, onMounted, ref, watch} from "vue";
 import MemoryCard from "./MemoryCard.vue";
 import ContentModal from "./ContentModal.vue";
 import PairItem from "./PairItem.vue";
 import { CardData, CardPair, CardSelection } from "@/types/data-models";
 import { MemoryController } from "@/types/memory-controller";
 import store from "@/store/index";
-import triumphSound from '@/assets/music/trumpets.mp3';
-import swipeSoundSource from '@/assets/music/swipe_sound.mp3';
-import successSoundSource from '@/assets/music/success_sound.mp3';
-import clickSoundSource from '@/assets/music/click_sound.mp3';
-import wrongAnswerSoundSource from '@/assets/music/wrong_answer_sound.mp3';
+import triumphSound from "@/assets/music/trumpets.mp3";
+import swipeSoundSource from "@/assets/music/swipe_sound.mp3";
+import successSoundSource from "@/assets/music/success_sound.mp3";
+import clickSoundSource from "@/assets/music/click_sound.mp3";
+import wrongAnswerSoundSource from "@/assets/music/wrong_answer_sound.mp3";
 
 const router = useRouter();
 const cards = ref([] as CardData[]);
@@ -75,11 +80,11 @@ const hasPostError = ref();
 const hasConfigError = ref();
 let memoryController: MemoryController;
 let gameStarted = ref();
+let showGame = ref(false);
 const isFinished = computed(
-  () => foundPairs.value.length == cards.value.length / 2
+  () => ((foundPairs.value.length == cards.value.length / 2) && showGame.value)
 );
 
-
 /**
  * Watches for game state change to handle configuration error
  */
@@ -112,6 +117,9 @@ onMounted(async () => {
   memoryController = new MemoryController();
   cards.value = (await memoryController.fetchData()).cards;
   gameStarted.value = true;
+  setTimeout(() => {
+    showGame.value = true;
+  }, 2000)
 });
 
 /**
@@ -235,11 +243,10 @@ function redirectToStartPage() {
  * Function to play sounds
  * @param pathToAudioFile
  */
-function playSound(pathToAudioFile: string){
+function playSound(pathToAudioFile: string) {
   const sound = memoryController.createAudioWithVolume(pathToAudioFile);
   sound.play();
 }
-
 </script>
 
 <style scoped>
@@ -390,4 +397,10 @@ function playSound(pathToAudioFile: string){
   font-size: 500%;
   z-index: 999;
 }
+.container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>

src/components/MemoryCard.vue

@@ -24,7 +24,7 @@
         <img
           alt="image not available"
           id="image"
-          :src="cardContent.content"
+          :src="cardContent.imageURL"
           v-else-if="isImage"
           draggable="false"
         />
@@ -53,15 +53,13 @@ import "katex/dist/katex.min.css";
 import clickSoundSource from "@/assets/music/click_sound.mp3";
 import { MemoryController } from "@/types/memory-controller";
 
-
 const memoryController = new MemoryController();
 let clickSound: HTMLAudioElement;
 
 /**
  * onMounted lifecycle hook to fetch data and initialize audio
  */
 onMounted(async () => {
-  await memoryController.fetchData();
   clickSound = memoryController.createAudioWithVolume(clickSoundSource);
 });
 const props = defineProps({
@@ -128,7 +126,7 @@ watch(
 /**
  * Function to play the click sound
  */
-function playClickSound(){
+function playClickSound() {
   clickSound.play();
 }
 </script>
@@ -236,4 +234,3 @@ function playClickSound(){
   display: block;
 }
 </style>
-

src/components/PairItem.vue

@@ -19,7 +19,6 @@
         :canFlip="false"
         :initiallyRevealed="true"
         @openModal="$emit('openModal', pair.card2)"
-
       />
     </div>
   </div>
@@ -41,7 +40,6 @@ defineProps({
 });
 </script>
 
-
 <style scoped>
 /* Style for the container holding both card containers */
 #container {

src/components/StartGameScene.vue

@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 import { useRoute, useRouter } from "vue-router";
-import clickSoundSource from '@/assets/music/click_sound.mp3';
+import clickSoundSource from "@/assets/music/click_sound.mp3";
 import { MemoryController } from "@/types/memory-controller";
 import { onMounted } from "vue";
 
@@ -32,7 +32,6 @@ const memoryController = new MemoryController();
 let clickSound: HTMLAudioElement;
 
 onMounted(async () => {
-  await memoryController.fetchData();
   clickSound = memoryController.createAudioWithVolume(clickSoundSource);
 });
 
@@ -62,7 +61,7 @@ function closeGame() {
 /**
  * Plays the click sound
  */
-function playClickSound(){
+function playClickSound() {
   clickSound.play();
 }
 
@@ -71,9 +70,9 @@ function playClickSound(){
  */
 async function handleCloseGame() {
   await playClickSound();
-    setTimeout(() => {
-      closeGame();
-    }, 500);
+  setTimeout(() => {
+    closeGame();
+  }, 500);
 }
 </script>
 

src/shims-vue.d.ts

@@ -4,4 +4,4 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
-declare module '*.mp3';
+declare module "*.mp3";