80 lines
1.7 KiB
Vue
80 lines
1.7 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 self = userStore.self;
|
|
if (!self) {
|
|
return [];
|
|
}
|
|
const games = Object.values(lobbyStore.games).filter((g) =>
|
|
g.players.some((p) => p.userId == self.id)
|
|
);
|
|
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>
|
|
<NuxtLink :to="$config.public.endpoint + '/logout'"
|
|
><button>Logout</button></NuxtLink
|
|
>
|
|
</template>
|
|
<NuxtLink v-else :to="$config.public.discordLoginEndpoint">
|
|
<button>Login</button>
|
|
</NuxtLink>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<template v-else> Contacting server... </template>
|
|
</div>
|
|
|
|
<div id="links">
|
|
<NuxtLink to="/">Home</NuxtLink>
|
|
<NuxtLink to="/words">Words</NuxtLink>
|
|
<NuxtLink to="/concepts">Concepts</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>
|