diff --git a/src/assets/401-error.png b/src/assets/401-error.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8b56b52cd443362bdf7c0b6243de89c5969e9b8
Binary files /dev/null and b/src/assets/401-error.png differ
diff --git a/src/assets/friends.png b/src/assets/friends.png
new file mode 100644
index 0000000000000000000000000000000000000000..a39d6faafecff57381efb1613246869ebdea78d1
Binary files /dev/null and b/src/assets/friends.png differ
diff --git a/src/assets/globe.png b/src/assets/globe.png
new file mode 100644
index 0000000000000000000000000000000000000000..952f5047eca01457ef32c4b4d300637e7ad7a560
Binary files /dev/null and b/src/assets/globe.png differ
diff --git a/src/assets/items/adfree.png b/src/assets/items/adfree.png
new file mode 100644
index 0000000000000000000000000000000000000000..af62209b5d29e2d659f9df580ae9670be83b9007
Binary files /dev/null and b/src/assets/items/adfree.png differ
diff --git a/src/assets/items/coffee.jpg b/src/assets/items/coffee.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..25562ca50b142118497b8b62afd5bcf98eb84fd9
Binary files /dev/null and b/src/assets/items/coffee.jpg differ
diff --git a/src/assets/items/piggybank.webp b/src/assets/items/piggybank.webp
new file mode 100644
index 0000000000000000000000000000000000000000..068336a163210042ce00db6aeb4e3836a90b1e88
Binary files /dev/null and b/src/assets/items/piggybank.webp differ
diff --git a/src/assets/items/pirbad.png b/src/assets/items/pirbad.png
new file mode 100644
index 0000000000000000000000000000000000000000..b68ddd17633f9a2e1ed83f7226ab97b9f05b65ed
Binary files /dev/null and b/src/assets/items/pirbad.png differ
diff --git a/src/assets/items/pirbadet.png b/src/assets/items/pirbadet.png
new file mode 100644
index 0000000000000000000000000000000000000000..1789b7dc015c99dc8361949448e99719f34b79e8
Binary files /dev/null and b/src/assets/items/pirbadet.png differ
diff --git a/src/assets/items/viaplay.jpg b/src/assets/items/viaplay.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..aab9fd756faee9a151d3a3f1643e53876424c6b7
Binary files /dev/null and b/src/assets/items/viaplay.jpg differ
diff --git a/src/components/LeaderboardComponents/Leaderboard.vue b/src/components/LeaderboardComponents/Leaderboard.vue
index 73cc5da9cf9df92b12522a9577cf0e9a2c0faff9..0a1b9a5b472971d79cac4aa62380e891caa72ec7 100644
--- a/src/components/LeaderboardComponents/Leaderboard.vue
+++ b/src/components/LeaderboardComponents/Leaderboard.vue
@@ -4,7 +4,7 @@
<table>
<tr v-for="(entry, index) in leaderboard" :key="entry.user.id">
<td class="number">{{ index + 1 }}</td>
- <td class="name" @click="navigateToUserProfile(entry.user.id)">{{ entry.user.username }}</td>
+ <td class="name" @click="navigateToUserProfile(entry.user.id)">{{ entry.user.firstName }}</td>
<td class="points" v-if="index === 0">
{{ entry.score }}
<div class = "medal">
@@ -55,7 +55,7 @@
display: flex;
align-items: center;
justify-content: space-between;
- flex-wrap: wrap;
+ height: 4rem;
}
tr:not(:first-child):hover {
@@ -126,7 +126,7 @@
}
.ribbon {
- width: 100%;
+ width: 106%;
height: 4.5rem;
top: -0.5rem;
background-color: #0A58CA;
diff --git a/src/views/LeaderboardView.vue b/src/views/LeaderboardView.vue
index 681a963a43723485f5eac19e1a7b8b3d32753140..5a7adf09279d07a24d470098e85a1dd6c491ada2 100644
--- a/src/views/LeaderboardView.vue
+++ b/src/views/LeaderboardView.vue
@@ -1,43 +1,96 @@
<template>
+ <br>
<div id="dropdownContainer">
- <Button class="btn btn-primary text-white leaderBoardButton">Global</Button>
- <Button class="btn btn-primary text-white leaderBoardButton">Friends</Button>
+ <h1 class="box">Leaderboard</h1>
+ </div>
+ <div id = "content">
+ <div id="dropdownContainer">
+ <div class="box">
+ <div class="btn-group-vertical" id="radioContainer" role="group"
+ aria-label="Vertical radio toggle button group">
+ <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
+ <label class="btn btn-outline-primary" for="vbtn-radio1" @click="global"><img src="@/assets/globe.png" style="width: 60px"> Global</label>
+ <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
+ <label class="btn btn-outline-primary" for="vbtn-radio2" @click="friends"><img src="@/assets/friends.png" style="width: 60px"> Friends</label>
+ </div>
+ </div>
</div>
<main>
<div id="leaderboard">
<h1><img src="@/assets/items/v-buck.png" style="width: 2rem"> Total points</h1>
- <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
+ <Leaderboard :leaderboard="pointsLeaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
<h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Current streak</h1>
- <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
+ <Leaderboard :leaderboard="currentLeaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
<h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Highest streak</h1>
- <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
+ <Leaderboard :leaderboard="streakLeaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div>
</main>
- <div id = "communityContainer">
+ </div>
+ <div id="communityContainer">
<h1>Total points earned as a community</h1>
<h2>1000000 <img src="@/assets/items/v-buck.png" style="width: 2rem"></h2>
</div>
</template>
<script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Leaderboard from '@/components/LeaderboardComponents/Leaderboard.vue';
+import { on } from 'events';
+import { LeaderboardService } from '@/api';
-let leaderboardData = ref([]);
+let streakLeaderboardData = ref([]);
+let currentLeaderboardData = ref([]);
+let pointsLeaderboardData = ref([]);
const router = useRouter();
async function fetchQuizData() {
- /*leaderboard(quizId).then((response) => {
- leaderboardData.value = response.data.slice(0, 10);
- }).catch((error) => {
- console.error("Failed to fetch leaderboard data:", error);
- });*/
+ global();
+}
+
+onMounted(() => {
+ fetchQuizData();
+});
+
+async function global() {
+ let globalPoints = await LeaderboardService.getLeaderboard({
+ type: "TOTAL_POINTS",
+ filter: "GLOBAL",
+ });
+ let globalStreak = await LeaderboardService.getLeaderboard({
+ type: "TOP_STREAK",
+ filter: "GLOBAL",
+ });
+ let globalCurrentStreak = await LeaderboardService.getLeaderboard({
+ type: "CURRENT_STREAK",
+ filter: "GLOBAL",
+ });
+ pointsLeaderboardData.value = globalPoints.entries;
+ currentLeaderboardData.value = globalCurrentStreak.entries;
+ streakLeaderboardData.value = globalStreak.entries;
+}
+
+async function friends() {
+ let friendsPoints = await LeaderboardService.getLeaderboard({
+ type: "TOTAL_POINTS",
+ filter: "FRIENDS",
+ });
+ let friendsStreak = await LeaderboardService.getLeaderboard({
+ type: "TOP_STREAK",
+ filter: "FRIENDS",
+ });
+ let friendsCurrentStreak = await LeaderboardService.getLeaderboard({
+ type: "CURRENT_STREAK",
+ filter: "FRIENDS",
+ });
+ pointsLeaderboardData.value = friendsPoints.entries;
+ currentLeaderboardData.value = friendsCurrentStreak.entries;
+ streakLeaderboardData.value = friendsStreak.entries;
}
const navigateToUserProfile = (userId: number) => {
@@ -47,9 +100,8 @@ const navigateToUserProfile = (userId: number) => {
<style scoped>
main {
- margin-top: 2rem;
margin-bottom: 4rem;
- width: 100%;
+ width: 80%;
display: flex;
justify-content: space-around;
align-items: center;
@@ -66,6 +118,18 @@ main {
margin-bottom: 3rem;
}
+#content {
+ display: flex;
+ flex-direction: row;
+
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.box {
+ width: 90%;
+}
+
h1 {
font-weight: 500;
margin-bottom: 1rem;
@@ -75,7 +139,15 @@ h1 {
display: flex;
justify-content: center;
margin-bottom: 2rem;
- margin-top: 3rem;
+
+}
+
+#radioContainer {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 2rem;
+ width: 100%;
+ margin-top: 3.6rem;
}
#communityContainer {
@@ -87,9 +159,9 @@ h1 {
}
.leaderBoardButton {
- padding: 1rem 4rem;
- font-weight: 700;
- border-radius: 2rem;
- margin: 1rem;
+ padding: 1rem 4rem;
+ font-weight: 700;
+ border-radius: 2rem;
+ margin: 1rem;
}
</style>
\ No newline at end of file
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 650e2b20ce9dca2abb7fa351c48948a304fbb28e..7637014bf836c4e94a3526e503080990f93bab13 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -1,22 +1,22 @@
<template>
<div class="container-fluid"> <!-- Changed from 'container' to 'container-fluid' -->
- <div class="row">
- <div class="col-md-12">
- <div class="error-template text-center"> <!-- 'text-center' for centering text content -->
- <h1>
- Oops!</h1>
- <h2>
- 404 Not Found</h2>
- <div class="error-details">
- Sorry, an error has occurred, Requested page not found!
- </div>
- <div class="error-actions">
- <Button1 button-text="Take Me Home" @click="home" />
+ <div class="row">
+ <div class="col-md-12">
+ <div class="error-template text-center"> <!-- 'text-center' for centering text content -->
+ <h1>
+ Oops!</h1>
+ <h2>
+ 404 Not Found</h2>
+ <div class="error-details">
+ Sorry, an error has occurred, Requested page not found!
+ </div>
+ <div class="error-actions">
+ <Button1 button-text="Take Me Home" @click="home" />
+ </div>
</div>
</div>
</div>
</div>
-</div>
</template>
<script setup lang="ts">
@@ -32,13 +32,15 @@ const home = () => {
<style scoped>
- .error-template {
- text-align: center; /* Ensures all text and inline elements within are centered */
+.error-template {
+ text-align: center;
+ /* Ensures all text and inline elements within are centered */
display: flex;
flex-direction: column;
- align-items: center; /* Aligns child elements (which are block-level) centrally */
- justify-content: center; /* Optional: if you want vertical centering */
+ align-items: center;
+ /* Aligns child elements (which are block-level) centrally */
+ justify-content: center;
+ /* Optional: if you want vertical centering */
margin: 2rem;
}
-
</style>
\ No newline at end of file
diff --git a/src/views/ShopView.vue b/src/views/ShopView.vue
index 55ef335f11efa0b03a899182231f1208d0f17888..2bf2eafe93dff64150ce1365535defa33e28fa01 100644
--- a/src/views/ShopView.vue
+++ b/src/views/ShopView.vue
@@ -1,8 +1,12 @@
<template>
+ <br>
+ <div id="dropdownContainer">
+ <h1 class="box">Shop</h1>
+ </div>
<div class="container">
<div class="row">
<div class="col-md-12">
- <h1>League</h1>
+ <h1>Fantacy</h1>
<div class="category row justify-content-between mb-5 m-2">
<!--<div class="col-md-4" v-for="product in products" :key="product.id">-->
<div class="card text-center" style="width: 16rem; border: none">
@@ -33,48 +37,55 @@
<ShopButton button-text="100"></ShopButton>
</div>
</div>
-
-
<!--</div>-->
</div>
</div>
<div class="col-md-12">
- <h1>Fantacy</h1>
+ <h1>Stash</h1>
<div class="category row justify-content-between mb-5 m-2">
- <!--<div class="col-md-4" v-for="product in products" :key="product.id">-->
<div class="card text-center" style="width: 16rem; border: none">
- <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <img src="@/assets/items/coffee.jpg" class="card-img-top" alt="...">
<div class="card-body">
- <h5 class="card-title">The panda</h5>
- <ShopButton button-text="100"></ShopButton>
+ <h5 class="card-title">Free Coffee</h5>
+ <ShopButton button-text="500"></ShopButton>
</div>
- </div>
+ </div>
<div class="card text-center" style="width: 16rem; border: none">
- <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <img src="@/assets/items/viaplay.jpg" class="card-img-top" alt="...">
<div class="card-body">
- <h5 class="card-title">The panda</h5>
- <ShopButton button-text="100"></ShopButton>
+ <h5 class="card-title">1 Month Viaplay</h5>
+ <ShopButton button-text="10000"></ShopButton>
</div>
- </div>
+ </div>
<div class="card text-center" style="width: 16rem; border: none">
- <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <img src="@/assets/items/pirbad.png" class="card-img-top" alt="...">
<div class="card-body">
- <h5 class="card-title">The panda</h5>
- <ShopButton button-text="100"></ShopButton>
+ <h5 class="card-title">-10% rabatt</h5>
+ <ShopButton button-text="1000"></ShopButton>
</div>
- </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-12">
+ <h1>Stash</h1>
+ <div class="category row justify-content-between mb-5 m-2">
<div class="card text-center" style="width: 16rem; border: none">
- <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <img src="@/assets/items/adfree.png" class="card-img-top" alt="...">
<div class="card-body">
- <h5 class="card-title">The panda</h5>
- <ShopButton button-text="100"></ShopButton>
+ <h5 class="card-title">Adfree</h5>
+ <ShopButton button-text="35kr"></ShopButton>
</div>
- </div>
-
-
- <!--</div>-->
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/piggybank.webp" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">Premium</h5>
+ <ShopButton button-text="50kr"></ShopButton>
+ </div>
+ </div>
</div>
</div>
+
</div>
</div>
</template>
@@ -93,6 +104,10 @@ import ShopButton from '@/components/Buttons/ShopButton.vue';
/* Rounded corners */
}
+.box {
+ width:90%;
+}
+
.card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@@ -105,4 +120,10 @@ import ShopButton from '@/components/Buttons/ShopButton.vue';
.col-md-12 {
border-bottom: 2px solid #000000;
}
+
+#dropdownContainer {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 2rem;
+}
</style>
\ No newline at end of file
diff --git a/src/views/UnauthorizedView.vue b/src/views/UnauthorizedView.vue
index 8a3f78ed6bdc87283db0ea40dbcdd5b2306c371d..2e79554d2ddf9024e05cde67064b0d14533d611c 100644
--- a/src/views/UnauthorizedView.vue
+++ b/src/views/UnauthorizedView.vue
@@ -26,3 +26,10 @@ const home = () => {
router.push('/');
};
</script>
+
+
+<style scoped>
+ body {
+ background-image: url('@/assets/401-error.jpg');
+ }
+</style>
\ No newline at end of file