From c30e688113e317ff6aca8a63f16b202cbfff3820 Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Wed, 6 Jul 2022 22:49:06 +0200
Subject: Connect sensor to database

---
 src/lib/components/sensor.svelte |  3 ++-
 src/lib/config.js                |  5 +++++
 src/lib/stores/widgets.js        | 31 +++++++++++++++++++++++++++++++
 src/routes/index.svelte          |  5 ++++-
 4 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/stores/widgets.js

(limited to 'src')

diff --git a/src/lib/components/sensor.svelte b/src/lib/components/sensor.svelte
index da968a3..e98b740 100644
--- a/src/lib/components/sensor.svelte
+++ b/src/lib/components/sensor.svelte
@@ -1,6 +1,7 @@
 <script>
   import { browser } from '$app/env';
   import { maxSize } from '$lib/config';
+  import { sensor } from '$lib/stores/widgets';
 
   export let x;
   export let y;
@@ -16,7 +17,7 @@
   const fetchItems = function fetchItems( left, top, right, bottom ) {
     clearTimeout(timer);
 		timer = setTimeout(() => {
-      console.log('fetching', left, top, right, bottom);
+      sensor.set({ left, top, right, bottom });
 		}, 50);
   }
 
diff --git a/src/lib/config.js b/src/lib/config.js
index 3d243ed..b450d84 100644
--- a/src/lib/config.js
+++ b/src/lib/config.js
@@ -1,2 +1,7 @@
 export const coordinateLength = 6;
 export const maxSize = Math.pow(16, coordinateLength);
+
+export const supabase = {
+	url: import.meta.env.VITE_SUPABASE_URL,
+	key: import.meta.env.VITE_SUPABASE_KEY
+};
diff --git a/src/lib/stores/widgets.js b/src/lib/stores/widgets.js
new file mode 100644
index 0000000..ff5c53e
--- /dev/null
+++ b/src/lib/stores/widgets.js
@@ -0,0 +1,31 @@
+import { derived, writable } from 'svelte/store';
+import { createClient } from '@supabase/supabase-js';
+import { supabase } from '$lib/config';
+import { maxSize } from '$lib/config';
+
+const client = createClient(supabase.url, supabase.key);
+
+export const sensor = writable({left: 0, top: 0, right: 0, bottom: 0});
+
+const getBoxes = function getBoxes ({left, top, right, bottom}) {
+  return [
+    `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})"`
+  ]
+};
+
+let ac = null;
+export const widgets = derived(sensor, async function ($sensor, set) {
+
+  const boxes = getBoxes($sensor);
+  ac && ac.abort()
+  ac = new AbortController();
+  const { data } = await client
+    .from('widgets')
+    .select()
+    .or(boxes.join(','))
+    .abortSignal(ac.signal)
+  return set(data);
+});
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 2943d23..06c2357 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -4,6 +4,7 @@
   import Palette from '$lib/components/palette.svelte';
   import Hud from '$lib/components/hud.svelte';
   import { modulo } from '$lib/math';
+  import { widgets } from '$lib/stores/widgets';
 
   import { coordinateLength, maxSize } from '$lib/config';
 
@@ -56,7 +57,7 @@
   on:contextmenu={showPalette}
   on:mousedown={startDragging}
   on:mouseup={stopDragging}
-  on:mousemove={moveCanvas}>
+  on:mousemove={moveCanvas}
 >
   <Sensor x={x} y={y} />
   <Background x={x} y={y} />
@@ -65,6 +66,8 @@
   {#if shouldShowPalette }
     <Palette/>
   {/if}
+
+  <p>{JSON.stringify($widgets)}</p>
 </div>
 
 <style>
-- 
cgit