From ed0cffb8b3d884817bbe33be944179006f0a46cd Mon Sep 17 00:00:00 2001
From: DarkCat09 <gh@dc09.ru>
Date: Thu, 11 Jul 2024 18:55:11 +0400
Subject: [PATCH] feat: add grid gap & canvas outline

---
 index.html |  5 +++++
 script.js  | 11 +++++++----
 style.css  | 18 +++++++++++++-----
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index e889079..16840fe 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,11 @@
         <input id="scale" type="number" min="1" value="40">
         px per module
       </label>
+      <label for="gap">
+        <span>Grid gap:</span>
+        <input id="gap" type="number" min="0" value="0">
+        px between modules
+      </label>
       <button id="gen-btn">Generate</button>
     </div>
     <div>
diff --git a/script.js b/script.js
index f37938e..63413ec 100644
--- a/script.js
+++ b/script.js
@@ -57,23 +57,26 @@ addEventListener('DOMContentLoaded', () => {
     size: document.getElementById("width"),
     ver: document.getElementById("version"),
     scale: document.getElementById("scale"),
+    gap: document.getElementById("gap"),
   }
 
   document.getElementById("gen-btn").addEventListener("click", () => {
     const mask = options.mask.value
-    const size = options.size.value
-    const scale = options.scale.value
+    const size = Number(options.size.value)
+    const scale = Number(options.scale.value)
+    const gap = Math.min(Number(options.gap.value), scale) // not more than 1 module scaled size
+
+    const wh = scale - gap * 2 // width&height for 1 module with grid gap
 
     canvas.width = canvas.height = size * scale
 
     ctx.clearRect(0, 0, canvas.width, canvas.height)
-
     ctx.fillStyle = "black"
 
     for (let row = 0; row < size; row++) {
       for (let col = 0; col < size; col++) {
         if (eval(mask) == 0) {
-          ctx.fillRect(col * scale, row * scale, scale, scale)
+          ctx.fillRect(col * scale + gap, row * scale + gap, wh, wh)
         }
       }
     }
diff --git a/style.css b/style.css
index a4d7014..9a807d6 100644
--- a/style.css
+++ b/style.css
@@ -3,14 +3,17 @@ body {
   padding: 0.5rem;
 }
 
-#options {
+body > div {
+  width: fit-content;
+  margin: auto;
+}
+
+body > div#options {
   display: flex;
   flex-direction: column;
   row-gap: 0.25rem;
 
-  width: fit-content;
   max-width: calc(100vw - 0.5rem * 2);
-  margin: auto;
 }
 
 select, input, button {
@@ -20,7 +23,7 @@ select, input, button {
 }
 
 input[type=number] {
-  width: calc(1rem * 4 + 0.125rem * 2);
+  width: calc(4rem + 0.125rem * 2);
 }
 
 label {
@@ -35,6 +38,11 @@ label#width-wrapper > button {
 }
 
 label > span:nth-child(1) {
-  width: calc(3.5rem);
+  width: 5rem;
   text-align: right;
 }
+
+canvas {
+  margin-top: 0.5rem;
+  border: 2px solid #555;
+}