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": { "compilerOptions": {
"noImplicitAny": true, "noImplicitAny": true,
"outFile": "../public/game/build.js", "outFile": "../public/game.js",
"preserveConstEnums": true, "preserveConstEnums": true,
"removeComments": true, "removeComments": true,
"rootDir": ".", "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" "vue": "^3.2.13"
}, },
"devDependencies": { "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-plugin-typescript": "~5.0.0",
"@vue/cli-service": "~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" "typescript": "~4.5.5"
} }
} }

5
frontend/public/index.html
View file

@ -8,9 +8,10 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <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://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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./game/build.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title> <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> </head>
<body style="background-color: beige;"> <body style="background-color: beige;">
<noscript> <noscript>

16
frontend/public/main.js
View file

@ -2,11 +2,11 @@ function setup() {
createCanvas(400, 400); createCanvas(400, 400);
} }
function draw() { function draw() {
if (mouseIsPressed) { if (mouseIsPressed) {
fill(0); fill(0);
} else { } else {
fill(255); fill(255);
} }
ellipse(mouseX, mouseY, 80, 80); ellipse(mouseX, mouseY, 80, 80);
} }

18
frontend/src/App.vue
View file

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

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

@ -1,7 +1,7 @@
<template> <template>
<div class="wrapper"> <div>
<main></main> <main></main>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">

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

@ -1,25 +1,64 @@
<template> <template>
<h3>{{ title }}</h3> <div class="container">
<div class="container"> <div class="row">
<div class="row" v-for="entry in data" :key="entry.rank" > <h3 class="col-10"><strong>{{ title }}</strong></h3>
<div class="col-1 text-left">{{entry.rank}}</div> <div class="col-1">
<div class="offset-1 col text-left">{{entry.username}}</div> <Button @click="prevPage" text="<"></Button>
<div class="col text-left">{{entry.score}}</div> </div>
</div> <div class="col-1">
<Button @click="nextPage" text=">"></Button>
</div>
</div> </div>
<div class="row" v-for="entry in page" :key="entry.rank" >
<LeaderboardEntry :entry="entry" ></LeaderboardEntry>
</div>
</div>
</template> </template>
<script> <script>
import LeaderboardEntry from "@/components/LeaderboardEntry.vue";
import Button from "@/components/Button.vue";
export default { export default {
name: "Leaderboard", name: "Leaderboard",
props: { components: {
title: { LeaderboardEntry,
type: String Button,
}, },
data: { data() {
type: Array 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)
}
}
}
} }
</script> </script>

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>