refactor: setRLE

index.html

@@ -32,9 +32,17 @@ <h2>Input</h2>
             ></label
           >
           <br />
-          <textarea id="inputRLE" rows="5" cols="40"></textarea>
+          <textarea
+            id="inputRLE"
+            rows="5"
+            cols="40"
+            placeholder="#N Glider
+x = 3, y = 3, rule = B3/S23
+bob$2bo$3o!"
+          ></textarea>
           <br />
           <button type="button" class="btn" id="readRLE">Read RLE</button>
+          <p id="rleError"></p>
         </section>
 
         <button type="button" class="btn" id="closeSettings">Close</button>

src/main.ts

@@ -4,7 +4,7 @@ import { Engine, Vector3 } from "babylonjs";
 import { BitWorld } from "@ca-ts/algo/bit";
 import { setupArcRotateCamera } from "./camera";
 import { createTemplateCell } from "./cell";
-import { parseRLE } from "@ca-ts/rle";
+import { setRLE } from "./setRLE";
 
 const WORLD_SIZE = 32 * 2;
 let historySize = 16;
@@ -148,25 +148,16 @@ configButton.addEventListener("click", () => {
 });
 
 const readRLE = document.getElementById("readRLE") as HTMLElement;
+const rleErrorMessage = document.getElementById("rleError") as HTMLElement;
+const inputRLE = document.getElementById("inputRLE") as HTMLTextAreaElement;
 readRLE.addEventListener("click", () => {
-  const inputRLE = document.getElementById("inputRLE") as HTMLTextAreaElement;
-  const data = parseRLE(inputRLE.value);
   clearCell();
-
-  const centerX =
-    Math.floor(bitWorld.getWidth() / 2) -
-    Math.floor((data.size?.width ?? 0) / 2);
-  const centerY =
-    Math.floor(bitWorld.getHeight() / 2) -
-    Math.floor((data.size?.height ?? 0) / 2);
-  for (const {
-    position: { x, y },
-    state,
-  } of data.cells) {
-    if (state === 1) {
-      bitWorld.set(x + centerX, y + centerY);
-    }
+  rleErrorMessage.textContent = null;
+  try {
+    setRLE(bitWorld, inputRLE.value);
+  } catch (error) {
+    rleErrorMessage.textContent = "Invalid RLE or oversized";
+    throw error;
   }
-
   settingsDialog.close();
 });

src/setRLE.ts

@@ -0,0 +1,20 @@
+import type { BitWorld } from "@ca-ts/algo/bit";
+import { parseRLE } from "@ca-ts/rle";
+
+export function setRLE(bitWorld: BitWorld, sourceRLE: string) {
+  const data = parseRLE(sourceRLE);
+
+  const width = data.size?.width ?? 0;
+  const height = data.size?.height ?? 0;
+
+  const centerX = Math.floor(bitWorld.getWidth() / 2) - Math.floor(width / 2);
+  const centerY = Math.floor(bitWorld.getHeight() / 2) - Math.floor(height / 2);
+  for (const {
+    position: { x, y },
+    state,
+  } of data.cells) {
+    if (state === 1) {
+      bitWorld.set(x + centerX, y + centerY);
+    }
+  }
+}

src/style.css

@@ -82,3 +82,7 @@ dialog button.btn:focus {
   outline: none; /* デフォルトのアウトラインを消す */
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); /* フォーカス時のシャドウ */
 }
+
+#rleError {
+  color: #dc2626; /* red-600 */
+}