svelte/src/routes/+page.svelte

<script lang="ts">
	// Wasm module
	import init from "$lib/pkg/sandbox_bevy";

	// Svelte
	import { onMount } from "svelte";

	// Variables
	let loading = false;
	let isDragging = false;
	let x = 0;
	let y = 0;
	let lastX = 0;
	let lastY = 0;

	onMount(async () => {
		try {
			loading = true;
			await init();
			loading = false;
		} catch (error) {
			console.log("[ERROR]:");
			console.error(error);
		} finally {
			loading = false;
		}
	});

	function handleMouseDown(e: MouseEvent) {
		isDragging = true;
		lastX = e.clientX;
		lastY = e.clientY;
	}

	function handleMouseMove(e: MouseEvent) {
		if (isDragging) {
			const deltaX = e.clientX - lastX;
			const deltaY = e.clientY - lastY;
			x += deltaX;
			y += deltaY;
			lastX = e.clientX;
			lastY = e.clientY;
			const canvas = document.getElementById("window");
			if (canvas) canvas.style.transform = `translate(${x}px, ${y}px)`;
		}
	}

	function handleMouseUp() {
		isDragging = false;
	}
</script>

<!-- Main container -->
<div class="flex flex-col justify-center items-center w-full">

	<!-- Hack to pre-load Bevy assets to avoid the tiny delay-->
	<div class="fixed opacity-0">
		<img src="assets/blood_1.png" alt="blood1">
		<img src="assets/blood_2.png" alt="blood1">
		<img src="assets/bone_1.png" alt="bone1">
		<img src="assets/bone_2.png" alt="bone2">
		<img src="assets/bone_3.png" alt="bone3">
	</div>

	<!-- Window -->
	<div id="window" class="flex flex-col justify-center items-center mt-40">
		<!-- Title container -->
		<button
			on:mousedown={handleMouseDown}
			on:mousemove={handleMouseMove}
			on:mouseup={handleMouseUp}
			class="cursor-default relative flex flex-row justify-between items-center w-full bg-[#393B3D] border-b border-b-[#000002] border border-[#626264] rounded-xl rounded-b-none"
		>
			<!-- macOS dots container -->
			<div class="absolute left-2 space-x-2 flex flex-row justify-center items-center">
				<div class="rounded-full h-3 w-3 bg-[#EC695F]" />
				<div class="rounded-full h-3 w-3 bg-[#F5BE4F]" />
				<div class="rounded-full h-3 w-3 bg-[#5E5E60]" />
			</div>

			<h1 class="font-bold py-[6px] text-center w-full text-sm text-[#B6B8B9]">Hell</h1>
		</button>

		<!-- Canvas container -->
		<div class="relative">
			<canvas
				id="bevy-canvas"
				on:contextmenu|preventDefault={() => {}}
				class="shadow-2xl z-10 shadow-black/50 overflow-hidden rounded-xl border border-[#626264] border-t-0 rounded-t-none"
				height="480"
				width="640"
				style="image-rendering: pixelated;"
			/>
			{#if loading}
				<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 space-x-3 flex flex-row justify-center items-center">
					<div class="h-2 w-2 bg-[#B6B8B9] animate-pulse" />
					<div class="h-2 w-2 bg-[#B6B8B9] animate-pulse" />
					<div class="h-2 w-2 bg-[#B6B8B9] animate-pulse" />
				</div>
			{/if}
		</div>
	</div>

	<!-- Instructions -->
	<div class="mt-12">
		<img src="images/instructs.svg" alt="Instructions" width="250" />
	</div>

	<!-- Credits -->
	<div class="mt-12 text-sm text-[#636669] flex flex-col justify-center items-center space-y-1">
		<p>
			Made by <a href="https://www.hugoduprez.com/" target="_blank" class="underline">Hugo</a> with
			<a href="https://www.rust-lang.org/" target="_blank" class="underline">Rust</a>
			and <a href="https://kit.svelte.dev/" target="_blank" class="underline">Svelte</a>
		</p>
		<a href="https://github.com/Hugo-Dz/rust-sandbox" target="_blank" class="underline">How to create games with Rust</a
		>
	</div>
</div>