Merge branch 'code' into main

.eslintignore

@@ -0,0 +1 @@
+*

.github/workflows/pr-branch-check.yml

@@ -0,0 +1,18 @@
+name: Enforce allowed branches for PRs to main
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  check-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check PR source branch
+        run: |
+          echo "Source branch: ${{ github.head_ref }}"
+          if [[ "${{ github.head_ref }}" != "documentation" && "${{ github.head_ref }}" != "code" ]]; then
+            echo "Error: PRs to main must come from 'documentation' or 'code' branches only."
+            exit 1
+          fi

.prettierignore

@@ -0,0 +1 @@
+*

src/Template.js

@@ -129,18 +129,23 @@ export default class Template {
         for (let y = 0; y < canvasHeight; y++) {
           for (let x = 0; x < canvasWidth; x++) {
             // For every pixel...
-
+            const pixelIndex = (y * canvasWidth + x) * 4; // Find the pixel index in an array where every 4 indexes are 1 pixel
-            // ... Make it transparent unless it is the "center"
+            // If the pixel is the color #deface, draw a translucent gray checkerboard pattern
-            if (x % shreadSize !== 1 || y % shreadSize !== 1) {
+            if (
-              const pixelIndex = (y * canvasWidth + x) * 4; // Find the pixel index in an array where every 4 indexes are 1 pixel
+              imageData.data[pixelIndex] === 222 &&
+              imageData.data[pixelIndex + 1] === 250 &&
+              imageData.data[pixelIndex + 2] === 206
+            ) {
+              if ((x + y) % 2 === 0) { // Formula for checkerboard pattern
+                imageData.data[pixelIndex] = 0;
+                imageData.data[pixelIndex + 1] = 0;
+                imageData.data[pixelIndex + 2] = 0;
+                imageData.data[pixelIndex + 3] = 32; // Translucent black
+              } else { // Transparent negative space
+                imageData.data[pixelIndex + 3] = 0;
+              }
+            } else if (x % shreadSize !== 1 || y % shreadSize !== 1) { // Otherwise only draw the middle pixel
               imageData.data[pixelIndex + 3] = 0; // Make the pixel transparent on the alpha channel
-
-              // if (!!imageData.data[pixelIndex + 3]) {
-              //   imageData.data[pixelIndex + 3] = 50; // Alpha
-              //   imageData.data[pixelIndex] = 30; // Red
-              //   imageData.data[pixelIndex + 1] = 30; // Green
-              //   imageData.data[pixelIndex + 2] = 30; // Blue
-              // }
             }
           }
         }

src/overlay.css

@@ -8,7 +8,7 @@
   padding: 10px;
   border-radius: 8px;
   z-index: 9000;
-  transition: all 0.3s ease;
+  transition: all 0.3s ease, transform 0s;
   max-width: 300px;
   width: auto;
   /* Performance optimizations for smooth dragging */