--- /dev/null
+<script>
+ import { browser } from '$app/env';
+
+ export let x;
+ export let y;
+
+ const kDotSize = 32;
+
+ $: {
+ if (browser) {
+ document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
+ document.documentElement.style.setProperty('--dot-x', kDotSize - x % kDotSize + 'px');
+ document.documentElement.style.setProperty('--dot-y', kDotSize - y % kDotSize + 'px');
+ }
+ }
+</script>
+
+<div class="background"></div>
+
+<style>
+ .background {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ user-select: none;
+ pointer-events: none;
+ background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
+ background-size: var(--dot-size) var(--dot-size);
+ background-position: var(--dot-x) var(--dot-y);
+ padding: 0;
+ margin: 0;
+ width: 100vw;
+ height: 100vh;
+ }
+</style>
--- /dev/null
+<script>
+ import { blink } from '$lib/animations/blink';
+</script>
+
+<div class="palette" transition:blink>
+ <p>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ </p>
+</div>
+
+<style>
+ .palette {
+ position: fixed;
+ top: var(--palette-y);
+ left: var(--palette-x);
+ border: 1px solid black;
+ background-color: #fff;
+ overflow: hidden;
+ }
+</style>
<script>
import { browser } from '$app/env';
- import { blink } from '$lib/animations/blink';
+ import Background from '$lib/components/background.svelte';
+ import Palette from '$lib/components/palette.svelte';
+ import Hud from '$lib/components/hud.svelte';
+
+ const kCoordinateLength = 6;
+ const kMaxSize = Math.pow(16, kCoordinateLength);
- const dotSize = 24;
$: x = 0;
$: y = 0;
$: shouldShowPalette = false;
- if (browser) {
- document.documentElement.style.setProperty('--dot-size', dotSize + 'px');
- }
-
-
- $: {
- if (browser) {
- document.documentElement.style.setProperty('--dot-x', dotSize - x % dotSize + 'px');
- document.documentElement.style.setProperty('--dot-y', dotSize - y % dotSize + 'px');
- }
- }
-
let dragging = false;
+ const modulo = function modulo (number, base) {
+ return ((number % base) + base) % base
+ };
+
const moveCanvas = function moveCanvas(event) {
if (dragging) {
- x -= event.x - dragging.x;
- y -= event.y - dragging.y;
+ let deltaX = event.x - dragging.x;
+ let deltaY = event.y - dragging.y;
+ x = modulo(x - deltaX, kMaxSize);
+ y = modulo(y - deltaY, kMaxSize);
dragging.x = event.x;
dragging.y = event.y;
}
dragging = null;
}
- const formatCoordinate = function formatCoordinate(coordinate) {
- const sign = Math.sign(coordinate) === 1 ? '' : '-';
- const value = Math.abs(coordinate).toString(16).padStart(4, 0);
- return sign + value;
- }
-
const showPalette = function showPalette(event) {
event.preventDefault();
dragging = null;
<div
class="canvas"
+ on:click={hidePalette}
on:contextmenu={showPalette}
on:mousedown={startDragging}
on:mouseup={stopDragging}
on:mousemove={moveCanvas}>
-</div>
+>
+ <Background x={x} y={y}/>
+ <Hud x={x} y={y} />
-<div class="hud">
- ({ formatCoordinate(x) }, { formatCoordinate(y) })
+ {#if shouldShowPalette }
+ <Palette/>
+ {/if}
</div>
-{#if shouldShowPalette }
- <div class="palette-container" on:click={hidePalette}>
- </div>
- <div class="palette" transition:blink>
- <p>
- palette palette palette palette palette palette <br/>
- palette palette palette palette palette palette <br/>
- palette palette palette palette palette palette <br/>
- palette palette palette palette palette palette <br/>
- palette palette palette palette palette palette <br/>
- palette palette palette palette palette palette <br/>
- </p>
- </div>
-{/if}
-
<style>
.canvas {
user-select: none;
- background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
- background-size: var(--dot-size) var(--dot-size);
- background-position: var(--dot-x) var(--dot-y);
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
-
- .hud {
- background-color: #fff;
- padding: 4px;
- position: fixed;
- bottom: 2px;
- right: 2px;
- font-smooth: never;
- -webkit-font-smoothing : none;
- }
-
- .palette {
- position: fixed;
- top: var(--palette-y);
- left: var(--palette-x);
- border: 1px solid black;
- background-color: #fff;
- overflow: hidden;
- }
-
- .palette-container {
- width: 100vw;
- height: 100vh;
- background-color: #f0f;
- position: fixed;
- top: 0;
- left: 0;
- }
-
</style>