Updated Dependencies; Added webp/avif support; adjust buzzer activation timings; always show question to host

src/webapp/components/blocks/ChangeProfilePicture.vue

@@ -81,8 +81,8 @@ function handleModalButtonClick( buttonIndex ){
         <div class="col-auto border-start">
             <div class="h-100 d-flex flex-column justify-content-evenly">
                 <div>
-                    <label class="form-label fs-5" for="question-image">Upload new profile picture</label>
-                    <input ref="imageInput" class="form-control bg-dark-blue" type="file" name="question-image" id="question-image" @change="newImageUploaded" accept="image/*">
+                    <label class="form-label fs-5" for="question-image">Upload new profile picture <span style="font-size: 0.6em;">(max. 2MB)</span></label>
+                    <input ref="imageInput" class="form-control bg-dark-blue" type="file" name="question-image" id="question-image" @change="newImageUploaded" accept="image/jpeg, image/jpg, image/png, image/gif, image/webp, image/avif">
                 </div>
                 <div>
                     <button class="btn btn-pink-accent-primary me-3" :disabled="uploadedFileObj === null" @click="saveProfilePicture">

src/webapp/components/pages/Game.vue

@@ -68,17 +68,21 @@ function boardSelected(){
   selectedObject.value = gameStore.board;
   categoryIndex.value = -1;
   boardEntryIndex.value = -1;
+  gameStore.acceptAnswers = false;
+  for(const playerIdx in gameStore.players ){
+    gameStore.players[playerIdx].isAnswering = false;
+  }
 }
 function selectBoardEntryWithCategory( cIndex, entryIndex ){
   categoryIndex.value = cIndex;
   boardEntryIndex.value = entryIndex;
   questionIndex.value = 0;
   selectedObject.value = gameStore.board.categories[cIndex].boardEntries[entryIndex];
+  gameStore.acceptAnswers = true;
 }
 
 function setUpListeners(){
   gameStore.addSocketListener("boardEntrySelected", ( data ) => {
-    gameStore.acceptAnswers = false;
     showingAnswer.value = false;
     showingQuestion.value = false;
     selectBoardEntryWithCategory( data.payload.categoryIndex, data.payload.boardEntryIndex );
@@ -134,11 +138,9 @@ function setUpListeners(){
     }
   });
   gameStore.addSocketListener("questionRevealed", ( _data ) => {
-    gameStore.acceptAnswers = true;
     showingQuestion.value = true;
   });
   gameStore.addSocketListener("questionHidden", ( _data ) => {
-    gameStore.acceptAnswers = false;
     showingQuestion.value = false;
   });
   gameStore.addSocketListener("answerRevealed", ( _data ) => {
@@ -314,7 +316,7 @@ function questionAnsweredRevert( cIndex, bEIndex ){
 
 function manualPointsAdjustment( playerId, playerName, points ){
   let payload = {
-    reopenQuestion: false,
+    reopenQuestion: gameStore.acceptAnswers,
     playerId: playerId,
     playerName: playerName,
     pointsAdjustment: points,

src/webapp/components/pages/Lobby.vue

@@ -116,9 +116,8 @@ onBeforeRouteLeave((to, from) => {
             Start Game
           </span>
           <font-awesome-layers class="ms-1" fixed-width>
-            <font-awesome-icon icon="fa-solid fa-square" size="xl" />
-            <font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-play" size="sm" />
-            <!-- <font-awesome-icon class="align-middle border-dark rounded" icon="fa-solid fa-play" border /> -->
+            <font-awesome-icon icon="fa-solid fa-square" size="xl"/>
+            <font-awesome-icon class="text-pink-accent-primary ms-1" icon="fa-solid fa-play" />
           </font-awesome-layers>
         </button>
       </div>

src/webapp/components/views/BoardEditView.vue

@@ -13,7 +13,7 @@ function addCategoryButtonClicked(_event){
   if( newCategoryName.value === "" ){
     return;
   }
-  let category = new Category( newCategoryName.value, "New Category", [] );
+  let category = new Category( newCategoryName.value, "", [] );
   gameCreationStore.$patch((state)=>{
     state.board.categories.push( category );
   })

src/webapp/components/views/BoardEntryEditView.vue

@@ -151,12 +151,12 @@ watch(
                       </template>
                     </div>
                     <div v-if="question.questionType === 'imageQuestion'">
-                      <label class="form-label fs-4 mt-3" for="question-image">Question Image</label>
-                      <input class="form-control bg-dark-blue" type="file" name="question-image" id="question-image" @change="onQuestionImageChanged( questionIndex, $event )" accept="image/jpeg, image/jpg, image/png, image/gif, audio/mpeg">
+                      <label class="form-label fs-4 mt-3" for="question-image">Question Image <span style="font-size: 0.5em;">(max. 2MB)</span></label>
+                      <input class="form-control bg-dark-blue" type="file" name="question-image" id="question-image" @change="onQuestionImageChanged( questionIndex, $event )" accept="image/jpeg, image/jpg, image/png, image/gif, image/webp, image/avif">
                     </div>
                     <div v-if="question.questionType === 'audioQuestion'">
-                      <label class="form-label fs-4 mt-3" for="question-audio">Question Audio</label>
-                      <input ref="questionImageInput" class="form-control bg-dark-blue" type="file" name="question-audio" id="question-audio" @change="onQuestionAudioChanged( questionIndex, $event )" accept="image/jpeg, image/jpg, image/png, image/gif, audio/mpeg">
+                      <label class="form-label fs-4 mt-3" for="question-audio">Question Audio <span style="font-size: 0.5em;">(max. 2MB)</span></label>
+                      <input ref="questionImageInput" class="form-control bg-dark-blue" type="file" name="question-audio" id="question-audio" @change="onQuestionAudioChanged( questionIndex, $event )" accept="audio/mpeg">
                     </div>
                     <div class="row mt-3">
                       <div class="col-xxl-4 col-12 mb-1 px-1">
@@ -194,8 +194,8 @@ watch(
           <input v-model="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerText" class="form-control bg-dark-blue" type="text">
         </div>
         <div v-if="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerType === 'imageAnswer'">
-          <label class="form-label fs-4 mt-3" for="answer-image">Answer Image</label>
-          <input ref="answerImageInput" class="form-control bg-dark-blue" type="file" name="answer-image" id="answer-image" @change="onAnswerImageChanged" accept="image/jpeg, image/jpg, image/png, image/gif, audio/mpeg">
+          <label class="form-label fs-4 mt-3" for="answer-image">Answer Image <span style="font-size: 0.5em;">(max. 2MB)</span></label>
+          <input ref="answerImageInput" class="form-control bg-dark-blue" type="file" name="answer-image" id="answer-image" @change="onAnswerImageChanged" accept="image/jpeg, image/jpg, image/png, image/gif, image/webp, image/avif">
         </div>
       </div>
     </div>

src/webapp/components/views/BoardEntryView.vue

@@ -77,7 +77,7 @@ function stopAudio(){
 
 <template>
   <div class="container-fluid h-100 d-flex justify-content-center align-items-center">
-    <div v-show="showingQuestion" class="w-100 h-100">
+    <div v-show="showingQuestion || props.isHost" class="w-100 h-100">
       <QuestionView
       :cIndex="props.cIndex"
       :bEIndex="props.bEIndex"
@@ -85,6 +85,7 @@ function stopAudio(){
       :questions="boardEntry.questions"
       :board="props.board"
       :isHost="props.isHost"
+      :isBeingShown="showingQuestion"
       @specificQuestionLayerSelected="specificQuestionLayerSelected"
       @playAudio="playAudio"
       @stopAudio="stopAudio"

src/webapp/components/views/QuestionView.vue

@@ -12,7 +12,8 @@ const props = defineProps({
   isHost: {
     type: Boolean,
     default: false,
-  }
+  },
+  isBeingShown: Boolean,
 });
 
 let emit = defineEmits(["specificQuestionLayerSelected", "playAudio", "stopAudio"])
@@ -69,7 +70,7 @@ watch(
 
 <template>
   <template v-for="(question, questionIndex) in props.questions" :key="questionIndex">
-    <div v-if="props.questionIndex === 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" :class="[{'opacity-50': props.isHost && !props.isBeingShown}]">
       <h1 class="text-center" :class="[{ 'white-space-show-nl': question.questionType === 'multilineQuestion'}]">
         {{ question.questionText }}
       </h1>