From da91f5991c2367cf868c8ac93207daeab19f1711 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Fri, 20 Dec 2024 14:48:27 -0800
Subject: [PATCH] demo update

---
 lib/index.ts                                  |  7 +++--
 ...event-propagators-with-device-gravity.html | 29 +++++++++++++++----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/lib/index.ts b/lib/index.ts
index 7959bf4..5c1f3d9 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -1,3 +1,7 @@
+// Base elements and components
+// Due to a circular dependency between folk element and folk observer this should be exported first
+export * from './folk-element';
+
 // Observers (move these to the top since they're dependencies)
 export * from './client-rect-observer';
 export * from './folk-observer';
@@ -21,9 +25,6 @@ export * from './rAF';
 export * from './collision';
 export * from './EffectIntegrator';
 
-// Base elements and components
-export * from './folk-element';
-
 // WebGL utilities
 export * from './webgl';
 
diff --git a/website/canvas/event-propagators-with-device-gravity.html b/website/canvas/event-propagators-with-device-gravity.html
index 42d83c9..e7dc5f7 100644
--- a/website/canvas/event-propagators-with-device-gravity.html
+++ b/website/canvas/event-propagators-with-device-gravity.html
@@ -28,7 +28,6 @@
       button {
         margin: 1rem;
         background-color: black;
-        font-size: 2rem;
         border-radius: 5px;
         color: white;
       }
@@ -39,6 +38,8 @@
     <p>Alpha: <span id="alpha">0</span></p>
     <p>Beta: <span id="beta">0</span></p>
     <p>Gamma: <span id="gamma">0</span></p>
+    <p>Gravity: <span id="gravity">0, 3000</span></p>
+
     <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
     <folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
     <folk-event-propagator
@@ -59,6 +60,7 @@ rotation: from.x"
     ></folk-event-propagator> -->
 
     <script type="module">
+      import {requestAnimationFrame} from '@lib'
       import '@labs/standalone/folk-shape.ts';
       import '@labs/standalone/folk-event-propagator.ts';
 
@@ -67,15 +69,30 @@ rotation: from.x"
 
       const ropes = Array.from(document.querySelectorAll('folk-event-propagator'));
 
-      function onDeviceOrientation(e) {
-        console.log(event.alpha, event.beta, event.gamma)
-        window.alpha.textContent = event.alpha;
-        window.beta.textContent = event.beta;
-        window.gamma.textContent = event.gamma;
+      let orientationEvent;
+
+      /**
+       * 
+       * 0 -> 0, 3000
+       * 270 -> 3000, 0
+      */
+      function tick() {
+        if (orientationEvent === undefined) return;
+
+        window.alpha.textContent = orientationEvent.alpha.toFixed(2);
+        window.beta.textContent = orientationEvent.beta.toFixed(2);
+        window.gamma.textContent = orientationEvent.gamma.toFixed(2);
 
         // if (event.alpha) {
         //   // ropes.forEach(rope => { rope.gravity = { x: 0, y: 0} })
         // }
+        requestAnimationFrame(tick);
+      }
+
+      tick();
+
+      function onDeviceOrientation(e) {
+        orientationEvent = e;
       }
 
       window.enableGravity = async function enableGravity() {