Spaces:
Running
Running
File size: 2,645 Bytes
d5c39db |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<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>
|