feat : guess word

pages/game/[id].vue

@@ -1,10 +1,18 @@
 <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();
-const game = await gameStore.fetchGame(gameId);
+let game = (await gameStore.fetchGame(
+  gameId
+)) as globalThis.Ref<GameResponseDTO>;
+if (!game.value) {
+  navigateTo("/");
+}
 
 onBeforeMount(() => {
   gameStore.subscribe(gameId);
@@ -13,6 +21,111 @@ onBeforeMount(() => {
 onUnmounted(() => {
   gameStore.close();
 });
+
+function startGame() {
+  gameStore.startGame(gameId);
+}
+
+function joinGame() {
+  gameStore.joinGame(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)
+);
 </script>
 
-<template>{{ game }}</template>
+<template>
+  <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 }}
+  <input
+    type="button"
+    v-if="userStore.self && !game.started && game.ownerId == userStore.self.id"
+    value="start"
+    @click="startGame"
+  />
+  <input
+    type="button"
+    v-if="userStore.self && !game.started && !selfPlayer"
+    value="join"
+    @click="joinGame"
+  />
+  <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>
+</template>