feat: prestige system
This commit is contained in:
Face
parent
08adc11dd0
commit
ec6426781d
17 changed files with 2683 additions and 30 deletions
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"name": "rugplay",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
|
|
@ -27,14 +27,14 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@internationalized/date": "^3.8.1",
|
||||
"@lucide/svelte": "^0.482.0",
|
||||
"@lucide/svelte": "^0.515.0",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@types/canvas-confetti": "^1.9.0",
|
||||
"@types/node": "^22.15.21",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"bits-ui": "^2.5.0",
|
||||
"bits-ui": "^2.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"drizzle-kit": "^0.22.0",
|
||||
"prettier": "^3.3.2",
|
||||
|
|
@ -218,7 +218,7 @@
|
|||
|
||||
"@levischuck/tiny-cbor": ["@levischuck/tiny-cbor@0.2.11", "", {}, "sha512-llBRm4dT4Z89aRsm6u2oEZ8tfwL/2l6BwpZ7JcyieouniDECM5AqNgr/y08zalEIvW3RSK4upYyybDcmjXqAow=="],
|
||||
|
||||
"@lucide/svelte": ["@lucide/svelte@0.482.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-n2ycHU9cNcleRDwwpEHBJ6pYzVhHIaL3a+9dQa8kns9hB2g05bY+v2p2KP8v0pZwtNhYTHk/F2o2uZ1bVtQGhw=="],
|
||||
"@lucide/svelte": ["@lucide/svelte@0.515.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-CEAyqcZmNBfYzVgaRmK2RFJP5tnbXxekRyDk0XX/eZQRfsJmkDvmQwXNX8C869BgNeryzmrRyjHhUL6g9ZOHNA=="],
|
||||
|
||||
"@noble/ciphers": ["@noble/ciphers@0.6.0", "", {}, "sha512-mIbq/R9QXk5/cTfESb1OKtyFnk7oc1Om/8onA1158K9/OZUQFDEVy55jVTato+xmp3XX6F6Qh0zz0Nc1AxAlRQ=="],
|
||||
|
||||
|
|
@ -516,7 +516,7 @@
|
|||
|
||||
"better-call": ["better-call@1.0.9", "", { "dependencies": { "@better-fetch/fetch": "^1.1.4", "rou3": "^0.5.1", "set-cookie-parser": "^2.7.1", "uncrypto": "^0.1.3" } }, "sha512-Qfm0gjk0XQz0oI7qvTK1hbqTsBY4xV2hsHAxF8LZfUYl3RaECCIifXuVqtPpZJWvlCCMlQSvkvhhyuApGUba6g=="],
|
||||
|
||||
"bits-ui": ["bits-ui@2.5.0", "", { "dependencies": { "@floating-ui/core": "^1.7.0", "@floating-ui/dom": "^1.7.0", "css.escape": "^1.5.1", "esm-env": "^1.1.2", "runed": "^0.28.0", "svelte-toolbelt": "^0.9.1", "tabbable": "^6.2.0" }, "peerDependencies": { "@internationalized/date": "^3.8.1", "svelte": "^5.33.0" } }, "sha512-PbjylA1UWd4A/c5AYqie/EVxQ1/8uugmJKLg9whLoBBHbfPEBGhK09dCPrahK9kA6DRHhMmij0XXIUGIfrmNow=="],
|
||||
"bits-ui": ["bits-ui@2.7.0", "", { "dependencies": { "@floating-ui/core": "^1.7.0", "@floating-ui/dom": "^1.7.0", "css.escape": "^1.5.1", "esm-env": "^1.1.2", "runed": "^0.28.0", "svelte-toolbelt": "^0.9.1", "tabbable": "^6.2.0" }, "peerDependencies": { "@internationalized/date": "^3.8.1", "svelte": "^5.33.0" } }, "sha512-2kjVSVBDt9SFnjFiA9vD74T5+UtAKWYpfOil9d4+7v0fSawvTNcMgOP05cD3FTJT/rarj78DjhaXdyTWIW6I/g=="],
|
||||
|
||||
"body-parser": ["body-parser@2.2.0", "", { "dependencies": { "bytes": "^3.1.2", "content-type": "^1.0.5", "debug": "^4.4.0", "http-errors": "^2.0.0", "iconv-lite": "^0.6.3", "on-finished": "^2.4.1", "qs": "^6.14.0", "raw-body": "^3.0.0", "type-is": "^2.0.0" } }, "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg=="],
|
||||
|
||||
|
|
|
|||
1
website/drizzle/0002_small_micromacro.sql
Normal file
1
website/drizzle/0002_small_micromacro.sql
Normal file
|
|
@ -0,0 +1 @@
|
|||
ALTER TABLE "user" ADD COLUMN "prestige_level" integer DEFAULT 0;
|
||||
1727
website/drizzle/meta/0002_snapshot.json
Normal file
1727
website/drizzle/meta/0002_snapshot.json
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -15,6 +15,13 @@
|
|||
"when": 1749907594739,
|
||||
"tag": "0001_cuddly_dormammu",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 2,
|
||||
"version": "7",
|
||||
"when": 1749916220202,
|
||||
"tag": "0002_small_micromacro",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -31,7 +31,8 @@
|
|||
Hammer,
|
||||
BookOpen,
|
||||
Info,
|
||||
Bell
|
||||
Bell,
|
||||
Crown
|
||||
} from 'lucide-svelte';
|
||||
import { mode, setMode } from 'mode-watcher';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
|
@ -85,7 +86,7 @@
|
|||
|
||||
function handleModeToggle() {
|
||||
setMode(mode.current === 'light' ? 'dark' : 'light');
|
||||
setOpenMobile(false);
|
||||
// Remove setOpenMobile(false) to keep menu open
|
||||
}
|
||||
|
||||
function formatCurrency(value: number): string {
|
||||
|
|
@ -152,6 +153,11 @@
|
|||
showUserManual = true;
|
||||
setOpenMobile(false);
|
||||
}
|
||||
|
||||
function handlePrestigeClick() {
|
||||
goto('/prestige');
|
||||
setOpenMobile(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<SignInConfirmDialog bind:open={shouldSignIn} />
|
||||
|
|
@ -195,22 +201,6 @@
|
|||
</Sidebar.MenuButton>
|
||||
</Sidebar.MenuItem>
|
||||
{/each}
|
||||
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton>
|
||||
{#snippet child({ props }: { props: MenuButtonProps })}
|
||||
<button onclick={handleModeToggle} {...props}>
|
||||
{#if mode.current === 'light'}
|
||||
<Moon class="h-5 w-5" />
|
||||
<span>Dark Mode</span>
|
||||
{:else}
|
||||
<Sun class="h-5 w-5" />
|
||||
<span>Light Mode</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/snippet}
|
||||
</Sidebar.MenuButton>
|
||||
</Sidebar.MenuItem>
|
||||
</Sidebar.Menu>
|
||||
</Sidebar.GroupContent>
|
||||
</Sidebar.Group>
|
||||
|
|
@ -421,6 +411,8 @@
|
|||
</div>
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
|
||||
<!-- Profile & Settings Group -->
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item onclick={handleAccountClick}>
|
||||
<User />
|
||||
|
|
@ -430,10 +422,16 @@
|
|||
<Settings />
|
||||
Settings
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onclick={handleUserManualClick}>
|
||||
<BookOpen />
|
||||
User Manual
|
||||
<DropdownMenu.Item onclick={handlePrestigeClick}>
|
||||
<Crown />
|
||||
Prestige
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
|
||||
<DropdownMenu.Separator />
|
||||
|
||||
<!-- Features Group -->
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item
|
||||
onclick={() => {
|
||||
showPromoCode = true;
|
||||
|
|
@ -443,10 +441,24 @@
|
|||
<Gift />
|
||||
Promo code
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onclick={handleUserManualClick}>
|
||||
<BookOpen />
|
||||
User Manual
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onclick={handleModeToggle}>
|
||||
{#if mode.current === 'light'}
|
||||
<Moon />
|
||||
Dark Mode
|
||||
{:else}
|
||||
<Sun />
|
||||
Light Mode
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
|
||||
{#if $USER_DATA?.isAdmin}
|
||||
<DropdownMenu.Separator />
|
||||
<!-- Admin Group -->
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item
|
||||
onclick={handleAdminClick}
|
||||
|
|
@ -471,8 +483,11 @@
|
|||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
{/if}
|
||||
<DropdownMenu.Group>
|
||||
|
||||
<DropdownMenu.Separator />
|
||||
|
||||
<!-- Legal Group -->
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item onclick={handleTermsClick}>
|
||||
<Scale />
|
||||
Terms of Service
|
||||
|
|
@ -482,7 +497,10 @@
|
|||
Privacy Policy
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
|
||||
<DropdownMenu.Separator />
|
||||
|
||||
<!-- Sign Out -->
|
||||
<DropdownMenu.Item
|
||||
onclick={() => {
|
||||
signOut().then(() => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<script lang="ts">
|
||||
import type { UserProfile } from '$lib/types/user-profile';
|
||||
import SilentBadge from './SilentBadge.svelte';
|
||||
import { Hash, Hammer, Flame } from 'lucide-svelte';
|
||||
import { Hash, Hammer, Flame, Star } from 'lucide-svelte';
|
||||
import { getPrestigeName, getPrestigeColor } from '$lib/utils';
|
||||
|
||||
let {
|
||||
user,
|
||||
|
|
@ -14,14 +15,23 @@
|
|||
} = $props();
|
||||
|
||||
let badgeClass = $derived(size === 'sm' ? 'text-xs' : '');
|
||||
let prestigeName = $derived(user.prestigeLevel ? getPrestigeName(user.prestigeLevel) : null);
|
||||
let prestigeColor = $derived(user.prestigeLevel ? getPrestigeColor(user.prestigeLevel) : 'text-gray-500');
|
||||
</script>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
{#if showId}
|
||||
<SilentBadge icon={Hash} class="text-muted-foreground {badgeClass}" text="#{user.id} to join" />
|
||||
{/if}
|
||||
{#if prestigeName}
|
||||
<SilentBadge icon={Star} text={prestigeName} class="{prestigeColor} {badgeClass}" />
|
||||
{/if}
|
||||
{#if user.loginStreak && user.loginStreak > 1}
|
||||
<SilentBadge icon={Flame} text="{user.loginStreak} day streak" class="text-orange-500 {badgeClass}" />
|
||||
<SilentBadge
|
||||
icon={Flame}
|
||||
text="{user.loginStreak} day streak"
|
||||
class="text-orange-500 {badgeClass}"
|
||||
/>
|
||||
{/if}
|
||||
{#if user.isAdmin}
|
||||
<SilentBadge icon={Hammer} text="Admin" class="text-primary {badgeClass}" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,150 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
import * as Avatar from '$lib/components/ui/avatar';
|
||||
import { Star } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<!-- Main Content Column -->
|
||||
<div class="flex flex-col lg:col-span-2">
|
||||
<!-- How Card Skeleton -->
|
||||
<Card.Root class="mb-6 gap-1">
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Title class="text-base">How</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
{#each Array(3) as _, i}
|
||||
<div class="flex gap-3">
|
||||
<div
|
||||
class="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-sm font-medium"
|
||||
>
|
||||
{i + 1}
|
||||
</div>
|
||||
<div class="flex-1 space-y-2">
|
||||
<Skeleton class="h-4 w-24" />
|
||||
<Skeleton class="h-3 w-full" />
|
||||
<Skeleton class="h-3 w-3/4" />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Progress Card Skeleton -->
|
||||
<Card.Root class="flex flex-1 flex-col gap-1">
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<Star class="h-5 w-5" />
|
||||
Progress
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="flex flex-1 flex-col space-y-6">
|
||||
<!-- Progress Section -->
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<Skeleton class="h-4 w-32" />
|
||||
<Skeleton class="h-4 w-12" />
|
||||
</div>
|
||||
<Skeleton class="h-2 w-full rounded-full" />
|
||||
</div>
|
||||
|
||||
<!-- Financial Details Table Skeleton -->
|
||||
<div class="overflow-hidden rounded-xl border">
|
||||
<table class="w-full text-sm">
|
||||
<tbody class="divide-y">
|
||||
{#each Array(3) as _}
|
||||
<tr>
|
||||
<td class="px-3 py-2">
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</td>
|
||||
<td class="px-3 py-2 text-right">
|
||||
<Skeleton class="ml-auto h-4 w-24" />
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Skeleton class="h-4 w-40" />
|
||||
|
||||
<!-- Prestige Button Skeleton -->
|
||||
<Skeleton class="h-12 w-full rounded-lg" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Info -->
|
||||
<div class="flex flex-col space-y-4">
|
||||
<!-- Profile Preview Card Skeleton -->
|
||||
<Card.Root class="flex-1 gap-1">
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Title class="text-base">Preview</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<!-- Current Profile -->
|
||||
<div class="space-y-2">
|
||||
<Skeleton class="h-3 w-12" />
|
||||
<div class="flex items-center gap-3 rounded-lg border p-3">
|
||||
<Avatar.Root class="h-10 w-10 shrink-0">
|
||||
<Avatar.Fallback>
|
||||
<Skeleton class="h-full w-full rounded-full" />
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div class="min-w-0 flex-1 space-y-1">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
</div>
|
||||
<Skeleton class="h-3 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prestige Preview -->
|
||||
<div class="space-y-2">
|
||||
<Skeleton class="h-3 w-10" />
|
||||
<div
|
||||
class="flex items-center gap-3 rounded-lg border-2 border-yellow-500/30 bg-yellow-50/50 p-3 dark:bg-yellow-950/20"
|
||||
>
|
||||
<Avatar.Root class="h-10 w-10 shrink-0">
|
||||
<Avatar.Fallback>
|
||||
<Skeleton class="h-full w-full rounded-full" />
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div class="min-w-0 flex-1 space-y-1">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
<Skeleton class="h-3 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- All Prestige Levels Skeleton -->
|
||||
<Card.Root class="flex-1 gap-1">
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Title class="text-base">Levels</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-1">
|
||||
{#each Array(5) as _}
|
||||
<div class="flex items-center justify-between py-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<Skeleton class="h-4 w-4" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
<Skeleton class="h-3 w-16" />
|
||||
</div>
|
||||
{/each}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
7
website/src/lib/components/ui/progress/index.ts
Normal file
7
website/src/lib/components/ui/progress/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Root from "./progress.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Progress,
|
||||
};
|
||||
27
website/src/lib/components/ui/progress/progress.svelte
Normal file
27
website/src/lib/components/ui/progress/progress.svelte
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { Progress as ProgressPrimitive } from "bits-ui";
|
||||
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
max = 100,
|
||||
value,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
|
||||
</script>
|
||||
|
||||
<ProgressPrimitive.Root
|
||||
bind:ref
|
||||
data-slot="progress"
|
||||
class={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
|
||||
{value}
|
||||
{max}
|
||||
{...restProps}
|
||||
>
|
||||
<div
|
||||
data-slot="progress-indicator"
|
||||
class="bg-primary h-full w-full flex-1 transition-all"
|
||||
style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
|
||||
></div>
|
||||
</ProgressPrimitive.Root>
|
||||
|
|
@ -31,7 +31,8 @@ export const user = pgTable("user", {
|
|||
precision: 20,
|
||||
scale: 8,
|
||||
}).notNull().default("0.00000000"),
|
||||
loginStreak: integer("login_streak").notNull().default(0)
|
||||
loginStreak: integer("login_streak").notNull().default(0),
|
||||
prestigeLevel: integer("prestige_level").default(0),
|
||||
});
|
||||
|
||||
export const session = pgTable("session", {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ export type User = {
|
|||
|
||||
volumeMaster: number;
|
||||
volumeMuted: boolean;
|
||||
|
||||
prestigeLevel: number;
|
||||
} | null;
|
||||
|
||||
export const USER_DATA = writable<User>(undefined);
|
||||
|
|
@ -9,6 +9,8 @@ export interface UserProfile {
|
|||
isAdmin: boolean;
|
||||
totalPortfolioValue: number;
|
||||
loginStreak: number;
|
||||
|
||||
prestigeLevel: number | null;
|
||||
}
|
||||
|
||||
export interface UserStats {
|
||||
|
|
|
|||
|
|
@ -336,3 +336,49 @@ export function timeToLocal(originalTime: number): number {
|
|||
const d = new Date(originalTime * 1000);
|
||||
return Math.floor(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000);
|
||||
}
|
||||
|
||||
export const PRESTIGE_COSTS = {
|
||||
1: 100_000,
|
||||
2: 250_000,
|
||||
3: 1_000_000,
|
||||
4: 5_000_000,
|
||||
5: 25_000_000
|
||||
} as const;
|
||||
|
||||
export const PRESTIGE_NAMES = {
|
||||
1: 'Prestige I',
|
||||
2: 'Prestige II',
|
||||
3: 'Prestige III',
|
||||
4: 'Prestige IV',
|
||||
5: 'Prestige V'
|
||||
} as const;
|
||||
|
||||
export const PRESTIGE_COLORS = {
|
||||
1: 'text-blue-500',
|
||||
2: 'text-purple-500',
|
||||
3: 'text-yellow-500',
|
||||
4: 'text-orange-500',
|
||||
5: 'text-red-500'
|
||||
} as const;
|
||||
|
||||
export function getPrestigeName(level: number): string | null {
|
||||
if (level <= 0) return null;
|
||||
const clampedLevel = Math.min(level, 5) as keyof typeof PRESTIGE_NAMES;
|
||||
return PRESTIGE_NAMES[clampedLevel];
|
||||
}
|
||||
|
||||
export function getPrestigeCost(level: number): number | null {
|
||||
if (level <= 0) return null;
|
||||
const clampedLevel = Math.min(level, 5) as keyof typeof PRESTIGE_COSTS;
|
||||
return PRESTIGE_COSTS[clampedLevel];
|
||||
}
|
||||
|
||||
export function getPrestigeColor(level: number): string {
|
||||
if (level <= 0) return 'text-gray-500';
|
||||
const clampedLevel = Math.min(level, 5) as keyof typeof PRESTIGE_COLORS;
|
||||
return PRESTIGE_COLORS[clampedLevel];
|
||||
}
|
||||
|
||||
export function getMaxPrestigeLevel(): number {
|
||||
return 5;
|
||||
}
|
||||
|
|
|
|||
171
website/src/routes/api/prestige/+server.ts
Normal file
171
website/src/routes/api/prestige/+server.ts
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
import { auth } from '$lib/auth';
|
||||
import { error, json } from '@sveltejs/kit';
|
||||
import { db } from '$lib/server/db';
|
||||
import { user, userPortfolio, transaction, notifications, coin } from '$lib/server/db/schema';
|
||||
import { eq, sql } from 'drizzle-orm';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { formatValue, getPrestigeCost, getPrestigeName } from '$lib/utils';
|
||||
|
||||
export const POST: RequestHandler = async ({ request, locals }) => {
|
||||
const session = await auth.api.getSession({ headers: request.headers });
|
||||
if (!session?.user) throw error(401, 'Not authenticated');
|
||||
|
||||
const userId = Number(session.user.id);
|
||||
|
||||
return await db.transaction(async (tx) => {
|
||||
const [userData] = await tx
|
||||
.select({
|
||||
baseCurrencyBalance: user.baseCurrencyBalance,
|
||||
prestigeLevel: user.prestigeLevel
|
||||
})
|
||||
.from(user)
|
||||
.where(eq(user.id, userId))
|
||||
.for('update')
|
||||
.limit(1);
|
||||
|
||||
if (!userData) throw error(404, 'User not found');
|
||||
|
||||
const currentPrestige = userData.prestigeLevel || 0;
|
||||
const nextPrestige = currentPrestige + 1;
|
||||
const prestigeCost = getPrestigeCost(nextPrestige);
|
||||
const prestigeName = getPrestigeName(nextPrestige);
|
||||
|
||||
if (!prestigeCost || !prestigeName) {
|
||||
throw error(400, 'Maximum prestige level reached');
|
||||
}
|
||||
|
||||
const holdings = await tx
|
||||
.select({
|
||||
coinId: userPortfolio.coinId,
|
||||
quantity: userPortfolio.quantity,
|
||||
currentPrice: coin.currentPrice,
|
||||
symbol: coin.symbol
|
||||
})
|
||||
.from(userPortfolio)
|
||||
.leftJoin(coin, eq(userPortfolio.coinId, coin.id))
|
||||
.where(eq(userPortfolio.userId, userId));
|
||||
|
||||
let warningMessage = '';
|
||||
let totalSaleValue = 0;
|
||||
|
||||
if (holdings.length > 0) {
|
||||
warningMessage = `All ${holdings.length} coin holdings have been sold at current market prices. `;
|
||||
|
||||
for (const holding of holdings) {
|
||||
const quantity = Number(holding.quantity);
|
||||
const price = Number(holding.currentPrice);
|
||||
const saleValue = quantity * price;
|
||||
totalSaleValue += saleValue;
|
||||
|
||||
await tx.insert(transaction).values({
|
||||
coinId: holding.coinId!,
|
||||
type: 'SELL',
|
||||
quantity: holding.quantity,
|
||||
pricePerCoin: holding.currentPrice || '0',
|
||||
totalBaseCurrencyAmount: saleValue.toString(),
|
||||
timestamp: new Date()
|
||||
});
|
||||
}
|
||||
|
||||
await tx
|
||||
.delete(userPortfolio)
|
||||
.where(eq(userPortfolio.userId, userId));
|
||||
}
|
||||
|
||||
const currentBalance = Number(userData.baseCurrencyBalance) + totalSaleValue;
|
||||
if (currentBalance < prestigeCost) {
|
||||
throw error(400, `Insufficient funds. Need ${formatValue(prestigeCost)}, have ${formatValue(currentBalance)}`);
|
||||
}
|
||||
|
||||
await tx
|
||||
.update(user)
|
||||
.set({
|
||||
baseCurrencyBalance: '100.00000000',
|
||||
prestigeLevel: nextPrestige,
|
||||
updatedAt: new Date()
|
||||
})
|
||||
.where(eq(user.id, userId));
|
||||
|
||||
await tx.delete(userPortfolio).where(eq(userPortfolio.userId, userId));
|
||||
|
||||
await tx.insert(notifications).values({
|
||||
userId: userId,
|
||||
type: 'SYSTEM',
|
||||
title: `${prestigeName} Achieved!`,
|
||||
message: `Congratulations! You have successfully reached ${prestigeName}. Your portfolio has been reset and you can now start fresh with your new prestige badge.`,
|
||||
});
|
||||
|
||||
return json({
|
||||
success: true,
|
||||
newPrestigeLevel: nextPrestige,
|
||||
costPaid: prestigeCost,
|
||||
coinsSold: holdings.length,
|
||||
totalSaleValue,
|
||||
message: `${warningMessage}Congratulations! You've reached Prestige ${nextPrestige}!`
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const GET: RequestHandler = async ({ request }) => {
|
||||
const session = await auth.api.getSession({ headers: request.headers });
|
||||
if (!session?.user) throw error(401, 'Not authenticated');
|
||||
|
||||
const userId = Number(session.user.id);
|
||||
|
||||
const [userProfile] = await db
|
||||
.select({
|
||||
id: user.id,
|
||||
name: user.name,
|
||||
username: user.username,
|
||||
bio: user.bio,
|
||||
image: user.image,
|
||||
createdAt: user.createdAt,
|
||||
baseCurrencyBalance: user.baseCurrencyBalance,
|
||||
isAdmin: user.isAdmin,
|
||||
loginStreak: user.loginStreak,
|
||||
prestigeLevel: user.prestigeLevel
|
||||
})
|
||||
.from(user)
|
||||
.where(eq(user.id, userId))
|
||||
.limit(1);
|
||||
|
||||
if (!userProfile) {
|
||||
throw error(404, 'User not found');
|
||||
}
|
||||
|
||||
const [portfolioStats] = await db
|
||||
.select({
|
||||
holdingsCount: sql<number>`COUNT(*)`,
|
||||
holdingsValue: sql<number>`COALESCE(SUM(CAST(${userPortfolio.quantity} AS NUMERIC) * CAST(${coin.currentPrice} AS NUMERIC)), 0)`
|
||||
})
|
||||
.from(userPortfolio)
|
||||
.leftJoin(coin, eq(userPortfolio.coinId, coin.id))
|
||||
.where(eq(userPortfolio.userId, userId));
|
||||
|
||||
const baseCurrencyBalance = Number(userProfile.baseCurrencyBalance);
|
||||
const holdingsValue = Number(portfolioStats?.holdingsValue || 0);
|
||||
const holdingsCount = Number(portfolioStats?.holdingsCount || 0);
|
||||
const totalPortfolioValue = baseCurrencyBalance + holdingsValue;
|
||||
|
||||
return json({
|
||||
profile: {
|
||||
...userProfile,
|
||||
baseCurrencyBalance,
|
||||
totalPortfolioValue,
|
||||
prestigeLevel: userProfile.prestigeLevel || 0
|
||||
},
|
||||
stats: {
|
||||
totalPortfolioValue,
|
||||
baseCurrencyBalance,
|
||||
holdingsValue,
|
||||
holdingsCount,
|
||||
coinsCreated: 0,
|
||||
totalTransactions: 0,
|
||||
totalBuyVolume: 0,
|
||||
totalSellVolume: 0,
|
||||
transactions24h: 0,
|
||||
buyVolume24h: 0,
|
||||
sellVolume24h: 0
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -25,6 +25,7 @@ export async function GET({ params }) {
|
|||
baseCurrencyBalance: true,
|
||||
isAdmin: true,
|
||||
loginStreak: true,
|
||||
prestigeLevel: true,
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
477
website/src/routes/prestige/+page.svelte
Normal file
477
website/src/routes/prestige/+page.svelte
Normal file
|
|
@ -0,0 +1,477 @@
|
|||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Alert, AlertDescription } from '$lib/components/ui/alert';
|
||||
import { Progress } from '$lib/components/ui/progress';
|
||||
import * as Dialog from '$lib/components/ui/dialog';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import * as Avatar from '$lib/components/ui/avatar';
|
||||
import { AlertTriangle, Crown, Loader2, Star } from 'lucide-svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { USER_DATA } from '$lib/stores/user-data';
|
||||
import { formatValue, getPublicUrl, PRESTIGE_COSTS, PRESTIGE_NAMES } from '$lib/utils';
|
||||
import SEO from '$lib/components/self/SEO.svelte';
|
||||
import SignInConfirmDialog from '$lib/components/self/SignInConfirmDialog.svelte';
|
||||
import ProfileBadges from '$lib/components/self/ProfileBadges.svelte';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import PrestigeSkeleton from '$lib/components/self/skeletons/PrestigeSkeleton.svelte';
|
||||
|
||||
let isPrestiging = $state(false);
|
||||
let error = $state('');
|
||||
let shouldSignIn = $state(false);
|
||||
let loading = $state(true);
|
||||
let showConfirmDialog = $state(false);
|
||||
let confirmationText = $state('');
|
||||
let prestigeData = $state<any>(null);
|
||||
|
||||
let userData = $derived($USER_DATA);
|
||||
|
||||
const currentPrestige = $derived(prestigeData?.profile?.prestigeLevel || 0);
|
||||
const nextPrestige = $derived(currentPrestige + 1);
|
||||
const prestigeCost = $derived.by(() => {
|
||||
if (!prestigeData) return null;
|
||||
const nextLevel = currentPrestige + 1;
|
||||
return PRESTIGE_COSTS[nextLevel as keyof typeof PRESTIGE_COSTS] || null;
|
||||
});
|
||||
const prestigeName = $derived.by(() => {
|
||||
if (!prestigeData) return null;
|
||||
const nextLevel = currentPrestige + 1;
|
||||
return PRESTIGE_NAMES[nextLevel as keyof typeof PRESTIGE_NAMES] || null;
|
||||
});
|
||||
const currentBalance = $derived(prestigeData?.profile?.baseCurrencyBalance || 0);
|
||||
const holdingsValue = $derived(prestigeData?.stats?.holdingsValue || 0);
|
||||
const totalValue = $derived(prestigeData?.profile?.totalPortfolioValue || 0);
|
||||
const canAfford = $derived(prestigeCost ? currentBalance >= prestigeCost : false);
|
||||
const hasMaxPrestige = $derived(!prestigeCost);
|
||||
const progressPercentage = $derived(
|
||||
prestigeCost ? Math.min((currentBalance / prestigeCost) * 100, 100) : 100
|
||||
);
|
||||
const amountNeeded = $derived(prestigeCost ? Math.max(prestigeCost - currentBalance, 0) : 0);
|
||||
|
||||
onMount(async () => {
|
||||
await fetchPrestigeData();
|
||||
loading = false;
|
||||
});
|
||||
|
||||
async function fetchPrestigeData() {
|
||||
if (!userData) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/prestige');
|
||||
if (!response.ok) throw new Error('Failed to fetch prestige data');
|
||||
prestigeData = await response.json();
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch prestige data:', e);
|
||||
toast.error('Failed to load prestige data');
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePrestige() {
|
||||
if (!canAfford || !userData) return;
|
||||
|
||||
isPrestiging = true;
|
||||
error = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/prestige', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(result.message || 'Failed to prestige');
|
||||
}
|
||||
|
||||
toast.success(`Congratulations! You've reached ${prestigeName}!`);
|
||||
await fetchPrestigeData();
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'An error occurred';
|
||||
error = errorMessage;
|
||||
toast.error(errorMessage);
|
||||
} finally {
|
||||
isPrestiging = false;
|
||||
showConfirmDialog = false;
|
||||
confirmationText = '';
|
||||
}
|
||||
}
|
||||
|
||||
function openConfirmDialog() {
|
||||
if (!canAfford || !userData) return;
|
||||
showConfirmDialog = true;
|
||||
}
|
||||
|
||||
function closeConfirmDialog() {
|
||||
showConfirmDialog = false;
|
||||
confirmationText = '';
|
||||
}
|
||||
$effect(() => {
|
||||
console.log(currentPrestige);
|
||||
});
|
||||
const canConfirmPrestige = $derived(confirmationText.toUpperCase() === 'PRESTIGE');
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="Prestige - Rugplay"
|
||||
description="Advance your trading status and reset your progress for prestige rewards in the Rugplay cryptocurrency simulation."
|
||||
noindex={true}
|
||||
/>
|
||||
|
||||
<SignInConfirmDialog bind:open={shouldSignIn} />
|
||||
|
||||
<!-- Prestige Confirmation Dialog -->
|
||||
<Dialog.Root bind:open={showConfirmDialog}>
|
||||
<Dialog.Content class="sm:max-w-md">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title class="flex items-center gap-2">
|
||||
<AlertTriangle class="text-destructive h-5 w-5" />
|
||||
Confirm
|
||||
</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
This action is permanent and cannot be undone. Please review the consequences carefully.
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<div class="space-y-4">
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle class="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>You will lose:</strong>
|
||||
<ul class="mt-2 list-disc space-y-1 pl-4">
|
||||
<li>Cash balance: {formatValue(currentBalance)}</li>
|
||||
{#if holdingsValue > 0}
|
||||
<li>All coin holdings worth {formatValue(holdingsValue)}</li>
|
||||
{/if}
|
||||
<li>Total portfolio value: {formatValue(totalValue)}</li>
|
||||
</ul>
|
||||
We will automatically sell all your coin holdings.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="confirmation" class="text-sm font-medium">Type "PRESTIGE" to confirm:</Label>
|
||||
<Input
|
||||
id="confirmation"
|
||||
bind:value={confirmationText}
|
||||
placeholder="Type PRESTIGE here"
|
||||
class="uppercase"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog.Footer>
|
||||
<Button variant="ghost" onclick={closeConfirmDialog}>Cancel</Button>
|
||||
<Button onclick={handlePrestige} disabled={!canConfirmPrestige || isPrestiging}>
|
||||
{#if isPrestiging}
|
||||
<Loader2 class="h-4 w-4 animate-spin" />
|
||||
Advancing...
|
||||
{:else}
|
||||
Proceed
|
||||
{/if}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
|
||||
<div class="container mx-auto max-w-7xl p-6">
|
||||
<header class="mb-8">
|
||||
<div class="text-center">
|
||||
<div class="mb-2 flex items-center justify-center gap-3">
|
||||
<Star class="h-8 w-8 text-yellow-500" />
|
||||
<h1 class="text-3xl font-bold">Prestige</h1>
|
||||
</div>
|
||||
<p class="text-muted-foreground mb-6">Reset your progress to advance your trading status</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
<PrestigeSkeleton />
|
||||
{:else if !userData}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="text-muted-foreground mb-4 text-xl">Sign in to prestige</div>
|
||||
<p class="text-muted-foreground mb-4 text-sm">You need an account to prestige</p>
|
||||
<Button onclick={() => (shouldSignIn = true)}>Sign In</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<!-- Main Content Column -->
|
||||
<div class="flex flex-col lg:col-span-2">
|
||||
<!-- How -->
|
||||
<Card.Root class="mb-6 gap-1">
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Title class="text-base">How</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div class="flex gap-3">
|
||||
<div
|
||||
class="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-sm font-medium"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Meet Requirements</p>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Accumulate enough cash to afford the prestige cost
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div
|
||||
class="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-sm font-medium"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Reset Progress</p>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
All cash and holdings are erased, but history remains
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div
|
||||
class="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-sm font-medium"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Gain Status</p>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Earn an exclusive prestige title and start fresh
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
{#if !hasMaxPrestige}
|
||||
<!-- Prestige Requirements -->
|
||||
<Card.Root class="flex flex-1 flex-col gap-1">
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<Star class="h-5 w-5" />
|
||||
Progress
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="flex flex-1 flex-col space-y-6">
|
||||
<!-- Progress Section -->
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="font-medium">Progress to {prestigeName}</span>
|
||||
<span class="font-mono">{progressPercentage.toFixed(1)}%</span>
|
||||
</div>
|
||||
<Progress value={progressPercentage} class="h-2" />
|
||||
</div>
|
||||
|
||||
<!-- Financial Details Table -->
|
||||
<div class="overflow-hidden rounded-xl border">
|
||||
<table class="w-full text-sm">
|
||||
<tbody class="divide-y">
|
||||
<tr>
|
||||
<td class="text-muted-foreground px-3 py-2 font-medium">Required:</td>
|
||||
<td class="px-3 py-2 text-right font-mono font-bold">
|
||||
{formatValue(prestigeCost || 0)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted-foreground px-3 py-2 font-medium">Your Cash:</td>
|
||||
<td
|
||||
class="px-3 py-2 text-right font-mono font-bold"
|
||||
class:text-green-600={canAfford}
|
||||
class:text-red-600={!canAfford}
|
||||
>
|
||||
{formatValue(currentBalance)}
|
||||
</td>
|
||||
</tr>
|
||||
{#if !canAfford}
|
||||
<tr>
|
||||
<td class="text-muted-foreground px-3 py-2 font-medium">Still needed:</td>
|
||||
<td class="px-3 py-2 text-right font-mono font-bold text-red-600">
|
||||
{formatValue(amountNeeded)}
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !canAfford}
|
||||
<Label>Tip: sell coin holdings</Label>
|
||||
{:else}
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle class="h-4 w-4" />
|
||||
<AlertDescription>Prestiging is permanent and cannot be undone!</AlertDescription>
|
||||
</Alert>
|
||||
{/if}
|
||||
|
||||
<!-- Prestige Button -->
|
||||
<Button
|
||||
onclick={canAfford ? openConfirmDialog : undefined}
|
||||
disabled={!canAfford || isPrestiging}
|
||||
class="w-full"
|
||||
size="lg"
|
||||
variant={canAfford ? 'default' : 'secondary'}
|
||||
>
|
||||
{#if isPrestiging}
|
||||
<Loader2 class="h-4 w-4 animate-spin" />
|
||||
Advancing to {prestigeName}...
|
||||
{:else if !canAfford}
|
||||
Need {formatValue(amountNeeded)} more to prestige
|
||||
{:else}
|
||||
Let's go
|
||||
{/if}
|
||||
</Button>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else}
|
||||
<!-- Max Prestige Card -->
|
||||
<Card.Root class="flex flex-1 flex-col gap-1">
|
||||
<Card.Content class="py-16 text-center">
|
||||
<Star class="mx-auto mb-6 h-20 w-20 text-yellow-500" />
|
||||
<h3 class="mb-3 text-2xl font-bold">You're a star!</h3>
|
||||
<p class="text-muted-foreground">
|
||||
You have reached the highest prestige level available.
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
|
||||
<!-- Error Messages -->
|
||||
{#if error}
|
||||
<Alert class="mt-6">
|
||||
<AlertTriangle class="h-4 w-4" />
|
||||
<AlertDescription class="text-red-600">
|
||||
❌ {error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Info -->
|
||||
<div class="flex flex-col space-y-4">
|
||||
<!-- Profile Preview Card -->
|
||||
{#if userData}
|
||||
<Card.Root class="flex-1 gap-1">
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Title class="text-base">Preview</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<!-- Current Profile -->
|
||||
<div class="space-y-2">
|
||||
<Label class="text-muted-foreground text-xs">Current</Label>
|
||||
<div class="flex items-center gap-3 rounded-lg border p-3">
|
||||
<Avatar.Root class="h-10 w-10 shrink-0">
|
||||
<Avatar.Image src={getPublicUrl(userData.image)} alt={userData.name} />
|
||||
<Avatar.Fallback class="text-sm"
|
||||
>{userData.name?.charAt(0) || '?'}</Avatar.Fallback
|
||||
>
|
||||
</Avatar.Root>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<h4 class="truncate text-sm font-medium">{userData.name}</h4>
|
||||
<ProfileBadges
|
||||
user={{
|
||||
...userData,
|
||||
id: parseInt(userData.id),
|
||||
prestigeLevel: currentPrestige,
|
||||
createdAt: new Date(),
|
||||
totalPortfolioValue: totalValue,
|
||||
loginStreak: 0
|
||||
}}
|
||||
showId={false}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-muted-foreground truncate text-xs">@{userData.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prestige Preview -->
|
||||
<div class="space-y-2">
|
||||
<Label class="text-muted-foreground text-xs">After</Label>
|
||||
<div
|
||||
class="flex items-center gap-3 rounded-lg border-2 border-yellow-500/30 bg-yellow-50/50 p-3 dark:bg-yellow-950/20"
|
||||
>
|
||||
<Avatar.Root class="h-10 w-10 shrink-0">
|
||||
<Avatar.Image src={getPublicUrl(userData.image)} alt={userData.name} />
|
||||
<Avatar.Fallback class="text-sm"
|
||||
>{userData.name?.charAt(0) || '?'}</Avatar.Fallback
|
||||
>
|
||||
</Avatar.Root>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<h4 class="truncate text-sm font-medium">{userData.name}</h4>
|
||||
<ProfileBadges
|
||||
user={{
|
||||
...userData,
|
||||
id: parseInt(userData.id),
|
||||
prestigeLevel: nextPrestige,
|
||||
createdAt: new Date(),
|
||||
totalPortfolioValue: totalValue,
|
||||
loginStreak: 0
|
||||
}}
|
||||
showId={false}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-muted-foreground truncate text-xs">@{userData.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
|
||||
<!-- All Prestige Levels -->
|
||||
<Card.Root class="flex-1 gap-1">
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Title class="text-base">Levels</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#each Object.entries(PRESTIGE_COSTS) as [level, cost]}
|
||||
{@const levelNum = parseInt(level)}
|
||||
{@const isCurrentNext = levelNum === nextPrestige && !hasMaxPrestige}
|
||||
{@const isAchieved = levelNum <= currentPrestige}
|
||||
<div
|
||||
class="flex items-center justify-between py-1"
|
||||
class:opacity-50={!isAchieved && !isCurrentNext}
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if isAchieved}
|
||||
<Star class="h-4 w-4 text-yellow-500" />
|
||||
{:else if isCurrentNext}
|
||||
<ChevronRight class="h-4 w-4 text-blue-500" />
|
||||
{:else}
|
||||
<div class="h-4 w-4"></div>
|
||||
{/if}
|
||||
<span class="text-sm font-medium" class:text-yellow-600={isAchieved}>
|
||||
{PRESTIGE_NAMES[levelNum as keyof typeof PRESTIGE_NAMES]}
|
||||
</span>
|
||||
</div>
|
||||
<span class="font-mono text-xs">{formatValue(cost)}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
min-height: calc(100vh - 4rem);
|
||||
}
|
||||
</style>
|
||||
Reference in a new issue