Save WIP

[rbdr/canvas] / src / lib / components / background.svelte

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index 76649396725e2af54b2254b6a5e04b26e963765b..20b9e37980511852d0aea5bce1b2f283c32bd017 100644 (file)
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -1,35 +1,39 @@
 <script>
 <script>

-  import { browser } from '$app/env';
+       import { browser } from '$app/environment';
+       import { canvas } from '$lib/stores/canvas';

 
 

-  export let x;
-  export let y;
+       const kDotSize = 32;

 
 

-  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');
-    }
-  }
+       $: {
+               if (browser) {
+                       document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
+                       document.documentElement.style.setProperty(
+                               '--dot-x',
+                               kDotSize - ($canvas.x % kDotSize) + 'px'
+                       );
+                       document.documentElement.style.setProperty(
+                               '--dot-y',
+                               kDotSize - ($canvas.y % kDotSize) + 'px'
+                       );
+               }
+       }

 </script>
 
 </script>
 

-<div class="background"></div>
+<div class="background" />

 
 <style>
 
 <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;
-  }
+       .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>
 </style>