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"
	>
		<img src="images/png_title.png" alt="Game title" class="h-48">
	</div>

	{#if !isMobile}
		<div class="relative mt-6 border-slate-800 border-[3px]">
			<!--Game-->
			<iframe
				src="smg/index.html"
				frameborder="0"
				title="Spaceship Drift"
				height="512"
				width="768"
				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>SPACE to jump. <a href="https://x.com/HugoDuprez/status/1712093324528541831?s=20" target="_blank" class="underline">Full shaders game demo</a></p>
		</div>
	{/if}

	{#if isMobile}
		<div class="flex flex-col justify-center items-center mt-10 text-center">
			<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 text-center {isMobile ? "mt-20" : "fixed bottom-6"} text-[9px] text-slate-500"
	>
		<p>
			Made by <a href="https://www.hugoduprez.com/" target="_blank" class="underline">Hugo</a
			>
			with
			<a href="https://godotengine.org/" target="_blank" class="underline"
				>Godot</a
			>,
			<a href="https://svelte.dev/" target="_blank" class="underline">Svelte</a
			>, and
			<a href="https://www.kenney.nl/tools" target="_blank" class="underline"
				>Kenney assets</a
			>
		</p>
	</div>
</div>