From 0b1073b66eaeb9f226e58399d668ccde501c204d Mon Sep 17 00:00:00 2001
From: Gator <gator@ariona.fr>
Date: Fri, 31 Dec 2021 11:10:32 +0100
Subject: [PATCH] stop button, loop skipped a frame

---
 index.html |  5 ++++-
 main.js    | 11 ++++++++---
 style.css  | 11 +++++++++++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index f0b880d..89c678d 100644
--- a/index.html
+++ b/index.html
@@ -54,13 +54,16 @@
           <div class="form-field">
             <input type="button" name="start" id="start" value="start"/>
           </div>
+          <div class="form-field">
+            <input type="button" name="stop" id="stop" value="stop"/>
+          </div>
           <div class="form-field">
             <input type="button" name="reset" id="reset" value="reset"/>
           </div>
         </form>
       </div>
       <div class="menu-row">
-        <form method="">
+        <form>
           <div class="form-field">
             <label for="live">Living cell color</label>
             <input name="live" type="color" id="live" value="#000000"/>
diff --git a/main.js b/main.js
index 39e7126..06b3b18 100644
--- a/main.js
+++ b/main.js
@@ -8,11 +8,12 @@ const dead = document.querySelector('#dead');
 const live = document.querySelector('#live');
 const startBtn = document.querySelector('#start');
 const resetBtn = document.querySelector('#reset');
+const stopBtn = document.querySelector('#stop');
 const cellSize = document.querySelector('#cellSize');
 const loop = document.querySelector('#loop');
 
-canvas.width = main.offsetWidth;
-canvas.height = main.offsetHeight;
+canvas.width = main.offsetWidth * 0.9;
+canvas.height = main.offsetHeight * 0.9;
 
 // TODO: Hide iterator inside
 function evolve(state, acc, rules) {
@@ -89,7 +90,7 @@ async function draw(state, acc) {
   await sleep(40);
 
   const newAcc = () => {
-    if (position >= canvas.height && loop.checked) return 1;
+    if (position >= canvas.height && loop.checked) return 0;
     return acc;
   };
 
@@ -118,3 +119,7 @@ startBtn.addEventListener('click', async () => {
 resetBtn.addEventListener('click', async () => {
   reset();
 });
+
+stopBtn.addEventListener('click', async () => {
+  drawing = 0;
+});
diff --git a/style.css b/style.css
index 25a8f8e..52720e7 100644
--- a/style.css
+++ b/style.css
@@ -10,6 +10,11 @@ body {
     font-family: Courier New;
 }
 
+canvas {
+    background: #110812;
+    margin: 20px 0 0 0;
+}
+
 h1 {
     font-size: large;
     font-weight: bold;
@@ -20,6 +25,12 @@ sidebar {
     padding: 10px;
 }
 
+input[type="button"] {
+    min-width: 60px;
+    padding: 5px;
+    font-weight: bold;
+}
+
 .form-field {
     display: flex;
     margin: 10px;