Patterns (#1318)

## Description:

Replace the HTML element pattern grid with a PNG image.


![image](https://github.com/user-attachments/assets/557d1f35-1a5e-4bb2-bd6e-4ba4ad1593f9)


![image](https://github.com/user-attachments/assets/426194ef-237d-42d7-a775-d91a7cc161f4)

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

src/core/PatternDecoder.ts

@@ -2,9 +2,10 @@ import { base64url } from "jose";
 
 export class PatternDecoder {
   private bytes: Uint8Array;
-  private tileWidth: number;
-  private tileHeight: number;
-  private scale: number;
+
+  readonly height: number;
+  readonly width: number;
+  readonly scale: number;
 
   constructor(base64: string) {
     this.bytes = base64url.decode(base64);
@@ -24,10 +25,10 @@ export class PatternDecoder {
     const byte2 = this.bytes[2];
     this.scale = byte1 & 0x07;
 
-    this.tileWidth = (((byte2 & 0x03) << 5) | ((byte1 >> 3) & 0x1f)) + 2;
-    this.tileHeight = ((byte2 >> 2) & 0x3f) + 2;
+    this.width = (((byte2 & 0x03) << 5) | ((byte1 >> 3) & 0x1f)) + 2;
+    this.height = ((byte2 >> 2) & 0x3f) + 2;
 
-    const expectedBits = this.tileWidth * this.tileHeight;
+    const expectedBits = this.width * this.height;
     const expectedBytes = (expectedBits + 7) >> 3; // Equivalent to: ceil(expectedBits / 8);
     if (this.bytes.length - 3 < expectedBytes) {
       throw new Error(
@@ -36,26 +37,22 @@ export class PatternDecoder {
     }
   }
 
-  getTileWidth(): number {
-    return this.tileWidth;
-  }
-
-  getTileHeight(): number {
-    return this.tileHeight;
-  }
-
-  getScale(): number {
-    return this.scale;
-  }
-
   isSet(x: number, y: number): boolean {
-    const px = (x >> this.scale) % this.tileWidth;
-    const py = (y >> this.scale) % this.tileHeight;
-    const idx = py * this.tileWidth + px;
+    const px = (x >> this.scale) % this.width;
+    const py = (y >> this.scale) % this.height;
+    const idx = py * this.width + px;
     const byteIndex = idx >> 3;
     const bitIndex = idx & 7;
     const byte = this.bytes[3 + byteIndex];
     if (byte === undefined) throw new Error("Invalid pattern");
     return (byte & (1 << bitIndex)) !== 0;
   }
+
+  scaledHeight(): number {
+    return this.height << this.scale;
+  }
+
+  scaledWidth(): number {
+    return this.width << this.scale;
+  }
 }