Merge pull request #11 from QPixel/feat/leaderboard-alltime-tabs

add sub ui for all time/quarters
QPixel · Apr 28, 2024 · cb9ebcb · cb9ebcb
2 parents cc74e58 + 7acb974
commit cb9ebcb
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 39 deletions.
diff --git a/src/lib/components/leaderboard.svelte b/src/lib/components/leaderboard.svelte
@@ -1,58 +1,77 @@
 <script lang="ts">
 	import * as Tabs from '$lib/components/ui/tabs';
 	import type { LeaderboardData } from '$lib/db/leaderboard';
-	import { InfoIcon } from 'lucide-svelte';
+	import { ArrowUpIcon, InfoIcon } from 'lucide-svelte';
 	import { leaderboard_store } from './get-leaderboard';
 
 	import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert';
 
 	export let leaderboardData: LeaderboardData;
 	export let leaderboardQuarters: string[];
-	console.log(leaderboardData);
-	console.log(leaderboardQuarters);
 	leaderboard_store.init(leaderboardData);
 </script>
 
 {#if $leaderboard_store}
 	<div class="space-y-4">
-		<Tabs.Root value={leaderboardQuarters[0]}>
+		<Tabs.Root value={'Quarters'}>
 			<Tabs.List>
-				{#each leaderboardQuarters as quarter}
-					{#if quarter === 'all_time'}
-						<Tabs.Trigger value={quarter}>All Time</Tabs.Trigger>
-					{:else}
-						<Tabs.Trigger value={quarter}>
-							{quarter}
-						</Tabs.Trigger>
-					{/if}
-				{/each}
+				<Tabs.Trigger value={'Quarters'}>By Quarter</Tabs.Trigger>
+				<Tabs.Trigger value={'All Time'}>All Time</Tabs.Trigger>
 			</Tabs.List>
-			{#each leaderboardQuarters as quarter}
-				<Tabs.Content value={quarter}>
-					<div class="space-y-4">
-						{#if quarter === 'all_time'}
-							<Alert>
-								<InfoIcon class="h-4 w-4" />
-								<AlertTitle>Heads up!</AlertTitle>
-								<AlertDescription>
-									This feature is still in beta! The all-time leaderboard may not be accurate nor
-									auto update!
-								</AlertDescription>
-							</Alert>
-						{/if}
-						<p class="text-md">
-							Quarter Total: {$leaderboard_store[quarter].total}
-						</p>
-						<ol class="divide-y divide-solid rounded-lg border-2 p-2">
-							{#each $leaderboard_store[quarter].data as player, i}
-								<li class="p-2 text-xl">
-									{i + 1}. {player.resolved_username} - {player.total}
-								</li>
+			<Tabs.Content value={'All Time'}>
+				<div class="space-y-4">
+					<Alert>
+						<InfoIcon class="h-4 w-4" />
+						<AlertTitle>Heads up!</AlertTitle>
+						<AlertDescription>
+							This feature is still in beta! The all-time leaderboard may not be accurate nor auto
+							update!
+						</AlertDescription>
+					</Alert>
+					<p class="text-md">
+						All Time Total: {$leaderboard_store['all_time'].total}
+					</p>
+					<ol class="divide-y divide-solid rounded-lg border-2 p-2">
+						{#each $leaderboard_store['all_time'].data as player, i}
+							<li class="p-2 text-xl">
+								{i + 1}. {player.resolved_username} - {player.total}
+							</li>
+						{/each}
+					</ol>
+				</div>
+			</Tabs.Content>
+			<Tabs.Content value={'Quarters'}>
+				<div>
+					<Tabs.Root value={leaderboardQuarters[0]}>
+						<Tabs.List>
+							{#each leaderboardQuarters as quarter}
+								<Tabs.Trigger value={quarter}>
+									{quarter}
+								</Tabs.Trigger>
 							{/each}
-						</ol>
-					</div>
-				</Tabs.Content>
-			{/each}
+						</Tabs.List>
+						{#each leaderboardQuarters as quarter}
+							<Tabs.Content value={quarter}>
+								<div class="space-y-4">
+									<p class="text-md">
+										Quarter Total: {$leaderboard_store[quarter].total}
+									</p>
+									<ol class="divide-y divide-solid rounded-lg border-2 p-2">
+										{#each $leaderboard_store[quarter].data as player, i}
+											<li class="inline-flex w-full p-2 text-xl">
+												<span class="">{i + 1}.</span>
+												<span class="flex-grow pl-6">{player.resolved_username}</span>
+												<span class="px-auto text-left">{player.total}</span>
+												<span class=""><ArrowUpIcon class="h-4 w-4 p-2" color="white" /></span>
+											</li>
+										{/each}
+									</ol>
+								</div>
+							</Tabs.Content>
+						{/each}
+					</Tabs.Root>
+				</div>
+			</Tabs.Content>
 		</Tabs.Root>
 	</div>
 {:else}

diff --git a/src/lib/db/quarter.ts b/src/lib/db/quarter.ts
@@ -17,7 +17,6 @@ export async function getQuarters(env: ENV) {
         const quartersArr = Array.from(quarters).sort((a, b) =>
             a === currentQuarter ? -1 : b === currentQuarter ? 1 : 0,
         );
-        quartersArr.push("all_time")
         return quartersArr;
 
     }