From 7e90ce00f4ca10a301a3315b04c0565ae94bac0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Tue, 17 Dec 2024 15:03:00 -0800 Subject: [PATCH] simplify sand demo --- demo/[shaders]falling-sand.html | 65 +++++++++++++---------------- demo/cross-iframe-sand.html | 74 ++++++++++++++++----------------- 2 files changed, 65 insertions(+), 74 deletions(-) diff --git a/demo/[shaders]falling-sand.html b/demo/[shaders]falling-sand.html index b300fb0..3e8326c 100644 --- a/demo/[shaders]falling-sand.html +++ b/demo/[shaders]falling-sand.html @@ -23,7 +23,7 @@ border-radius: 2px; } - .key-helper { + key-helper { position: fixed; top: 20px; right: 20px; @@ -36,14 +36,22 @@ display: flex; flex-direction: column; gap: 5px; - } - .key-number { - display: inline-block; - background: rgba(255, 255, 255, 0.2); - padding: 2px 8px; - border-radius: 3px; - margin-right: 10px; + button { + all: unset; + + &[active] key-number { + background: rgba(255, 255, 255, 0.6); + } + + key-number { + display: inline-block; + background: rgba(255, 255, 255, 0.2); + padding: 2px 8px; + border-radius: 3px; + margin-right: 10px; + } + } } p { @@ -57,17 +65,17 @@ -
-
1 Smoke
-
2 Water
-
3 Lava
-
4 Sand
-
5 Plant
-
6 Stone
-
7 Wall
-
8 Ice
-
9 Fire
-
+ + + + + + + + + + +

Sanding

@@ -84,22 +92,9 @@ import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-sand.ts'; - const sandElement = document.querySelector('folk-sand'); - const keyNumbers = document.querySelectorAll('.key-number'); - - // Reset all key styles - function resetKeyStyles() { - keyNumbers.forEach((key) => { - key.style.background = 'rgba(255, 255, 255, 0.2)'; - }); - } - - sandElement.onMaterialChange = (materialNumber) => { - resetKeyStyles(); - const activeKey = keyNumbers[materialNumber - 1]; - if (activeKey) { - activeKey.style.background = 'rgba(255, 255, 255, 0.6)'; - } + document.querySelector('folk-sand').onMaterialChange = (materialNumber) => { + document.querySelector('key-helper button[active]').removeAttribute('active'); + document.querySelector(`key-helper button:nth-child(${materialNumber})`).setAttribute('active', ''); }; diff --git a/demo/cross-iframe-sand.html b/demo/cross-iframe-sand.html index 9c838d6..fcd3bc8 100644 --- a/demo/cross-iframe-sand.html +++ b/demo/cross-iframe-sand.html @@ -26,7 +26,7 @@ } } - .key-helper { + key-helper { position: fixed; top: 20px; right: 20px; @@ -39,14 +39,22 @@ display: flex; flex-direction: column; gap: 5px; - } - .key-number { - display: inline-block; - background: rgba(255, 255, 255, 0.2); - padding: 2px 8px; - border-radius: 3px; - margin-right: 10px; + button { + all: unset; + + &[active] key-number { + background: rgba(255, 255, 255, 0.6); + } + + key-number { + display: inline-block; + background: rgba(255, 255, 255, 0.2); + padding: 2px 8px; + border-radius: 3px; + margin-right: 10px; + } + } } p { @@ -68,23 +76,20 @@ -
-
1 Smoke
-
2 Water
-
3 Lava
-
4 Sand
-
5 Plant
-
6 Stone
-
7 Wall
-
8 Ice
-
9 Fire
-
+ + + + + + + + + + + - +

Sanding

- - - @@ -95,26 +100,17 @@ + + + +