feat: add gamification hooks, leaderboard UI, and translations
- Added Directus hooks for automatic point awards: - Recording creation/publishing (50 points) - Recording featured status (100 points bonus) - Comments on recordings (5 points) - Created /leaderboard route with full UI - Server-side data loading with authentication guard - Responsive design with medal emojis for top 3 - User stats display (recordings, plays, achievements) - Pagination support - "How It Works" info section - Added comprehensive gamification translations - Time-weighted scoring displayed for rankings - Automatic achievement checking on point awards 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Valknar XXX
@@ -910,4 +910,25 @@ export default {
|
||||
head: {
|
||||
title: "SexyArt | {title}",
|
||||
},
|
||||
gamification: {
|
||||
leaderboard: "Leaderboard",
|
||||
leaderboard_description: "Compete with other creators and players for the top spot",
|
||||
leaderboard_subtitle: "Top creators and players ranked by activity points",
|
||||
top_players: "Top Players",
|
||||
no_rankings_yet: "No rankings yet. Be the first to earn points!",
|
||||
points: "Points",
|
||||
recordings: "Recordings",
|
||||
plays: "Plays",
|
||||
achievements: "Achievements",
|
||||
rank: "Rank",
|
||||
stats: "Stats",
|
||||
how_it_works: "How It Works",
|
||||
how_it_works_description: "Points are awarded for creating recordings, playing others' recordings, and engaging with the community. Rankings use time-weighted scoring to keep things dynamic.",
|
||||
earn_by_creating: "Create Recordings",
|
||||
earn_by_creating_desc: "Earn 50 points per published recording",
|
||||
earn_by_playing: "Play & Complete",
|
||||
earn_by_playing_desc: "Earn 10 points per play, 5 for completion",
|
||||
stay_active: "Stay Active",
|
||||
stay_active_desc: "Recent activity counts more toward your rank",
|
||||
},
|
||||
};
|
||||
|
||||
43
packages/frontend/src/routes/leaderboard/+page.server.ts
Normal file
43
packages/frontend/src/routes/leaderboard/+page.server.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { redirect } from "@sveltejs/kit";
|
||||
import type { PageServerLoad } from "./$types";
|
||||
|
||||
export const load: PageServerLoad = async ({ fetch, url, locals }) => {
|
||||
// Guard: Redirect to login if not authenticated
|
||||
if (!locals.authStatus.authenticated) {
|
||||
throw redirect(302, "/login");
|
||||
}
|
||||
|
||||
try {
|
||||
const limit = parseInt(url.searchParams.get("limit") || "100");
|
||||
const offset = parseInt(url.searchParams.get("offset") || "0");
|
||||
|
||||
const response = await fetch(
|
||||
`/api/sexy/gamification/leaderboard?limit=${limit}&offset=${offset}`,
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch leaderboard");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
return {
|
||||
leaderboard: data.data || [],
|
||||
pagination: {
|
||||
limit,
|
||||
offset,
|
||||
hasMore: data.data?.length === limit,
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Leaderboard load error:", error);
|
||||
return {
|
||||
leaderboard: [],
|
||||
pagination: {
|
||||
limit: 100,
|
||||
offset: 0,
|
||||
hasMore: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
192
packages/frontend/src/routes/leaderboard/+page.svelte
Normal file
192
packages/frontend/src/routes/leaderboard/+page.svelte
Normal file
@@ -0,0 +1,192 @@
|
||||
<script lang="ts">
|
||||
import { _, locale } from "svelte-i18n";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar";
|
||||
import { getAssetUrl } from "$lib/directus";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import PeonyBackground from "$lib/components/background/peony-background.svelte";
|
||||
|
||||
const { data } = $props();
|
||||
|
||||
// Format points with comma separator
|
||||
function formatPoints(points: number): string {
|
||||
return Math.round(points).toLocaleString($locale || "en");
|
||||
}
|
||||
|
||||
// Get medal emoji for top 3
|
||||
function getMedalEmoji(rank: number): string {
|
||||
switch (rank) {
|
||||
case 1:
|
||||
return "🥇";
|
||||
case 2:
|
||||
return "🥈";
|
||||
case 3:
|
||||
return "🥉";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
// Get user initials
|
||||
function getUserInitials(name: string): string {
|
||||
if (!name) return "?";
|
||||
const parts = name.split(" ");
|
||||
if (parts.length >= 2) {
|
||||
return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
|
||||
}
|
||||
return name.substring(0, 2).toUpperCase();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Meta title={$_("gamification.leaderboard")} description={$_("gamification.leaderboard_description")} />
|
||||
|
||||
<div class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
|
||||
<PeonyBackground />
|
||||
|
||||
<div class="container mx-auto px-4 py-8 relative z-10">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold mb-2">{$_("gamification.leaderboard")}</h1>
|
||||
<p class="text-muted-foreground">{$_("gamification.leaderboard_subtitle")}</p>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" href="/">
|
||||
<span class="icon-[ri--arrow-left-line] w-4 h-4 mr-2"></span>
|
||||
{$_("common.back")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Leaderboard Card -->
|
||||
<Card class="bg-card/90 backdrop-blur-sm border-border/50">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<span class="icon-[ri--trophy-line] w-5 h-5 text-primary"></span>
|
||||
{$_("gamification.top_players")}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{#if data.leaderboard.length === 0}
|
||||
<div class="text-center py-12 text-muted-foreground">
|
||||
<span class="icon-[ri--trophy-line] w-12 h-12 mx-auto mb-4 opacity-50"></span>
|
||||
<p>{$_("gamification.no_rankings_yet")}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each data.leaderboard as entry (entry.user_id)}
|
||||
<a
|
||||
href="/users/{entry.user_id}"
|
||||
class="flex items-center gap-4 p-4 rounded-lg hover:bg-accent/10 transition-colors group"
|
||||
>
|
||||
<!-- Rank Badge -->
|
||||
<div class="flex-shrink-0 w-14 text-center">
|
||||
{#if entry.rank <= 3}
|
||||
<span class="text-3xl">{getMedalEmoji(entry.rank)}</span>
|
||||
{:else}
|
||||
<span class="text-xl font-bold text-muted-foreground group-hover:text-foreground transition-colors">
|
||||
#{entry.rank}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Avatar -->
|
||||
<Avatar class="h-12 w-12 ring-2 ring-accent/20 group-hover:ring-primary/40 transition-all">
|
||||
{#if entry.avatar}
|
||||
<AvatarImage src={getAssetUrl(entry.avatar, "mini")} alt={entry.display_name} />
|
||||
{/if}
|
||||
<AvatarFallback class="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold">
|
||||
{getUserInitials(entry.display_name)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<!-- User Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-semibold truncate group-hover:text-primary transition-colors">
|
||||
{entry.display_name || $_("common.anonymous")}
|
||||
</div>
|
||||
<div class="text-sm text-muted-foreground flex items-center gap-3">
|
||||
<span title={$_("gamification.recordings")}>
|
||||
<span class="icon-[ri--video-line] w-3.5 h-3.5 inline mr-1"></span>
|
||||
{entry.recordings_count}
|
||||
</span>
|
||||
<span title={$_("gamification.plays")}>
|
||||
<span class="icon-[ri--play-line] w-3.5 h-3.5 inline mr-1"></span>
|
||||
{entry.playbacks_count}
|
||||
</span>
|
||||
<span title={$_("gamification.achievements")}>
|
||||
<span class="icon-[ri--trophy-line] w-3.5 h-3.5 inline mr-1"></span>
|
||||
{entry.achievements_count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Score -->
|
||||
<div class="text-right flex-shrink-0">
|
||||
<div class="text-2xl font-bold text-primary">
|
||||
{formatPoints(entry.total_weighted_points)}
|
||||
</div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
{$_("gamification.points")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arrow indicator -->
|
||||
<div class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="icon-[ri--arrow-right-s-line] w-5 h-5 text-muted-foreground"></span>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{#if data.pagination.hasMore}
|
||||
<div class="mt-6 text-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
href="/leaderboard?offset={data.pagination.offset + data.pagination.limit}&limit={data.pagination.limit}"
|
||||
>
|
||||
{$_("common.load_more")}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Info Card -->
|
||||
<Card class="mt-6 bg-card/90 backdrop-blur-sm border-border/50">
|
||||
<CardContent class="p-6">
|
||||
<h3 class="font-semibold mb-2 flex items-center gap-2">
|
||||
<span class="icon-[ri--information-line] w-4 h-4 text-primary"></span>
|
||||
{$_("gamification.how_it_works")}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground mb-4">
|
||||
{$_("gamification.how_it_works_description")}
|
||||
</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="icon-[ri--video-add-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
|
||||
<div>
|
||||
<div class="font-medium">{$_("gamification.earn_by_creating")}</div>
|
||||
<div class="text-muted-foreground">{$_("gamification.earn_by_creating_desc")}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="icon-[ri--play-circle-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
|
||||
<div>
|
||||
<div class="font-medium">{$_("gamification.earn_by_playing")}</div>
|
||||
<div class="text-muted-foreground">{$_("gamification.earn_by_playing_desc")}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="icon-[ri--time-line] w-5 h-5 text-primary flex-shrink-0 mt-0.5"></span>
|
||||
<div>
|
||||
<div class="font-medium">{$_("gamification.stay_active")}</div>
|
||||
<div class="text-muted-foreground">{$_("gamification.stay_active_desc")}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user