WIP Implementing player choosing funcionality in FE

src/server/websocket/handler.js

@@ -1,3 +1,5 @@
+const crypto = require("crypto");
+
 const gameController = require("../controllers/GameControllerMongoose");
 const playerController = require("../controllers/PlayerControllerMongoose");
 
@@ -130,10 +132,14 @@ exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
           gameController.findGameByIdAndSetStateAndPopulateBoard( socket.locals.game, "IN_PROGRESS" )
           .then( ( game ) => {
             gameOuter = game;
-            let randomPlayerIndex = crypto.randomInt(0, game.players.length );
+            if( game.players.length > 0 ){
-            let randomPlayer = game.players[randomPlayerIndex];
+              let randomPlayerIndex = crypto.randomInt(0, game.players.length );
-            let otherPlayers = game.players.splice(randomPlayerIndex, 1);
+              let randomPlayer = game.players[randomPlayerIndex];
-            return playerController.setPlayerIsChoosingAndOthersNotChoosing( randomPlayer, otherPlayers );
+              let otherPlayers = game.players.splice(randomPlayerIndex, 1);
+              return playerController.setPlayerIsChoosingAndOthersNotChoosing( randomPlayer, otherPlayers );
+            } else {
+              return -1;
+            }
           })
           .then( ( choosingPlayer ) => {
             let message = "Game is starting";
@@ -159,12 +165,12 @@ exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
         }
         break;
       case "playerChooseBoardEntry":
-        playerController.checkPlayerCanChoose()
+        playerController.checkPlayerCanChoose( socket.locals.player )
-        .then( ( canChoose ) => {
+        .then( ( player ) => {
-          if( canChoose ){
+          if( player.isChoosing ){
-            let message = `BoardEntry ${payload.boardEntryIndex} selected`;
+            let message = `Category ${payload.categoryIndex} with BoardEntry ${payload.boardEntryIndex} selected`;
-            let sendingData = { categoryIndex: payload.categoryIndex, boardEntryIndex: payload.boardEntryIndex };
+            let sendingData = { categoryIndex: payload.categoryIndex, boardEntryIndex: payload.boardEntryIndex, choosingPlayer: player._id.toString() };
-            sendAllPlayers( socket, gameSocketList, "boardEntrySelected", message, sendingData );
+            sendToHost( socket, gameSocketList, "playerChoseBoardEntry", message, sendingData );
             resolve();
           } else {
             resolve();

src/webapp/components/blocks/BoardEntryCard.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  playerChose: {
+    type: [Boolean, String],
+    default: false,
+  },
 });
 
 const emit = defineEmits(["boardEntryCardClicked", "boardEntryAnsweredClicked", "boardEntryAnsweredRevertClicked" ]);
@@ -60,6 +64,11 @@ function boardEntryAnsweredRevertClicked(){
             <font-awesome-icon icon="fa-solid fa-square-minus" size="lg" />
           </button>
         </div>
+        <div v-if="playerChose !== false" class="position-absolute start-0 bottom-0 mb-2 w-100">
+          <span class="bg-pink-accent-primary p-1 ms-2 max-w-50" @click.stop="boardEntryAnsweredRevertClicked">
+            {{ props.playerChose.name }} chooses this
+          </span>
+        </div>
         <h5 class="mb-0 user-select-none">
           {{ props.boardEntry.points }}
         </h5> 
@@ -73,4 +82,7 @@ function boardEntryAnsweredRevertClicked(){
   max-height: 20%;
   max-width: 90vw;
 }
+.max-w-50{
+  max-width: 50%;
+}
 </style>

src/webapp/components/pages/Game.vue

@@ -183,6 +183,18 @@ function setUpListeners(){
       gameStore.players.splice( playerIndex, 1 );
     }
   });
+  gameStore.addSocketListener("playerChoseBoardEntry", ( data ) => {
+    let categoryIndex = data.payload.categoryIndex;
+    let boardEntryIndex = data.payload.boardEntryIndex;
+    let player = gameStore.players.find( playerEntry => playerEntry._id === data.payload.choosingPlayer );
+    if( player ){
+      gameStore.chosenEntry = {
+        player: player,
+        categoryIndex: categoryIndex,
+        boardEntryIndex: boardEntryIndex,
+      }
+    }
+  });
 }
 
 function playerBuzzered( data ){
@@ -395,6 +407,7 @@ onBeforeRouteLeave((to, from) => {
               :isPlayerChoosing="gameStore.isPlayerChoosing"
               :anyPlayerIsAnswering="anyPlayerIsAnswering"
               :isBeingPlayed="isBeingPlayed"
+              :chosenEntry="gameStore.chosenEntry"
               @showBoard="showBoard"
               @showQuestion="showQuestion"
               @showAnswer="showAnswer"

src/webapp/components/views/BoardView.vue

@@ -16,10 +16,19 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  chosenEntry: Object,
 });
 
 const emit = defineEmits(["boardEntryClicked", "questionAnswered", "questionAnsweredRevert" ])
 
+function playerChosenBoardEntry( categoryIndex, boardEntryIndex ){
+  if( props.chosenEntry !== undefined && ( props.chosenEntry.categoryIndex === categoryIndex || props.chosenEntry.boardEntryIndex === boardEntryIndex ) ){
+    return props.chosenEntry.player.name;
+  } else {
+    return false;
+  }
+}
+
 function boardEntryCardClicked( categoryIndex, boardEntryIndex ){
   if( props.isHost || props.isPlayerChoosing ){
     emit("boardEntryClicked", categoryIndex, boardEntryIndex);
@@ -49,6 +58,7 @@ function boardEntryCardClicked( categoryIndex, boardEntryIndex ){
                   :isPlayerChoosing="props.isPlayerChoosing"
                   :isBeingPlayed="props.isBeingPlayed"
                   :boardEntry="boardEntry"
+                  :playerChose="playerChosenBoardEntry( categoryIndex, boardEntryIndex )"
                   @boardEntryCardClicked="boardEntryCardClicked( categoryIndex, boardEntryIndex )"
                   @boardEntryAnsweredClicked="emit( 'questionAnswered', categoryIndex, boardEntryIndex )"
                   @boardEntryAnsweredRevertClicked="emit( 'questionAnsweredRevert', categoryIndex, boardEntryIndex )"

src/webapp/components/views/GameView.vue

@@ -34,6 +34,7 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  chosenEntry: Object,
 });
 
 const emit = defineEmits(["boardEntryClicked", "specificQuestionLayerSelected", "showBoard", "playerBuzzered", "playAudio", "stopAudio",
@@ -124,6 +125,7 @@ watch(
           :isHost="props.isHost"
           :isBeingPlayed="props.isBeingPlayed"
           :isPlayerChoosing="props.isPlayerChoosing"
+          :chosenEntry="props.chosenEntry"
           @boardEntryClicked="boardEntryClicked"
           @questionAnswered="questionAnswered"
           @questionAnsweredRevert="questionAnsweredRevert"

src/webapp/stores/GameStore.js

@@ -24,6 +24,7 @@ export const useGameStore = defineStore('game', {
       board: new Board( undefined, "New Board", []),
       acceptAnswers: false,
       isPlayerChoosing: false,
+      chosenEntry: undefined,
     }
   },
   actions: {