aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/app.d.ts17
-rw-r--r--src/app.html4
-rw-r--r--src/lib/components/background.svelte2
-rw-r--r--src/lib/components/minimap.svelte54
-rw-r--r--src/lib/components/sensor.svelte11
-rw-r--r--src/lib/components/widget.svelte45
-rw-r--r--src/lib/config.js2
-rw-r--r--src/lib/stores/canvas.js2
-rw-r--r--src/lib/stores/widgets.js13
-rw-r--r--src/routes/+layout.svelte5
-rw-r--r--src/routes/+page.svelte (renamed from src/routes/index.svelte)2
11 files changed, 118 insertions, 39 deletions
diff --git a/src/app.d.ts b/src/app.d.ts
index b28d840..f59b884 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,11 +1,12 @@
-/// <reference types="@sveltejs/kit" />
-
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
-// and what to do when importing types
-declare namespace App {
- // interface Locals {}
- // interface Platform {}
- // interface Session {}
- // interface Stuff {}
+declare global {
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface Platform {}
+ }
}
+
+export {};
diff --git a/src/app.html b/src/app.html
index 2f83674..6769ed5 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
- <body>
- <div>%sveltekit.body%</div>
+ <body data-sveltekit-preload-data="hover">
+ <div style="display: contents">%sveltekit.body%</div>
</body>
</html>
diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index 03c5377..1aa82fa 100644
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -1,5 +1,5 @@
<script>
- import { browser } from '$app/env';
+ import { browser } from '$app/environment';
import { canvas } from '$lib/stores/canvas';
const kDotSize = 32;
diff --git a/src/lib/components/minimap.svelte b/src/lib/components/minimap.svelte
new file mode 100644
index 0000000..cfee685
--- /dev/null
+++ b/src/lib/components/minimap.svelte
@@ -0,0 +1,54 @@
+<script>
+ import { coordinateLength } from '$lib/config';
+ import { sensor } from '$lib/stores/widgets';
+ import { maxSize } from '$lib/config';
+
+ const isActive = function isActive($s, x, y) {
+ const isXActive = $s.left > x * maxSize && $s.left < (x + 1) * maxSize;
+ const isYActive = $s.top > y * maxSize && $s.top < (y + 1) * maxSize;
+ return isXActive || isYActive;
+ }
+</script>
+
+<div class="minimap">
+ <table>
+ <tr>
+ <td class="{isActive($sensor, -1,-1) ? 'active' : ''}"></td>
+ <td class="{isActive($sensor, 0,-1) ? 'active' : ''}"></td>
+ <td class="{isActive($sensor, 1,-1) ? 'active' : ''}"></td>
+ </tr>
+ <tr>
+ <td class="{isActive($sensor, -1,0) ? 'active' : ''}"></td>
+ <td class="{isActive($sensor, 0,0) ? 'active' : ''}"></td>
+ <td class="{isActive($sensor, 1,0) ? 'active' : ''}"></td>
+ </tr>
+ <tr>
+ <td class="{isActive($sensor, -1,1) ? 'active' : ''}"></td>
+ <td class="{isActive($sensor, 0,1) ? 'active' : ''}"></td>
+ <td class="{isActive($sensor, 1,1) ? 'active' : ''}"></td>
+ </tr>
+ </table>
+</div>
+
+<style>
+ .minimap {
+ background-color: #fff;
+ padding: 4px;
+ position: fixed;
+ top: 2px;
+ right: 2px;
+ font-smooth: never;
+ -webkit-font-smoothing : none;
+ }
+
+ td {
+ width: 10px;
+ height: 10px;
+ border: 1px solid black;
+ }
+
+ td.active {
+ background-color: magenta;
+ }
+</style>
+
diff --git a/src/lib/components/sensor.svelte b/src/lib/components/sensor.svelte
index 3b7dfc2..b6d38d8 100644
--- a/src/lib/components/sensor.svelte
+++ b/src/lib/components/sensor.svelte
@@ -1,6 +1,7 @@
<script>
- import { browser } from '$app/env';
+ import { browser } from '$app/environment';
import { maxSize } from '$lib/config';
+ import { modulo } from '$lib/math';
import { canvas } from '$lib/stores/canvas';
import { sensor } from '$lib/stores/widgets';
@@ -21,10 +22,10 @@
$: {
if (browser) {
- left = $canvas.x - window.screen.width * kSensorSize;
- top = $canvas.y - window.screen.height * kSensorSize;
- right = $canvas.x + window.screen.width * kSensorSize;
- bottom = $canvas.y + window.screen.height * kSensorSize;
+ left = modulo($canvas.x - window.screen.width * kSensorSize, maxSize);
+ top = modulo($canvas.y - window.screen.height * kSensorSize, maxSize);
+ right = left + 2 * window.screen.width * kSensorSize;
+ bottom = top + 2 * window.screen.height * kSensorSize;
fetchItems(left, top, right, bottom);
}
diff --git a/src/lib/components/widget.svelte b/src/lib/components/widget.svelte
index fd9401d..907a016 100644
--- a/src/lib/components/widget.svelte
+++ b/src/lib/components/widget.svelte
@@ -18,8 +18,8 @@
const pCanvas = modulo($topLeft.x, maxSize);
const qCanvas = modulo($topLeft.y, maxSize);
- const pBoundary = modulo($bottomRight.x, maxSize);
- const qBoundary = modulo($bottomRight.y, maxSize);
+ const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
+ const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
const pWidget = widget.box.left;
const qWidget = widget.box.top;
@@ -27,23 +27,44 @@
xWidget = pWidget - pCanvas;
yWidget = qWidget - qCanvas;
- if (pWidget < pCanvas &&
- pWidget < pBoundary) {
- xWidget = modulo(xWidget, maxSize);
+ // Case 1: Boundary jump happens inside the box
+ if (pWidget < pCanvas
+ && pBoundary > maxSize
+ && pWidget < pBoundary - maxSize) {
+ xWidget = xWidget + maxSize;
+ }
+ // Case 2: Boundary jump happens to the left of the box
+ else if (pWidget > pCanvas
+ && pBoundary < maxSize
+ && pWidget > pBoundary) {
+ xWidget = xWidget - maxSize;
}
- if (qWidget < qCanvas &&
- qWidget < qBoundary) {
- yWidget = modulo(yWidget, maxSize);
+ // Case 1: Boundary jump happens inside the box
+ if (qWidget < qCanvas
+ && qBoundary > maxSize
+ && qWidget < qBoundary - maxSize) {
+ yWidget = yWidget + maxSize;
+ }
+ // Case 2: Boundary jump happens above the top of the box
+ else if (qWidget > qCanvas
+ && qBoundary < maxSize
+ && qWidget > qBoundary) {
+ yWidget = yWidget - maxSize;
}
+
console.log('Max', maxSize,
'Widget Actual', widget.box.left, widget.box.top,
- 'Top Left', $topLeft.x, $topLeft.y,
- 'Mod Top Left', modulo($topLeft.x, maxSize), modulo($topLeft.y, maxSize),
+ 'Canvas WH', Math.abs($topLeft.x - $bottomRight.x), Math.abs($topLeft.y - $bottomRight.y),
+ 'Canvas XY', $topLeft.x, $topLeft.y,
+ 'Canvas PQ', pCanvas, qCanvas,
+ 'Boundary XY', $bottomRight.x, $bottomRight.y,
+ 'Boundary PQ', pBoundary, qBoundary,
+ 'Widget Rendered', xWidget, yWidget,
'Calculated',
- modulo(widget.box.left - modulo($topLeft.x, maxSize), maxSize),
- modulo(widget.box.top - modulo($topLeft.y, maxSize), maxSize))
+ modulo(pWidget - pCanvas, maxSize),
+ modulo(qWidget - qCanvas, maxSize))
}
diff --git a/src/lib/config.js b/src/lib/config.js
index b450d84..dbbe7fc 100644
--- a/src/lib/config.js
+++ b/src/lib/config.js
@@ -1,4 +1,4 @@
-export const coordinateLength = 6;
+export const coordinateLength = 4;
export const maxSize = Math.pow(16, coordinateLength);
export const supabase = {
diff --git a/src/lib/stores/canvas.js b/src/lib/stores/canvas.js
index e0cc115..2a5e89c 100644
--- a/src/lib/stores/canvas.js
+++ b/src/lib/stores/canvas.js
@@ -1,4 +1,4 @@
-import { browser } from '$app/env';
+import { browser } from '$app/environment';
import { derived, writable } from 'svelte/store';
export const canvas = writable({x: 0, y: 0});
diff --git a/src/lib/stores/widgets.js b/src/lib/stores/widgets.js
index 4da94ff..9bdb649 100644
--- a/src/lib/stores/widgets.js
+++ b/src/lib/stores/widgets.js
@@ -13,17 +13,12 @@ const getBoxes = function getBoxes ({left, top, right, bottom}) {
`box.ov."((${left},${top}),(${right},${bottom}))"`,
`box.ov."((${left+maxSize},${top+maxSize}),(${right+maxSize},${bottom+maxSize}))"`,
`box.ov."((${left+maxSize},${top}),(${right+maxSize},${bottom}))"`,
- `box.ov."((${left},${top+maxSize}),(${right},${bottom+maxSize}))"`
+ `box.ov."((${left},${top+maxSize}),(${right},${bottom+maxSize}))"`,
+ `box.ov."((${left-maxSize},${top-maxSize}),(${right-maxSize},${bottom-maxSize}))"`,
+ `box.ov."((${left-maxSize},${top}),(${right-maxSize},${bottom}))"`,
+ `box.ov."((${left},${top-maxSize}),(${right},${bottom-maxSize}))"`
];
- if (right > maxSize || bottom > maxSize) {
- return [...results,
- `box.ov."((${left-maxSize},${top-maxSize}),(${right-maxSize},${bottom-maxSize}))"`,
- `box.ov."((${left-maxSize},${top}),(${right-maxSize},${bottom}))"`,
- `box.ov."((${left},${top-maxSize}),(${right},${bottom-maxSize}))"`
- ];
- }
-
return results
};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..e1b87bc
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+ import '../app.css'
+</script>
+
+<slot />
diff --git a/src/routes/index.svelte b/src/routes/+page.svelte
index 411b81f..1fd4752 100644
--- a/src/routes/index.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
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';
@@ -63,6 +64,7 @@
<Sensor />
<Background />
<Hud />
+ <Minimap />
{#if shouldShowPalette }
<Palette/>
generated by cgit (git 2.54.0) at 2026-07-22 10:56:02 +0000