From 2a1d1859a88565744af7db503aeba69181159d1d Mon Sep 17 00:00:00 2001 From: EisiBaer Date: Tue, 18 Jul 2023 18:08:11 +0200 Subject: [PATCH] Fixed question layer selection in game page --- src/server/websocket/handler.js | 2 +- src/webapp/components/pages/Create.vue | 1 + src/webapp/components/pages/Game.vue | 16 +++++++++--- .../components/views/BoardEntryView.vue | 2 ++ src/webapp/components/views/GameView.vue | 2 ++ src/webapp/components/views/QuestionView.vue | 25 +++++++------------ src/webapp/stores/GameStore.js | 5 ++++ 7 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/server/websocket/handler.js b/src/server/websocket/handler.js index c20c662..561eb02 100644 --- a/src/server/websocket/handler.js +++ b/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(); diff --git a/src/webapp/components/pages/Create.vue b/src/webapp/components/pages/Create.vue index dd831a5..69e457f 100644 --- a/src/webapp/components/pages/Create.vue +++ b/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" diff --git a/src/webapp/components/pages/Game.vue b/src/webapp/components/pages/Game.vue index 0f43903..4c0f6f7 100644 --- a/src/webapp/components/pages/Game.vue +++ b/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" /> diff --git a/src/webapp/components/views/BoardEntryView.vue b/src/webapp/components/views/BoardEntryView.vue index 327fb43..a15d474 100644 --- a/src/webapp/components/views/BoardEntryView.vue +++ b/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(){ { - 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(