Template
142 lines
3.2 KiB
Vue
142 lines
3.2 KiB
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)
|
|
);
|
|
</script>
|
|
|
|
<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 }}
|
|
<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>
|
|
</template>
|