[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>