Added timer functionality

Reviewed-on: #4
Co-authored-by: Baer <jeobeardy@proton.me>
Co-committed-by: Baer <jeobeardy@proton.me>

Dockerfile

@@ -1,6 +1,6 @@
 # syntax=docker/dockerfile:1
 
-FROM node:19.9.0-alpine
+FROM node:25.9.0-alpine
 WORKDIR /app
 COPY . .
 RUN npm install --production

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jeobeardy",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Jeobeardy (/dʒebeərdi/) is similiar to but not quite like Jeopardy. It is a quiz game where you can create your own boards with categories and then make your friends compete in a fun and interactive way",
   "keywords": [
     "jeobeardy",
@@ -29,40 +29,39 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/fontawesome-svg-core": "~7.2.0",
-    "@fortawesome/free-regular-svg-icons": "6.5.1",
+    "@fortawesome/free-regular-svg-icons": "~7.2.0",
-    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "~7.2.0",
-    "@fortawesome/vue-fontawesome": "3.0.6",
+    "@fortawesome/vue-fontawesome": "~3.1.3",
-    "@popperjs/core": "2.11.8",
+    "@popperjs/core": "~2.11.8",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@vitejs/plugin-vue": "~6.0.5",
-    "archetype": "github:LaurentGoderre/archetype#fix-lodash_set-vuln",
+    "axios": "~1.15.0",
-    "axios": "1.6.7",
+    "bcryptjs": "~3.0.3",
-    "bcryptjs": "2.4.3",
+    "body-parser": "~2.2.2",
-    "body-parser": "1.20.2",
+    "bootstrap": "~5.3.8",
-    "bootstrap": "5.3.3",
+    "connect-history-api-fallback": "~2.0.0",
-    "connect-history-api-fallback": "2.0.0",
+    "connect-mongodb-session": "~5.0.0",
-    "connect-mongodb-session": "5.0.0",
+    "cors": "~2.8.6",
-    "cors": "2.8.5",
+    "dotenv": "~17.4.2",
-    "dotenv": "16.4.5",
+    "express": "~5.2.1",
-    "express": "4.18.2",
+    "express-session": "~1.19.0",
-    "express-session": "1.18.0",
+    "helmet": "~8.1.0",
-    "helmet": "7.1.0",
+    "mongoose": "~9.4.1",
-    "mongoose": "8.2.0",
+    "morgan": "~1.10.1",
-    "morgan": "1.10.0",
+    "multer": "~2.1.1",
-    "multer": "1.4.5-lts.1",
+    "pinia": "~3.0.4",
-    "pinia": "2.1.7",
+    "uuid": "~13.0.0",
-    "uuid": "9.0.1",
+    "vite": "~8.0.8",
-    "vite": "5.1.4",
+    "vue": "~3.5.32",
-    "vue": "3.4.20",
+    "vue-router": "~5.0.4",
-    "vue-router": "4.3.0",
+    "ws": "~8.20.0"
-    "ws": "8.16.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "1.7.2",
+    "@rushstack/eslint-patch": "~1.16.1",
-    "@vue/eslint-config-prettier": "9.0.0",
+    "@vue/eslint-config-prettier": "~10.2.0",
-    "eslint": "8.57.0",
+    "eslint": "~10.2.0",
-    "eslint-plugin-vue": "9.22.0",
+    "eslint-plugin-vue": "~10.8.0",
-    "prettier": "3.2.5",
+    "prettier": "~3.8.2",
-    "sass": "1.71.1"
+    "sass": "~1.99.0"
   }
 }

src/server/controllers/BoardControllerMongoose.js

@@ -54,6 +54,7 @@ exports.addBoard = ( postObject, ownerId ) => {
             ownerId: ownerId,
             name: postObject.boardName,
             categories: postObject.categories,
+            options: postObject.options,
           });
           return newBoard.save();
         } else {

src/server/controllers/GameControllerMongoose.js

@@ -162,7 +162,7 @@ exports.findGameAndAddAnsweredEntry = ( id, categoryIndex, boardEntryIndex ) =>
       categoryIndex: categoryIndex,
       boardEntryIndex: boardEntryIndex,
     }
-    GameModel.findByIdAndUpdate(id, { $addToSet: { "answeredBoardEntries": dbEntry } }, { new: true } ).populate("board")
+    GameModel.findByIdAndUpdate(id, { $addToSet: { "answeredBoardEntries": dbEntry } }, { returnDocument: 'after' } ).populate("board")
     .then( ( game ) => {
       if( game === null ){
         let gameNotFoundError = new Error(`No game found with id "${id}"`);
@@ -187,7 +187,7 @@ exports.findGameAndAddAnsweredEntry = ( id, categoryIndex, boardEntryIndex ) =>
  */
 exports.findGameAndRemoveAnsweredEntry = ( id, categoryIndex, boardEntryIndex ) => {
   return new Promise((resolve, reject) => {
-    GameModel.findByIdAndUpdate(id, { $pull: { answeredBoardEntries: { categoryIndex: categoryIndex, boardEntryIndex: boardEntryIndex } } }, { new: true } ).populate("board")
+    GameModel.findByIdAndUpdate(id, { $pull: { answeredBoardEntries: { categoryIndex: categoryIndex, boardEntryIndex: boardEntryIndex } } }, { returnDocument: 'after' } ).populate("board")
     .then( ( game ) => {
       if( game === null ){
         let gameNotFoundError = new Error(`No game found with id "${id}"`);
@@ -205,7 +205,7 @@ exports.findGameAndRemoveAnsweredEntry = ( id, categoryIndex, boardEntryIndex )
 
 exports.findAcceptingGameAndSetNotAccepting = ( id ) => {
   return new Promise((resolve, reject) => {
-    GameModel.findOneAndUpdate({ _id : id, acceptAnswers: true }, { acceptAnswers: false }, { new: true })
+    GameModel.findOneAndUpdate({ _id : id, acceptAnswers: true }, { acceptAnswers: false }, { returnDocument: 'after' })
       .then((game) => {
         if( game === null){
           resolve( false );
@@ -221,7 +221,7 @@ exports.findAcceptingGameAndSetNotAccepting = ( id ) => {
 
 exports.findGameAndSetAccepting = ( id, isAccepting ) => {
   return new Promise((resolve, reject) => {
-    GameModel.findByIdAndUpdate( id, { acceptAnswers: isAccepting }, { new: true }).populate("players")
+    GameModel.findByIdAndUpdate( id, { acceptAnswers: isAccepting }, { returnDocument: 'after' }).populate("players")
       .then((game) => {
         if( game === null){
           let gameNotFoundError = new Error(`No game found with code "${id}"`);
@@ -264,7 +264,7 @@ exports.setPlayerPointsAndReturnGame = ( gameId, playerId, pointsAdjusted ) => {
           points: pointsAdjusted,
         }
       },
-      { new: true }
+      { returnDocument: 'after' }
     )
     .then( ( player ) => {
       if( player === null ){

src/server/controllers/PlayerControllerMongoose.js

@@ -93,7 +93,7 @@ exports.checkPlayerAcceptAnswers = ( playerId ) => {
  */
 exports.checkPlayerAcceptAnswersAndSetAccepting = ( playerId, canAcceptAfter ) => {
   return new Promise((resolve, reject) => {
-    PlayerModel.findByIdAndUpdate( playerId, { acceptAnswers: canAcceptAfter }, { new: false } )
+    PlayerModel.findByIdAndUpdate( playerId, { acceptAnswers: canAcceptAfter }, { returnDocument: 'before' } )
     .then( ( player ) => {
       if( player ){
         resolve( player.acceptAnswers );

src/server/controllers/UserControllerMongoose.js

@@ -159,7 +159,7 @@ exports.updateProfilePicture = ( userId, pfpFilename ) => {
         }
       })
       .then( () => {
-        return UserModel.findById( userId , {}, { new: true });
+        return UserModel.findById( userId , {}, { returnDocument: 'after' });
       })
       .then( ( user ) => {
         resolve( user );

src/server/models/BoardModel.js

@@ -6,6 +6,7 @@ const BoardSchema = new Schema({
   ownerId: { type: Schema.Types.ObjectId, ref: "User", required: true },
   name: { type: String, required: true, maxLength: 100 },
   categories: { type: [Object], required: false, default: [] },
+  options: { type: Object, required: true, default: { losePointsOnWrong: false, lossMultiplier: 1, onlyOnBuzzer: true } }
 });
 
 // Virtual for player's URL
@@ -17,6 +18,7 @@ BoardSchema.virtual("url").get(function () {
 BoardSchema.virtual("setFromPostObject").set( function( postObject ){
   this.name = postObject.boardName;
   this.categories = postObject.categories;
+  this.options = postObject.options;
 })
 
 // Export model

src/server/routes/UserRouter.js

@@ -12,11 +12,20 @@ const storage = multer.diskStorage({
     destination: (req, file, cb) => {
         cb( null, 'public/uploads' )
     },
+    limits: {
+      fileSize: 1024 * 1024 * 2,
+    },
     filename: (req, file, cb) => {
         let fileExtension = '.jpg';
         if( file.mimetype === 'image/png' ){
             fileExtension = '.png';
         }
+        if( file.mimetype === 'image/webp' ){
+            fileExtension = '.webp';
+        }
+        if( file.mimetype === 'image/avif' ){
+            fileExtension = '.avif';
+        }
         if( file.mimetype === 'image/gif' ){
             fileExtension = '.gif';
         }
@@ -50,13 +59,12 @@ const fileFilterFn = function( req, file, cb ){
         return;
     }
 
-    if( !["image/jpeg","image/jpg","image/png","image/gif","audio/mpeg"].includes( file.mimetype ) ){
+    if( !["image/jpeg","image/jpg","image/png","image/gif","image/webp","image/avif","audio/mpeg"].includes( file.mimetype ) ){
         cb( new Error( "MIME Type not supported!" ) );
         return;
     }
-    
+    if( file.size > 1024 * 1024 * 2){
-    if( file.size > 1024 * 1024 * 5){
+        cb( new Error( "File is too large! Must be less than 2MB" ) );
-        cb( new Error( "File is too large! Must be less than 5MB" ) );
         return;
     }
 

src/server/websocket/handler.js

@@ -161,10 +161,20 @@ exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
         break;
       case "selectBoardEntry":
         if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, true )
+          .then( ( game ) => {
+            return playerController.setAllPlayersAcceptAnswers( game.players.map( playerEntry => playerEntry._id ), true )
+          })
+          .then( () => {
             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();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+          resolve();
         } else {
           reject( new Error("Message not sent by host") );
         }
@@ -235,27 +245,27 @@ exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
         break;
       case "selectBoard":
         if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, false )
+          .then( ( game ) => {
+            return playerController.setAllPlayersAcceptAnswers( game.players.map( playerEntry => playerEntry._id ), false )
+          })
+          .then( () => {
             let message = "Board selected";
             sendAllPlayers( socket, gameSocketList, "boardSelected", message, {});
             resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
         } else {
           reject( new Error("Message not sent by host") );
         }
         break;
       case "showQuestion":
         if( socket.locals.isHost ){
-          gameController.findGameAndSetAccepting( socket.locals.game, true )
-          .then( ( game ) => {
-            return playerController.setAllPlayersAcceptAnswers( game.players.map( playerEntry => playerEntry._id ), true )
-          })
-          .then( () => {
           let message = "Question revealed";
           sendAllPlayers( socket, gameSocketList, "questionRevealed", message, {});
           resolve();
-          })
-          .catch( ( err ) => {
-            reject( err );
-          });
         } else {
           reject( new Error("Message not sent by host") );
         }
@@ -280,15 +290,9 @@ exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
         break;
       case "hideQuestion":
         if( socket.locals.isHost ){
-          gameController.findGameAndSetAccepting( socket.locals.game, false )
-          .then( ( _game ) => {
           let message = "Question hidden";
           sendAllPlayers( socket, gameSocketList, "questionHidden", message, {});
           resolve();
-          })
-          .catch( ( err ) => {
-            reject( err );
-          });
         } else {
           reject( new Error("Message not sent by host") );
         }
@@ -448,6 +452,22 @@ exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
           reject( new Error("No playerId found for connection") );
         }
         break;
+      case "startTimer":
+        if( socket.locals.isHost ){
+          sendAllPlayers( socket, gameSocketList, "timerStarted", "A timer has been started", { timerAmount: payload });
+          resolve();
+        } else {
+          reject( new Error("No playerId found for connection") );
+        }
+        break;
+      case "stopTimer":
+        if( socket.locals.isHost ){
+          sendAllPlayers( socket, gameSocketList, "timerStopped", "The timer has been stopped", {});
+          resolve();
+        } else {
+          reject( new Error("No playerId found for connection") );
+        }
+        break;
     }
   });
 }

src/webapp/assets/scss/styles.scss

@@ -89,6 +89,8 @@ $font-family-base: "Urbanist";
 
 $enable-caret: false;
 
+$form-check-input-checked-bg-color: $pink-accent-primary;
+$form-switch-color: $body-color;
 
 
 // 2. Include any default variable overrides here
@@ -203,3 +205,7 @@ $utilities: map-merge(
   color: $gray-600;
   opacity: 1;
 }
+
+.fs-sm {
+  font-size: .75em;
+}

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>
+                    <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/*">
+                    <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/Create.vue

@@ -217,7 +217,7 @@ if( route.params.boardId !== undefined ){
     boardIsLoading.value = false;
   });
 } else {
-  gameCreationStore.board = new Board( undefined, "New Board", [] );
+  gameCreationStore.board = new Board();
   selectedObject.value = gameCreationStore.board;
   boardIsLoading.value = false;
 }

src/webapp/components/pages/Game.vue

@@ -44,7 +44,6 @@ let audioInstance = ref(null);
 let showingAnswer = ref( false );
 let showingQuestion = ref( false );
 
-
 const isBoardSelected = computed( () => {
   return selectedObject.value instanceof Board;
 });
@@ -68,17 +67,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 +137,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 ) => {
@@ -151,9 +152,11 @@ function setUpListeners(){
   });
   gameStore.addSocketListener("questionLocked", ( _data ) => {
     gameStore.acceptAnswers = false;
+    if( isFreeTextAnswerType.value ){
       for( let i in gameStore.players ){
         gameStore.players[i].isAnswering = true;
       }
+    }
   });
   gameStore.addSocketListener("playerAnswersRevealed", ( data ) => {
     for( let playerAnswer of data.payload.revealedAnswers ){
@@ -204,10 +207,18 @@ function setUpListeners(){
   gameStore.addSocketListener("questionLayerSelected", ( data ) => {
     questionIndex.value = Number( data.payload.questionIndex );
   });
+  gameStore.addSocketListener("timerStarted", ( data ) => {
+    gameStore.setUpTimer(Number( data.payload.timerAmount ));
+  });
+  gameStore.addSocketListener("timerStopped", ( data ) => {
+    gameStore.clearTimer();
+  });
 }
 
 function playerBuzzered( data ){
   gameStore.acceptAnswers = false;
+  gameStore.clearTimer();
+
   if( gameStore.playerId === data.payload.playerId ){
     buzzBuzz.play();
   }
@@ -312,9 +323,10 @@ function questionAnsweredRevert( cIndex, bEIndex ){
   gameStore.sendEvent("questionAnsweredRevert", payload );
 }
 
-function manualPointsAdjustment( playerId, playerName, points ){
+function manualPointsAdjustment( playerId, playerName, arePointsAdded ){
+  let points = ( arePointsAdded ? gameStore.hostData.manualAdjustmentValue : -1 * gameStore.hostData.manualAdjustmentValue );
   let payload = {
-    reopenQuestion: false,
+    reopenQuestion: gameStore.acceptAnswers,
     playerId: playerId,
     playerName: playerName,
     pointsAdjustment: points,
@@ -367,6 +379,17 @@ function revealPlayerAnswers( playerIds ){
   gameStore.sendEvent("revealPlayerAnswers", payload);
 }
 
+function startTimer( timerAmount ){
+  if( gameStore.isHost ){
+    gameStore.sendEvent("startTimer", timerAmount );
+  }
+}
+function stopTimer(){
+  if( gameStore.isHost ){
+    gameStore.sendEvent("stopTimer", {});
+  }
+}
+
 gameStore.getBoardToGame( route.params.gameId )
 .then( () => {
   selectedObject.value = gameStore.board;
@@ -400,8 +423,11 @@ onBeforeRouteLeave((to, from) => {
   } 
 });
 
+const isFreeTextAnswerType = computed(() => {
+  return gameStore.board.categories[categoryIndex.value].boardEntries[boardEntryIndex.value].answer.answerInteraction === 'freeTextInteraction';
+})
+
 //TODO List:
-//  -Profile Pic
 //  -More Question Types
 //  -Height of Category Headers (on Multiline)
 
@@ -451,6 +477,7 @@ onBeforeRouteLeave((to, from) => {
               <PlayersView
                 :players="gameStore.players"
                 :questionPoints="(isBoardSelected ? 0 : Number(selectedObject.points) )"
+                :boardOptions="gameStore.board.options"
                 :answerInteraction="(isBoardSelected ? '' : selectedObject.answer.answerInteraction )"
                 :isHost="gameStore.isHost"
                 :acceptAnswers="gameStore.acceptAnswers"
@@ -486,6 +513,8 @@ onBeforeRouteLeave((to, from) => {
               @questionAnswered="questionAnswered"
               @questionAnsweredRevert="questionAnsweredRevert"
               @letNextPlayerChoose="letNextPlayerChoose"
+              @startTimer="startTimer"
+              @stopTimer="stopTimer"
             />
           </div>
 

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 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="text-pink-accent-primary ms-1" icon="fa-solid fa-play" />
-            <!-- <font-awesome-icon class="align-middle border-dark rounded" icon="fa-solid fa-play" border /> -->
           </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 );
   })
@@ -51,7 +51,7 @@ function deleteCategoryButtonClicked( cIndex ){
           <input v-model="gameCreationStore.board.boardName" class="form-control bg-dark-blue" type="text">
         </div>
         <div>
-          <label class="form-label fs-4 mt-3">Categories</label>
+          <h4 class="mt-3">Categories</h4>
           <div v-if="gameCreationStore.board.categories.length === 0">No categories yet</div>
           <template v-else>
             <div v-for="( category, categoryListIndex ) in gameCreationStore.board.categories" :key="category.categoryName">
@@ -77,6 +77,27 @@ function deleteCategoryButtonClicked( cIndex ){
             </button>
           </div>
         </div>
+        <div>
+          <h4 class="mt-3">Options</h4>
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" role="switch" v-model="gameCreationStore.board.options.losePointsOnWrong" id="lose-points-on-wrong">
+            <label class="form-check-label" for="lose-points-on-wrong">
+              Lose Points on Wrong Answer
+            </label>
+          </div>
+          <template v-if="gameCreationStore.board.options.losePointsOnWrong">
+            <div class="form-check form-switch">
+              <input class="form-check-input" type="checkbox" role="switch" v-model="gameCreationStore.board.options.onlyOnBuzzer" id="only-on-buzzer-type">
+              <label class="form-check-label" for="only-on-buzzer-type">
+                Only on Buzzer Answer Type
+              </label>
+            </div>
+            <div>
+              <label class="form-label" for="loss-multiplier">Loss Multiplier</label>
+              <input v-model="gameCreationStore.board.options.lossMultiplier" class="form-control bg-dark-blue" type="number" step="0.5" min="0" id="loss-multiplier">
+            </div>
+          </template>
+        </div>
       </div>
     </div>
   </div>

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>
+                      <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, audio/mpeg">
+                      <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>
+                      <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="image/jpeg, image/jpg, image/png, image/gif, audio/mpeg">
+                      <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>
+          <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, audio/mpeg">
+          <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

@@ -1,8 +1,9 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import QuestionView from "@/components/views/QuestionView.vue"
 import AnswerView from "@/components/views/AnswerView.vue"
+import { useGameStore } from '@/stores/GameStore';
 
 const props = defineProps({
   board: Object,
@@ -34,12 +35,18 @@ const props = defineProps({
 
 const emit = defineEmits(["specificQuestionLayerSelected", "backToBoard", "playerBuzzered", "playAudio", "stopAudio", "showQuestion", "showAnswer", "hideQuestion", "hideAnswer" ]);
 
+const gameStore = useGameStore();
+
 let boardEntry = computed( () => {
   return props.board.categories[props.cIndex].boardEntries[props.bEIndex];
 })
 
 const showingQuestion = computed( () => {
-  return props.isAnswerRevealed || ( props.isQuestionRevealed && !props.anyPlayerIsAnswering );
+  return props.isAnswerRevealed || ( props.isQuestionRevealed && (isFreeTextAnswerType.value || !props.anyPlayerIsAnswering) );
+});
+
+const isFreeTextAnswerType = computed(() => {
+  return gameStore.board.categories[props.cIndex].boardEntries[props.bEIndex].answer.answerInteraction === 'freeTextInteraction';
 });
 
 function showQuestion(){
@@ -73,11 +80,39 @@ function stopAudio(){
   emit( "stopAudio" );
 }
 
+const progressRef = ref(null);
+let timerAnimation = null;
+
+watch(
+  () => gameStore.timer.amount,
+  (newVal) => {
+    if( newVal !== null ){
+      if( timerAnimation !== null ){
+        timerAnimation.cancel();
+        timerAnimation = null;
+      }
+      animateTimer(newVal);
+    } else if(timerAnimation !== null ){
+      timerAnimation.cancel();
+      timerAnimation = null;
+    }
+  }
+)
+
+function animateTimer(timerAmountInS){
+  timerAnimation = progressRef.value.animate([
+    { width: '100%' },
+  ], {
+    duration: 1000 * timerAmountInS,
+    iterations: 1,
+  })
+}
+
 </script>
 
 <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 +120,7 @@ function stopAudio(){
       :questions="boardEntry.questions"
       :board="props.board"
       :isHost="props.isHost"
+      :isBeingShown="showingQuestion"
       @specificQuestionLayerSelected="specificQuestionLayerSelected"
       @playAudio="playAudio"
       @stopAudio="stopAudio"
@@ -139,8 +175,10 @@ function stopAudio(){
         </template>
       </div>
     </div>
+    <div :class="[{'d-none': gameStore.timer.timeoutId === null}]" class="position-absolute bottom-0 start-0 w-100">
+      <div class="progress bg-primary" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+        <div ref="progressRef" class="progress-bar bg-pink-accent-primary" style="width: 0"></div>
+      </div>
+    </div>
   </div>
 </template>
-
-<style scoped>
-</style>

src/webapp/components/views/HostInteractionView.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 
+import { useGameStore } from '@/stores/GameStore';
+
 const props = defineProps({
 	objToDisplay: String,
 	board: Object,
@@ -12,7 +14,9 @@ const props = defineProps({
 	}
 });
 
-const emit = defineEmits( "lockQuestion", "revealPlayerAnswers", "letNextPlayerChoose" );
+const emit = defineEmits( "lockQuestion", "revealPlayerAnswers", "letNextPlayerChoose", "stopTimer", "startTimer" );
+
+const gameStore = useGameStore();
 
 let boardEntry = computed( () => {
 	if( props.objToDisplay === "BoardEntry" ){
@@ -33,14 +37,41 @@ function letNextPlayerChoose(){
 	emit("letNextPlayerChoose");
 }
 
-
+function startTimer(){
+	emit("startTimer", gameStore.hostData.timerAmount);
+}
+function stopTimer(){
+	emit("stopTimer");
+}
 </script>
 
 <template>
 	<div
         v-if="boardEntry !== undefined"
-        class="d-flex flex-column justify-content-center border-top border-pink-accent-primary interaction-size"
+        class="d-flex flex-column justify-content-center border-top border-pink-accent-primary py-2 interaction-size"
     >
+    <div class="row mx-1 mb-0">
+      <div class="col">
+        <label for="manual-adjustment-value">Point Adjustment Value</label>
+        <input v-model="gameStore.hostData.manualAdjustmentValue" id="manual-adjustment-value" type="text" name="manual-adjustment-value" class="form-control form-control-sm border-pink-accent-primary">
+      </div>
+    </div>
+    <div class="row mx-1 mb-3">
+      <div class="col">
+        <label for="timer-value">Timer Length <span class="fs-sm">(in seconds)</span></label>
+        <div class="d-flex gap-1">
+          <input v-model="gameStore.hostData.timerAmount" id="timer-value" type="number" min="1" class="form-control form-control-sm border-pink-accent-primary" :disabled="gameStore.timer.timeoutId !== null">
+          <button v-if="gameStore.timer.timeoutId === null" class="btn btn-sm btn-pink-accent-primary text-nowrap" @click="startTimer">
+            Start Timer
+            <font-awesome-icon icon="fa-solid fa-play"/>
+          </button>
+          <button v-else class="btn btn-sm btn-pink-accent-primary text-nowrap" @click="stopTimer">
+            Stop Timer
+            <font-awesome-icon icon="fa-solid fa-stop"/>
+          </button>
+        </div>
+      </div>
+    </div>
 		<div class="row mx-2">
 			<div class="col-12 text-center text-truncate">
 				Answer: {{ boardEntry.answer.answerText }}
@@ -69,7 +100,7 @@ function letNextPlayerChoose(){
 
 <style scoped>
 .interaction-size{
-	height: 6rem;
+	min-height: 6rem;
 }
 .no-resize{
 	resize: none;

src/webapp/components/views/PlayerInteractionView.vue

@@ -43,9 +43,7 @@ function answerTextUpdated(){
 			class="buzzer d-flex justify-content-center align-items-center rounded-circle shadow m-2"
 			:class="[ { 'buzzer-answering': props.playerIsAnswering }, { 'bg-gray': !props.acceptAnswers && !props.playerIsAnswering } ]"
 			@click="buzzeredTheBuzzBuzz"
-		>
+		>Buzzer</div>
-			Buzzer
-		</div>
 		<div v-else class="d-flex justify-content-center align-items-center w-100 h-100 m-3">
 			<div class="w-100">
 				<label for="textarea-player-input" class="form-label">Answer:</label>

src/webapp/components/views/PlayersView.vue

@@ -10,6 +10,7 @@ const props = defineProps({
     default: false,
   },
   questionPoints: Number,
+  boardOptions: Object,
   answerInteraction: {
     type: String,
     default: "buzzerInteraction"
@@ -28,15 +29,24 @@ const emit = defineEmits( "manualPointsAdjustment", "answerRuled", "revealPlayer
 
 let buttonDivHeight = ref("3rem");
 let navbarHeight = ref("4rem");
-let manualAdjustmentValue = ref( 100 );
 
 function manualPointsAdjustment( playerId, playerName, arePointsAdded ) {
-  let points = ( arePointsAdded ? manualAdjustmentValue.value : -1 * manualAdjustmentValue.value );
+  emit("manualPointsAdjustment", playerId, playerName, arePointsAdded );
-  emit("manualPointsAdjustment", playerId, playerName, points );
 }
 
 function answerRuled( playerId, playerName, isAnswerCorrect ){
-  let points = ( isAnswerCorrect ? props.questionPoints : 0 );
+  let points = 0;
+  if( isAnswerCorrect ){
+    points = props.questionPoints;
+  } else if(
+    props.boardOptions.losePointsOnWrong &&
+    (
+      !props.boardOptions.onlyOnBuzzer ||
+      props.answerInteraction === "buzzerInteraction"
+    )
+  ) {
+    points = Math.round(props.questionPoints * props.boardOptions.lossMultiplier * -1);
+  }
   let reopenQuestion;
   if( ["buzzerInteraction"].includes( props.answerInteraction ) ){
     reopenQuestion = !isAnswerCorrect;
@@ -61,12 +71,6 @@ function letPlayerChoose( playerId ){
     <div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
       <div class="my-3">
         <h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Players</h3>
-        <div v-if="props.isHost" class="row mb-3">
-					<div class="col">
-            <label for="manual-adjustment-value">Manual Adjustment Value</label>
-            <input v-model="manualAdjustmentValue" id="manual-adjustment-value" type="text" name="manual-adjustment-value" class="form-control form-control-sm border-pink-accent-primary">
-					</div>
-				</div>
         <template v-for="(player) in props.players" :key="player._id">
           <PlayerListEntry 
             :player="player"

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>

src/webapp/main.js

@@ -5,7 +5,7 @@ import { FontAwesomeIcon, FontAwesomeLayers } from "@fortawesome/vue-fontawesome
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faDragon, faRightToBracket, faUsers, faUserPlus, faSpinner, faPlusSquare, faBorderAll, faPen, faTrash, faAngleDown, faAngleUp,
          faPlus, faMinus, faAngleRight, faSquare, faPlay, faCircleExclamation, faSquareCheck, faSquareMinus, faHandPointer, faFloppyDisk,
-         faEye, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
+         faEye, faRotateLeft, faStop } from "@fortawesome/free-solid-svg-icons";
 import { faCircleUser, faSquarePlus } from "@fortawesome/free-regular-svg-icons";
 
 
@@ -44,6 +44,7 @@ library.add({
   faFloppyDisk,
   faEye,
   faRotateLeft,
+  faStop,
 });
 
 

src/webapp/models/Board.js

@@ -1,8 +1,9 @@
 export default class Board{
   
-  constructor( id, name, categories ){
+  constructor( id = undefined, name = "New Board", categories = [], options = { losePointsOnWrong: false, lossMultiplier: 1, onlyOnBuzzer: true } ){
     this.boardId = id;
     this.boardName = name;
     this.categories = categories;
+    this.options = options;
   }
 }

src/webapp/services/util.js

@@ -30,7 +30,7 @@ export function boardResponseToBoardModel( boardResponse ){
         );
     }
 
-    return new Board( boardResponse._id, boardResponse.name, categories );
+    return new Board( boardResponse._id, boardResponse.name, categories, boardResponse.options );
 }
 
 export function openModal( modalId ){

src/webapp/stores/GameCreationStore.js

@@ -14,7 +14,7 @@ const uService = new UserService();
 export const useGameCreationStore = defineStore('gameCreation', {
   state: ()=>{
     return {
-      board: new Board( undefined, "New Board", []),
+      board: new Board(),
       images: [],
       audios: [],
       answerImages: [],

src/webapp/stores/GameStore.js

@@ -4,6 +4,7 @@ import { useUserStore } from "@/stores/UserStore";
 import { GAME_STATES } from "@/services/GameService";
 import Board from "@/models/Board";
 import { boardResponseToBoardModel } from "@/services/util";
+import { nextTick } from 'vue';
 
 const gService = new GameService();
 
@@ -21,11 +22,16 @@ export const useGameStore = defineStore('game', {
       gameService: gService,
       //concrete Game Data
       currentQuestion: {},
-      board: new Board( undefined, "New Board", []),
+      board: new Board(),
       acceptAnswers: false,
       isPlayerChoosing: false,
       chosenEntry: undefined,
       keepAliveInterval: undefined,
+      timer: {
+        timeoutId: null, //null | timeoutId
+        amount: null,
+      },
+      hostData: {},
     }
   },
   actions: {
@@ -63,6 +69,12 @@ export const useGameStore = defineStore('game', {
               isHost: res.data.isHost,
               gameState: res.data.gameState,
             }
+            if(isHost){
+              this.hostData = {
+                manualAdjustmentValue: 100,
+                timerAmount: 15,
+              }
+            }
             this.gameCode = res.data.gameCode;
             resolve( data );
           } else {
@@ -83,6 +95,10 @@ export const useGameStore = defineStore('game', {
             this.gameState = GAME_STATES.INIT;
             this.gameCode = res.data.code;
             this.isHost = true;
+            this.hostData = {
+              manualAdjustmentValue: 100,
+              timerAmount: 15,
+            }
             resolve();
           } else {
             reject( res.data.error );
@@ -182,6 +198,10 @@ export const useGameStore = defineStore('game', {
           this.removeSocketListener("noUser");
           this.players = data.payload.players;
           this.isHost = true;
+          this.hostData = {
+            manualAdjustmentValue: 100,
+            timerAmount: 15,
+          }
           resolve( data.payload.gameId );
         });
         
@@ -321,6 +341,27 @@ export const useGameStore = defineStore('game', {
       this.addSocketListener("payloadIncomplete", ( _data ) => {
         console.error("Invalid or Incomplete Payload!");
       });
+    },
+    setUpTimer(timerAmountInS){
+      this.timer.timeoutId = setTimeout(() => {
+        this.acceptAnswers = false;
+        clearTimeout(this.timer);
+        this.timer.timeoutId = null;
+        nextTick(() => {
+          this.timer.amount = null;
+        });
+        if(this.isHost){
+          this.sendEvent("lockQuestion", {});
+        }
+      }, timerAmountInS * 1000);
+      this.timer.amount = timerAmountInS;
+    },
+    clearTimer(){
+      if(this.timer.timeoutId){
+        clearTimeout(this.timer.timeoutId);
+        this.timer.timeoutId = null;
+        this.timer.amount = null;
+      }
     }
   },
 })