New rewrite with svelte and pocketbase
This commit is contained in:
zuma
parent
72bfc2ed89
commit
160617af60
95 changed files with 4402 additions and 0 deletions
226
frontend/src/lib/components/Navbar.svelte
Normal file
226
frontend/src/lib/components/Navbar.svelte
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
<script>
|
||||
import { getContext, onMount } from "svelte";
|
||||
import Blue from "./icons/Blue.svelte";
|
||||
import White from "./icons/White.svelte";
|
||||
import Black from "./icons/Black.svelte";
|
||||
import Colorless from "./icons/Colorless.svelte";
|
||||
import Red from "./icons/Red.svelte";
|
||||
import Green from "./icons/Green.svelte";
|
||||
import IconBase from "./icons/IconBase.svelte";
|
||||
import CardSearch from "./CardSearch.svelte";
|
||||
import SearchIcon from "./icons/SearchIcon.svelte";
|
||||
import DeckIcon from "./icons/DeckIcon.svelte";
|
||||
import MenuIcon from "./icons/MenuIcon.svelte";
|
||||
|
||||
let dialog
|
||||
|
||||
let username = $state("")
|
||||
|
||||
let brawlsets = $state([])
|
||||
let isLoggedIn = $state(false)
|
||||
|
||||
onMount( async () => {
|
||||
const storageData = window.localStorage.getItem("pocketbase_auth")
|
||||
if (storageData != null) {
|
||||
const jsonData = JSON.parse(storageData)
|
||||
username = jsonData.record.name
|
||||
isLoggedIn = true
|
||||
}
|
||||
|
||||
fetch("/json/misc/brawlsets")
|
||||
.then( response => response.json() )
|
||||
.then( data => { brawlsets = data; console.log(data) } )
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div class="font-inter-tight flex flex-row justify-between w-screen p-4 h-16">
|
||||
<a class="flex flex-row gap-2 items-center" href="/">
|
||||
<img alt="brawlset website logo" src="/assets/logo.png" class="h-8" />
|
||||
<span class="font-beleren text-3xl mt-2 bg-gradient-to-r from-black to-orange-500 bg-clip-text text-transparent">BrawlSet</span>
|
||||
</a>
|
||||
<div class="hidden flex-row gap-4 items-center md:flex">
|
||||
<details class="dropdown w-0 md:w-fit">
|
||||
<summary role="button">
|
||||
<a class="cursor-pointer text-stone-500">Commandants</a>
|
||||
</summary>
|
||||
<ul>
|
||||
<li>Top commandants</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details class="dropdown">
|
||||
<summary role="button">
|
||||
<a class="cursor-pointer text-stone-500">BSets</a>
|
||||
</summary>
|
||||
<ul>
|
||||
{#each brawlsets.slice(0,5) as brawlset}
|
||||
<li>
|
||||
<a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
|
||||
<div class="flex flex-row gap-1">
|
||||
{#each brawlset.IconsSvgUri as icon}
|
||||
<IconBase src={icon} alt="brawlset icon"/>
|
||||
{/each}
|
||||
</div>
|
||||
{brawlset.Name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
<li><a href="/bset/all">Plus de BSets...</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<a class="cursor-pointer text-stone-500" href="/regles">Règles</a>
|
||||
<a class="cursor-pointer text-stone-500" href="/faq">F.A.Q</a>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4 items-center text-stone-500">
|
||||
<button class="flex flex-row items-center" onclick={() => dialog.showModal()}>
|
||||
<SearchIcon class="visible w-fit md:invisible md:w-0" />
|
||||
<span class="invisible w-0 md:w-fit md:visible">Rechercher</span>
|
||||
</button>
|
||||
{#if isLoggedIn}
|
||||
<a class="cursor-pointer flex flex-row items-center" href="/decks">
|
||||
<DeckIcon class="visible w-fit md:invisible md:w-0" />
|
||||
<span class="invisible w-0 md:w-fit md:visible">Decks</span>
|
||||
</a>
|
||||
<a class="cursor-pointer hidden md:inline" href="/profil">
|
||||
<span class="invisible w-0 md:w-fit md:visible">{username}</span>
|
||||
</a>
|
||||
{:else}
|
||||
<a class="cursor-pointer" href="/connexion">Connexion</a>
|
||||
<a class="cursor-pointer" href="#">Inscription</a>
|
||||
{/if}
|
||||
<details class="dropdown inline md:hidden">
|
||||
<summary role="button">
|
||||
<a class="cursor-pointer"><MenuIcon /></a>
|
||||
</summary>
|
||||
<ul>
|
||||
{#each brawlsets.slice(0,5) as brawlset}
|
||||
<li>
|
||||
<a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
|
||||
<div class="flex flex-row gap-1">
|
||||
{#each brawlset.IconsSvgUri as icon}
|
||||
<IconBase src={icon} alt="brawlset icon"/>
|
||||
{/each}
|
||||
</div>
|
||||
{brawlset.Name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
<li><a href="/bset/all">Plus de BSets...</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardSearch bind:dialog={dialog} />
|
||||
|
||||
<style>
|
||||
/* Close the dropdown with outside clicks */
|
||||
.dropdown > summary::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown[open] > summary::before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown summary {
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.dropdown ul {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
margin-top: 5px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #D3D3D3;
|
||||
box-shadow: 0px 4px 5px #D3D3D3;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown li {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown ul ul {
|
||||
display: none;
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.dropdown li:hover {
|
||||
background-color: hsl(240 4.8% 95.9%);
|
||||
}
|
||||
|
||||
.dropdown li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue