chore(events): consistent way to handle events (#612)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Refactor**
- Renamed and refined event handler functions across multiple components
for improved clarity and consistency in codebase.

This refactoring does not affect the functionality but enhances code
readability and maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Closes #612

app/components/layouts/default/NavBar/MuteButton/MuteButton.vue

@@ -4,7 +4,7 @@
     v-p-tooltip.bottom="tooltipText"
     :aria-label="tooltipText"
     type="button"
-    @click="toggleSound"
+    @click.prevent="onClickFromMuteButton"
   >
     <VueLottie
       id="mute-button-lottie"
@@ -37,7 +37,7 @@ const soundLottie = ref<InstanceType<typeof Vue3Lottie> | null>(null);
 
 const tooltipText = computed<string>(() => (isMuted.value ? t("components.MuteButton.unmute") : t("components.MuteButton.mute")));
 
-function toggleSound(): void {
+function onClickFromMuteButton(): void {
   if (!soundLottie.value) {
     throw createError("Sound Lottie is not initialized");
   }

app/components/layouts/default/NavBar/ParametersMenu/ParametersMenu.vue

@@ -6,7 +6,7 @@
       icon="fa fa-cog"
       severity="secondary"
       type="button"
-      @click="toggleParametersMenu"
+      @click.prevent="onClickFromParametersButton"
     />
 
     <PrimeVueMenu
@@ -63,7 +63,7 @@ const parametersMenuItems = computed<MenuItem[]>(() => [
 
 const parametersMenu = ref<InstanceType<typeof Menu> | null>(null);
 
-function toggleParametersMenu(event: MouseEvent): void {
+function onClickFromParametersButton(event: MouseEvent): void {
   if (!parametersMenu.value) {
     throw createError("Parameters Menu is not initialized");
   }

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

@@ -10,7 +10,7 @@
     <div class="flex h-full justify-center lg:1/3 md:w-6/12 w-8/12">
       <GameLobbyStartGameButton
         id="game-lobby-start-game-button"
-        @reject-players-position-step="handleRejectPlayersPositionStep"
+        @reject-players-position-step="onRejectPlayersPositionStepFromGameLobbyStartGameButton"
       />
     </div>
 
@@ -25,7 +25,7 @@ import GameLobbyStartGameButton from "~/components/pages/game-lobby/GameLobbyFoo
 
 const emit = defineEmits<GameLobbyFooterEmits>();
 
-function handleRejectPlayersPositionStep(): void {
+function onRejectPlayersPositionStepFromGameLobbyStartGameButton(): void {
   emit("rejectPlayersPositionStep");
 }
 </script>

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

@@ -13,7 +13,7 @@
       severity="secondary"
       :size="buttonSize"
       type="button"
-      @click="handleRandomCompositionButtonClick"
+      @click.prevent="onClickFromRandomCompositionButton"
     />
   </div>
 </template>
@@ -52,7 +52,7 @@ const containerTooltip = computed<string | undefined>(() => {
   return undefined;
 });
 
-async function handleRandomCompositionButtonClick(): Promise<void> {
+async function onClickFromRandomCompositionButton(): Promise<void> {
   isLoadingGetRandomGameComposition.value = true;
   const randomGameComposition = await fetchRandomGameComposition({
     players: createGameDto.value.players,

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

@@ -13,14 +13,14 @@
       raised
       size="large"
       type="button"
-      @click="handleStartGameButtonClick"
+      @click.prevent="onClickFromStartGameButton"
     />
 
     <GameLobbyStartGameConfirmDialog
       id="game-lobby-start-game-confirm-dialog"
       ref="gameLobbyStartGameConfirmDialog"
-      @confirm-start-game="handleConfirmStartGame"
-      @reject-players-position-step="handleRejectPlayersPositionStep"
+      @confirm-start-game="onConfirmStartGameFromGameLobbyStartGameConfirmDialog"
+      @reject-players-position-step="onRejectPlayersPositionStepFromGameLobbyStartGameConfirmDialog"
     />
   </div>
 </template>
@@ -54,14 +54,14 @@ const isLoadingCreateGame = ref<boolean>(false);
 
 const containerTooltip = computed<string | undefined>(() => gameCreationValidationErrors.value[0]);
 
-function handleStartGameButtonClick(): void {
+function onClickFromStartGameButton(): void {
   if (!gameLobbyStartGameConfirmDialog.value) {
     throw createError("Game Lobby Start Game Confirm Dialog is not defined");
   }
   gameLobbyStartGameConfirmDialog.value.open();
 }
 
-async function handleConfirmStartGame(): Promise<void> {
+async function onConfirmStartGameFromGameLobbyStartGameConfirmDialog(): Promise<void> {
   isLoadingCreateGame.value = true;
   const createdGame = await createGame(createGameDto.value);
   if (createdGame) {
@@ -71,7 +71,7 @@ async function handleConfirmStartGame(): Promise<void> {
   isLoadingCreateGame.value = false;
 }
 
-function handleRejectPlayersPositionStep(): void {
+function onRejectPlayersPositionStepFromGameLobbyStartGameConfirmDialog(): void {
   emit("rejectPlayersPositionStep");
 }
 </script>

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyStartGameButton/GameLobbyStartGameConfirmDialog/GameLobbyStartGameConfirmDialog.vue

@@ -10,8 +10,8 @@
         :current-confirm-step="currentConfirmStep"
         :reject-callback="rejectCallback"
         @confirm-start-game="acceptCallback"
-        @confirm-step="confirmStep"
-        @reject-players-position-step="rejectPlayersPositionStep"
+        @confirm-step="onConfirmStepFromGameLobbyStartGameConfirmDialogContainer"
+        @reject-players-position-step="onRejectPlayersPositionStepFromGameLobbyStartGameConfirmDialogContainer"
         @reject-start-game="rejectCallback"
       />
     </template>
@@ -59,15 +59,15 @@ function open(): void {
   });
 }
 
-function confirmStep(): void {
+function onConfirmStepFromGameLobbyStartGameConfirmDialogContainer(): void {
   confirmStepIndex.value++;
 }
 
 function confirmStartGame(): void {
   emit("confirmStartGame");
 }
 
-function rejectPlayersPositionStep(rejectCallback: () => void): void {
+function onRejectPlayersPositionStepFromGameLobbyStartGameConfirmDialogContainer(rejectCallback: () => void): void {
   rejectCallback();
   emit("rejectPlayersPositionStep");
 }

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyStartGameButton/GameLobbyStartGameConfirmDialog/GameLobbyStartGameConfirmDialogContainer/GameLobbyStartGameConfirmDialogContent/GameLobbyStartGameConfirmDialogContent.vue

@@ -7,8 +7,8 @@
       <Component
         :is="currentConfirmStepComponent"
         :key="currentConfirmStep"
-        @confirm-step="confirmStep"
-        @reject-players-position-step="rejectPlayersPositionStep"
+        @confirm-step="onConfirmStepFromConfirmStepComponent"
+        @reject-players-position-step="onRejectPlayersPositionStepFromConfirmStepComponent"
       />
     </Transition>
   </div>
@@ -31,11 +31,11 @@ const confirmStepsComponents: Record<GameLobbyStartGameConfirmDialogStep, GameLo
 
 const currentConfirmStepComponent = computed<GameLobbyStartGameConfirmDialogStepComponents>(() => confirmStepsComponents[props.currentConfirmStep]);
 
-function confirmStep(): void {
+function onConfirmStepFromConfirmStepComponent(): void {
   emit("confirmStep");
 }
 
-function rejectPlayersPositionStep(): void {
+function onRejectPlayersPositionStepFromConfirmStepComponent(): void {
   emit("rejectPlayersPositionStep");
 }
 </script>

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyStartGameButton/GameLobbyStartGameConfirmDialog/GameLobbyStartGameConfirmDialogContainer/GameLobbyStartGameConfirmDialogContent/GameLobbyStartGameConfirmDialogPlayersPositioned/GameLobbyStartGameConfirmDialogPlayersPositioned.vue

@@ -26,15 +26,15 @@
         icon="fa-compass fa"
         :label="$t(`components.GameLobbyStartGameConfirmDialogPlayersPositioned.showMeHowToPositionPlayers`)"
         severity="info"
-        @click="onRejectPlayersPositionStep"
+        @click.prevent="onRejectPlayersPositionStep"
       />
 
       <PrimeVueButton
         id="confirm-step-button"
         icon="fa-check fa"
         :label="$t(`shared.yes`)"
         severity="success"
-        @click="onConfirmPlayersPositionStep"
+        @click.prevent="onConfirmPlayersPositionStep"
       />
     </div>
   </div>

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyStartGameButton/GameLobbyStartGameConfirmDialog/GameLobbyStartGameConfirmDialogContainer/GameLobbyStartGameConfirmDialogFooter/GameLobbyStartGameConfirmDialogFooter.vue

@@ -7,7 +7,7 @@
         id="cancel-button"
         severity="secondary"
         size="small"
-        @click="onRejectStartGame"
+        @click.prevent="onRejectStartGame"
       >
         <i class="fa fa-times me-2"/>
 
@@ -22,7 +22,7 @@
         :class="confirmButtonClasses"
         severity="secondary"
         size="small"
-        @click="onConfirmStartGame"
+        @click.prevent="onConfirmStartGame"
       >
         <i
           id="confirm-button-icon"

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

@@ -11,7 +11,7 @@
       <div class="md:w-6/12">
         <form
           id="game-lobby-header-form"
-          @submit.prevent="addPlayerToCreateGameDto"
+          @submit.prevent="onSubmitFromHeaderForm"
         >
           <GameLobbyPlayerInput
             id="game-lobby-player-input"
@@ -26,8 +26,8 @@
       <GameLobbyHeaderSetupButtons
         id="game-lobby-header-setup-buttons"
         ref="gameLobbyHeaderSetupButtons"
-        @game-options-button-click="handleGameOptionsButtonClick"
-        @position-coordinator-button-click="handlePositionCoordinatorButtonClick"
+        @game-options-button-click="onGameOptionsButtonClickFromGameLobbyHeaderSetupButtons"
+        @position-coordinator-button-click="onPositionCoordinatorButtonClickFromGameLobbyHeaderSetupButtons"
       />
     </div>
   </div>
@@ -52,7 +52,7 @@ const gameLobbyPlayerInput = ref<GameLobbyPlayerInputExposed | null>(null);
 
 const gameLobbyHeaderSetupButtons = ref<GameLobbyHeaderSetupButtonsExposed | null>(null);
 
-function addPlayerToCreateGameDto(): void {
+function onSubmitFromHeaderForm(): void {
   if (gameLobbyPlayerInput.value === null) {
     throw createError("Game Lobby Player Input is not initialized");
   }
@@ -72,11 +72,11 @@ function addPlayerToCreateGameDto(): void {
   createGameDtoStore.addPlayerToCreateGameDto(playerToAdd);
 }
 
-function handleGameOptionsButtonClick(): void {
+function onGameOptionsButtonClickFromGameLobbyHeaderSetupButtons(): void {
   emit("gameOptionsButtonClick");
 }
 
-function handlePositionCoordinatorButtonClick(): void {
+function onPositionCoordinatorButtonClickFromGameLobbyHeaderSetupButtons(): void {
   emit("positionCoordinatorButtonClick");
 }
 

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

@@ -6,7 +6,7 @@
     :pt="{ 'root': '!border-sky-600' }"
     severity="info"
     size="small"
-    @click.prevent="clickHandler"
+    @click.prevent="onClickFromGameOptionsButton"
   />
 </template>
 
@@ -15,7 +15,7 @@ import type { GameLobbyHeaderOptionsButtonEmits } from "~/components/pages/game-
 
 const emit = defineEmits<GameLobbyHeaderOptionsButtonEmits>();
 
-function clickHandler(): void {
+function onClickFromGameOptionsButton(): void {
   emit("gameOptionsButtonClick");
 }
 </script>

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

@@ -6,7 +6,7 @@
     :pt="{ 'root': '!border-sky-600' }"
     severity="info"
     size="small"
-    @click.prevent="clickHandler"
+    @click.prevent="onClickFromGamePositionCoordinatorButton"
   />
 </template>
 
@@ -15,7 +15,7 @@ import type { GameLobbyHeaderPositionCoordinatorButtonEmits } from "~/components
 
 const emit = defineEmits<GameLobbyHeaderPositionCoordinatorButtonEmits>();
 
-function clickHandler(): void {
+function onClickFromGamePositionCoordinatorButton(): void {
   emit("positionCoordinatorButtonClick");
 }
 </script>

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

@@ -7,7 +7,7 @@
         id="game-lobby-header-options-button"
         key="game-options-button"
         class="fade-list-item"
-        @game-options-button-click="handleGameOptionsButtonClick"
+        @game-options-button-click="onGameOptionsButtonClickFromGameOptionButton"
       />
 
       <GameLobbyHeaderPositionCoordinatorButton
@@ -16,7 +16,7 @@
         key="game-position-coordinator-button"
         ref="gameLobbyHeaderPositionCoordinatorButton"
         class="fade-list-item"
-        @position-coordinator-button-click="handlePositionCoordinatorButtonClick"
+        @position-coordinator-button-click="onPositionCoordinatorButtonClickFromGamePositionCoordinatorButton"
       />
     </TransitionGroup>
   </PrimeVueButtonGroup>
@@ -43,11 +43,11 @@ const gameLobbyHeaderPositionCoordinatorButton = ref<ComponentPublicInstance | n
 
 const isPositionCoordinatorVisible = computed<boolean>(() => doesCreateGameDtoContainPositionDependantRoles.value && createGameDto.value.players.length >= MIN_PLAYERS_IN_GAME);
 
-function handleGameOptionsButtonClick(): void {
+function onGameOptionsButtonClickFromGameOptionButton(): void {
   emit("gameOptionsButtonClick");
 }
 
-function handlePositionCoordinatorButtonClick(): void {
+function onPositionCoordinatorButtonClickFromGamePositionCoordinatorButton(): void {
   emit("positionCoordinatorButtonClick");
 }
 

app/components/pages/game-lobby/GameLobbyPlayersParty/GameLobbyPlayerCard/GameLobbyPlayerCard.vue

@@ -12,14 +12,14 @@
       severity="danger"
       size="small"
       type="button"
-      @click.prevent="removePlayerFromCreateGameDto"
+      @click.prevent="onClickFromRemovePlayerButton"
     />
 
     <PlayerCard
       class="player-card"
       :player-name="player.name"
       :player-role="player.role.name"
-      @player-card-selector-click="pickRoleForPlayer"
+      @player-card-selector-click="onPlayerCardSelectorClickFromPlayerCard"
     />
 
     <small class="player-card-role truncate">
@@ -51,11 +51,11 @@ const playerCardRoleText = computed<string>(() => {
   return getRoleNameLabel(props.player.role.name);
 });
 
-function removePlayerFromCreateGameDto(): void {
+function onClickFromRemovePlayerButton(): void {
   createGameDtoStore.removePlayerFromCreateGameDto(props.player.name);
 }
 
-function pickRoleForPlayer(): void {
+function onPlayerCardSelectorClickFromPlayerCard(): void {
   emit("pickRoleForPlayer", props.player);
 }
 </script>

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

@@ -30,7 +30,7 @@
             :key="player.name"
             class="fade-list-item game-lobby-player-card md:w-1/5 w-1/3"
             :player="player"
-            @pick-role-for-player="pickRoleForPlayer"
+            @pick-role-for-player="onPickRoleForPlayerFromGameLobbyPlayerCard"
           />
         </TransitionGroup>
       </div>
@@ -52,7 +52,7 @@ const createGameDtoStore = useCreateGameDtoStore();
 
 const { createGameDto } = storeToRefs(createGameDtoStore);
 
-function pickRoleForPlayer(player?: CreateGamePlayerDto): void {
+function onPickRoleForPlayerFromGameLobbyPlayerCard(player?: CreateGamePlayerDto): void {
   if (!player) {
     return;
   }

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

@@ -39,7 +39,7 @@
         id="game-lobby-role-picker-grid"
         class="overflow-y-scroll w-8/12"
         :picked-role="pickedRole"
-        @pick-role="pickRole"
+        @pick-role="onPickRoleFromGameLobbyRolePickerGrid"
       />
     </div>
 
@@ -72,7 +72,7 @@ function openToPickRoleForPlayer(player: CreateGamePlayerDto): void {
   isVisible.value = true;
 }
 
-function pickRole(role: Role): void {
+function onPickRoleFromGameLobbyRolePickerGrid(role: Role): void {
   pickedRole.value = role;
 }