From 9ec0396db6bafbcd2f7d1a9a2bde29d57bb397f3 Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Tue, 20 May 2025 21:04:48 +0900
Subject: [PATCH] fixed

---
 src/client/TerritoryPatterns.ts              | 16 ++++
 src/client/TerritoryPatternsModal.ts         | 97 ++++++++++----------
 src/client/graphics/layers/TerritoryLayer.ts |  4 +-
 3 files changed, 65 insertions(+), 52 deletions(-)
 create mode 100644 src/client/TerritoryPatterns.ts

diff --git a/src/client/TerritoryPatterns.ts b/src/client/TerritoryPatterns.ts
new file mode 100644
index 000000000..65ff0499e
--- /dev/null
+++ b/src/client/TerritoryPatterns.ts
@@ -0,0 +1,16 @@
+import { z } from "zod";
+import rawTerritoryPatterns from "../../resources/territory_patterns.json";
+
+const PatternSchema = z.object({
+  tileWidth: z.number(),
+  tileHeight: z.number(),
+  scale: z.number(),
+  pattern: z.array(z.array(z.number())),
+});
+
+const TerritoryPatternsSchema = z.object({
+  patterns: z.record(PatternSchema),
+});
+
+export const territoryPatterns =
+  TerritoryPatternsSchema.parse(rawTerritoryPatterns);
diff --git a/src/client/TerritoryPatternsModal.ts b/src/client/TerritoryPatternsModal.ts
index 38ea5eea9..455da3612 100644
--- a/src/client/TerritoryPatternsModal.ts
+++ b/src/client/TerritoryPatternsModal.ts
@@ -1,8 +1,8 @@
 import { LitElement, html, render } from "lit";
 import { customElement, query, state } from "lit/decorators.js";
-import territory_patterns from "../../resources/territory_patterns.json";
 import "./components/Difficulties";
 import "./components/Maps";
+import { territoryPatterns } from "./TerritoryPatterns";
 import { TerritoryPatternStorage } from "./Utils";
 
 @customElement("territory-patterns-modal")
@@ -78,29 +78,27 @@ export class territoryPatternsModal extends LitElement {
           class="flex flex-wrap gap-4 p-2"
           style="justify-content: center; align-items: flex-start;"
         >
-          ${Object.entries(territory_patterns.patterns).map(
-            ([key, pattern]) => {
-              const isLocked = this.isPatternLocked(key);
-              const reason = this.lockedReasons[key] || "Locked";
+          ${Object.entries(territoryPatterns.patterns).map(([key, pattern]) => {
+            const isLocked = this.isPatternLocked(key);
+            const reason = this.lockedReasons[key] || "Locked";
 
-              return html`
-                <button
-                  class="border p-2 rounded-lg shadow text-black dark:text-white text-left
+            return html`
+              <button
+                class="border p-2 rounded-lg shadow text-black dark:text-white text-left
                   ${this.selectedPattern === key
-                    ? "bg-blue-500 text-white"
-                    : "bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"}
+                  ? "bg-blue-500 text-white"
+                  : "bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"}
                   ${isLocked ? "opacity-50 cursor-not-allowed" : ""}"
-                  style="flex: 0 1 calc(25% - 1rem); max-width: calc(25% - 1rem);"
-                  @click=${() => !isLocked && this.selectPattern(key)}
-                  @mouseenter=${(e: MouseEvent) =>
-                    this.handleMouseEnter(key, e)}
-                  @mousemove=${(e: MouseEvent) => this.handleMouseMove(e)}
-                  @mouseleave=${() => this.handleMouseLeave()}
-                >
-                  <div class="text-sm font-bold mb-1">${key}</div>
-                  <div
-                    class="preview-container"
-                    style="
+                style="flex: 0 1 calc(25% - 1rem); max-width: calc(25% - 1rem);"
+                @click=${() => !isLocked && this.selectPattern(key)}
+                @mouseenter=${(e: MouseEvent) => this.handleMouseEnter(key, e)}
+                @mousemove=${(e: MouseEvent) => this.handleMouseMove(e)}
+                @mouseleave=${() => this.handleMouseLeave()}
+              >
+                <div class="text-sm font-bold mb-1">${key}</div>
+                <div
+                  class="preview-container"
+                  style="
                       width: 100%;
                       aspect-ratio: 1;
                       display: flex;
@@ -110,17 +108,17 @@ export class territoryPatternsModal extends LitElement {
                       border-radius: 8px;
                       overflow: hidden;
                     "
-                  >
-                    ${(() => {
-                      const cellCountX = pattern.tileWidth;
-                      const cellCountY = pattern.tileHeight;
-                      const cellSize = Math.floor(
-                        this.buttonWidth / Math.max(cellCountX, cellCountY),
-                      );
+                >
+                  ${(() => {
+                    const cellCountX = pattern.tileWidth;
+                    const cellCountY = pattern.tileHeight;
+                    const cellSize = Math.floor(
+                      this.buttonWidth / Math.max(cellCountX, cellCountY),
+                    );
 
-                      return html`
-                        <div
-                          style="
+                    return html`
+                      <div
+                        style="
                             display: grid;
                             grid-template-columns: repeat(${cellCountX}, ${cellSize}px);
                             grid-template-rows: repeat(${cellCountY}, ${cellSize}px);
@@ -128,30 +126,29 @@ export class territoryPatternsModal extends LitElement {
                             padding: 2px;
                             border-radius: 4px;
                           "
-                        >
-                          ${pattern.pattern.flat().map(
-                            (cell) => html`
-                              <div
-                                style="
+                      >
+                        ${pattern.pattern.flat().map(
+                          (cell) => html`
+                            <div
+                              style="
                                   background-color: ${cell === 1
-                                  ? "#000"
-                                  : "transparent"};
+                                ? "#000"
+                                : "transparent"};
                                   border: 1px solid rgba(0, 0, 0, 0.1);
                                   width: ${cellSize}px;
                                   height: ${cellSize}px;
                                   border-radius: 1px;
                                 "
-                              ></div>
-                            `,
-                          )}
-                        </div>
-                      `;
-                    })()}
-                  </div>
-                </button>
-              `;
-            },
-          )}
+                            ></div>
+                          `,
+                        )}
+                      </div>
+                    `;
+                  })()}
+                </div>
+              </button>
+            `;
+          })}
         </div>
       </o-modal>
     `;
@@ -175,7 +172,7 @@ export class territoryPatternsModal extends LitElement {
   private updatePreview() {
     if (!this.previewButton || !this.selectedPattern) return;
 
-    const pattern = territory_patterns.patterns[this.selectedPattern];
+    const pattern = territoryPatterns.patterns[this.selectedPattern];
     if (!pattern) return;
 
     const fixedHeight = 48;
diff --git a/src/client/graphics/layers/TerritoryLayer.ts b/src/client/graphics/layers/TerritoryLayer.ts
index c394beffe..6cec1cf0d 100644
--- a/src/client/graphics/layers/TerritoryLayer.ts
+++ b/src/client/graphics/layers/TerritoryLayer.ts
@@ -1,6 +1,5 @@
 import { PriorityQueue } from "@datastructures-js/priority-queue";
 import { Colord } from "colord";
-import territory_patterns from "../../../../resources/territory_patterns.json";
 import { Theme } from "../../../core/configuration/Config";
 import { EventBus } from "../../../core/EventBus";
 import { Cell, PlayerType, UnitType } from "../../../core/game/Game";
@@ -9,6 +8,7 @@ import { GameUpdateType } from "../../../core/game/GameUpdates";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { PseudoRandom } from "../../../core/PseudoRandom";
 import { AlternateViewEvent, DragEvent } from "../../InputHandler";
+import { territoryPatterns } from "../../TerritoryPatterns";
 import { Layer } from "./Layer";
 
 export class TerritoryLayer implements Layer {
@@ -299,7 +299,7 @@ export class TerritoryLayer implements Layer {
         const x = this.game.x(tile);
         const y = this.game.y(tile);
         const baseColor = this.theme.territoryColor(owner);
-        const patternConfig = territory_patterns.patterns[patternName];
+        const patternConfig = territoryPatterns.patterns[patternName];
 
         const { tileWidth, tileHeight, scale, pattern } = patternConfig;