Spaces:
Running
Running
File size: 3,511 Bytes
d5c39db 16c4f1c d5c39db 16c4f1c d5c39db 16c4f1c d5c39db 16c4f1c d5c39db 16c4f1c d5c39db 16c4f1c d5c39db 16c4f1c d5c39db 16c4f1c 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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<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>
|