chartmaker-fe/src/App.svelte

<script>
	import { currentChartID } from './stores';
	import ChartEdit from './ChartEdit.svelte';
	import ChartCreation from './ChartCreation.svelte';
	import IoMdHeart from 'svelte-icons/io/IoMdHeart.svelte';
	import { H1 } from 'attractions';
	import { onMount } from 'svelte';

	onMount(async () => {
		if (window.location.hash.length > 1) {
			const code = window.location.hash.slice(1);
			currentChartID.set(code);
		}
	});
</script>

<style>
	.icon {
		width: 0.8em;
		height: 0.8em;
		display: inline-block;
	}
	footer {
		width: 100%;
		font-size: 1em;
		text-align: center;
		color: #888;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	header {
		margin-top: 0.5em;
		margin-bottom: 0;
		text-align: center;
	}

	main {
		min-height: 100%;
		position: absolute;
		width: 100%;
	}

	content {
		margin-bottom: 1.2em;
	}
</style>

<main>
	<content>
		<header>
			<H1>chartmaker</H1>
		</header>

		{#if $currentChartID}
			<ChartEdit/>
		{:else}
			<ChartCreation/>
		{/if}

		<footer>
			made with <div class="icon"><IoMdHeart/></div> by oatmealine. <a target="_blank" href="https://git.oat.zone/oat/project-databased-fe">source</a>
		</footer>
	</content>
</main>