chellaris-sign-up-site/src/routes/+layout.svelte

<script lang="ts">
	import '../app.postcss';

	import { Modal, autoModeWatcher, type ModalComponent, getModalStore, type ModalSettings, initializeStores } from '@skeletonlabs/skeleton';
	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';

	initializeStores();

	$: {
		fetch(apiBaseUrl + '/v3/ethics').then((res) => {
			res.json().then((data) => {
				$LeanChellarisDataStore.ethics = data.ethics;
			});
		});

		fetch(apiBaseUrl + '/v3/phenotypes').then((res) => {
			res.json().then((data) => {
				$LeanChellarisDataStore.phenotypes = data.phenotypes;
			});
		});

		fetch(apiBaseUrl + '/v3/games').then((res) => {
			res.json().then((data: { [key: number]: ChellarisGameInfo }) => {
				if ($AdminSelectedGameStore == 1) {
					$AdminSelectedGameStore = Object.values(data)[0].id;
				}	
				
			});
		});
	}



	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>
	<!-- (sidebarLeft) -->
	<!-- (sidebarRight) -->
	<!-- <svelte:fragment slot="pageHeader">Page Header</svelte:fragment> -->
	<!-- Router Slot -->
	<slot />
	<!-- ---- / ---- -->
	<!-- (pageFooter) -->
	<!-- (footer) -->
</AppShell>