Style recommended players modal and add recommended number of players…

… to options

client/src/components/endRound/EndRound.vue

@@ -27,7 +27,7 @@ watch(selectedId, async (val: string) => {
 });
 
 onMounted(() => {
-  selectedId.value = roomStore.self!.id;
+  selectedId.value = roomStore.self.id;
 });
 
 function sendVote() {

client/src/components/lobby/Lobby.vue

@@ -9,8 +9,10 @@ import { useRoomStore } from '@/stores/room.js';
 import { useI18n } from 'vue-i18n';
 import { Portal, PortalTarget } from 'portal-vue';
 import { Modal } from 'bootstrap';
+import { useGameStore } from '@/stores/game';
 const click = new AudioWrap(ClickMp3);
 const roomStore = useRoomStore();
+const gameStore = useGameStore();
 
 onUnmounted(() => {
   Modal.getInstance(document.getElementById('recPlayersModal') as HTMLElement)?.dispose();
@@ -24,7 +26,7 @@ const canStart = computed<boolean>(() => {
 });
 
 function startGameRequest() {
-  if (roomStore.players.length <= 3) {
+  if (roomStore.players.length <= gameStore.options.recPlayers) {
     //canStart is already checked so min players has been reached
     startGame();
   } else {
@@ -46,16 +48,24 @@ const { t } = useI18n();
     <h1 v-t="'players'" class="font-fancy text-dark display-3" />
     <player-list />
     <portal to="modal">
-      <div id="recPlayersModal" class="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
+      <div
+        id="recPlayersModal"
+        class="modal fade"
+        tabindex="-1"
+        aria-labelledby="recPlayersModalLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
           <div class="modal-content">
             <div class="modal-header">
-              <h5 id="exampleModalLabel" class="modal-title">Modal title</h5>
+              <h5 id="recPlayersModalLabel" class="modal-title mx-auto font-fancy display-6">Warning!</h5>
+            </div>
+            <div class="modal-body">
+              This lobby is a bit crowded for the best game experience. Splitting into two groups could make things more
+              enjoyable!
             </div>
-            <div class="modal-body">here is a asd</div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-              <button type="button" class="btn btn-primary" @click="startGame">Start Game</button>
+              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-blue" @click="startGame">Start Game</button>
             </div>
           </div>
         </div>

client/src/components/responseMatching/MatchingSummary.vue

@@ -18,7 +18,7 @@ const gameStore = useGameStore();
 const roomStore = useRoomStore();
 
 const matchers = computed<Player[]>(() => {
-  return roomStore.players.filter((player: Player) => player.active && player.id !== gameStore.selector!.id);
+  return roomStore.players.filter((player: Player) => player.active && player.id !== gameStore.selector.id);
 });
 
 function endRound(): void {

client/src/stores/game.ts

@@ -86,13 +86,13 @@ export const useGameStore = defineStore('game', {
   getters: {
     isSelector(): boolean {
       const room = useRoomStore();
-      return this.selector?.id === room.self!.id;
+      return this.selector?.id === room.self.id;
     },
     playerResponses() {
       const room = useRoomStore();
       return (id: string) => {
         // default to self if not provided
-        if (!id) id = room.self!.id;
+        if (!id) id = room.self.id;
         return this.responses[id];
       };
     },
@@ -117,7 +117,7 @@ export const useGameStore = defineStore('game', {
     },
     canEndRound() {
       const room = useRoomStore();
-      const self = room.self!.id;
+      const self = room.self.id;
       if (this.selector?.id !== self) return false;
 
       let finishedMatching = true;
@@ -145,7 +145,7 @@ export const useGameStore = defineStore('game', {
     },
     resetResponses() {
       const room = useRoomStore();
-      const selfId = room.self!.id;
+      const selfId = room.self.id;
       this.responses = {};
       this.responses[selfId] = {
         id: selfId,
@@ -157,20 +157,20 @@ export const useGameStore = defineStore('game', {
     },
     useResponse(response: string) {
       const room = useRoomStore();
-      this.responses[room.self!.id].used.push(response);
+      this.responses[room.self.id].used.push(response);
     },
     useSelectorResponse(response: string) {
       const room = useRoomStore();
-      this.responses[room.self!.id].used.push(response);
+      this.responses[room.self.id].used.push(response);
       if (this.selectionType === 'strike') {
-        this.responses[room.self!.id].selectedStrike = response;
+        this.responses[room.self.id].selectedStrike = response;
       } else {
-        this.responses[room.self!.id].selectedSike = response;
+        this.responses[room.self.id].selectedSike = response;
       }
     },
     unuseResponse(response: string) {
       const room = useRoomStore();
-      this.responses[room.self!.id].used = this.responses[room.self!.id].used.filter((r) => r !== response);
+      this.responses[room.self.id].used = this.responses[room.self.id].used.filter((r) => r !== response);
     },
     async startTimer() {
       if (this.timeoutId) {
@@ -205,15 +205,15 @@ export const useGameStore = defineStore('game', {
             exact: match.exact
           });
         }
-        if (match.player === room.self!.id) {
+        if (match.player === room.self.id) {
           this.useResponse(match.response);
           this.scene = 'MatchingSummary';
         }
       }
     },
     unmatch() {
       const room = useRoomStore();
-      const selfId = room.self!.id;
+      const selfId = room.self.id;
       const usedResponse = this.matches.find((match: Match) => match.player.id === selfId)!.response;
       this.unuseResponse(usedResponse);
       this.unmatched = true;
@@ -264,15 +264,15 @@ export const useGameStore = defineStore('game', {
 
       socket.on('promptResponse', (response: string) => {
         const room = useRoomStore();
-        this.responses[room.self!.id].all.push(response);
+        this.responses[room.self.id].all.push(response);
       });
 
       socket.on('nextSelection', (data: { selector: string; selectionType: string }) => {
         const room = useRoomStore();
         const selector = room.players.find((player: Player) => player.id === data.selector);
         // before we clear matches, make sure we used our match, this can happen if a next selection happens between
         // unmatch and match
-        const selfId = room.self!.id;
+        const selfId = room.self.id;
         const selfMatch = this.matches.find((match: Match) => match.player.id === selfId);
         if (selfMatch && !this.responses[selfId].used.includes(selfMatch.response))
           this.useResponse(selfMatch.response);
@@ -337,7 +337,7 @@ export const useGameStore = defineStore('game', {
         if (data.timer) {
           void this.startTimer();
         }
-        const isSelector = this.selector?.id === room.self!.id;
+        const isSelector = this.selector?.id === room.self.id;
         let scene: Scene = 'Lobby';
         //'lobby', 'response', 'selection', 'matching'
         switch (data.stage) {

client/src/styles/_min-bootstrap.scss

@@ -30,7 +30,7 @@
 @import '~bootstrap/scss/list-group';
 //@import "~bootstrap/scss/close";
 //@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/modal";
+@import '~bootstrap/scss/modal';
 @import '~bootstrap/scss/tooltip';
 //@import "~bootstrap/scss/popover";
 //@import "~bootstrap/scss/carousel";

common/src/options.ts

@@ -4,6 +4,7 @@ import { z } from 'zod';
 // good for hiding beta features, can be moved to exposed options schema if we want clients to be able to control it
 type ConfigFlags = {
   maxPlayers: number;
+  recPlayers: number;
   minPlayers: number;
   promptSkipping: boolean;
 };
@@ -65,6 +66,7 @@ export const defaultOptions: Options = {
   sikeRetries: 0,
   promptSkipping: true,
   minPlayers: 3,
+  recPlayers: 5,
   maxPlayers: 12,
   packs: {},
   customPrompts: []