a.andreev/habits.andr33v.ru
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

leaderboard теперь показывает данные из БД. Приложение работает

Browse Source
This commit is contained in:
Alexander Andreev 2026-01-05 16:10:25 +03:00
parent 1b7520e478
commit b2b1ba078e
1 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/pages/leaderboard.vue
View File

@ -1,38 +1,37 @@
<template> <template>
<div class="leaderboard-container"> <div class="leaderboard-container">
<h3>Monthly Leaderboard</h3> <h3>Monthly Leaderboard</h3>
<ul class="leaderboard-list"> <div v-if="pending" class="loading">Loading leaderboard...</div>
<li class="leaderboard-item"> <div v-else-if="error" class="error-container">
<span class="rank">1.</span> <p>An error occurred while fetching the leaderboard. Please try again.</p>
<span class="name">Papa Smurf</span> </div>
<span class="exp">9800 EXP</span> <ul v-else class="leaderboard-list">
</li> <li
<li class="leaderboard-item self"> v-for="entry in leaderboard"
<span class="rank">2.</span> :key="entry.rank + entry.nickname"
<span class="name">Smurfette</span> class="leaderboard-item"
<span class="exp">8500 EXP</span> :class="{ 'self': currentUser && currentUser.nickname === entry.nickname }"
</li> >
<li class="leaderboard-item"> <span class="rank">{{ entry.rank }}.</span>
<span class="rank">3.</span> <span class="name">{{ entry.nickname }}</span>
<span class="name">Brainy Smurf</span> <span class="exp">{{ entry.exp }} EXP</span>
<span class="exp">8250 EXP</span>
</li>
<li class="leaderboard-item">
<span class="rank">4.</span>
<span class="name">Hefty Smurf</span>
<span class="exp">7600 EXP</span>
</li>
<li class="leaderboard-item">
<span class="rank">5.</span>
<span class="name">Jokey Smurf</span>
<span class="exp">6100 EXP</span>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// No logic, just visual placeholders import { useAuth } from '~/composables/useAuth';
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> </script>
<style scoped> <style scoped>