Merge branch 'leaderboard-pagination' into develop
# Conflicts: # frontend/package-lock.json
This commit is contained in:
j-weissen
commit
030189aa52
15 changed files with 354 additions and 1291 deletions
4
frontend/.browserslistrc
Normal file
4
frontend/.browserslistrc
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
not ie 11
|
||||
19
frontend/.eslintrc.js
Normal file
19
frontend/.eslintrc.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/typescript/recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"noImplicitAny": true,
|
||||
"outFile": "../public/game/build.js",
|
||||
"outFile": "../public/game.js",
|
||||
"preserveConstEnums": true,
|
||||
"removeComments": true,
|
||||
"rootDir": ".",
|
||||
|
|
|
|||
1401
frontend/package-lock.json
generated
1401
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -8,9 +8,10 @@
|
|||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||||
<script src="./game/build.js"></script>
|
||||
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
|
||||
<script src="./game.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
|
||||
</head>
|
||||
<body style="background-color: beige;">
|
||||
<noscript>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
function setup() {
|
||||
createCanvas(400, 400);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (mouseIsPressed) {
|
||||
fill(0);
|
||||
} else {
|
||||
fill(255);
|
||||
}
|
||||
ellipse(mouseX, mouseY, 80, 80);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="container everything">
|
||||
<div class="row">
|
||||
<Header></Header>
|
||||
</div>
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
</Login>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<Leaderboard :title="'Highscore'" :data="higscoreLeaderboard"></Leaderboard>
|
||||
<div class="col-4">
|
||||
<Leaderboard type="highscore"></Leaderboard>
|
||||
</div>
|
||||
<div class="col">
|
||||
<Leaderboard :title="'Total Playtime'" :data="totalPlaytimeLeaderboard"></Leaderboard>
|
||||
<div class="offset-4 col-4">
|
||||
<Leaderboard type="totalplaytime"></Leaderboard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,8 +47,6 @@ export default defineComponent({
|
|||
data() {
|
||||
return {
|
||||
userScores: {},
|
||||
higscoreLeaderboard: [],
|
||||
totalPlaytimeLeaderboard: [],
|
||||
userId: 1,
|
||||
user: null,
|
||||
}
|
||||
|
|
@ -61,14 +59,9 @@ export default defineComponent({
|
|||
async fetchUserScores() {
|
||||
return await this.fetchFromApi(`/user/${this.userId}/scores`, "GET");
|
||||
},
|
||||
async fetchLeaderboard(type: "highscore" | "totalplaytime") {
|
||||
return await this.fetchFromApi(`/leaderboard/${type}`, "GET");
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.userScores = await this.fetchUserScores();
|
||||
this.higscoreLeaderboard = await this.fetchLeaderboard("highscore")
|
||||
this.totalPlaytimeLeaderboard = await this.fetchLeaderboard("totalplaytime")
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -84,4 +77,7 @@ export default defineComponent({
|
|||
margin-top:2em;
|
||||
}
|
||||
|
||||
.everything {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<button>{{ text }}</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "Button",
|
||||
props: {
|
||||
text: {
|
||||
type: String
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
border: 3px solid black;
|
||||
background-color: beige;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,25 +1,72 @@
|
|||
<template>
|
||||
<h3>{{ title }}</h3>
|
||||
<div class="container">
|
||||
<div class="row" v-for="entry in data" :key="entry.rank" >
|
||||
<div class="col-1 text-left">{{entry.rank}}</div>
|
||||
<div class="offset-1 col text-left">{{entry.username}}</div>
|
||||
<div class="col text-left">{{entry.score}}</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h3 class="col-10"><strong>{{ this.title() }}</strong></h3>
|
||||
<div class="col-1">
|
||||
<Button @click="prevPage" text="<"></Button>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<Button @click="nextPage" text=">"></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-for="entry in this.page" :key="entry.rank" >
|
||||
<LeaderboardEntry :entry="entry" ></LeaderboardEntry>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import LeaderboardEntry from "@/components/LeaderboardEntry.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
|
||||
export default {
|
||||
name: "Leaderboard",
|
||||
props: {
|
||||
title: {
|
||||
type: String
|
||||
},
|
||||
data: {
|
||||
type: Array
|
||||
}
|
||||
name: "Leaderboard",
|
||||
components: {
|
||||
LeaderboardEntry,
|
||||
Button,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageNumber: 0,
|
||||
entriesPerPage: 5,
|
||||
page: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
type: "totalplaytime" | "highscore",
|
||||
},
|
||||
created() {
|
||||
this.updatePage();
|
||||
},
|
||||
updated() {
|
||||
this.updatePage()
|
||||
},
|
||||
methods: {
|
||||
async fetchPage() {
|
||||
let res = await fetch(`http://localhost:3000/leaderboard/${this.type}?pagination=true&entriesPerPage=${this.entriesPerPage}&page=${this.pageNumber}`, {method: "GET"});
|
||||
return await res.json();
|
||||
},
|
||||
title() {
|
||||
return this.type === "totalplaytime" ? "Total Playtime" : "Highscore";
|
||||
},
|
||||
nextPage() {
|
||||
this.pageNumber++;
|
||||
this.updatePage();
|
||||
},
|
||||
prevPage() {
|
||||
if (this.pageNumber > 0) this.pageNumber--;
|
||||
this.updatePage();
|
||||
},
|
||||
async updatePage() {
|
||||
let tempPage = await this.fetchPage();
|
||||
for (let i = 0; i < this.entriesPerPage; i++) {
|
||||
this.page.pop()
|
||||
}
|
||||
for (const entry of tempPage) {
|
||||
this.page.push(entry)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
25
frontend/src/components/LeaderboardEntry.vue
Normal file
25
frontend/src/components/LeaderboardEntry.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div class="col-1 text-left">{{this.entry.rank}}</div>
|
||||
<div class="col text-left">{{this.entry.username}}</div>
|
||||
<div class="col text-right">{{this.entry.score}}</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: "LeaderboardEntry",
|
||||
props: {
|
||||
entry: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue