From 4b8e35946e213ea13521bbf8a1b1e36e357dc7af Mon Sep 17 00:00:00 2001
From: adminoo <git@kadath.corp>
Date: Sun, 2 Jan 2022 19:07:24 +0100
Subject: [PATCH] canvas size option, menu collapsed by default

---
 src/index.html | 21 ++++++++++++++++++++-
 src/js/main.js | 14 +++++++++++++-
 src/style.css  |  2 +-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/index.html b/src/index.html
index 2760650..42b4f82 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,7 +8,26 @@
     <div id="container">
       <sidebar>
         <div class="menu-row">
-          <h2> Cell Properties</h2>
+          <h2>General Properties</h2>
+          <div class="menu-row-content">
+            <form>
+              <div class="form-field">
+                <label for="live">Canvas Resolution</label>
+              </div>
+              <div class="form-field">
+                <input name="canvasWidth" type="number" id="canvasWidth" value="1280"/>
+              </div>
+              <div class="form-field">
+                <input name="canvasHeight" type="number" id="canvasHeight" value="1024"/>
+              </div>
+              <div class="form-field">
+                <input type="button" name="canvasRefresh" id="canvasRefresh" value="refresh"/>
+              </div>
+            </form>
+          </div>
+        </div>
+        <div class="menu-row">
+          <h2>Cell Properties</h2>
           <div class="menu-row-content">
             <form>
               <div class="form-field">
diff --git a/src/js/main.js b/src/js/main.js
index 7a32556..4a4a3c2 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -14,10 +14,12 @@ const live = document.querySelector('#live');
 const cellSize = document.querySelector('#cellSize');
 const startBtn = document.querySelector('#start');
 const startBtn2d = document.querySelector('#start2d');
+const canvasRefreshBtn = document.querySelector('#canvasRefresh');
 const resetBtn = document.querySelectorAll('.reset');
 const stopBtn = document.querySelectorAll('.stop');
 // const loop = document.querySelector('#loop');
 const menuRow = document.querySelectorAll('.menu-row');
+const menuRowContent = document.querySelectorAll('.menu-row-content');
 
 function drawCanvas(board, props) {
   board.map((row, y) => {
@@ -136,6 +138,13 @@ stopBtn.forEach((elem) => {
   });
 });
 
+canvasRefreshBtn.addEventListener('click', () => {
+  const width = document.querySelector('#canvasWidth').value;
+  const height = document.querySelector('#canvasWidth').value;
+  canvas.width = width;
+  canvas.height = height;
+});
+
 menuRow.forEach((elem) => {
   elem.querySelector('h2').addEventListener('click', async (e) => {
     const parent = e.currentTarget.parentNode;
@@ -147,8 +156,11 @@ menuRow.forEach((elem) => {
 
 window.addEventListener('load', () => {
   resizeCanvas();
+  menuRowContent.forEach((elem) => {
+    elem.style.setProperty('display', 'none');
+  });
 });
 
 window.addEventListener('resize', () => {
-  resizeCanvas();
+//  resizeCanvas();
 });
diff --git a/src/style.css b/src/style.css
index 6f99e1f..bf0ead8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -32,8 +32,8 @@ h1 {
 }
 
 sidebar {
-    flex: auto;
     padding: 0 10px;
+    width: fit-content;
 }
 
 input[type="button"] {