From 4a8692d4a9a56d004c05e5a0b33b0cd0a482a27c Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Thu, 29 May 2025 20:23:17 +0900
Subject: [PATCH] fix 2

---
 src/client/TerritoryPatterns.ts              | 30 +++------
 src/client/TerritoryPatternsModal.ts         | 66 +++++++++++++-------
 src/client/graphics/layers/TerritoryLayer.ts | 15 +++--
 3 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/src/client/TerritoryPatterns.ts b/src/client/TerritoryPatterns.ts
index 2dcf4d500..bfa2c195b 100644
--- a/src/client/TerritoryPatterns.ts
+++ b/src/client/TerritoryPatterns.ts
@@ -5,8 +5,10 @@ const PatternSchema = z.object({
   tileWidth: z.number().optional(),
   tileHeight: z.number().optional(),
   scale: z.number().optional(),
-  pattern: z.array(z.array(z.number())).optional(),
   patternBase64: z.string().optional(),
+  patternData: z
+    .custom<Uint8Array>((val) => val instanceof Uint8Array)
+    .optional(),
 });
 
 const TerritoryPatternsSchema = z.object({
@@ -18,7 +20,7 @@ export const territoryPatterns =
 
 class PatternDecoder {
   static decodeBase64Pattern(base64: string): {
-    pattern: number[][];
+    data: Uint8Array;
     tileWidth: number;
     tileHeight: number;
     scale: number;
@@ -40,32 +42,16 @@ class PatternDecoder {
     const totalBits = tileWidth * tileHeight;
     const totalBytes = Math.ceil(totalBits / 8);
     const data = bytes.slice(7, 7 + totalBytes);
+    console.log("data", data);
 
-    const bits: number[] = [];
-    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 < tileHeight; y++) {
-      const row: number[] = [];
-      for (let x = 0; x < tileWidth; x++) {
-        const index = y * tileWidth + x;
-        row.push(bits[index] ?? 0);
-      }
-      pattern.push(row);
-    }
-
-    return { pattern, tileWidth, tileHeight, scale };
+    return { data, tileWidth, tileHeight, scale };
   }
 }
 
 for (const [key, value] of Object.entries(territoryPatterns.patterns)) {
-  if (!value.pattern && value.patternBase64) {
+  if (value.patternBase64) {
     const decoded = PatternDecoder.decodeBase64Pattern(value.patternBase64);
-    value.pattern = decoded.pattern;
+    value.patternData = decoded.data;
     value.tileWidth = decoded.tileWidth;
     value.tileHeight = decoded.tileHeight;
     value.scale = decoded.scale;
diff --git a/src/client/TerritoryPatternsModal.ts b/src/client/TerritoryPatternsModal.ts
index 6c238e90d..93f568b84 100644
--- a/src/client/TerritoryPatternsModal.ts
+++ b/src/client/TerritoryPatternsModal.ts
@@ -1,3 +1,4 @@
+import type { TemplateResult } from "lit";
 import { html, LitElement, render } from "lit";
 import { customElement, query, state } from "lit/decorators.js";
 import "./components/Difficulties";
@@ -129,21 +130,31 @@ export class territoryPatternsModal extends LitElement {
                             border-radius: 4px;
                           "
                       >
-                        ${(pattern.pattern ?? []).flat().map(
-                          (cell) => html`
-                            <div
-                              style="
-                                  background-color: ${cell === 1
-                                ? "#000"
-                                : "transparent"};
+                        ${(() => {
+                          const tiles: TemplateResult[] = [];
+                          const total = cellCountX * cellCountY;
+                          for (let i = 0; i < total; i++) {
+                            const byteIndex = Math.floor(i / 8);
+                            const bitIndex = 7 - (i % 8);
+                            const bit =
+                              (pattern.patternData?.[byteIndex] ?? 0) &
+                              (1 << bitIndex);
+                            tiles.push(html`
+                              <div
+                                style="
+                                  background-color: ${bit
+                                  ? "#000"
+                                  : "transparent"};
                                   border: 1px solid rgba(0, 0, 0, 0.1);
                                   width: ${cellSize}px;
                                   height: ${cellSize}px;
                                   border-radius: 1px;
                                 "
-                            ></div>
-                          `,
-                        )}
+                              ></div>
+                            `);
+                          }
+                          return tiles;
+                        })()}
                       </div>
                     `;
                   })()}
@@ -212,19 +223,28 @@ export class territoryPatternsModal extends LitElement {
             border-radius: 4px;
           "
         >
-          ${(pattern.pattern ?? []).flat().map(
-            (cell) => html`
-              <div
-                style="
-                  background-color: ${cell === 1 ? "#000" : "transparent"};
-                  border: 1px solid rgba(0, 0, 0, 0.1);
-                  width: ${cellSize}px;
-                  height: ${cellSize}px;
-                  border-radius: 1px;
-                "
-              ></div>
-            `,
-          )}
+          ${(() => {
+            const tiles: TemplateResult[] = [];
+            const total = cellCountX * cellCountY;
+            for (let i = 0; i < total; i++) {
+              const byteIndex = Math.floor(i / 8);
+              const bitIndex = 7 - (i % 8);
+              const bit =
+                (pattern.patternData?.[byteIndex] ?? 0) & (1 << bitIndex);
+              tiles.push(html`
+                <div
+                  style="
+                    background-color: ${bit ? "#000" : "transparent"};
+                    border: 1px solid rgba(0, 0, 0, 0.1);
+                    width: ${cellSize}px;
+                    height: ${cellSize}px;
+                    border-radius: 1px;
+                  "
+                ></div>
+              `);
+            }
+            return tiles;
+          })()}
         </div>
       </div>
     `;
diff --git a/src/client/graphics/layers/TerritoryLayer.ts b/src/client/graphics/layers/TerritoryLayer.ts
index d9d29be56..7235fcc8c 100644
--- a/src/client/graphics/layers/TerritoryLayer.ts
+++ b/src/client/graphics/layers/TerritoryLayer.ts
@@ -305,16 +305,19 @@ export class TerritoryLayer implements Layer {
           tileWidth = 1,
           tileHeight = 1,
           scale = 1,
-          pattern,
+          patternData,
         } = patternConfig;
 
-        const px = Math.floor(x / scale) % tileWidth;
-        const py = Math.floor(y / scale) % tileHeight;
+        const px =
+          ((Math.floor(x / scale) % tileWidth) + tileWidth) % tileWidth;
+        const py =
+          ((Math.floor(y / scale) % tileHeight) + tileHeight) % tileHeight;
 
-        const patternValue = pattern ? pattern[py][px] : 0;
+        const bitIndex = py * tileWidth + px;
+        const byte = patternData?.[Math.floor(bitIndex / 8)] ?? 0;
+        const bit = (byte >> (7 - (bitIndex % 8))) & 1;
 
-        const colorToUse =
-          patternValue === 1 ? baseColor.darken(0.2) : baseColor;
+        const colorToUse = bit ? baseColor.darken(0.2) : baseColor;
         this.paintCell(x, y, colorToUse, 150);
       }
     }