From 07203f0d278a39c2f95a64e12742ab35dbe5a737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Thu, 5 Dec 2024 12:50:12 -0800
Subject: [PATCH] demos

---
 demo/event-propagators-with-weather.html      | 85 +++++++++++++++++++
 ...d-communication-and-event-propagators.html | 23 +++--
 2 files changed, 102 insertions(+), 6 deletions(-)
 create mode 100644 demo/event-propagators-with-weather.html
diff --git a/demo/event-propagators-with-weather.html b/demo/event-propagators-with-weather.html
new file mode 100644
index 0000000..243da72
--- /dev/null
+++ b/demo/event-propagators-with-weather.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Event Propagator w/ Weather</title>
+    <style>
+      html {
+        height: 100%;
+      }
+
+      body {
+        min-height: 100%;
+        position: relative;
+        margin: 0;
+      }
+
+      folk-shape {
+        background-color: black;
+        border-radius: 5px;
+        color: white;
+        padding: 0px 5px;
+        z-index: 10;
+      }
+
+      button {
+        margin: 1rem;
+        background-color: black;
+        font-size: 2rem;
+        border-radius: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <snow-fall count="200" style="--snow-fall-color: #9e9e9e"></snow-fall>
+    <button id="wind">☁️</button>
+    <folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
+    <folk-shape id="box2" x="200" y="350">Brrrrrr</folk-shape>
+    <folk-event-propagator
+      source="#box1"
+      target="#box2"
+      triggers="click"
+      expression="textContent: to.textContent + 'r'"
+    ></folk-event-propagator>
+
+    <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"
+      target="#box4"
+      triggers="transform"
+      expression="y: from.x, 
+rotation: from.x"
+    ></folk-event-propagator>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/@zachleat/snow-fall';
+      import '../src/standalone/folk-shape.ts';
+      import '../src/standalone/folk-event-propagator.ts';
+
+      let timeout = -1;
+      let isBlowing = false;
+      const ropes = document.querySelectorAll('folk-event-propagator');
+      const randomInt = (multiplier, adjust = 0) => Math.floor(Math.random() * multiplier) + adjust;
+      const updateGravity = (gravity) => ropes.forEach((rope) => (rope.gravity = gravity));
+
+      function simulateWind() {
+        updateGravity({ x: randomInt(5000), y: randomInt(5000) });
+        timeout = setTimeout(simulateWind, randomInt(1000, 200));
+      }
+
+      wind.addEventListener('click', () => {
+        if (isBlowing) {
+          clearTimeout(timeout);
+          updateGravity({ x: 0, y: 3000 });
+          wind.textContent = '☁️';
+        } else {
+          simulateWind();
+          wind.textContent = '🌬️';
+        }
+        isBlowing = !isBlowing;
+      });
+    </script>
+  </body>
+</html>
diff --git a/demo/proximity-based-communication-and-event-propagators.html b/demo/proximity-based-communication-and-event-propagators.html
index f689671..24e20a3 100644
--- a/demo/proximity-based-communication-and-event-propagators.html
+++ b/demo/proximity-based-communication-and-event-propagators.html
@@ -82,15 +82,26 @@
       expression="lat: from.value"
     ></folk-event-propagator>
 
+    <folk-event-propagator
+      source="folk-map"
+      target="input[type='range']"
+      triggers="recenter"
+      expression="value: from.lat"
+    ></folk-event-propagator>
+
     <script type="module">
       import '../src/standalone/folk-shape.ts';
-      import '../src/standalone/folk-event-propagator.ts';
-      import '../src/standalone/folk-map.ts';
-      import '../src/standalone/folk-weather.ts';
-      import './src/geo-wiki.ts';
-      import { FolkCluster } from '../src/folk-proximity.ts';
+      import { FolkMap } from '../src/folk-map.ts';
+      import { FolkWeather } from '../src/folk-weather.ts';
+      import { GeoWiki } from './src/geo-wiki.ts';
+      import { FolkCluster, FolkProximity } from '../src/folk-proximity.ts';
+      import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
 
-      FolkCluster.register();
+      FolkMap.define();
+      FolkCluster.define();
+      FolkProximity.define();
+      FolkWeather.define();
+      FolkEventPropagator.define();
 
       FolkCluster.registerElement({
         constructor: FolkMap,
