generated from legonzaur/webapp-front
Initial commit
This commit is contained in:
@@ -0,0 +1,167 @@
|
||||
<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>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { useLobbyStore } from "~/store/lobby.store";
|
||||
import { useUserStore } from "~/store/user.store";
|
||||
|
||||
const loading = ref(false);
|
||||
const lobbyStore = useLobbyStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
async function createGame() {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
await lobbyStore
|
||||
.createGame()
|
||||
.then((data) => {
|
||||
loading.value = false;
|
||||
navigateTo("/game/" + data.id);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.data.statusCode == 400) {
|
||||
console.error("Owned game limit reached");
|
||||
} else {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<LobbyGame v-for="game in lobbyStore.games" :key="game.id" :id="game.id" />
|
||||
<input type="button" value="Create Game" @click="createGame" :disabled="!userStore.self || loading" />
|
||||
</main>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
input:disabled {
|
||||
cursor: wait;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
Login
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { useWordStore } from "~/store/word.store";
|
||||
|
||||
const newWord = ref("");
|
||||
const wordStore = useWordStore();
|
||||
|
||||
await wordStore.fetchWordList();
|
||||
|
||||
const loading = ref(false);
|
||||
const wordInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
async function createWord() {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
await wordStore.createWord(newWord.value);
|
||||
newWord.value = "";
|
||||
} finally {
|
||||
nextTick(() => {
|
||||
loading.value = false;
|
||||
nextTick(() => {
|
||||
wordInput.value?.focus();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
wordStore.subscribe();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
wordStore.close();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main id="words">
|
||||
<div class="header">
|
||||
<span>Word</span>
|
||||
<span>Status</span>
|
||||
<span></span>
|
||||
<span>Submitter</span>
|
||||
</div>
|
||||
<Word v-for="word in wordStore.words" :id="word.id" :key="word.id" />
|
||||
<div class="new-word">
|
||||
<span>
|
||||
<input ref="wordInput" type="text" :disabled="loading" @keypress.enter="createWord" v-model="newWord" />
|
||||
<button :disabled="loading" @click="createWord">Submit</button>
|
||||
</span>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
main#words {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
div.header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user