71 lines
1.8 KiB
Svelte
71 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import Card from '$lib/components/Card.svelte';
|
|
import CardGrid from '$lib/components/CardGrid.svelte';
|
|
import CommanderIcon from '$lib/components/icons/CommanderIcon.svelte';
|
|
import type { PageProps } from './$types';
|
|
let { data }: PageProps = $props();
|
|
|
|
let commander = $state([])
|
|
let slug = $derived(data.slug)
|
|
|
|
const colorCorrespondance = {
|
|
"white": "W",
|
|
"blue": "U",
|
|
"black": "B",
|
|
"red": "R",
|
|
"green": "G",
|
|
"azorius": "UW",
|
|
"dimir": "BU",
|
|
"rakdos": "BR",
|
|
"gruul": "GR",
|
|
"selesnya": "GW",
|
|
"orzhov": "BW",
|
|
"izzet": "RU",
|
|
"golgari": "BG",
|
|
"boros": "RW",
|
|
"simic": "GU",
|
|
"esper": "BUW",
|
|
"grixis": "BRU",
|
|
"jund": "BGR",
|
|
"naya": "GRW",
|
|
"bant": "GUW",
|
|
"abzan": "BGW",
|
|
"jeskai": "RUW",
|
|
"sultai": "BGU",
|
|
"mardu": "BRW",
|
|
"temur": "GRU",
|
|
"yore-tiller": "BRUW",
|
|
"glint-eye": "BGRU",
|
|
"dune-brood": "BGRW",
|
|
"ink-treader": "GRUW",
|
|
"witch-maw": "BGUW",
|
|
"five-colors": "BGRUW",
|
|
}
|
|
|
|
$effect(() => {
|
|
commander = []
|
|
|
|
let api_slug = ""
|
|
if(slug == "all") api_slug = "all"
|
|
else if(slug == "colorless") api_slug = "colorless"
|
|
else api_slug = colorCorrespondance[slug]
|
|
|
|
fetch("/json/top/commander/"+api_slug)
|
|
.then( response => response.json() )
|
|
.then( data => {
|
|
commander = data
|
|
})
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col w-full items-center">
|
|
<div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2">
|
|
<CommanderIcon />
|
|
<h2 class="font-beleren text-2xl">Top Commandants {slug != "all" ? "- " + slug.charAt(0).toUpperCase() + slug.slice(1) : ""}</h2>
|
|
</div>
|
|
<CardGrid>
|
|
{#each commander as card}
|
|
<Card card={card} isCommander={true} showUrl={true} />
|
|
{/each}
|
|
</CardGrid>
|
|
</div>
|