jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

demos

This commit is contained in:
“chrisshank” 2024-12-05 12:50:12 -08:00
parent 74cb31bf4b
commit 07203f0d27
2 changed files with 102 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
demo/event-propagators-with-weather.html Normal file
View File

@ -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>

23
demo/proximity-based-communication-and-event-propagators.html
View File

@ -82,15 +82,26 @@
expression="lat: from.value" expression="lat: from.value"
></folk-event-propagator> ></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"> <script type="module">
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-event-propagator.ts'; import { FolkMap } from '../src/folk-map.ts';
import '../src/standalone/folk-map.ts'; import { FolkWeather } from '../src/folk-weather.ts';
import '../src/standalone/folk-weather.ts'; import { GeoWiki } from './src/geo-wiki.ts';
import './src/geo-wiki.ts'; import { FolkCluster, FolkProximity } from '../src/folk-proximity.ts';
import { FolkCluster } 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({ FolkCluster.registerElement({
constructor: FolkMap, constructor: FolkMap,