svelte/src/routes/+page.svelte

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

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

	// Variables
	let canvas: HTMLCanvasElement;
	let isDragging = false;
	let x = 0;
	let y = 0;
	let lastX = 0;
	let lastY = 0;

	onMount(() => init());

	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">
	<!-- 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 -->
		<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"
		/>
	</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>