feat: highlight format and version info

btw the fix doesn't work
so it's just a code cleanup

index.html

@@ -34,7 +34,7 @@
       <label for="gap">
         <span>Grid gap:</span>
         <input id="gap" type="number" min="0" value="0">
-        px between modules
+        px around
       </label>
       <button id="gen-btn">Generate</button>
     </div>

script.js

@@ -64,7 +64,9 @@ addEventListener('DOMContentLoaded', () => {
     const mask = options.mask.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
+    // not more than (half of 1 scaled module size) - 1
+    // at gap=scale/2 squares disappear
+    const gap = Math.min(Number(options.gap.value), intDiv(scale, 2) - 1)
 
     const wh = scale - gap * 2 // width&height for 1 module with grid gap
 
@@ -122,14 +124,48 @@ addEventListener('DOMContentLoaded', () => {
     }
 
     { // format info
-      // TODO
+      // ctx.fillStyle = "rgba(63, 149, 224, 0.5)"
+      ctx.fillStyle = "rgba(63, 203, 224, 0.5)"
+
+      ctx.fillRect(0, idSize, idSize, scale)
+      ctx.fillRect(idSize, 0, scale, idSize + scale)
+      ctx.fillRect(idSize, canvas.height - idSize, scale, idSize)
+      ctx.fillRect(canvas.width - idSize, idSize, idSize, scale)
+    }
+
+    if (ver >= 7) { // version info
+      ctx.fillStyle = "rgba(63, 224, 171, 0.5)"
+
+      const verWidth = 3 * scale
+      const verHeight = 6 * scale
+      const verBeginPos = canvas.width - idSize - verWidth
+      ctx.fillRect(verBeginPos, 0, verWidth, verHeight)
+      ctx.fillRect(0, verBeginPos, verHeight, verWidth)
     }
   })
 
   { // Choose best scale for screen height
-    const height = document.documentElement.clientHeight;
-    const padding = getComputedStyle(document.body).paddingTop;
-    // TODO
+    let padding = getComputedStyle(document.body).paddingBottom
+    // remove `px` at the end and convert to number
+    padding = Number(padding.slice(0, padding.length - 2))
+
+    // compute available height
+    const height = 
+      document.documentElement.clientHeight
+        - canvas.offsetTop // substract height of everything above canvas
+        - padding // substract body padding
+
+    const width =
+      document.documentElement.clientWidth
+        - padding * 2
+
+    options.scale.value = Math.max(
+      intDiv(
+        width < height ? width : height,
+        25, // divide least dimension by QR version 2 size
+      ),
+      10, // minimum scale for this auto-detect algorithm
+    )
   }
 
   { // QR version related stuff

style.css

@@ -6,14 +6,13 @@ body {
 body > div {
   width: fit-content;
   margin: auto;
+  max-width: calc(100vw - 0.5rem * 2);
 }
 
-body > div#options {
+#options {
   display: flex;
   flex-direction: column;
   row-gap: 0.25rem;
-
-  max-width: calc(100vw - 0.5rem * 2);
 }
 
 select, input, button {