gator/explorata
gator/explorata
1
0
Fork 0
Code Pull Requests Projects Releases 1 Activity

hidable menu content

Browse Source
This commit is contained in:
Ali Gator 2021-12-31 13:17:37 +01:00
parent 0b1073b66e
commit a2e16a0fde
3 changed files with 104 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
index.html
View File

@ -7,82 +7,88 @@
<sidebar> <sidebar>
<h1>Cellular Automaton Explorer</h1> <h1>Cellular Automaton Explorer</h1>
<div class="menu-row"> <div class="menu-row">
<form name="rules"> <h2>Elementary Cellular Automata</h2>
<div class="form-field"> <div class="menu-row-content">
<label>Rules</label> <form name="rules">
</div> <div class="form-field">
<div class="form-field"> <label>Rules</label>
<label>111 </div>
<input type="checkbox" name="111" checked> <div class="form-field">
</label> <label>111
</div> <input type="checkbox" name="111" checked>
<div class="form-field"> </label>
<label>110 </div>
<input type="checkbox" name="110"> <div class="form-field">
</label> <label>110
</div> <input type="checkbox" name="110">
<div class="form-field"> </label>
<label>101 </div>
<input type="checkbox" name="101" checked> <div class="form-field">
</label> <label>101
</div> <input type="checkbox" name="101" checked>
<div class="form-field"> </label>
<label>100 </div>
<input type="checkbox" name="100"> <div class="form-field">
</label> <label>100
</div> <input type="checkbox" name="100">
<div class="form-field"> </label>
<label>011 </div>
<input type="checkbox" name="011" checked> <div class="form-field">
</label> <label>011
</div> <input type="checkbox" name="011" checked>
<div class="form-field"> </label>
<label>010 </div>
<input type="checkbox" name="010"> <div class="form-field">
</label> <label>010
</div> <input type="checkbox" name="010">
<div class="form-field"> </label>
<label>001 </div>
<input type="checkbox" name="001"> <div class="form-field">
</label> <label>001
</div> <input type="checkbox" name="001">
<div class="form-field"> </label>
<label>000 </div>
<input type="checkbox" name="000" checked> <div class="form-field">
</label> <label>000
</div> <input type="checkbox" name="000" checked>
<div class="form-field"> </label>
<input type="button" name="start" id="start" value="start"/> </div>
</div> <div class="form-field">
<div class="form-field"> <input type="button" name="start" id="start" value="start"/>
<input type="button" name="stop" id="stop" value="stop"/> </div>
</div> <div class="form-field">
<div class="form-field"> <input type="button" name="stop" id="stop" value="stop"/>
<input type="button" name="reset" id="reset" value="reset"/> </div>
</div> <div class="form-field">
</form> <input type="button" name="reset" id="reset" value="reset"/>
</div> </div>
<div class="menu-row"> </form>
<form> <form>
<div class="form-field"> <div class="form-field">
<label for="live">Living cell color</label> <label for="live">Living cell color</label>
<input name="live" type="color" id="live" value="#000000"/> <input name="live" type="color" id="live" value="#000000"/>
</div> </div>
<div class="form-field"> <div class="form-field">
<label for="dead">Dead cell color</label> <label for="dead">Dead cell color</label>
<input name="dead" type="color" id="dead" value="#99FF00"/> <input name="dead" type="color" id="dead" value="#99FF00"/>
</div> </div>
<div class="form-field"> <div class="form-field">
<label>Cell size</label> <label>Cell size</label>
<input name="cellSize" type="number" id="cellSize" value="5"/> <input name="cellSize" type="number" id="cellSize" value="5"/>
</div> </div>
<div class="form-field"> <div class="form-field">
<label>Loop <label>Loop
<input name="loop" type="checkbox" id="loop"/> <input name="loop" type="checkbox" id="loop"/>
</label> </label>
</div> </div>
</form> </form>
</div>
</div> </div>
<!-- <div class="menu-row"> -->
<!-- <h2>2D Cellular Automata</h2> -->
<!-- <div class="menu-row-content"> -->
<!-- </div> -->
<!-- </div> -->
</sidebar> </sidebar>
<main id="main"> <main id="main">
<canvas width="500" height="500" id="canvas"></canvas> <canvas width="500" height="500" id="canvas"></canvas>

10
main.js
View File

@ -11,6 +11,7 @@ const resetBtn = document.querySelector('#reset');
const stopBtn = document.querySelector('#stop'); const stopBtn = document.querySelector('#stop');
const cellSize = document.querySelector('#cellSize'); const cellSize = document.querySelector('#cellSize');
const loop = document.querySelector('#loop'); const loop = document.querySelector('#loop');
const menuRow = document.querySelectorAll('.menu-row');
canvas.width = main.offsetWidth * 0.9; canvas.width = main.offsetWidth * 0.9;
canvas.height = main.offsetHeight * 0.9; canvas.height = main.offsetHeight * 0.9;
@ -123,3 +124,12 @@ resetBtn.addEventListener('click', async () => {
stopBtn.addEventListener('click', async () => { stopBtn.addEventListener('click', async () => {
drawing = 0; drawing = 0;
}); });
menuRow.forEach((elem) => {
elem.querySelector('h2').addEventListener('click', async (e) => {
// ugly
const menuDisplay = e.currentTarget.parentNode.querySelector('.menu-row-content').style;
if (menuDisplay.display !== 'none') menuDisplay.setProperty('display', 'none');
else menuDisplay.setProperty('display', 'block');
});
});

14
style.css
View File

@ -15,9 +15,20 @@ canvas {
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
h1, h2 {
font-weight: bold;
}
h1 { h1 {
font-size: large; font-size: large;
font-weight: bold; }
.menu-row h2 {
font-size: medium;
margin-left: 10px;
padding: 10px;
cursor: pointer;
border: 2px solid darkgrey;
} }
sidebar { sidebar {
@ -38,6 +49,7 @@ input[type="button"] {
.menu-row { .menu-row {
flex: 1; flex: 1;
margin: 5px 0;
} }
label, .form-field label { label, .form-field label {