feat: add highlight for id, align, timing patterns

script.js

@@ -3,6 +3,50 @@ function intDiv(a, b) {
   return ~~(a / b)
 }
 
+let getCodeVersion
+
+const alignmentCoords = [
+  [6, 18],
+  [6, 22],
+  [6, 26],
+  [6, 30],
+  [6, 34],
+  [6, 22, 38],
+  [6, 24, 42],
+  [6, 26, 46],
+  [6, 28, 50],
+  [6, 30, 54],
+  [6, 32, 58],
+  [6, 34, 62],
+  [6, 26, 46, 66],
+  [6, 26, 48, 70],
+  [6, 26, 50, 74],
+  [6, 30, 54, 78],
+  [6, 30, 56, 82],
+  [6, 30, 58, 86],
+  [6, 34, 62, 90],
+  [6, 28, 50, 72, 94],
+  [6, 26, 50, 74, 98],
+  [6, 30, 54, 78, 102],
+  [6, 28, 54, 80, 106],
+  [6, 32, 58, 84, 110],
+  [6, 30, 58, 86, 114],
+  [6, 34, 62, 90, 118],
+  [6, 26, 50, 74, 98, 122],
+  [6, 30, 54, 78, 102, 126],
+  [6, 26, 52, 78, 104, 130],
+  [6, 30, 56, 82, 108, 134],
+  [6, 34, 60, 86, 112, 138],
+  [6, 30, 58, 86, 114, 142],
+  [6, 34, 62, 90, 118, 146],
+  [6, 30, 54, 78, 102, 126, 150],
+  [6, 24, 50, 76, 102, 128, 154],
+  [6, 28, 54, 80, 106, 132, 158],
+  [6, 32, 58, 84, 110, 136, 162],
+  [6, 26, 54, 82, 110, 138, 166],
+  [6, 30, 58, 86, 114, 142, 170],
+]
+
 addEventListener('DOMContentLoaded', () => {
   const canvas = document.getElementById("canvas")
   const ctx = canvas.getContext("2d")
@@ -24,6 +68,8 @@ addEventListener('DOMContentLoaded', () => {
 
     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) {
@@ -31,6 +77,50 @@ addEventListener('DOMContentLoaded', () => {
         }
       }
     }
+
+    const idSize = 8 * scale
+
+    { // finder pattern
+      ctx.fillStyle = "rgba(224, 63, 102, 0.5)"
+
+      ctx.fillRect(0, 0, idSize, idSize)
+      ctx.fillRect(canvas.width - idSize, 0, idSize, idSize)
+      ctx.fillRect(0, canvas.height - idSize, idSize, idSize)
+    }
+
+    const ver = getCodeVersion()
+
+    if (ver > 1) { // alignment pattern
+      ctx.fillStyle = "rgba(209, 63, 224, 0.5)"
+
+      const alignSize = 5 * scale
+      const coords = alignmentCoords[ver - 2] // array begins with version 2
+      const len = coords.length
+
+      for (let i = 0; i < len; i++) {
+        for (let j = 0; j < len; j++) {
+          const row = coords[i], col = coords[j]
+          if (row < 8 && col < 8 || row < 8 && col > size - 8 || row > size - 8 && col < 8) {
+            // do not overlap with finder pattern
+            continue
+          }
+          ctx.fillRect((row - 2) * scale, (col - 2) * scale, alignSize, alignSize)
+        }
+      }
+    }
+
+    { // timing pattern
+      ctx.fillStyle = "rgba(76, 63, 224, 0.5)"
+
+      const idEndPos = 6 * scale
+      const betweenIds = canvas.width - idSize * 2
+      ctx.fillRect(idSize, idEndPos, betweenIds, scale)
+      ctx.fillRect(idEndPos, idSize, scale, betweenIds)
+    }
+
+    { // format info
+      // TODO
+    }
   })
 
   { // Choose best scale for screen height
@@ -45,7 +135,7 @@ addEventListener('DOMContentLoaded', () => {
     const MIN_VER = 1
     const MAX_VER = 40
 
-    const getCodeVersion = () => {
+    getCodeVersion = () => {
       const size = options.size.value
       return Math.floor((size - MICRO_4) / DIFF)
     }