Fixed question layer selection in game page

src/server/websocket/handler.js

@@ -161,7 +161,7 @@ exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
         break;
       case "selectBoardEntry":
         if( socket.locals.isHost ){
-          let message = `BoardEntry ${payload.boardEntryIndex} selected`;
+          let message = `BoardEntry ${payload.boardEntryIndex} selected in Category ${payload.categoryIndex}`;
           let sendingData = { categoryIndex: payload.categoryIndex, boardEntryIndex: payload.boardEntryIndex };
           sendAllPlayers( socket, gameSocketList, "boardEntrySelected", message, sendingData );
           resolve();

src/webapp/components/pages/Create.vue

@@ -245,6 +245,7 @@ if( route.params.boardId !== undefined ){
               :board="gameCreationStore.board"
               :cIndex="categoryIndex"
               :bEIndex="boardEntryIndex"
+              :questionIndex="questionIndex"
               :isQuestionRevealed="showingQuestion"
               :isAnswerRevealed="showingAnswer"
               :showingBottomView="showingBottomView"

src/webapp/components/pages/Game.vue

@@ -39,7 +39,7 @@ const API_URL = `${protocol}${hostname}/api`;
 let categoryIndex = ref( -1 );
 let boardEntryIndex = ref( -1 );
 let selectedObject = ref( null );
-let questionIndexForAudio = ref(0);
+let questionIndex = ref(0);
 let audioInstance = ref(null);
 let showingAnswer = ref( false );
 let showingQuestion = ref( false );
@@ -77,6 +77,7 @@ function boardSelected(){
 function selectBoardEntryWithCategory( cIndex, entryIndex ){
   categoryIndex.value = cIndex;
   boardEntryIndex.value = entryIndex;
+  questionIndex.value = 0;
   selectedObject.value = gameStore.board.categories[cIndex].boardEntries[entryIndex];
 }
 
@@ -116,7 +117,7 @@ function setUpListeners(){
   });
   gameStore.addSocketListener("audioPlaying", ( _data ) => {
     if( !audioInstance.value ){
-      let audioUrl = API_URL + '/game/file/' + gameStore.board.categories[categoryIndex.value].boardEntries[boardEntryIndex.value].questions[questionIndexForAudio.value].filename;
+      let audioUrl = API_URL + '/game/file/' + gameStore.board.categories[categoryIndex.value].boardEntries[boardEntryIndex.value].questions[questionIndex.value].filename;
       audioInstance.value = new Audio( audioUrl );
       audioInstance.value.onended = (_event) => {
         audioInstance.value = null;
@@ -205,6 +206,9 @@ function setUpListeners(){
   gameStore.addSocketListener("playerCanChoose", ( data ) => {
     gameStore.setPlayerOnIndexChoosing( data.payload.choosingPlayer );
   });
+  gameStore.addSocketListener("questionLayerSelected", ( data ) => {
+    questionIndex.value = Number( data.payload.questionIndex );
+  });
 }
 
 function playerBuzzered( data ){
@@ -249,6 +253,10 @@ function boardEntryClicked( cIndex, entryIndex ){
   }
 }
 
+function specificQuestionLayerSelected( qIndex ){
+  gameStore.sendEvent("selectQuestionLayer", { questionIndex: qIndex });
+}
+
 function buzzerPressed(){
   if( gameStore.acceptAnswers ){
     gameStore.sendEvent( "pressBuzzer", {} );
@@ -262,7 +270,7 @@ function answerTextUpdated( updatedText ){
 }
 
 function playAudio( _cIndex, _bEIndex, qIndex ){
-  questionIndexForAudio.value = Number(qIndex);
+  questionIndex.value = Number(qIndex);
   gameStore.sendEvent("playAudioForQuestion", {} );
 }
 
@@ -418,6 +426,7 @@ onBeforeRouteLeave((to, from) => {
               :board="gameStore.board"
               :cIndex="categoryIndex"
               :bEIndex="boardEntryIndex"
+              :questionIndex="questionIndex"
               :showingBottomView="true"
               :isHost="gameStore.isHost"
               :isPlayerChoosing="gameStore.isPlayerChoosing"
@@ -435,6 +444,7 @@ onBeforeRouteLeave((to, from) => {
               @stopAudio="stopAudio"
               @questionAnswered="questionAnswered"
               @questionAnsweredRevert="questionAnsweredRevert"
+              @specificQuestionLayerSelected="specificQuestionLayerSelected"
             />
           </div>
         </div>

src/webapp/components/views/BoardEntryView.vue

@@ -9,6 +9,7 @@ const props = defineProps({
   categoryName: String,
   cIndex: Number,
   bEIndex: Number,
+  questionIndex: Number,
   isHost: {
     type: Boolean,
     default: false,
@@ -80,6 +81,7 @@ function stopAudio(){
       <QuestionView
       :cIndex="props.cIndex"
       :bEIndex="props.bEIndex"
+      :questionIndex="props.questionIndex"
       :questions="boardEntry.questions"
       :board="props.board"
       :isHost="props.isHost"

src/webapp/components/views/GameView.vue

@@ -9,6 +9,7 @@ const props = defineProps({
   board: Object,
   cIndex: Number,
   bEIndex: Number,
+  questionIndex: Number,
   showingBottomView: Boolean,
   isHost: {
     type: Boolean,
@@ -135,6 +136,7 @@ watch(
         <BoardEntryView
           :cIndex="props.cIndex"
           :bEIndex="props.bEIndex"
+          :questionIndex="props.questionIndex"
           :board="props.board"
           :isHost="props.isHost"
           :isQuestionRevealed="props.isQuestionRevealed"

src/webapp/components/views/QuestionView.vue

@@ -8,6 +8,7 @@ const props = defineProps({
   board: Object,
   cIndex: Number,
   bEIndex: Number,
+  questionIndex: Number,
   isHost: {
     type: Boolean,
     default: false,
@@ -16,7 +17,6 @@ const props = defineProps({
 
 let emit = defineEmits(["specificQuestionLayerSelected", "playAudio", "stopAudio"])
 
-let selectedIndex = ref(0);
 const imageRef = ref([]);
 let route = useRoute();
 let gameCreationStore = useGameCreationStore();
@@ -31,21 +31,15 @@ const API_URL = `${protocol}${hostname}/api`;
 
 
 let getImageInGameCreationStore = computed( () => {
-  return gameCreationStore.images.find( imageEntry => imageEntry.cIndex === props.cIndex && imageEntry.bEIndex === props.bEIndex && imageEntry.qIndex === selectedIndex.value );
+  return gameCreationStore.images.find( imageEntry => imageEntry.cIndex === props.cIndex && imageEntry.bEIndex === props.bEIndex && imageEntry.qIndex === props.questionIndex );
 })
 
 function specificLayerSelected( index ){
-  selectedIndex.value = index;
-  nextTick( () => {
-    if( imageRef.value[0] ){
-      imageRef.value[0].src = API_URL + '/game/file/' + props.questions[selectedIndex.value].filename;
-    }
-  });
   emit("specificQuestionLayerSelected", index );
 }
 
 function playAudio(){
-  emit("playAudio", props.cIndex, props.bEIndex, selectedIndex.value );
+  emit("playAudio", props.cIndex, props.bEIndex, props.questionIndex );
 }
 
 
@@ -56,17 +50,16 @@ function stopAudio(){
 
 onMounted( () => {
   if( imageRef.value[0] ){
-    imageRef.value[0].src = API_URL + '/game/file/' + props.questions[selectedIndex.value].filename;
+    imageRef.value[0].src = API_URL + '/game/file/' + props.questions[props.questionIndex].filename;
   }
-})
+});
 
 watch(
-  () => props.bEIndex,
+  () => props.questionIndex,
   ( _newVal, _oldVal ) => {
-    selectedIndex.value = 0;
     nextTick( () => {
       if( imageRef.value[0] ){
-        imageRef.value[0].src = API_URL + '/game/file/' + props.questions[selectedIndex.value].filename;
+        imageRef.value[0].src = API_URL + '/game/file/' + props.questions[props.questionIndex].filename;
       }
     });
   }
@@ -76,7 +69,7 @@ watch(
 
 <template>
   <template v-for="(question, questionIndex) in props.questions" :key="questionIndex">
-    <div v-if="selectedIndex === questionIndex" class="d-flex flex-column justify-content-center align-items-center h-100 w-100">
+    <div v-if="props.questionIndex === questionIndex" class="d-flex flex-column justify-content-center align-items-center h-100 w-100">
       <h1 class="text-center" :class="[{ 'white-space-show-nl': question.questionType === 'multilineQuestion'}]">
         {{ question.questionText }}
       </h1>
@@ -105,7 +98,7 @@ watch(
     <div v-if="props.questions.length > 1 && props.isHost" class="d-flex justify-content-start align-items-center position-absolute bottom-0 start-0 ms-3 mb-3">
       <template v-for="(question, questionIndex) in props.questions" :key="questionIndex">
         <div>
-          <button class="btn btn-sm m-1 py-1" :class="[{'btn-pink-accent-primary': selectedIndex === questionIndex }, {'btn-outline-pink-accent-primary': selectedIndex !== questionIndex }]" :disabled="selectedIndex === questionIndex" @click="specificLayerSelected( questionIndex )">
+          <button class="btn btn-sm m-1 py-1" :class="[{'btn-pink-accent-primary': props.questionIndex === Number(questionIndex) }, {'btn-outline-pink-accent-primary': props.questionIndex !== questionIndex }]" :disabled="props.questionIndex === questionIndex" @click="specificLayerSelected( questionIndex )">
             {{ questionIndex + 1 }}
           </button>
         </div>

src/webapp/stores/GameStore.js

@@ -271,6 +271,8 @@ export const useGameStore = defineStore('game', {
       this.players = [];
       this.board = new Board( undefined, "New Board", []);
       this.acceptAnswers =  false;
+      this.isPlayerChoosing = false;
+      this.chosenEntry = undefined;
     },
     closeWebSocket(){
       this.websocketConnection.close();
@@ -311,6 +313,9 @@ export const useGameStore = defineStore('game', {
           this.players = data.payload.players;
         }
       });
+      this.addSocketListener("payloadIncomplete", ( data ) => {
+        console.error("Invalid or Incomplete Payload!");
+      });
     }
   },
 })