added some nice touches

BobdaProgrammer · BobdaProgrammer · commit e058df56c4a1 · 2024-05-25T15:54:08.000+01:00
diff --git a/canvas.js b/canvas.js
@@ -20,15 +20,19 @@ document.addEventListener("DOMContentLoaded", function (event) {
   canvas.onmousedown = mouseDown;
   mouseUp = true;
 });
-document.getElementById("startstop").addEventListener("click", function () {
-  if (isDraw) {
-    isDraw = false;
-    document.getElementById("state").innerText = "Stopped"
+function StartStop(isdraw) {
+  console.log(isdraw)
+  if (isdraw) {
+        isDraw = false;
+        document.getElementById("state").innerText = "Stopped";
   } else {
-    isDraw = true;
-    document.getElementById("state").innerText = "Running";
-    draw();
+        isDraw = true;
+        document.getElementById("state").innerText = "Running";
+        draw();
   }
+}
+document.getElementById("startstop").addEventListener("click", function () {
+  StartStop(isDraw)
 })
 document.getElementById("simulate").addEventListener("change", function () {
   if (document.getElementById("simulate").checked) {
@@ -60,16 +64,19 @@ function mouseDown(event) {
   function onMouseMove(event) {
     x = parseInt(event.offsetX / 4);
     y = parseInt(event.offsetY / 4);
-    grid[y][x] = [1, hue];
-    const randomNumber = Math.floor(Math.random() * 4) + 1;
-    const randomNumber1 = Math.floor(Math.random() * 4) + 1;
-    if (y != grid.length-1 && (randomNumber==1||randomNumber1==1)) { grid[y + 1][x] = [1, hue]; }
-    if (x != grid[y].length && (randomNumber==2||randomNumber1==2)) { grid[y][x + 1] = [1, hue]; }
-    if (x != 0 && (randomNumber==3||randomNumber1==3)) { grid[y][x - 1] = [1, hue]; }
-    if (y != 0 && (randomNumber==4||randomNumber1==4)) { grid[y - 1][x] = [1, hue]; }
-    if (isDraw == false) {
-      isDraw = true;
-      draw();
+    if (grid[y][x][0] != 1) {
+      grid[y][x] = [1, hue];
+      const randomNumber = Math.floor(Math.random() * 4) + 1;
+      const randomNumber1 = Math.floor(Math.random() * 4) + 1;
+      if (y != grid.length - 1 && (randomNumber == 1 || randomNumber1 == 1)) { grid[y + 1][x] = [1, hue]; }
+      if (x != grid[y].length && (randomNumber == 2 || randomNumber1 == 2)) { grid[y][x + 1] = [1, hue]; }
+      if (x != 0 && (randomNumber == 3 || randomNumber1 == 3)) { grid[y][x - 1] = [1, hue]; }
+      if (y != 0 && (randomNumber == 4 || randomNumber1 == 4)) { grid[y - 1][x] = [1, hue]; }
+      if (isDraw == false) {
+        isDraw = true;
+        document.getElementById("state").innerText = "Running";
+        draw();
+      }
     }
   }
   if (mouseUp == false) {
diff --git a/index.html b/index.html
@@ -7,8 +7,10 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <div class="options">
     <button id="startstop">Start/Stop</button> <label for="startstop" id="state">Running</label>
-    <input type="checkbox" id="simulate" checked> simulate
+    <input type="checkbox" id="simulate" checked><label for="simulate" >simulate</label>
+    </div>
     <main>
         <canvas id="canvas"></canvas>
     </main>
diff --git a/styles.css b/styles.css
@@ -14,14 +14,31 @@ body {
     font-size: 16px;
     line-height: 1.5;
     color: #333;
-    background: #f5f5f5;
     margin: 1em 0 0 2em;
     padding: 0;
 }
+#startstop{
+    margin-bottom: 5px;
+    border-radius: 5px;
+    outline: none;
+    border: none;
+    color: white;
+    background-color: orange;
+}
+.options{
+    background-color: rgb(255, 77, 106);
+    justify-content: center;
+    text-align: center;
+    vertical-align: middle;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
 
 #canvas {
     display: block;
     border: 1px solid #000;
     box-sizing: content-box;
     background-color: black;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
 }
