<script>
	import { OpenAPI } from '@odit/lfk-client-js';
	import '@fontsource/athiti';
	import '../app.css';
	import { onMount } from 'svelte';
	import lfkbackground from './background.png';

	OpenAPI.BASE = 'https://run.lauf-fuer-kaya.de';
	onMount(() => {
		window.addEventListener('keydown', (e) => {
			// F1
			if (e.keyCode === 112) e.preventDefault();
			// F5
			if (e.keyCode === 116) e.preventDefault();
		});
	});
	let time = new Date();
	$: hours = (time.getHours() + '').padStart(2, '0');
	$: minutes = (time.getMinutes() + '').padStart(2, '0');
	$: seconds = (time.getSeconds() + '').padStart(2, '0');
	setInterval(() => {
		time = new Date();
	}, 500);
</script>

<div
	class="text-neutral-800 flex flex-col h-screen print:h-full select-none"
	style="background: url({lfkbackground});background-position: center center!important;background-size: contain!important;background-repeat: no-repeat!important;"
>
	<main class="flex-grow">
		<div
			class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8 print:hidden"
		>
			{hours}:{minutes}:{seconds}
		</div>
		<slot />
	</main>
</div>
