base64

src/client/TerritoryPatterns.ts

@@ -2,9 +2,9 @@ import { z } from "zod";
 import rawTerritoryPatterns from "../../resources/territory_patterns.json";
 
 const PatternSchema = z.object({
-  tileWidth: z.number(),
-  tileHeight: z.number(),
-  scale: z.number(),
+  tileWidth: z.number().optional(),
+  tileHeight: z.number().optional(),
+  scale: z.number().optional(),
   pattern: z.array(z.array(z.number())).optional(),
   patternBase64: z.string().optional(),
 });
@@ -24,24 +24,39 @@ for (const [key, value] of Object.entries(territoryPatterns.patterns)) {
       bytes[i] = byteString.charCodeAt(i);
     }
 
+    const version = bytes[0];
+    if (version !== 1) {
+      throw new Error("The pattern versions are different.");
+    }
+    const tileWidth = (bytes[1] << 8) | bytes[2];
+    const tileHeight = (bytes[3] << 8) | bytes[4];
+    const scale = (bytes[5] << 8) | bytes[6];
+
+    const totalBits = tileWidth * tileHeight;
+    const totalBytes = Math.ceil(totalBits / 8);
+    const data = bytes.slice(7, 7 + totalBytes);
+
     const bits: number[] = [];
-    for (const byte of bytes) {
+    for (const byte of data) {
       for (let i = 7; i >= 0; i--) {
         bits.push((byte >> i) & 1);
       }
     }
 
     const pattern: number[][] = [];
-    for (let y = 0; y < value.tileHeight; y++) {
+    for (let y = 0; y < tileHeight; y++) {
       const row: number[] = [];
-      for (let x = 0; x < value.tileWidth; x++) {
-        const index = y * value.tileWidth + x;
+      for (let x = 0; x < tileWidth; x++) {
+        const index = y * tileWidth + x;
         row.push(bits[index] ?? 0);
       }
       pattern.push(row);
     }
 
     value.pattern = pattern;
+    value.tileWidth = tileWidth;
+    value.tileHeight = tileHeight;
+    value.scale = scale;
   }
 }
 

src/client/TerritoryPatternsModal.ts

@@ -48,27 +48,6 @@ export class territoryPatternsModal extends LitElement {
       this.updatePreview();
     });
 
-    for (const [key, p] of Object.entries(territoryPatterns.patterns)) {
-      if (!p.pattern && p.patternBase64) {
-        const bytes = Uint8Array.from(atob(p.patternBase64), (c) =>
-          c.charCodeAt(0),
-        );
-        const bits = Array.from(bytes).flatMap((byte) =>
-          [...Array(8)].map((_, i) => (byte >> (7 - i)) & 1),
-        );
-        const pattern: number[][] = [];
-        for (let y = 0; y < p.tileHeight; y++) {
-          const row: number[] = [];
-          for (let x = 0; x < p.tileWidth; x++) {
-            const index = y * p.tileWidth + x;
-            row.push(bits[index] ?? 0);
-          }
-          pattern.push(row);
-        }
-        p.pattern = pattern;
-      }
-    }
-
     this.setLockedPatterns(["evan"], {
       evan: "This pattern is locked because it is restricted.",
     });
@@ -133,8 +112,8 @@ export class territoryPatternsModal extends LitElement {
                     "
                 >
                   ${(() => {
-                    const cellCountX = pattern.tileWidth;
-                    const cellCountY = pattern.tileHeight;
+                    const cellCountX = pattern.tileWidth ?? 1;
+                    const cellCountY = pattern.tileHeight ?? 1;
                     const cellSize = Math.floor(
                       this.buttonWidth / Math.max(cellCountX, cellCountY),
                     );
@@ -200,8 +179,8 @@ export class territoryPatternsModal extends LitElement {
 
     const fixedHeight = 48;
     const fixedWidth = 48;
-    const cellCountX = pattern.tileWidth;
-    const cellCountY = pattern.tileHeight;
+    const cellCountX = pattern.tileWidth ?? 1;
+    const cellCountY = pattern.tileHeight ?? 1;
 
     const cellSize = Math.min(
       fixedHeight / cellCountY,

src/client/graphics/layers/TerritoryLayer.ts

@@ -301,7 +301,12 @@ export class TerritoryLayer implements Layer {
         const baseColor = this.theme.territoryColor(owner);
         const patternConfig = territoryPatterns.patterns[patternName];
 
-        const { tileWidth, tileHeight, scale, pattern } = patternConfig;
+        const {
+          tileWidth = 1,
+          tileHeight = 1,
+          scale = 1,
+          pattern,
+        } = patternConfig;
 
         const px = Math.floor(x / scale) % tileWidth;
         const py = Math.floor(y / scale) % tileHeight;