New rewrite with svelte and pocketbase

This commit is contained in:
zuma 2025-04-12 16:08:00 +02:00
parent 72bfc2ed89
commit 160617af60
95 changed files with 4402 additions and 0 deletions

View file

@ -0,0 +1,95 @@
<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 normalImage={card.NormalImage} url={card.Url} name={card.Name} price={card.Price} cardmarketUri={card.CardmarketUri} numberOfDecks={card.NumberOfDecks}/>
{/each}
</CardGrid>
<h2>Planeswalker</h2>
<CardGrid>
{#each planeswalker as card}
<Card normalImage={card.NormalImage} url={card.Url} name={card.Name} price={card.Price} cardmarketUri={card.CardmarketUri} numberOfDecks={card.NumberOfDecks} numberOfPossibleDecks={card.NumberOfPossibleDecks} />
{/each}
</CardGrid>
<h2>Creature</h2>
<CardGrid>
{#each creature as card}
<Card normalImage={card.NormalImage} url={card.Url} name={card.Name} price={card.Price} cardmarketUri={card.CardmarketUri} numberOfDecks={card.NumberOfDecks} numberOfPossibleDecks={card.NumberOfPossibleDecks} />
{/each}
</CardGrid>
<h2>Rituels</h2>
<CardGrid>
{#each sorcery as card}
<Card normalImage={card.NormalImage} url={card.Url} name={card.Name} price={card.Price} cardmarketUri={card.CardmarketUri} numberOfDecks={card.NumberOfDecks} numberOfPossibleDecks={card.NumberOfPossibleDecks} />
{/each}
</CardGrid>
<h2>Artefacts</h2>
<CardGrid>
{#each artifact as card}
<Card normalImage={card.NormalImage} url={card.Url} name={card.Name} price={card.Price} cardmarketUri={card.CardmarketUri} numberOfDecks={card.NumberOfDecks} numberOfPossibleDecks={card.NumberOfPossibleDecks} />
{/each}
</CardGrid>
<h2>Éphémères</h2>
<CardGrid>
{#each instant as card}
<Card normalImage={card.NormalImage} url={card.Url} name={card.Name} price={card.Price} cardmarketUri={card.CardmarketUri} numberOfDecks={card.NumberOfDecks} numberOfPossibleDecks={card.NumberOfPossibleDecks} />
{/each}
</CardGrid>
<h2>Enchantements</h2>
<CardGrid>
{#each enchantment as card}
<Card normalImage={card.NormalImage} url={card.Url} name={card.Name} price={card.Price} cardmarketUri={card.CardmarketUri} numberOfDecks={card.NumberOfDecks} numberOfPossibleDecks={card.NumberOfPossibleDecks} />
{/each}
</CardGrid>
<h2>Terrains</h2>
<CardGrid>
{#each land as card}
<Card normalImage={card.NormalImage} url={card.Url} name={card.Name} price={card.Price} cardmarketUri={card.CardmarketUri} numberOfDecks={card.NumberOfDecks} numberOfPossibleDecks={card.NumberOfPossibleDecks} />
{/each}
</CardGrid>
</div>

View file

@ -0,0 +1,6 @@
import type { PageLoad } from './$types';
export const load: PageLoad = ({ params }) => {
console.log("test")
return {slug: params.slug, test: "yeeeeheeee"}
};