Save WIP

[rbdr/canvas] / src / routes / +page.svelte

<script>
	import Sensor from '$lib/components/sensor.svelte';
	import Background from '$lib/components/background.svelte';
	import Palette from '$lib/components/palette.svelte';
	import Hud from '$lib/components/hud.svelte';
	import Minimap from '$lib/components/minimap.svelte';
	import Widget from '$lib/components/widget.svelte';
	import { modulo } from '$lib/math';
	import { widgets } from '$lib/stores/widgets';
	import { canvas } from '$lib/stores/canvas';

	import { maxSize } from '$lib/config';

	$: shouldShowPalette = false;

	let dragging = false;

	const moveCanvas = function moveCanvas(event) {
		if (dragging) {
			let deltaX = event.x - dragging.x;
			let deltaY = event.y - dragging.y;
			let x = modulo($canvas.x - deltaX, maxSize);
			let y = modulo($canvas.y - deltaY, maxSize);
			dragging.x = event.x;
			dragging.y = event.y;
			canvas.set({ x, y });
		}
	};

	const startDragging = function startDragging(event) {
		dragging = {
			x: event.x,
			y: event.y
		};
	};

	const stopDragging = function startDragging() {
		dragging = null;
	};

	const showPalette = function showPalette(event) {
		event.preventDefault();
		dragging = null;
		document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
		document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
		shouldShowPalette = true;
	};

	const hidePalette = function hidePalette() {
		event.preventDefault();
		shouldShowPalette = false;
	};
</script>

<div
	class="canvas"
	on:click={hidePalette}
	on:contextmenu={showPalette}
	on:mousedown={startDragging}
	on:mouseup={stopDragging}
	on:mousemove={moveCanvas}
>
	<Sensor />
	<Background />
	<Hud />
	<Minimap />

	{#if shouldShowPalette}
		<Palette />
	{/if}

	{#if $widgets}
		{#each $widgets as widget}
			<Widget {widget} />
		{/each}
	{/if}
</div>

<style>
	.canvas {
		user-select: none;
		padding: 0;
		margin: 0;
		width: 100vw;
		height: 100vh;
	}
</style>