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

simplify sand demo

This commit is contained in:
“chrisshank” 2024-12-17 15:03:00 -08:00
parent 71faeadc59
commit 7e90ce00f4
2 changed files with 65 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
demo/[shaders]falling-sand.html
View File

@ -23,7 +23,7 @@
border-radius: 2px; border-radius: 2px;
} }
.key-helper { key-helper {
position: fixed; position: fixed;
top: 20px; top: 20px;
right: 20px; right: 20px;
@ -36,14 +36,22 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
}
.key-number { button {
display: inline-block; all: unset;
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px; &[active] key-number {
border-radius: 3px; background: rgba(255, 255, 255, 0.6);
margin-right: 10px; }
key-number {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border-radius: 3px;
margin-right: 10px;
}
}
} }
p { p {
@ -57,17 +65,17 @@
</style> </style>
</head> </head>
<body> <body>
<div class="key-helper"> <key-helper>
<div><span class="key-number">1</span> Smoke</div> <button><key-number>1</key-number> Smoke</button>
<div><span class="key-number">2</span> Water</div> <button><key-number>2</key-number> Water</button>
<div><span class="key-number">3</span> Lava</div> <button><key-number>3</key-number> Lava</button>
<div><span class="key-number">4</span> Sand</div> <button active><key-number>4</key-number> Sand</button>
<div><span class="key-number">5</span> Plant</div> <button><key-number>5</key-number> Plant</button>
<div><span class="key-number">6</span> Stone</div> <button><key-number>6</key-number> Stone</button>
<div><span class="key-number">7</span> Wall</div> <button><key-number>7</key-number> Wall</button>
<div><span class="key-number">8</span> Ice</div> <button><key-number>8</key-number> Ice</button>
<div><span class="key-number">9</span> Fire</div> <button><key-number>9</key-number> Fire</button>
</div> </key-helper>
<folk-sand> <folk-sand>
<p>Sanding</p> <p>Sanding</p>
@ -84,22 +92,9 @@
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-sand.ts'; import '../src/standalone/folk-sand.ts';
const sandElement = document.querySelector('folk-sand'); document.querySelector('folk-sand').onMaterialChange = (materialNumber) => {
const keyNumbers = document.querySelectorAll('.key-number'); document.querySelector('key-helper button[active]').removeAttribute('active');
document.querySelector(`key-helper button:nth-child(${materialNumber})`).setAttribute('active', '');
// 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)';
}
}; };
</script> </script>
</body> </body>

74
demo/cross-iframe-sand.html
View File

@ -26,7 +26,7 @@
} }
} }
.key-helper { key-helper {
position: fixed; position: fixed;
top: 20px; top: 20px;
right: 20px; right: 20px;
@ -39,14 +39,22 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
}
.key-number { button {
display: inline-block; all: unset;
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px; &[active] key-number {
border-radius: 3px; background: rgba(255, 255, 255, 0.6);
margin-right: 10px; }
key-number {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border-radius: 3px;
margin-right: 10px;
}
}
} }
p { p {
@ -68,23 +76,20 @@
</style> </style>
</head> </head>
<body> <body>
<div class="key-helper"> <key-helper>
<div><span class="key-number">1</span> Smoke</div> <button><key-number>1</key-number> Smoke</button>
<div><span class="key-number">2</span> Water</div> <button><key-number>2</key-number> Water</button>
<div><span class="key-number">3</span> Lava</div> <button><key-number>3</key-number> Lava</button>
<div><span class="key-number">4</span> Sand</div> <button active><key-number>4</key-number> Sand</button>
<div><span class="key-number">5</span> Plant</div> <button><key-number>5</key-number> Plant</button>
<div><span class="key-number">6</span> Stone</div> <button><key-number>6</key-number> Stone</button>
<div><span class="key-number">7</span> Wall</div> <button><key-number>7</key-number> Wall</button>
<div><span class="key-number">8</span> Ice</div> <button><key-number>8</key-number> Ice</button>
<div><span class="key-number">9</span> Fire</div> <button><key-number>9</key-number> Fire</button>
</div> </key-helper>
<folk-sand sources="iframe folk-shape"> <folk-sand sources="folk-shape:not(:has(iframe)), iframe folk-shape">
<p>Sanding</p> <p>Sanding</p>
<folk-shape x="400" y="250" width="60" height="90"></folk-shape>
<folk-shape x="200" y="400" width="100" height="100"></folk-shape>
<folk-shape x="500" y="100" width="30" height="70"></folk-shape>
</folk-sand> </folk-sand>
<folk-shape x="10" y="100" width="250" height="400"> <folk-shape x="10" y="100" width="250" height="400">
@ -95,26 +100,17 @@
<iframe id="frame2" src="./sticky-html-arrow.html"></iframe> <iframe id="frame2" src="./sticky-html-arrow.html"></iframe>
</folk-shape> </folk-shape>
<folk-shape x="400" y="250" width="60" height="90"></folk-shape>
<folk-shape x="200" y="400" width="100" height="100"></folk-shape>
<folk-shape x="500" y="100" width="30" height="70"></folk-shape>
<script type="module"> <script type="module">
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-sand.ts'; import '../src/standalone/folk-sand.ts';
const sandElement = document.querySelector('folk-sand'); document.querySelector('folk-sand').onMaterialChange = (materialNumber) => {
const keyNumbers = document.querySelectorAll('.key-number'); document.querySelector('key-helper button[active]').removeAttribute('active');
document.querySelector(`key-helper button:nth-child(${materialNumber})`).setAttribute('active', '');
// 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)';
}
}; };
</script> </script>
</body> </body>