https local dev server

package.json

@@ -21,13 +21,14 @@
     "webcola": "^3.4.0"
   },
   "devDependencies": {
-    "prettier-plugin-organize-imports": "^4.1.0",
     "@types/leaflet": "^1.9.14",
     "@types/node": "^22.10.1",
     "@webgpu/types": "^0.1.51",
     "bun-types": "^1.1.38",
     "mitata": "^1.0.20",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "typescript": "^5.7.2",
-    "vite": "^6.0.3"
+    "vite": "^6.0.3",
+    "vite-plugin-mkcert": "^1.17.6"
   }
 }

vite.config.ts

@@ -1,6 +1,7 @@
-import { resolve } from 'node:path';
 import { readdirSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { defineConfig, IndexHtmlTransformContext, Plugin } from 'vite';
+import mkcert from 'vite-plugin-mkcert';
 
 const canvasWebsiteDir = resolve(__dirname, './website/canvas');
 
@@ -16,19 +17,22 @@ const linkGenerator = (): Plugin => {
       const files = getCanvasFiles();
       // First, handle ungrouped files
       const ungroupedFiles = files.filter(
-        (file) => !file.includes('index') && !file.startsWith('_') && !file.match(/^\[([^\]]+)\]/)
+        (file) => !file.includes('index') && !file.startsWith('_') && !file.match(/^\[([^\]]+)\]/),
       );
 
       // Then handle grouped files
       const groups = files
         .filter((file) => !file.includes('index') && file.match(/^\[([^\]]+)\]/))
-        .reduce((acc, file) => {
-          const match = file.match(/^\[([^\]]+)\](.+)\.html$/);
-          const group = match![1];
-          if (!acc[group]) acc[group] = [];
-          acc[group].push(file);
-          return acc;
-        }, {} as Record<string, string[]>);
+        .reduce(
+          (acc, file) => {
+            const match = file.match(/^\[([^\]]+)\](.+)\.html$/);
+            const group = match![1];
+            if (!acc[group]) acc[group] = [];
+            acc[group].push(file);
+            return acc;
+          },
+          {} as Record<string, string[]>,
+        );
 
       // Generate ungrouped HTML first
       const ungroupedHtml = ungroupedFiles
@@ -72,16 +76,19 @@ export default defineConfig({
       '@propagators': resolve(__dirname, './propagators'),
     },
   },
-  plugins: [linkGenerator()],
+  plugins: [linkGenerator(), mkcert()],
   build: {
     target: 'esnext',
     rollupOptions: {
       input: {
         index: resolve(__dirname, './website/index.html'),
-        ...getCanvasFiles().reduce((acc, file) => {
-          acc[`canvas/${file.replace('.html', '')}`] = resolve(canvasWebsiteDir, file);
-          return acc;
-        }, {} as Record<string, string>),
+        ...getCanvasFiles().reduce(
+          (acc, file) => {
+            acc[`canvas/${file.replace('.html', '')}`] = resolve(canvasWebsiteDir, file);
+            return acc;
+          },
+          {} as Record<string, string>,
+        ),
       },
     },
     modulePreload: {

website/canvas/event-propagators-with-device-gravity.html

@@ -53,7 +53,7 @@
       expression="textContent: to.textContent + '!'"
     ></folk-event-propagator>
 
-    <!-- <folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
+    <folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
     <folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
     <folk-event-propagator
       source="#box3"
@@ -61,13 +61,14 @@
       trigger="transform"
       expression="y: from.x, 
 rotation: from.x"
-    ></folk-event-propagator> -->
+    ></folk-event-propagator>
 
     <folk-gizmos></folk-gizmos>
 
     <script type="module">
       import { requestAnimationFrame } from '@lib';
       import { Vector } from '@lib/Vector';
+
       import '@labs/standalone/folk-shape.ts';
       import '@labs/standalone/folk-event-propagator.ts';
       import { Gizmos } from '@lib/folk-gizmos';
@@ -83,7 +84,6 @@ rotation: from.x"
       const ropes = Array.from(document.querySelectorAll('folk-event-propagator'));
       let orientationEvent;
 
-      let gravityScale = 3000;
       const gravitySlider = document.getElementById('gravityScale');
       const gravityScaleValue = document.getElementById('gravityScaleValue');
 
@@ -92,12 +92,12 @@ rotation: from.x"
       gravityScaleValue.textContent = gravityScale;
 
       gravitySlider.addEventListener('input', (e) => {
-        gravityScale = parseInt(e.target.value);
-        gravityScaleValue.textContent = gravityScale;
+        gravityScaleValue.textContent = gravitySlider.value;
       });
 
       function tick() {
         requestAnimationFrame(tick);
+
         if (orientationEvent === undefined) return;
 
         window.alpha.textContent = Math.round(orientationEvent.alpha);
@@ -116,7 +116,7 @@ rotation: from.x"
         const direction = Vector.normalized(downwardVector);
 
         // Scale the vector by gravity constant
-        const gravity = Vector.scale(direction, magnitude * gravityScale);
+        const gravity = Vector.scale(direction, magnitude * gravitySlider.valueAsNumber);
 
         window.gravity.textContent = `${Math.round(gravity.x)}, ${Math.round(gravity.y)}`;