109 lines
2.6 KiB
Vue
109 lines
2.6 KiB
Vue
<template>
|
|
<div class="container everything">
|
|
<div class="row">
|
|
<Header></Header>
|
|
</div>
|
|
<div class="row">
|
|
<UserScores :userScores="userScores"></UserScores>
|
|
</div>
|
|
<div class="row">
|
|
<Game :class="user ? '' : 'hidden'" :user-id="this.user?.id"
|
|
@gameFinished="this.updateUserScores()" ref="game">
|
|
</Game>
|
|
<Login v-if="!user" @userChange="(event) => {this.updateUser(event);}">
|
|
</Login>
|
|
<div v-if="user" class="logout-wrapper offset-10 col-2">
|
|
<RRButton @click="this.user = null; this.userId = -1;" text="Logout"></RRButton>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<Leaderboard type="highscore"></Leaderboard>
|
|
</div>
|
|
<div class="offset-4 col-4">
|
|
<Leaderboard type="totalplaytime"></Leaderboard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {defineComponent} from 'vue';
|
|
import Leaderboard from './components/Leaderboard.vue';
|
|
import UserScores from './components/UserScores.vue';
|
|
import Game from './components/Game.vue';
|
|
import Header from './components/Header.vue';
|
|
|
|
import "bootstrap/dist/css/bootstrap.min.css";
|
|
import "bootstrap/dist/js/bootstrap.min.js";
|
|
import Login from "@/components/Login.vue";
|
|
import {Rest} from "@/model/Rest";
|
|
import {User} from "@/model/User";
|
|
import RRButton from "@/components/RRButton.vue";
|
|
|
|
export default defineComponent({
|
|
name: 'App',
|
|
components: {
|
|
RRButton,
|
|
Login,
|
|
UserScores,
|
|
Leaderboard,
|
|
Game,
|
|
Header,
|
|
},
|
|
data() {
|
|
return {
|
|
userScores: {},
|
|
userId: -1,
|
|
user: null as User | null,
|
|
leaderboardEvent: new Event('reloadLeaderboard')
|
|
}
|
|
},
|
|
|
|
|
|
methods: {
|
|
async fetchFromApi(path: string, method: "GET" | "POST") {
|
|
let res: Response = await fetch(Rest.URL + path, {method: method,});
|
|
return await res.json();
|
|
},
|
|
async fetchUserScores() {
|
|
if (this.userId == -1) return;
|
|
return await this.fetchFromApi(`/user/${this.userId}/scores`, "GET");
|
|
},
|
|
async updateUserScores() {
|
|
this.userScores = await this.fetchUserScores();
|
|
},
|
|
async updateUser(user: User) {
|
|
if (user) {
|
|
this.user = user;
|
|
this.userId = user.id ?? -1;
|
|
await this.updateUserScores();
|
|
}
|
|
window.dispatchEvent(this.leaderboardEvent);
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
|
|
|
* {
|
|
font-family: 'Press Start 2P', serif;
|
|
}
|
|
|
|
.row {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
.everything {
|
|
margin-bottom: 4em;
|
|
}
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
.logout-wrapper {
|
|
display: flex;
|
|
justify-content: right;
|
|
}
|
|
</style>
|