feat(game-lobby): player group organizer

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyRandomCompositionButton/GameLobbyRandomCompositionButton.vue

@@ -67,7 +67,6 @@ async function onClickFromRandomCompositionButton(): Promise<void> {
   isLoadingGetRandomGameComposition.value = true;
   const randomGameComposition = await fetchRandomGameComposition({
     players: createGameDto.value.players,
-    excludedRoles: ["prejudiced-manipulator"],
   });
   if (randomGameComposition !== null) {
     setPlayersToCreateGameDto(randomGameComposition);

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeader.vue

@@ -28,6 +28,7 @@
         ref="gameLobbyHeaderSetupButtons"
         @additional-cards-manager-button-click="onAdditionalCardsManagerButtonClickFromGameLobbyHeaderSetupButtons"
         @game-options-button-click="onGameOptionsButtonClickFromGameLobbyHeaderSetupButtons"
+        @group-organizer-button-click="onGroupOrganizerButtonClickFromGameLobbyHeaderSetupButtons"
         @position-coordinator-button-click="onPositionCoordinatorButtonClickFromGameLobbyHeaderSetupButtons"
       />
     </div>
@@ -85,6 +86,10 @@ function onAdditionalCardsManagerButtonClickFromGameLobbyHeaderSetupButtons(): v
   emit("additionalCardsManagerButtonClick");
 }
 
+function onGroupOrganizerButtonClickFromGameLobbyHeaderSetupButtons(): void {
+  emit("groupOrganizerButtonClick");
+}
+
 function highlightGameOptionsButton(): void {
   if (gameLobbyHeaderSetupButtons.value === null) {
     throw createError("Game Lobby Header Setup Buttons is not defined");

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderGroupOrganizerButton/GameLobbyHeaderGroupOrganizerButton.vue

@@ -0,0 +1,47 @@
+<template>
+  <PrimeVueButton
+    id="game-lobby-header-group-organizer-button"
+    :pt="{ 'root': '!border-sky-600' }"
+    severity="info"
+    size="small"
+    @click.prevent="onClickFromGroupOrganizerButton"
+  >
+    <FontAwesomeIcon
+      class="animate__animated animate__heartBeat animate__slow"
+      icon="users"
+    />
+
+    <span
+      id="game-lobby-header-group-organizer-button-text"
+      class="hidden md:inline"
+    >
+      {{ $t('components.GameLobbyHeaderGroupOrganizerButton.groupOrganizer') }}
+    </span>
+
+    <FontAwesomeIcon
+      v-if="!arePlayerGroupsSetForPrejudicedManipulatorIfPresent"
+      id="player-groups-not-set-warning-icon"
+      beat
+      icon="exclamation-circle"
+    />
+  </PrimeVueButton>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { storeToRefs } from "pinia";
+import type { GameLobbyHeaderGroupOrganizerButtonEmits } from "~/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderGroupOrganizerButton/game-lobby-header-group-organizer-button.types";
+import { useCreateGameDtoValidation } from "~/composables/api/game/useCreateGameDtoValidation";
+import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGameDtoStore";
+
+const emit = defineEmits<GameLobbyHeaderGroupOrganizerButtonEmits>();
+
+const createGameDtoStore = useCreateGameDtoStore();
+const { createGameDto } = storeToRefs(createGameDtoStore);
+
+const { arePlayerGroupsSetForPrejudicedManipulatorIfPresent } = useCreateGameDtoValidation(createGameDto);
+
+function onClickFromGroupOrganizerButton(): void {
+  emit("groupOrganizerButtonClick");
+}
+</script>

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderGroupOrganizerButton/game-lobby-header-group-organizer-button.types.ts

@@ -0,0 +1,5 @@
+type GameLobbyHeaderGroupOrganizerButtonEmits = {
+  groupOrganizerButtonClick: [];
+};
+
+export type { GameLobbyHeaderGroupOrganizerButtonEmits };

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderPositionCoordinatorButton/GameLobbyHeaderPositionCoordinatorButton.vue

@@ -8,7 +8,7 @@
   >
     <FontAwesomeIcon
       class="animate__animated animate__heartBeat animate__slow"
-      icon="users"
+      icon="group-arrows-rotate"
     />
 
     <span

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderSetupButtons.vue

@@ -29,6 +29,14 @@
         class="fade-list-item h-10 md:h-auto md:w-auto w-1/4"
         @additional-cards-manager-button-click="onAdditionalCardsManagerButtonClickFromGameAdditionalCardsManagerButton"
       />
+
+      <GameLobbyHeaderGroupOrganizerButton
+        v-if="isGroupOrganizerVisible"
+        id="game-lobby-header-group-organizer-button"
+        key="game-group-organizer-button"
+        class="fade-list-item h-10 md:h-auto md:w-auto w-1/4"
+        @group-organizer-button-click="onGroupOrganizerButtonClickFromGameGroupOrganizerButton"
+      />
     </TransitionGroup>
   </PrimeVueButtonGroup>
 </template>
@@ -38,6 +46,7 @@ import { storeToRefs } from "pinia";
 import type { ComponentPublicInstance } from "vue";
 import type { GameLobbyHeaderSetupButtonsEmits, GameLobbyHeaderSetupButtonsExposed } from "~/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/game-lobby-header-setup-buttons.types";
 import GameLobbyHeaderAdditionalCardsManagerButton from "~/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderAdditionalCardsManagerButton/GameLobbyHeaderAdditionalCardsManagerButton.vue";
+import GameLobbyHeaderGroupOrganizerButton from "~/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderGroupOrganizerButton/GameLobbyHeaderGroupOrganizerButton.vue";
 import GameLobbyHeaderOptionsButton from "~/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderOptionsButton/GameLobbyHeaderOptionsButton.vue";
 import GameLobbyHeaderPositionCoordinatorButton from "~/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderPositionCoordinatorButton/GameLobbyHeaderPositionCoordinatorButton.vue";
 import { useAnimateCss } from "~/composables/animate-css/useAnimateCss";
@@ -46,6 +55,7 @@ import { useCreateGameDtoStore } from "~/stores/game/create-game-dto/useCreateGa
 const emit = defineEmits<GameLobbyHeaderSetupButtonsEmits>();
 
 const createGameDtoStore = useCreateGameDtoStore();
+const { getPlayersWithRoleNameInCreateGameDto } = createGameDtoStore;
 const { createGameDto, doesCreateGameDtoContainAdditionalCardsDependantRoles } = storeToRefs(createGameDtoStore);
 
 const minPlayerToDisplayPositionCoordinator = 2;
@@ -62,6 +72,8 @@ const isPositionCoordinatorVisible = computed<boolean>(() => createGameDto.value
 
 const isAdditionalCardsManagerVisible = computed<boolean>(() => doesCreateGameDtoContainAdditionalCardsDependantRoles.value);
 
+const isGroupOrganizerVisible = computed<boolean>(() => getPlayersWithRoleNameInCreateGameDto("prejudiced-manipulator").length > 0);
+
 function onGameOptionsButtonClickFromGameOptionButton(): void {
   emit("gameOptionsButtonClick");
 }
@@ -74,6 +86,10 @@ function onAdditionalCardsManagerButtonClickFromGameAdditionalCardsManagerButton
   emit("additionalCardsManagerButtonClick");
 }
 
+function onGroupOrganizerButtonClickFromGameGroupOrganizerButton(): void {
+  emit("groupOrganizerButtonClick");
+}
+
 async function highlightGameOptionsButton(): Promise<void> {
   if (!gameLobbyHeaderOptionsButton.value) {
     throw createError("Game Lobby Header Options Button is not defined");

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/game-lobby-header-setup-buttons.types.ts

@@ -2,6 +2,7 @@ type GameLobbyHeaderSetupButtonsEmits = {
   gameOptionsButtonClick: [];
   positionCoordinatorButtonClick: [];
   additionalCardsManagerButtonClick: [];
+  groupOrganizerButtonClick: [];
 };
 
 type GameLobbyHeaderSetupButtonsExposed = {

app/components/pages/game-lobby/GameLobbyHeader/game-lobby-header.types.ts

@@ -2,6 +2,7 @@ type GameLobbyHeaderEmits = {
   gameOptionsButtonClick: [];
   positionCoordinatorButtonClick: [];
   additionalCardsManagerButtonClick: [];
+  groupOrganizerButtonClick: [];
 };
 
 type GameLobbyHeaderExposed = {

app/components/pages/game-lobby/GameLobbyPositionCoordinator/GameLobbyPositionCoordinator.vue

@@ -21,7 +21,7 @@
     >
       <DialogHeaderTitleOnly
         id="game-lobby-position-coordinator-header"
-        icon="users"
+        icon="group-arrows-rotate"
         icon-class="text-primary"
         :title="$t('components.GameLobbyPositionCoordinator.positionCoordinator')"
       />

app/pages/game-lobby.vue

@@ -5,6 +5,7 @@
       ref="gameLobbyHeader"
       @additional-cards-manager-button-click="onAdditionalCardsButtonManagerClickFromGameLobbyHeader"
       @game-options-button-click="onGameOptionsButtonClickFromGameLobbyHeader"
+      @group-organizer-button-click="onGroupOrganizerButtonClickFromGameLobbyHeader"
       @position-coordinator-button-click="onPositionCoordinatorButtonClickFromGameLobbyHeader"
     />
 
@@ -117,6 +118,10 @@
   gameLobbyAdditionalCardsManager.value.open();
 }
 
+function onGroupOrganizerButtonClickFromGameLobbyHeader(): void {
+  console.log("coucou");
+}
+
 function onRejectPlayersPositionStepFromGameLobbyFooter(): void {
   if (!gameLobbyHeader.value) {
     throw createError("Game Lobby Header is not defined");

app/plugins/vue-font-awesome-icon/vue-font-awesome-icon.ts

@@ -76,6 +76,7 @@ import {
   faCompass,
   faRotate,
   faMagicWandSparkles,
+  faGroupArrowsRotate,
 } from "@fortawesome/free-solid-svg-icons";
 
 import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
@@ -162,6 +163,7 @@ library.add(
   faCompass,
   faRotate,
   faMagicWandSparkles,
+  faGroupArrowsRotate,
 );
 
 export default defineNuxtPlugin(nuxtApp => {

modules/i18n/locales/en.json

@@ -1610,6 +1610,9 @@
     "ChangedGameOptionsList": {
       "resetOptionAlt": "Reset to official rule the option : {option}",
       "resetToOfficialRule": "Reset to official rule"
+    },
+    "GameLobbyHeaderGroupOrganizerButton": {
+      "groupOrganizer": "Group organizer"
     }
   }
 }

modules/i18n/locales/fr.json

@@ -1610,6 +1610,9 @@
     "ChangedGameOptionsList": {
       "resetOptionAlt": "Revenir à la règle officielle pour la variante : {option}",
       "resetToOfficialRule": "Revenir à la règle officielle"
+    },
+    "GameLobbyHeaderGroupOrganizerButton": {
+      "groupOrganizer": "Organisation des groupes"
     }
   }
 }