95 lines
2.1 KiB
Svelte
95 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import Card from '$lib/components/Card.svelte';
|
|
import CardGrid from '$lib/components/CardGrid.svelte';
|
|
import { onMount } from 'svelte';
|
|
import type { PageProps } from './$types';
|
|
let { data }: PageProps = $props();
|
|
|
|
let commander = $state([])
|
|
let creature = $state([])
|
|
let instant = $state([])
|
|
let planeswalker = $state([])
|
|
let artifact = $state([])
|
|
let sorcery = $state([])
|
|
let enchantment = $state([])
|
|
let land = $state([])
|
|
let slug = $derived(data.slug)
|
|
let test = $state("")
|
|
|
|
$effect(() => {
|
|
commander = creature = instant = planeswalker = artifact = sorcery = enchantment = []
|
|
|
|
fetch("/json/brawlset/"+slug)
|
|
.then( response => response.json() )
|
|
.then( data => {
|
|
commander = data.Cards.commander
|
|
creature = data.Cards.creature
|
|
sorcery = data.Cards.sorcery
|
|
instant = data.Cards.instant
|
|
land = data.Cards.land
|
|
enchantment = data.Cards.enchantment
|
|
artifact = data.Cards.artifact
|
|
planeswalker = data.Cards.planeswalker
|
|
})
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col w-full items-center">
|
|
<h1>{slug}</h1>
|
|
|
|
<h2>Commandants</h2>
|
|
<CardGrid>
|
|
{#each commander as card}
|
|
<Card card={card} isCommander={true} showUrl={true} />
|
|
{/each}
|
|
</CardGrid>
|
|
|
|
<h2>Planeswalker</h2>
|
|
<CardGrid>
|
|
{#each planeswalker as card}
|
|
<Card card={card}/>
|
|
{/each}
|
|
</CardGrid>
|
|
|
|
<h2>Creature</h2>
|
|
<CardGrid>
|
|
{#each creature as card}
|
|
<Card card={card}/>
|
|
{/each}
|
|
</CardGrid>
|
|
|
|
<h2>Rituels</h2>
|
|
<CardGrid>
|
|
{#each sorcery as card}
|
|
<Card card={card}/>
|
|
{/each}
|
|
</CardGrid>
|
|
|
|
<h2>Artefacts</h2>
|
|
<CardGrid>
|
|
{#each artifact as card}
|
|
<Card card={card}/>
|
|
{/each}
|
|
</CardGrid>
|
|
|
|
<h2>Éphémères</h2>
|
|
<CardGrid>
|
|
{#each instant as card}
|
|
<Card card={card}/>
|
|
{/each}
|
|
</CardGrid>
|
|
|
|
<h2>Enchantements</h2>
|
|
<CardGrid>
|
|
{#each enchantment as card}
|
|
<Card card={card}/>
|
|
{/each}
|
|
</CardGrid>
|
|
|
|
<h2>Terrains</h2>
|
|
<CardGrid>
|
|
{#each land as card}
|
|
<Card card={card}/>
|
|
{/each}
|
|
</CardGrid>
|
|
</div>
|