System-End/scraps
1
0
Fork 0
mirror of https://github.com/System-End/scraps.git synced 2026-04-19 19:45:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add new sorting type, make dashboard tab the first tab at navbar

Browse source
This commit is contained in:
sbeltranc 2026-02-07 20:43:09 -05:00
parent 724a1a9bab
commit 16b7fc3ed2
4 changed files with 43 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/lib/components/Navbar.svelte
View file

@ -146,7 +146,7 @@
<nav
class="fixed top-0 right-0 left-0 z-50 hidden items-center justify-between bg-white/90 px-6 py-4 backdrop-blur-sm md:flex md:px-12 lg:px-64"
>
<a href="/" class="shrink-0">
<a href={isLoggedIn ? '/dashboard' : '/'} class="shrink-0">
<img src="/flag-standalone-bw.png" alt="Hack Club" class="h-8 md:h-10" />
</a>
@ -279,17 +279,6 @@
{:else}
<!-- Dashboard nav for logged-in users - centered -->
<div class="flex items-center gap-2">
<a
href="/explore"
class="flex cursor-pointer items-center gap-2 rounded-full border-4 px-6 py-2 transition-all duration-300 {currentPath ===
'/explore'
? 'border-black bg-black text-white'
: 'border-black hover:border-dashed'}"
>
<Compass size={18} />
<span class="text-lg font-bold">{$t.nav.explore}</span>
</a>
<a
href="/dashboard"
class="flex cursor-pointer items-center gap-2 rounded-full border-4 px-6 py-2 transition-all duration-300 {currentPath ===
@ -301,6 +290,17 @@
<span class="text-lg font-bold">{$t.nav.dashboard}</span>
</a>
<a
href="/explore"
class="flex cursor-pointer items-center gap-2 rounded-full border-4 px-6 py-2 transition-all duration-300 {currentPath ===
'/explore'
? 'border-black bg-black text-white'
: 'border-black hover:border-dashed'}"
>
<Compass size={18} />
<span class="text-lg font-bold">{$t.nav.explore}</span>
</a>
<a
href="/leaderboard"
class="flex cursor-pointer items-center gap-2 rounded-full border-4 px-6 py-2 transition-all duration-300 {currentPath ===
@ -413,7 +413,7 @@
<nav
class="fixed top-0 right-0 left-0 z-50 flex items-center justify-between bg-white/90 px-4 py-3 backdrop-blur-sm md:hidden"
>
<a href="/" class="shrink-0">
<a href={isLoggedIn ? '/dashboard' : '/'} class="shrink-0">
<img src="/flag-standalone-bw.png" alt="Hack Club" class="h-8" />
</a>
@ -591,18 +591,6 @@
{:else}
<!-- Dashboard nav -->
<div class="flex flex-col gap-2">
<a
href="/explore"
onclick={handleMobileNavClick}
class="flex cursor-pointer items-center gap-3 rounded-full border-4 px-4 py-3 transition-all duration-300 {currentPath ===
'/explore'
? 'border-black bg-black text-white'
: 'border-black hover:border-dashed'}"
>
<Compass size={20} />
<span class="text-lg font-bold">{$t.nav.explore}</span>
</a>
<a
href="/dashboard"
onclick={handleMobileNavClick}
@ -615,6 +603,18 @@
<span class="text-lg font-bold">{$t.nav.dashboard}</span>
</a>
<a
href="/explore"
onclick={handleMobileNavClick}
class="flex cursor-pointer items-center gap-3 rounded-full border-4 px-4 py-3 transition-all duration-300 {currentPath ===
'/explore'
? 'border-black bg-black text-white'
: 'border-black hover:border-dashed'}"
>
<Compass size={20} />
<span class="text-lg font-bold">{$t.nav.explore}</span>
</a>
<a
href="/leaderboard"
onclick={handleMobileNavClick}

1
frontend/src/lib/i18n/en.ts
View file

@ -106,6 +106,7 @@ export default {
default: 'default',
favorites: 'favorites',
probability: 'probability',
cost: 'cost (low to high)',
loadingItems: 'Loading items...',
noItemsAvailable: 'No items available',
soldOut: 'sold out',

1
frontend/src/lib/i18n/es.ts
View file

@ -106,6 +106,7 @@ export default {
default: 'predeterminado',
favorites: 'favoritos',
probability: 'probabilidad',
cost: 'costo (bajo a alto)',
loadingItems: 'Cargando artículos...',
noItemsAvailable: 'No hay artículos disponibles',
soldOut: 'agotado',

17
frontend/src/routes/shop/+page.svelte
View file

@ -23,7 +23,7 @@
}
let selectedCategories = $state<Set<string>>(new Set());
let sortBy = $state<'default' | 'favorites' | 'probability'>('probability');
let sortBy = $state<'default' | 'favorites' | 'probability' | 'cost'>('probability');
let selectedItem = $state<ShopItem | null>(null);
let winningOrderId = $state<number | null>(null);
@ -62,6 +62,12 @@
return items.sort((a, b) => b.heartCount - a.heartCount);
} else if (sortBy === 'probability') {
return items.sort((a, b) => b.effectiveProbability - a.effectiveProbability);
} else if (sortBy === 'cost') {
return items.sort((a, b) => {
const costA = Math.max(1, Math.round(a.price * (a.baseProbability / 100)));
const costB = Math.max(1, Math.round(b.price * (b.baseProbability / 100)));
return costA - costB;
});
}
return items;
});
@ -229,6 +235,15 @@
>
{$t.shop.probability}
</button>
<button
onclick={() => (sortBy = 'cost')}
class="cursor-pointer rounded-full border-4 border-black px-3 py-1.5 text-sm font-bold transition-all duration-200 sm:px-4 sm:py-2 {sortBy ===
'cost'
? 'bg-black text-white'
: 'hover:border-dashed'}"
>
{$t.shop.cost}
</button>
</div>
</div>