<script lang="ts">
	import { apiBaseUrl } from '$lib/components/consts';
	import { LeanChellarisDataStore } from '$lib/stores/ChellarisData';
	import Header from './Header.svelte';
	import './styles.css';
	import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
	import type { ChellarisGameInfo } from '$lib/types/chellaris';

	$: {
		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;
				}	
				
			});
		});
	}
</script>

<div class="app">
	<Header />

	<slot />
</div>

<style>
	.app {
		display: grid;
		grid-template-areas: 
			'header'
			'app';
		grid-template-rows: 3rem 1fr;
		min-height: 100vh;
		max-height: 100vh;
	}
</style>