globuzma/brawlset
1
0
Fork 0
Code Issues Pull requests Projects 2 Releases Packages 1 Wiki Activity

Feat: Add top commander pages

Browse source
This commit is contained in:
zuma 2025-04-16 20:05:54 +02:00
parent d64b20c44b
commit 899bdd4714
6 changed files with 157 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

16
backend/cache.go
View file

@ -123,6 +123,8 @@ func GenerateCache(pb core.App) {
totalSize += int64(unsafe.Sizeof(cacheCardsSearch))
pb.Store().Set("searchData", cacheCardsSearch)
cacheColorCommanderTop := map[string][]CacheCarteListItem{}
cacheBrawlsetList := []CacheBrawlsetListItem{}
for _, v := range brawlsets {
setIconList := []string{}
@ -190,6 +192,14 @@ func GenerateCache(pb core.App) {
if c.CanBeCommander {
obj.NumberOfDecks = numberOfDecksPerCard[fmt.Sprintf("c-%s",c.ID)]
obj.Url = fmt.Sprintf("/commander/%s-%s", c.SetCode,c.SanitizedName)
colorIdentity := ""
if len(c.ColorIdentity) == 0 {
colorIdentity = "colorless"
} else {
colorIdentity = strings.Join(c.ColorIdentity, "")
}
cacheColorCommanderTop[colorIdentity] = append(cacheColorCommanderTop[colorIdentity], obj)
cacheColorCommanderTop["all"] = append(cacheColorCommanderTop["all"], obj)
cacheBrawlsetData.Cards["commander"] = append(cacheBrawlsetData.Cards["commander"], obj)
detailsObj := CacheCarteListItemWithSynergy{
@ -245,6 +255,12 @@ func GenerateCache(pb core.App) {
pb.Store().Set("json/brawlset/" + v.SanitizedName, cacheBrawlsetData)
}
totalSize += int64(unsafe.Sizeof(cacheColorCommanderTop))
for k := range cacheColorCommanderTop {
sort.Slice(cacheColorCommanderTop[k], func(i, j int) bool { return cacheColorCommanderTop[k][i].NumberOfDecks > cacheColorCommanderTop[k][j].NumberOfDecks})
pb.Store().Set(fmt.Sprintf("json/top/commander/%s", k),cacheColorCommanderTop[k])
}
totalSize += int64(unsafe.Sizeof(cacheBrawlsetList))
pb.Store().Set("json/misc/brawlsets", cacheBrawlsetList)

BIN
backend/custom_pocketbase
View file

Binary file not shown.

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

@ -45,57 +45,57 @@
<a class="cursor-pointer text-stone-500">Commandants</a>
</summary>
<ul>
<li>Top commandants</li>
<li><a href="/top/commander/all">Top commandants</a></li>
<li>
<div>Mono</div>
<ul>
<li><a class="flex flex-row items-center gap-2" href="#"><White/><span>Blanc</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Blue/><span>Bleu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Black/><span>Noir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Red/><span>Rouge</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Green/><span>Vert</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Colorless/><span>Incolor</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/white"><White/><span>Blanc</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/blue"><Blue/><span>Bleu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/black"><Black/><span>Noir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/red"><Red/><span>Rouge</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/green"><Green/><span>Vert</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/colorless"><Colorless/><span>Incolor</span></a></li>
</ul>
</li>
<li>
<div>2 couleurs</div>
<ul>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/></div><span>Azorius</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Black/></div><span>Dimir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Red/></div><span>Rakdos</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><Green/></div><span>Gruul</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><White/></div><span>Selesnya</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Black/></div><span>Orzhov</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Red/></div><span>Izzet</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Green/></div><span>Golgari</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><White/></div><span>Boros</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><Blue/></div><span>Simic</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/azorius"><div class="flex flex-row gap-0"><White/><Blue/></div><span>Azorius</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/dimir"><div class="flex flex-row gap-0"><Blue/><Black/></div><span>Dimir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/rakdos"><div class="flex flex-row gap-0"><Black/><Red/></div><span>Rakdos</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/gruul"><div class="flex flex-row gap-0"><Red/><Green/></div><span>Gruul</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/selesnya"><div class="flex flex-row gap-0"><Green/><White/></div><span>Selesnya</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/orzhov"><div class="flex flex-row gap-0"><White/><Black/></div><span>Orzhov</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/izzet"><div class="flex flex-row gap-0"><Blue/><Red/></div><span>Izzet</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/golgari"><div class="flex flex-row gap-0"><Black/><Green/></div><span>Golgari</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/boros"><div class="flex flex-row gap-0"><Red/><White/></div><span>Boros</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/simic"><div class="flex flex-row gap-0"><Green/><Blue/></div><span>Simic</span></a></li>
</ul>
</li>
<li>
<div>3 couleurs</div>
<ul>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/><Black/></div><span>Esper</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Black/><Red/></div><span>Grixis</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Red/><Green/></div><span>Jund</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><Green/><White/></div><span>Naya</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><White/><Blue/></div><span>Bant</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Black/><Green/></div><span>Abzan</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Red/><White/></div><span>Jeskai</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Green/><Blue/></div><span>Sultai</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><White/><Black/></div><span>Mardu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><Blue/><Red/></div><span>Temur</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/esper"><div class="flex flex-row gap-0"><White/><Blue/><Black/></div><span>Esper</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/grixis"><div class="flex flex-row gap-0"><Blue/><Black/><Red/></div><span>Grixis</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/jund"><div class="flex flex-row gap-0"><Black/><Red/><Green/></div><span>Jund</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/naya"><div class="flex flex-row gap-0"><Red/><Green/><White/></div><span>Naya</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/bant"><div class="flex flex-row gap-0"><Green/><White/><Blue/></div><span>Bant</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/abzan"><div class="flex flex-row gap-0"><White/><Black/><Green/></div><span>Abzan</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/jeskai"><div class="flex flex-row gap-0"><Blue/><Red/><White/></div><span>Jeskai</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/sultai"><div class="flex flex-row gap-0"><Black/><Green/><Blue/></div><span>Sultai</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/mardu"><div class="flex flex-row gap-0"><Red/><White/><Black/></div><span>Mardu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/temur"><div class="flex flex-row gap-0"><Green/><Blue/><Red/></div><span>Temur</span></a></li>
</ul>
</li>
<li>
<div>4+ couleurs</div>
<ul>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/></div><span>Yore-Tiller</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Black/><Red/><Green/></div><span>Glint-Eye</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Red/><Green/><White/></div><span>Dune-Brood</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><Green/><White/><Blue/></div><span>Ink-Treader</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><White/><Blue/><Black/></div><span>Witch-Maw</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/><Green/></div><span>5 couleurs</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/yore-tiller"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/></div><span>Yore-Tiller</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/glint-eye"><div class="flex flex-row gap-0"><Blue/><Black/><Red/><Green/></div><span>Glint-Eye</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/dune-brood"><div class="flex flex-row gap-0"><Black/><Red/><Green/><White/></div><span>Dune-Brood</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/ink-treader"><div class="flex flex-row gap-0"><Red/><Green/><White/><Blue/></div><span>Ink-Treader</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/witch-maw"><div class="flex flex-row gap-0"><Green/><White/><Blue/><Black/></div><span>Witch-Maw</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/five-colors"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/><Green/></div><span>5 couleurs</span></a></li>
</ul>
</li>
</ul>
@ -150,60 +150,60 @@
<li>
<Accordion title="Commandants">
<ul class="w-full">
<li><a href="top/commander/all">Top commandants</a></li>
<li><a href="/top/commander/all">Top commandants</a></li>
<li>
<Accordion title="Mono">
<ul>
<li><a class="flex flex-row items-center gap-2" href="#"><White/><span>Blanc</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Blue/><span>Bleu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Black/><span>Noir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Red/><span>Rouge</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Green/><span>Vert</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><Colorless/><span>Incolor</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/white"><White/><span>Blanc</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/blue"><Blue/><span>Bleu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/black"><Black/><span>Noir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/red"><Red/><span>Rouge</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/green"><Green/><span>Vert</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/colorless"><Colorless/><span>Incolor</span></a></li>
</ul>
</Accordion>
</li>
<li>
<Accordion title="2 couleurs">
<ul>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/></div><span>Azorius</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Black/></div><span>Dimir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Red/></div><span>Rakdos</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><Green/></div><span>Gruul</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><White/></div><span>Selesnya</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Black/></div><span>Orzhov</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Red/></div><span>Izzet</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Green/></div><span>Golgari</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><White/></div><span>Boros</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><Blue/></div><span>Simic</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/azorius"><div class="flex flex-row gap-0"><White/><Blue/></div><span>Azorius</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/dimir"><div class="flex flex-row gap-0"><Blue/><Black/></div><span>Dimir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/rakdos"><div class="flex flex-row gap-0"><Black/><Red/></div><span>Rakdos</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/gruul"><div class="flex flex-row gap-0"><Red/><Green/></div><span>Gruul</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/selesnya"><div class="flex flex-row gap-0"><Green/><White/></div><span>Selesnya</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/orzhov"><div class="flex flex-row gap-0"><White/><Black/></div><span>Orzhov</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/izzet"><div class="flex flex-row gap-0"><Blue/><Red/></div><span>Izzet</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/golgari"><div class="flex flex-row gap-0"><Black/><Green/></div><span>Golgari</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/boros"><div class="flex flex-row gap-0"><Red/><White/></div><span>Boros</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/simic"><div class="flex flex-row gap-0"><Green/><Blue/></div><span>Simic</span></a></li>
</ul>
</Accordion>
</li>
<li>
<Accordion title="3 couleurs">
<ul>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/><Black/></div><span>Esper</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Black/><Red/></div><span>Grixis</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Red/><Green/></div><span>Jund</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><Green/><White/></div><span>Naya</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><White/><Blue/></div><span>Bant</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Black/><Green/></div><span>Abzan</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Red/><White/></div><span>Jeskai</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Green/><Blue/></div><span>Sultai</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><White/><Black/></div><span>Mardu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><Blue/><Red/></div><span>Temur</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/esper"><div class="flex flex-row gap-0"><White/><Blue/><Black/></div><span>Esper</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/grixis"><div class="flex flex-row gap-0"><Blue/><Black/><Red/></div><span>Grixis</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/jund"><div class="flex flex-row gap-0"><Black/><Red/><Green/></div><span>Jund</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/naya"><div class="flex flex-row gap-0"><Red/><Green/><White/></div><span>Naya</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/bant"><div class="flex flex-row gap-0"><Green/><White/><Blue/></div><span>Bant</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/abzan"><div class="flex flex-row gap-0"><White/><Black/><Green/></div><span>Abzan</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/jeskai"><div class="flex flex-row gap-0"><Blue/><Red/><White/></div><span>Jeskai</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/sultai"><div class="flex flex-row gap-0"><Black/><Green/><Blue/></div><span>Sultai</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/mardu"><div class="flex flex-row gap-0"><Red/><White/><Black/></div><span>Mardu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/temur"><div class="flex flex-row gap-0"><Green/><Blue/><Red/></div><span>Temur</span></a></li>
</ul>
</Accordion>
</li>
<li>
<Accordion title="4+ couleurs">
<ul>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/></div><span>Yore-Tiller</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Black/><Red/><Green/></div><span>Glint-Eye</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Red/><Green/><White/></div><span>Dune-Brood</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><Green/><White/><Blue/></div><span>Ink-Treader</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><White/><Blue/><Black/></div><span>Witch-Maw</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/><Green/></div><span>5 couleurs</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/yore-tiller"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/></div><span>Yore-Tiller</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/glint-eye"><div class="flex flex-row gap-0"><Blue/><Black/><Red/><Green/></div><span>Glint-Eye</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/dune-brood"><div class="flex flex-row gap-0"><Black/><Red/><Green/><White/></div><span>Dune-Brood</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/ink-treader"><div class="flex flex-row gap-0"><Red/><Green/><White/><Blue/></div><span>Ink-Treader</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/witch-maw"><div class="flex flex-row gap-0"><Green/><White/><Blue/><Black/></div><span>Witch-Maw</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/five-colors"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/><Green/></div><span>5 couleurs</span></a></li>
</ul>
</Accordion>
</li>

2
frontend/src/routes/bset/all/+page.svelte
View file

@ -20,7 +20,7 @@
</script>
<div class="m-auto max-w-4xl flex flex-col gap-4 p-8">
<Input oninput={filterBrawlsets} bind:value={searchQuery} type="text" placeholder="Rechercher des brawlsets" />
<Input oninput={filterBrawlsets} bind:value={searchQuery} type="text" placeholder="Rechercher des brawlsets" autofocus/>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
{#each displayedBrawlsets as brawlset}
<a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>

69
frontend/src/routes/top/commander/[slug]/+page.svelte Normal file
View file

@ -0,0 +1,69 @@
<script lang="ts">
import Card from '$lib/components/Card.svelte';
import CardGrid from '$lib/components/CardGrid.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">
<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>
</div>

5
frontend/src/routes/top/commander/[slug]/+page.ts Normal file
View file

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