src/routes/+page.svelte

<script lang="ts">
	// Svelte
	import { onMount } from "svelte";
	import { page } from "$app/stores";

	// Images
	import preview from "$lib/images/preview.png";

	// Variables
	let isMobile: boolean = false;
	let isLinkCopied: boolean = false;

	onMount(() => {
		if (window.innerWidth < 768) {
			isMobile = true;
		}
	});

	function copyToClipboard(): void {
		navigator.clipboard.writeText($page.url.toString());
		isLinkCopied = true;
	}
</script>

<!--Main container-->
<div
	class="flex flex-col justify-center text-slate-100 font-Hellovetica items-center p-4 w-full"
>
	<!--Title container-->
	<div
		class="flex flex-col justify-center items-center space-y-4 text-center sm:mt-20 mt-12"
	>
		<h1 class="text-xl capitalize">Spaceship freeride</h1>
		<p class="text-xs">Take a break and enjoy a little freeride.</p>
	</div>

	{#if !isMobile}
		<div class="relative mt-10 border-slate-800 border-[3px]">
			<!--Game-->
			<iframe
				src="game/index.html"
				frameborder="0"
				title="Spaceship Drift"
				height="512"
				width="512"
				class=""
			/>
			<!--Corners-->
			<div
				class="h-[3px] bg-[#0C0F19] w-[3px] z-10 absolute -top-[3px] -left-[3px]"
			/>
			<div
				class="h-[3px] bg-[#0C0F19] w-[3px] z-10 absolute -bottom-[3px] -left-[3px]"
			/>
			<div
				class="h-[3px] bg-[#0C0F19] w-[3px] z-10 absolute -top-[3px] -right-[3px]"
			/>
			<div
				class="h-[3px] bg-[#0C0F19] w-[3px] z-10 absolute -bottom-[3px] -right-[3px]"
			/>
		</div>

		<!--Infos-->
		<div
			class="flex flex-row justify-center items-center text-[9px] mt-4 text-slate-500"
		>
			<p>Use arrow keys. SPACE to fire.</p>
		</div>
	{/if}

	{#if isMobile}
		<div class="flex flex-col justify-center items-center mt-10 text-center">
			<img
				src={preview}
				alt="Preview of the game"
				class="w-60 border-slate-800 border-[2px]"
				height="64"
				width="64"
			/>
			<p class="text-xs text-slate-500 mt-6">
				Looks like you're on mobile! Please visit on your laptop.
			</p>
			<button
				on:click|preventDefault={copyToClipboard}
				class="flex flex-row justify-center items-center px-3 py-5 text-xs w-full bg-slate-800 mt-6"
			>
				<p class="mt-1">
					{isLinkCopied ? "Copied!" : "Copy the link for later"}
				</p>
			</button>
		</div>
	{/if}

	<!--Credits-->
	<div
		class="flex flex-row justify-center items-center fixed bottom-6 text-[9px] text-slate-500"
	>
		<p>
			Made with <a
				href="https://godotengine.org/"
				target="_blank"
				class="underline">Godot</a
			>,
			<a href="https://svelte.dev/" target="_blank" class="underline">Svelte</a
			>,
			<a href="https://www.scenario.com/" target="_blank" class="underline"
				>Scenario</a
			>, and
			<a href="https://www.pixelicious.xyz/" target="_blank" class="underline"
				>Pixelicious</a
			>
		</p>
	</div>
</div>