feat/board-option-lose-points (#4)

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jeobeardy",
-  "version": "1.1.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",
@@ -34,6 +34,7 @@
     "@fortawesome/free-solid-svg-icons": "~7.2.0",
     "@fortawesome/vue-fontawesome": "~3.1.3",
     "@popperjs/core": "~2.11.8",
+    "@vitejs/plugin-vue": "~6.0.5",
     "axios": "~1.15.0",
     "bcryptjs": "~3.0.3",
     "body-parser": "~2.2.2",
@@ -57,7 +58,6 @@
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.16.1",
-    "@vitejs/plugin-vue": "~6.0.5",
     "@vue/eslint-config-prettier": "~10.2.0",
     "eslint": "~10.2.0",
     "eslint-plugin-vue": "~10.8.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/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/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

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

@@ -453,6 +453,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"

src/webapp/components/views/BoardEditView.vue

@@ -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/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"
@@ -36,7 +37,18 @@ function manualPointsAdjustment( playerId, playerName, arePointsAdded ) {
 }
 
 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;

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

@@ -21,7 +21,7 @@ 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,