Chellaris/chellaris-sign-up-site
Chellaris/chellaris-sign-up-site
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

Rework Top Level Components to not use Skeleton

Browse source
This commit is contained in:
Neshura 2023-12-05 19:24:56 +01:00
parent 59c2fd8f2d
commit 47aadc9ef5
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
2 changed files with 62 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/routes/+layout.svelte
View file

@ -1,18 +1,19 @@
<svelte:options runes={true} />
<script lang="ts">
import '../app.postcss';
import { Modal, autoModeWatcher, type ModalComponent, getModalStore, type ModalSettings, initializeStores } from '@skeletonlabs/skeleton';
import { browser } from '$app/environment';
import { writable } from 'svelte/store';
import { themes } from '$lib/types/themes'
import { apiBaseUrl } from '$lib/components/consts';
import { LeanChellarisDataStore } from '$lib/stores/ChellarisData';
import Header from './Header.svelte';
import { AppShell } from '@skeletonlabs/skeleton';
import Settings from './Settings.svelte';
import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
import type { ChellarisGameInfo } from '$lib/types/chellaris';
import UserSettingsStore from '$lib/stores/UserSettingsStore';
initializeStores();
$: {
/* $: {
fetch(apiBaseUrl + '/v3/ethics').then((res) => {
res.json().then((data) => {
$LeanChellarisDataStore.ethics = data.ethics;
@ -33,33 +34,23 @@
});
});
}
}*/
const modalComponentRegistry: Record<string, ModalComponent> = {
settingsModal: {
ref: Settings,
props: { background: 'bg-red-500'}
}
}
</script>
<svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>
<Modal components={modalComponentRegistry}/>
<AppShell regionPage="relative">
<svelte:fragment slot="header">
<Header/>
</svelte:fragment>
<div class="
bg-{themes[$UserSettingsStore.themeId].backgroundColor}
text-{themes[$UserSettingsStore.themeId].textColor}
h-full" >
<Header/>
<!-- (sidebarLeft) -->
<!-- (sidebarRight) -->
<!-- <svelte:fragment slot="pageHeader">Page Header</svelte:fragment> -->
<!-- Router Slot -->
<slot />
<!-- ---- / ---- -->
<!-- (pageFooter) -->
<!-- (footer) -->
</AppShell>
</div>

76
src/routes/Header.svelte
View file

@ -1,55 +1,73 @@
<script lang="ts">
import { page } from '$app/stores';
import discord from '$lib/images/discord.svg';
import { AppBar, LightSwitch, TabAnchor, TabGroup, getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
import Settings from './Settings.svelte';
import Button from '$lib/components/Button.svelte';
import NavigationElement from '$lib/components/NavigationElement.svelte';
import { themes } from '$lib/types/themes';
import UserSettingsStore from '$lib/stores/UserSettingsStore';
let showSettings = false;
const modalStore = getModalStore();
const openSettings = () => {
const settings: ModalSettings = {
type: 'component',
component: 'settingsModal'
};
modalStore.trigger(settings);
// open the settings I guess
}
let user = {
loggedIn: true, // DEBUG
admin: true, // DEBUG
}
function nextTheme() {
if ($UserSettingsStore.themeId + 1 < themes.length) {
$UserSettingsStore.themeId += 1
}
else {
$UserSettingsStore.themeId = 0
}
}
</script>
<AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
<svelte:fragment slot="lead">
<p />
</svelte:fragment>
<TabGroup
padding="px-4 py-2"
<div class="flex gap-2 flex-row">
<!-- spacer -->
<ul class="flex gap-2 flex-row">
<NavigationElement href="/">Home</NavigationElement>
<NavigationElement href="/current">Game [Current Game]</NavigationElement>
<NavigationElement href="/archive">Archives</NavigationElement>
{#if user.loggedIn && user.admin}
<NavigationElement href="/admin"></NavigationElement>
{/if}
<div class="dropdown" href="user.loggedIn ? /account | /login"></div>
<Button onclick={nextTheme}>Theme</Button>
<NavigationElement href="/settings">Settings</NavigationElement>
{#if user.loggedIn}
<NavigationElement href="/account">Account</NavigationElement>
{:else}
<NavigationElement href="/login">Login</NavigationElement>
{/if}
</ul>
<!-- spacer -->
<!--padding="px-4 py-2"
justify="justify-center"
rounded="rounded-tr-xl rounded-tl-xl"
border="border-b-2 border-primary-500"
active="variant-glass-primary hover:variant-ghost-primary"
hover="hover:variant-ghost-primary"
>
<!--<div aria-current={$page.url.pathname.startsWith('/sign-up') ? 'page' : undefined}>
<div aria-current={$page.url.pathname.startsWith('/sign-up') ? 'page' : undefined}>
<a href="/sign-up">Empire Sign-Up</a>
</div>-->
<TabAnchor class="mr-1" href="/" selected={$page.url.pathname === '/'}>Home</TabAnchor>
<TabAnchor class="mx-1" href="/graphs" selected={$page.url.pathname.startsWith('/graphs')}>Graphs</TabAnchor>
<TabAnchor class="mx-1" href="/legacy-graphs" selected={$page.url.pathname === '/legacy-graphs'}>Game 15 Graphs</TabAnchor>
<TabAnchor class="mx-1" href="/admin" selected={$page.url.pathname === '/admin'}>Admin Menu</TabAnchor>
<TabAnchor class="ml-1" href="/about" selected={$page.url.pathname === '/about'}>About</TabAnchor>
</TabGroup>
<!--padding="px-4 py-2"
justify="justify-center"
rounded="rounded-tr-xl rounded-tl-xl"
border="border-b-2 border-primary-500"
active="variant-glass-primary hover:variant-ghost-primary"
hover="hover:variant-ghost-primary"-->
<svelte:fragment slot="trail">
<Button text="Settings" action={openSettings} />
<LightSwitch />
<div class="lightswitch" />
<div>
<!-- Logo -->
<a class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden" href="https://discord.gg/invite/BYNeHaPNh9" target="_blank" rel="noopener noreferrer">
<img width="32px" height="32px" src={discord} alt="Discord" />
</a>
</div>
</svelte:fragment>
</AppBar>
<div />
</div>