diff --git a/index.html b/index.html
index 89c678d..16ab6c2 100644
--- a/index.html
+++ b/index.html
@@ -7,82 +7,88 @@
Cellular Automaton Explorer
-
+
+
+
+
+
diff --git a/main.js b/main.js
index 06b3b18..2de9879 100644
--- a/main.js
+++ b/main.js
@@ -11,6 +11,7 @@ const resetBtn = document.querySelector('#reset');
const stopBtn = document.querySelector('#stop');
const cellSize = document.querySelector('#cellSize');
const loop = document.querySelector('#loop');
+const menuRow = document.querySelectorAll('.menu-row');
canvas.width = main.offsetWidth * 0.9;
canvas.height = main.offsetHeight * 0.9;
@@ -123,3 +124,12 @@ resetBtn.addEventListener('click', async () => {
stopBtn.addEventListener('click', async () => {
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');
+ });
+});
diff --git a/style.css b/style.css
index 52720e7..299fa3c 100644
--- a/style.css
+++ b/style.css
@@ -15,9 +15,20 @@ canvas {
margin: 20px 0 0 0;
}
+h1, h2 {
+ font-weight: bold;
+}
+
h1 {
font-size: large;
- font-weight: bold;
+}
+
+.menu-row h2 {
+ font-size: medium;
+ margin-left: 10px;
+ padding: 10px;
+ cursor: pointer;
+ border: 2px solid darkgrey;
}
sidebar {
@@ -38,6 +49,7 @@ input[type="button"] {
.menu-row {
flex: 1;
+ margin: 5px 0;
}
label, .form-field label {