59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<h1>Monthly Leaderboard</h1>
|
|
<div v-if="pending" class="loading">Loading leaderboard...</div>
|
|
<div v-else-if="error" class="error-container">
|
|
<p>An error occurred while fetching the leaderboard. Please try again.</p>
|
|
</div>
|
|
<div v-else class="table-container">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>Nickname</th>
|
|
<th>EXP</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="entry in leaderboard"
|
|
:key="entry.rank + entry.nickname"
|
|
:class="{ 'current-user-row': currentUser && currentUser.nickname === entry.nickname }"
|
|
>
|
|
<td>{{ entry.rank }}</td>
|
|
<td>{{ entry.nickname }}</td>
|
|
<td>{{ entry.exp }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { user: currentUser } = useAuth(); // Get current authenticated user
|
|
|
|
const { data, pending, error } = await useFetch('/api/leaderboard', {
|
|
lazy: true,
|
|
server: false,
|
|
});
|
|
|
|
const leaderboard = computed(() => data.value?.leaderboard || []);
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
.current-user-row > * {
|
|
background-color: #e0e7ff; /* A light blue/indigo for highlighting */
|
|
font-weight: 600;
|
|
color: var(--primary-color-hover);
|
|
}
|
|
|
|
.table-hover > tbody > tr.current-user-row:hover > * {
|
|
background-color: #c7d2fe; /* A slightly darker shade for hover */
|
|
}
|
|
</style>
|