src/routes/+page.svelte

<script lang="ts">

	// Svelte
	import { onMount } from "svelte";
	import { page } from "$app/stores";

	// Components
	import StarTrace from "$lib/components/StarTrace.svelte";

	// Types
	import type { Star } from "$lib/types/Star";

	// Variables
	let isMobile: boolean = false;
	let isLinkCopied: boolean = false;
	let stars: Star[] = [];

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

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

	function getRandomArbitrary(min: number, max: number) {
    	return Math.random() * (max - min) + min;
	}

	function spawnStar() {

		const length = getRandomArbitrary(800, 1500);
		const angle = 135 * (Math.PI / 180);

		const startX = Math.random() * window.innerWidth;
		const startY = Math.random() * window.innerHeight;

		const endX = startX + Math.cos(angle) * length;
		const endY = startY + Math.sin(angle) * length;
		
		stars = [...stars, {
			start: {
				x: startX,
				y: startY
			},
			end: {
				x: endX,
				y: endY
			},
		}];

	}

	function removeStar(e: CustomEvent) {
		stars = stars.filter(s => s !== e.detail);
	}

</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 mt-12 z-50"
	>
		<img src="images/png_title.png" alt="Game title" class="h-40">
	</div>

	<!--Stars-->
	{#each stars as star}
		<StarTrace {star} on:remove={removeStar} />
	{/each}

	{#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>ZQD to move 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>