Save WIP

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

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index 1aa82fa56cff21f6bd60c7a8b638dfed60fb545d..20b9e37980511852d0aea5bce1b2f283c32bd017 100644 (file)
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -1,33 +1,39 @@
 <script>
-  import { browser } from '$app/environment';
-  import { canvas } from '$lib/stores/canvas';
+       import { browser } from '$app/environment';
+       import { canvas } from '$lib/stores/canvas';
 
-  const kDotSize = 32;
+       const kDotSize = 32;
 
-  $: {
-    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');
-    }
-  }
+       $: {
+               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>
 
-<div class="background"></div>
+<div class="background" />
 
 <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>