diff options
| author | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2024-01-21 14:48:35 +0100 |
|---|---|---|
| committer | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2024-01-21 14:48:35 +0100 |
| commit | 587d8fe65d61b8f7217b4e8850b44e43159c16fb (patch) | |
| tree | 8cd7ad359dbe79beff9e8288f97ee1277a3729f0 /src/routes | |
| parent | e4e4b5202bf0039127f591941fddc1ff5ca09897 (diff) | |
Save WIP
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/+layout.svelte | 2 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 137 |
2 files changed, 69 insertions, 70 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e1b87bc..2e511e0 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,5 @@ <script> - import '../app.css' + import '../app.css'; </script> <slot /> diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 1fd4752..8dd0a16 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,88 +1,87 @@ <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 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 { coordinateLength, maxSize } from '$lib/config'; + import { maxSize } from '$lib/config'; - $: shouldShowPalette = false; + $: shouldShowPalette = false; - let dragging = false; + let dragging = false; - const moveCanvas = function moveCanvas(event) { + 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 }); + } + }; - 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 startDragging = function startDragging(event) { - dragging = { - x: event.x, - y: event.y - }; - } + const stopDragging = function startDragging() { + dragging = null; + }; - 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 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; - } + 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} + class="canvas" + on:click={hidePalette} + on:contextmenu={showPalette} + on:mousedown={startDragging} + on:mouseup={stopDragging} + on:mousemove={moveCanvas} > - <Sensor /> - <Background /> - <Hud /> - <Minimap /> + <Sensor /> + <Background /> + <Hud /> + <Minimap /> - {#if shouldShowPalette } - <Palette/> - {/if} + {#if shouldShowPalette} + <Palette /> + {/if} - {#if $widgets} - {#each $widgets as widget} - <Widget widget={widget}/> - {/each} - {/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; - } + .canvas { + user-select: none; + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; + } </style> |