interface: <input type="number"> for particles

This commit is contained in:
root 2025-04-27 10:08:00 +00:00
parent be6d6ba000
commit 9194832b01
2 changed files with 31 additions and 14 deletions

View file

@ -38,8 +38,10 @@ aside > container {
flex-wrap: wrap;
gap: 12px;
}
aside button {
aside button, aside input[type="number"] {
font-size: 20px;
}
aside button {
min-width: 27px;
}
aside input[type="checkbox"] {
@ -92,16 +94,21 @@ aside > container > div {
<button id="button-surface-earth" onclick="set_surface(SURFACE_EARTH)">Earth</button>
</div>
<div>
<button onclick="make_particles(0);faces=[]">0</button>
<button onclick="make_particles(1);faces=[]">1</button>
<button onclick="make_particles(2);faces=[]">2</button>
<button onclick="make_particles(3);faces=[]">3</button>
<button onclick="make_particles(4);faces=[]">4</button>
<button onclick="make_particles(5);faces=[]">5</button>
<button onclick="make_particles(6);faces=[]">6</button>
<button onclick="make_particles(7);faces=[]">7</button>
<button onclick="make_particles(8);faces=[]">8</button>
<button onclick="make_particles(9);faces=[]">9</button>
<button onclick="make_particles(0)">0</button>
<button onclick="make_particles(1)">1</button>
<button onclick="make_particles(2)">2</button>
<button onclick="make_particles(3)">3</button>
<button onclick="make_particles(4)">4</button>
<button onclick="make_particles(5)">5</button>
<button onclick="make_particles(6)">6</button>
<button onclick="make_particles(7)">7</button>
<button onclick="make_particles(8)">8</button>
<button onclick="make_particles(9)">9</button>
<div>
<input id="input-particles" type="number" min="0" max="360"
onkeypress="if (event.key === 'Enter') button_particles.click()">
<button id="button-particles" onclick="make_particles(min(360, max(0, input_particles.valueAsNumber)))">Create</button>
</div>
</div>
</container>
</aside>
@ -118,6 +125,7 @@ Source code: <a href="https://git.atomic.garden/root/sphere-electrons">https://g
document.querySelectorAll(".js").forEach(e => e.style = "display:initial");
const input_charge = document.getElementById("input-charge");
input_charge.oninput();
const button_particles = document.getElementById("button-particles");
</script>
</body>
</html>