Prevent users from clicking the button twice

src/components/Home/CreateGameForm.vue

@@ -180,6 +180,8 @@ export default defineComponent({
 
  const startMultiplayerGame = async (): Promise<void> => {
  try {
+ store.dispatch("onClickStartButtonAction");
+
  if (store.state.gameSettings.isOwner) {
  let randomNumber: number;
  let snapshot: DataSnapshot;

src/components/Home/CreateRoomDialog.vue

@@ -76,9 +76,7 @@
  </div>
  <div :class="$style['create-room-dialog__form']">
  <div>
- <span :class="$style['create-room-dialog__text']"
- >Are you an owner?</span
- >
+ <span :class="$style['create-room-dialog__text']">Are you a host?</span>
  </div>
  <Space />
  <Switch :ans="isOwner" @onChangeValue="onChangeIsOwner" />

src/store/modules/gameSettingsStore.ts

@@ -11,6 +11,7 @@ export interface GameSettingsState {
  playerId: string;
  isOwner: boolean;
  roomNumber: string;
+ isStartingGame: boolean;
  geoJSON: any;
 }
 
@@ -23,6 +24,7 @@ const getDefaultState = (): GameSettingsState => ({
  playerId: "",
  isOwner: true,
  roomNumber: "",
+ isStartingGame: false,
  geoJSON: null,
 });
 
@@ -36,6 +38,8 @@ export const gameSettingsStore = {
  return idx >= 0 ? MAP_OPTIONS[idx].text : "";
  },
  isReadyForMultiplayerGame(state: GameSettingsState) {
+ if (state.isStartingGame) return false;
+
  if (state.isOwner) {
  return state.playerName !== "";
  } else {
@@ -75,6 +79,9 @@ export const gameSettingsStore = {
  changeRoomNumber(state: GameSettingsState, value: string) {
  state.roomNumber = value;
  },
+ clickStartButton(state: GameSettingsState) {
+ state.isStartingGame = true;
+ },
  fetchGeoJSON(state: GameSettingsState, value: any) {
  state.geoJSON = value;
  },
@@ -107,6 +114,9 @@ export const gameSettingsStore = {
  changeRoomNumberAction({ commit }: any, payload: any) {
  commit("changeRoomNumber", payload.roomNumber);
  },
+ onClickStartButtonAction({ commit }: any) {
+ commit("clickStartButton");
+ },
  async fetchGeoJSONAction({ commit }: any, payload: any) {
  try {
  const resp = await axios.get(