sprechtl/RaspberryRocketeer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend pagination done

Browse source
This commit is contained in:
j-weissen 2023-01-20 08:15:07 +01:00
parent 4f936aaa42
commit e8079f760a
10 changed files with 472 additions and 1333 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/game/tsconfig.json
View file

@ -1,7 +1,7 @@
{
"compilerOptions": {
"noImplicitAny": true,
"outFile": "../public/game/build.js",
"outFile": "../public/game.js",
"preserveConstEnums": true,
"removeComments": true,
"rootDir": ".",

1637
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
frontend/package.json
View file

@ -15,14 +15,8 @@
"vue": "^3.2.13"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"typescript": "~4.5.5"
}
}

3
frontend/public/index.html
View file

@ -8,8 +8,9 @@
<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="./game.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
</head>
<body style="background-color: beige;">

18
frontend/src/App.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="container">
<div class="container everything">
<div class="row">
<Header></Header>
</div>
@ -11,11 +11,11 @@
</Game>
</div>
<div class="row">
<div class="col">
<Leaderboard :title="'Highscore'" :data="higscoreLeaderboard"></Leaderboard>
<div class="col-4">
<Leaderboard :title="'Highscore'" :leaderboard="this.highscoreLeaderboard"></Leaderboard>
</div>
<div class="col">
<Leaderboard :title="'Total Playtime'" :data="totalPlaytimeLeaderboard"></Leaderboard>
<div class="offset-4 col-4">
<Leaderboard :title="'Total Playtime'" :leaderboard="this.totalPlaytimeLeaderboard"></Leaderboard>
</div>
</div>
</div>
@ -42,7 +42,7 @@ export default defineComponent({
data() {
return {
userScores: {},
higscoreLeaderboard: [],
highscoreLeaderboard: [],
totalPlaytimeLeaderboard: [],
userId: 1,
}
@ -61,8 +61,9 @@ export default defineComponent({
},
async created() {
this.userScores = await this.fetchUserScores();
this.higscoreLeaderboard = await this.fetchLeaderboard("highscore")
this.highscoreLeaderboard = await this.fetchLeaderboard("highscore")
this.totalPlaytimeLeaderboard = await this.fetchLeaderboard("totalplaytime")
console.log(this)
}
});
</script>
@ -78,4 +79,7 @@ export default defineComponent({
margin-top:2em;
}
.everything {
margin-bottom: 4em;
}
</style>

21
frontend/src/components/Button.vue
View file

@ -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>

2
frontend/src/components/Game.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="wrapper">
<div>
<main></main>
</div>
</template>

59
frontend/src/components/Leaderboard.vue
View file

@ -1,24 +1,63 @@
<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 class="row">
<h3 class="col-10"><strong>{{ 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 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
components: {
LeaderboardEntry,
Button,
},
data: {
type: Array
data() {
return {
pageNumber: 0,
entriesPerPage: 3,
page: [],
}
},
props: {
title: String,
leaderboard: Array,
},
updated() {
this.updatePage()
console.log(this.leaderboard)
},
methods: {
nextPage() {
if (this.pageNumber < (this.leaderboard.length / this.entriesPerPage) - 1) this.pageNumber++;
this.updatePage();
},
prevPage() {
if (this.pageNumber > 0) this.pageNumber--;
this.updatePage();
},
updatePage() {
let tempPage = this.leaderboard.slice(this.entriesPerPage * this.pageNumber, this.entriesPerPage * (this.pageNumber + 1));
for (let i = 0; i < this.entriesPerPage; i++) {
this.page.pop()
}
for (const entry of tempPage) {
this.page.push(entry)
}
}
}
}

25
frontend/src/components/LeaderboardEntry.vue Normal file
View 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>