Template
72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
|
|
import { useLobbyStore } from "~/store/lobby.store";
|
|
import { useUserStore } from "~/store/user.store";
|
|
|
|
const userStore = useUserStore();
|
|
const lobbyStore = useLobbyStore();
|
|
|
|
const currentGames = computed(() => {
|
|
const games = Object.values(lobbyStore.games).filter((g) =>
|
|
g.players.some((p) => p.user.id == userStore.self?.id)
|
|
);
|
|
console.log(games);
|
|
return games;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<header>
|
|
<div id="self">
|
|
<template v-if="userStore.has_contacted">
|
|
<ClientOnly>
|
|
<template v-if="userStore.self && userStore.self.id">
|
|
<User :id="userStore.self.id"></User>
|
|
<button>Logout</button>
|
|
</template>
|
|
<button v-else>Login</button>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<template v-else> Contacting server... </template>
|
|
</div>
|
|
|
|
<div id="links">
|
|
<NuxtLink to="/">Home</NuxtLink>
|
|
<NuxtLink to="/words">Words</NuxtLink>
|
|
</div>
|
|
|
|
<div id="games">
|
|
<NuxtLink v-for="game of currentGames" :to="'/game/' + game.id"
|
|
><div>Back to Current Game</div></NuxtLink
|
|
>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
header,
|
|
header * {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
header > * {
|
|
flex: 1 1 0px;
|
|
}
|
|
|
|
div#self {
|
|
gap: 10px;
|
|
height: 32px;
|
|
}
|
|
|
|
div#links {
|
|
flex-grow: 4;
|
|
gap: 1%;
|
|
}
|
|
|
|
div#links {
|
|
}
|
|
</style>
|