webapp-front/pages/game/[id].vue

<script setup lang="ts">
import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
import { useGameStore } from "~/store/game.store";
import { useUserStore } from "~/store/user.store";
const route = useRoute();
const gameId = Number(route.params.id);

const userStore = useUserStore();
const gameStore = useGameStore();
let game = (await gameStore.fetchGame(
  gameId
)) as globalThis.Ref<GameResponseDTO>;
if (!game.value) {
  navigateTo("/");
}

onBeforeMount(() => {
  gameStore.subscribe(gameId);
});

onUnmounted(() => {
  gameStore.close();
});

function startGame() {
  gameStore.startGame(gameId);
}

function joinGame() {
  gameStore.joinGame(gameId);
}

function deleteGame() {
  gameStore.deleteGame(gameId);
}

const isCurrentTurn = computed(
  () =>
    userStore.self && userStore.self?.id == game.value?.currentPlayer?.userId
);

watch(
  () => userStore.self,
  () => {
    if (isCurrentTurn) {
      if (!userStore.self) {
        return;
      }
      if (!game.value?.currentPlayer) {
        return;
      }
      if (game.value.currentPlayer.userId == userStore.self.id) {
        void gameStore.getCurrentWord(gameId);
      }
    }
  },
  { immediate: true }
);

const wordInput = ref<HTMLInputElement>();
const loading = ref(false);
const messageText = ref("");
async function createWord() {
  if (messageText.value == "") {
    return;
  }
  if (loading.value) {
    return;
  }
  loading.value = true;
  try {
    await gameStore.sendMessage(gameId, messageText.value);
    messageText.value = "";
  } finally {
    nextTick(() => {
      loading.value = false;
      nextTick(() => {
        wordInput.value?.focus();
      });
    });
  }
}

const selfPlayer = computed(() =>
  game.value.players.find((p) => p.userId == userStore.self?.id)
);

function conceptClick(value: string) {
  console.log(value)
}
</script>

<template>
  <main id="game">
    <div id="sidebar">
      <div v-if="isCurrentTurn">Current word : {{ gameStore.currentWord }}</div>
      Players in game :
      <div v-for="player in game.players" :key="player.id">
        <User :id="player.userId"></User> {{ player.score }}
      </div>

      <template v-if="game.currentPlayer">
        Current player :
        <User :id="game.currentPlayer?.userId"></User>
      </template>

      {{ game }}
      <template v-if="userStore.self">
        <template v-if="!game.started">
          <input type="button" v-if="game.ownerId == userStore.self.id" value="start" @click="startGame" />
          <input type="button" v-if="!selfPlayer" value="join" @click="joinGame" />
        </template>
        <input v-if="game.ownerId == userStore.self.id" type="button" value="delete" @click="deleteGame" />
      </template>

      <div>
        Messages
        <span v-for="message in game.messages" :key="message.id">
          <template v-if="message.authorId">
            {{ message.value }}<User :id="message.authorId"></User>
          </template>
          <template v-else>
            <User :id="message.value"></User> Guessed the word !
          </template>
        </span>
        <input ref="wordInput" type="text" :disabled="loading || selfPlayer?.hasGuessed" @keypress.enter="createWord"
          v-model="messageText" />
        <button :disabled="loading || selfPlayer?.hasGuessed" @click="createWord">
          Submit
        </button>
      </div>
    </div>
    <div id="gridContainer">
      <ConceptGrid @click="conceptClick"></ConceptGrid>
    </div>

  </main>

</template>

<style lang="css">
main#game {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr minmax(0, 1fr);
  grid-template-rows: 100%;
  grid-template-areas: "sidebar grid";
  height: 100%
}

#sidebar {
  grid-area: sidebar;
}

#gridContainer {
  justify-self: left;
  grid-area: grid;
}

@media only screen and (max-width: 992px) {
  main#game {
    grid-template-columns: 100%;
    grid-template-rows: minmax(0, 650px) 1fr;
    grid-template-areas: "grid" "sidebar";
  }
}
</style>