168 improve UI regarding minimum and maximum players in a room

client/src/App.vue

@@ -35,6 +35,7 @@ function onLogoClick() {
       <div class="mb-2">
         <portal-target name="banner" />
       </div>
+      <portal-target name="modal" class="m-0" />
     </div>
   </div>
 </template>

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

@@ -1,14 +1,22 @@
 <script setup lang="ts">
 import PlayerList from '@/components/lobby/PlayerList.vue';
 import Options from '@/components/lobby/Options.vue';
-import { computed } from 'vue';
+import { computed, onUnmounted } from 'vue';
 import socket from '@/socket/socket.js';
 import { AudioWrap } from '@/mixins/audiowrap.js';
 import ClickMp3 from '@/assets/audio/click2.mp3';
 import { useRoomStore } from '@/stores/room.js';
 import { useI18n } from 'vue-i18n';
+import { Portal } 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();
+});
 
 const leader = computed<boolean>(() => {
   return !!roomStore.self && roomStore.self.leader;
@@ -17,7 +25,18 @@ const canStart = computed<boolean>(() => {
   return leader.value && roomStore.players.length >= 3;
 });
 
+function startGameRequest() {
+  if (roomStore.players.length <= gameStore.options.recPlayers) {
+    //canStart is already checked so min players has been reached
+    startGame();
+  } else {
+    //we have more than the recommended amount of players per room
+    Modal.getOrCreateInstance(document.getElementById('recPlayersModal') as HTMLElement).show();
+  }
+}
+
 function startGame() {
+  Modal.getInstance(document.getElementById('recPlayersModal') as HTMLElement)?.hide();
   click.play();
   socket.emit('startGame');
 }
@@ -28,6 +47,30 @@ const { t } = useI18n();
   <div class="w-100 d-flex flex-column justify-content-between align-items-center gap-3 pt-1 pb-4">
     <h1 v-t="'players'" class="font-fancy text-dark display-3" />
     <player-list />
+    <portal to="modal">
+      <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="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-footer">
+              <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>
+      </div>
+    </portal>
 
     <div class="w-100 d-flex flex-column justify-content-start align-items-center gap-3">
       <options :disabled="!leader" />
@@ -37,7 +80,7 @@ const { t } = useI18n();
           class="btn btn-blue fs-4 w-100"
           :class="{ 'd-none': !leader, disabled: !canStart }"
           :disabled="!canStart"
-          @click="startGame" />
+          @click="startGameRequest" />
       </span>
     </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 @@
   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 @@
     },
     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 @@
     },
     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 @@
     },
     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 @@
             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 @@
 
       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 @@
         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

@@ -28,7 +28,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: []