From 50e6b927a6831977ac4dcf1ca5d050a489d03593 Mon Sep 17 00:00:00 2001
From: kg0816 <211191696+kg0816@users.noreply.github.com>
Date: Sun, 9 Nov 2025 11:03:38 +0900
Subject: [PATCH 1/5] delete size change button

---
 src/iframe/life-game.js | 13 +------------
 src/routes/+page.svelte | 17 -----------------
 2 files changed, 1 insertion(+), 29 deletions(-)

diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 1250aec..e66e4b6 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -157,16 +157,6 @@ on.boardrandom = () => {
   on.pause();
 };
 
-on.sizechange = (newSizenum) => {
-  const newSize = parseInt(newSizenum, 10);
-  boardSize = newSize;
-  CELL_SIZE = Math.floor(defaultCellSize * (defaultBoardSize / newSize));
-  board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
-  renderBoard();
-  generationChange(0);
-  on.pause();
-};
-
 on.timer_change = (ms) => {
   timerTime = ms;
   if (timer === "start") {
@@ -181,12 +171,11 @@ on.stateupdate = () => {
       type: "stateupdate",
       data: {
         generationFigure: generationFigure,
-        boardSize: boardSize,
       },
     },
     "*",
   );
-  console.log("generationFigure:", generationFigure, "boardSize:", boardSize);
+  console.log("generationFigure:", generationFigure);
 };
 
 on.sizechange(boardSize);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b78a836..b47eee4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -213,23 +213,6 @@
     第 {generationFigure} 世代
   </div>
 
-  <p class="ml-10 text-black">ボードのサイズ(10~100):</p>
-  <input type="number" bind:value={sizeInputValue} class="w-10 text-black bg-white ml-2" />
-
-  <button
-    class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black ml-2"
-    onclick={() => {
-      isProgress = false;
-      if (isNaN(sizeInputValue) || sizeInputValue < 10 || sizeInputValue > 100) {
-        alert("サイズは10から100の間で指定してください。");
-        return;
-      }
-      sendEvent("sizechange", sizeInputValue.toString());
-    }}
-  >
-    Change
-  </button>
-
   <div
     class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap fixed left-1/2 !-translate-x-1/2 -ml-15 bottom-1"
   >

From ab0892e2306dac315ac3b0ff88f9583df337af43 Mon Sep 17 00:00:00 2001
From: kg0816 <211191696+kg0816@users.noreply.github.com>
Date: Sun, 9 Nov 2025 11:22:50 +0900
Subject: [PATCH 2/5] fix place template function

---
 src/iframe/life-game.js      |  14 +++--
 src/iframe/place_template.js |  37 -------------
 src/routes/+page.svelte      | 100 +++++++++++++++++++++--------------
 3 files changed, 71 insertions(+), 80 deletions(-)
 delete mode 100644 src/iframe/place_template.js

diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index e66e4b6..80b11b7 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -165,17 +165,25 @@ on.timer_change = (ms) => {
   }
 };
 
-on.stateupdate = () => {
+on.requestSync = () => {
   window.parent.postMessage(
     {
-      type: "stateupdate",
+      type: "Sync",
       data: {
         generationFigure: generationFigure,
+        boardSize: boardSize,
       },
     },
     "*",
   );
-  console.log("generationFigure:", generationFigure);
+  console.log("generationFigure:", generationFigure, "boardSize:", boardSize);
+};
+
+on.placetemplate = (newBoard) => {
+  board = newBoard;
+  renderBoard();
+  generationChange(0);
+  stop();
 };
 
 on.sizechange(boardSize);
diff --git a/src/iframe/place_template.js b/src/iframe/place_template.js
deleted file mode 100644
index a4f016f..0000000
--- a/src/iframe/place_template.js
+++ /dev/null
@@ -1,37 +0,0 @@
-window.addEventListener("message", (event) => {
-  if (event.data.type === "setPattern") {
-    const newBoard = Array.from({ length: boardSize }, () =>
-      Array.from({ length: boardSize }, () => false),
-    );
-    const patternData = event.data.pattern;
-
-    if (boardSize < (patternData.minBoardSize || 0)) {
-      window.parent.postMessage(
-        {
-          type: "patternError",
-          message: `このパターンには ${patternData.minBoardSize}x${patternData.minBoardSize} 以上の盤面が必要です`,
-        },
-        "*",
-      );
-      return;
-    } else {
-      const patternShape = patternData.shape;
-      const patternHeight = patternShape.length;
-      const patternWidth = patternShape[0].length;
-      //↓パターンがボードの中央に来るよう、パターンの右上のセルの位置(startrow,startCol)を調整
-      const startRow = Math.floor((boardSize - patternHeight) / 2);
-      const startCol = Math.floor((boardSize - patternWidth) / 2);
-      for (let r = 0; r < patternHeight; r++) {
-        for (let c = 0; c < patternWidth; c++) {
-          const boardRow = startRow + r;
-          const boardCol = startCol + c;
-          newBoard[boardRow][boardCol] = patternShape[r][c] === 1;
-        }
-      }
-      board = newBoard;
-      renderBoard();
-      generationChange(0);
-      stop();
-    }
-  }
-});
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b47eee4..4d3ffb9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import lifeGameHTML from "@/iframe/life-game.html?raw";
   import lifeGameJS from "@/iframe/life-game.js?raw";
-  import placetemplate from "@/iframe/place_template.js?raw";
   import event from "@/iframe/event.js?raw";
 
   import * as icons from "$lib/icons/index.ts";
@@ -18,7 +17,6 @@
       `<script>
       \n${event}\n
       \n${appliedCode}\n
-      \n${placetemplate}\n
       <\/script>`,
     ),
   );
@@ -31,19 +29,16 @@
 
   let intervalMs = $state(1000);
   let generationFigure = $state(0);
-  let sizeInputValue = $state(20);
+  let sizeValue = $state(20);
 
   onMount(() => {
     const handleMessage = (event: MessageEvent) => {
-      if (event.data.type === "patternError") {
-        alert(event.data.message);
-      }
       if (event.data.type === "generation_change") {
         generationFigure = event.data.data;
       }
-      if (event.data.type === "stateupdate") {
+      if (event.data.type === "Sync") {
         generationFigure = event.data.data.generationFigure;
-        sizeInputValue = event.data.data.boardSize;
+        sizeValue = event.data.data.boardSize;
       }
     };
 
@@ -127,11 +122,35 @@
           <button
             class="btn overflow-hidden p-0 w-24 h-24"
             onclick={() => {
-              preview_iframe?.contentWindow?.postMessage(
-                { type: "setPattern", pattern: patterns[patternName] },
-                "*",
+              sendEvent("requestSync");
+
+              const newBoard = Array.from({ length: sizeValue }, () =>
+                Array.from({ length: sizeValue }, () => false),
               );
+              const patternData = patterns[patternName];
+              const patternShape = patternData.shape;
+              const patternHeight = patternShape.length;
+              const patternWidth = patternShape[0].length;
+
+              if (sizeValue < (patternData.minBoardSize || 0)) {
+                alert(
+                  `このパターンには ${patternData.minBoardSize}x${patternData.minBoardSize} 以上の盤面が必要です`,
+                );
+                return;
+              }
+              // パターンがボードの中央に来るよう、パターンの左上のセルの位置(startRow, startCol)を調整
+              const startRow = Math.floor((sizeValue - patternHeight) / 2);
+              const startCol = Math.floor((sizeValue - patternWidth) / 2);
+
+              for (let r = 0; r < patternHeight; r++) {
+                for (let c = 0; c < patternWidth; c++) {
+                  const boardRow = startRow + r;
+                  const boardCol = startCol + c;
+                  newBoard[boardRow][boardCol] = patternShape[r][c] === 1;
+                }
+              }
               bottomDrawerOpen = false;
+              sendEvent("placetemplate", newBoard);
             }}
           >
             <img
@@ -213,6 +232,36 @@
     第 {generationFigure} 世代
   </div>
 
+  <button
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
+    onclick={() => {
+      intervalMs = intervalMs * 2;
+      sendEvent("timer_change", intervalMs);
+    }}
+  >
+    x0.5
+  </button>
+
+  <button
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
+    onclick={() => {
+      intervalMs = 1000;
+      sendEvent("timer_change", intervalMs);
+    }}
+  >
+    x1
+  </button>
+
+  <button
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
+    onclick={() => {
+      intervalMs = intervalMs / 2;
+      sendEvent("timer_change", intervalMs);
+    }}
+  >
+    x2
+  </button>
+
   <div
     class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap fixed left-1/2 !-translate-x-1/2 -ml-15 bottom-1"
   >
@@ -266,33 +315,4 @@
   >
     Apply Code
   </button>
-  <button
-    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
-    onclick={() => {
-      intervalMs = intervalMs / 2;
-      sendEvent("timer_change", intervalMs);
-    }}
-  >
-    x2
-  </button>
-
-  <button
-    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
-    onclick={() => {
-      intervalMs = intervalMs * 2;
-      sendEvent("timer_change", intervalMs);
-    }}
-  >
-    x0.5
-  </button>
-
-  <button
-    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
-    onclick={() => {
-      intervalMs = 1000;
-      sendEvent("timer_change", intervalMs);
-    }}
-  >
-    Reset Timer
-  </button>
 </div>

From 21cb2142162967323a43734583bafd888374fded Mon Sep 17 00:00:00 2001
From: kg0816 <211191696+kg0816@users.noreply.github.com>
Date: Sun, 9 Nov 2025 11:41:41 +0900
Subject: [PATCH 3/5] fix speed func design

---
 src/iframe/life-game.js      | 10 ++++++++++
 src/lib/icons/accelerate.svg |  5 +++++
 src/lib/icons/decelerate.svg |  3 +++
 src/lib/icons/index.ts       |  2 ++
 src/routes/+page.svelte      | 18 +++++++++++-------
 5 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/icons/accelerate.svg
 create mode 100644 src/lib/icons/decelerate.svg

diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 80b11b7..3f8e436 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -139,6 +139,16 @@ on.resize = (newBoardSize) => {
   boardSize = newBoardSize;
 };
 
+on.sizechange = (newSizenum) => {
+  const newSize = parseInt(newSizenum, 10);
+  boardSize = newSize;
+  CELL_SIZE = Math.floor(defaultCellSize * (defaultBoardSize / newSize));
+  board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
+  renderBoard();
+  generationChange(0);
+  on.pause();
+};
+
 on.boardreset = () => {
   //すべて白にBoardを変更
   board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
diff --git a/src/lib/icons/accelerate.svg b/src/lib/icons/accelerate.svg
new file mode 100644
index 0000000..4547819
--- /dev/null
+++ b/src/lib/icons/accelerate.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <g transform="rotate(180 12 12)">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061A1.125 1.125 0 0 1 21 8.689v8.122ZM11.25 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061a1.125 1.125 0 0 1 1.683.977v8.122Z" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/lib/icons/decelerate.svg b/src/lib/icons/decelerate.svg
new file mode 100644
index 0000000..b1e01f9
--- /dev/null
+++ b/src/lib/icons/decelerate.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061A1.125 1.125 0 0 1 21 8.689v8.122ZM11.25 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061a1.125 1.125 0 0 1 1.683.977v8.122Z" />
+</svg>
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index 9041ea1..97d6e48 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -7,3 +7,5 @@ export { default as utcode } from "./utcode.svg";
 export { default as bars_3 } from "./bars_3.svg";
 export { default as language } from "./language.svg";
 export { default as reset } from "./reset.svg";
+export { default as accelerate } from "./accelerate.svg";
+export { default as decelerate } from "./decelerate.svg";
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4d3ffb9..e25874a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -233,13 +233,13 @@
   </div>
 
   <button
-    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-20"
     onclick={() => {
       intervalMs = intervalMs * 2;
       sendEvent("timer_change", intervalMs);
     }}
   >
-    x0.5
+    <img class="size-6" src={icons.decelerate} alt="decelerate" />
   </button>
 
   <button
@@ -259,9 +259,13 @@
       sendEvent("timer_change", intervalMs);
     }}
   >
-    x2
+    <img class="size-6" src={icons.accelerate} alt="accelerate" />
   </button>
 
+  <div class="font-bold text-black ml-5">
+    現在の速度: x{1000 / intervalMs}
+  </div>
+
   <div
     class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap fixed left-1/2 !-translate-x-1/2 -ml-15 bottom-1"
   >
@@ -288,17 +292,17 @@
   </div>
 
   <button
-    class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-100 text-black"
+    class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black fixed right-114 bottom-1"
     onclick={() => {
       isProgress = false;
       sendEvent("boardreset");
     }}
   >
-    Reset
+    Board Reset
   </button>
 
   <button
-    class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
+    class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black fixed right-90 bottom-1"
     onclick={() => {
       isProgress = false;
       sendEvent("boardrandom");
@@ -308,7 +312,7 @@
   </button>
 
   <button
-    class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-5 text-black"
+    class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-5 text-black fixed right-20 bottom-1"
     onclick={() => {
       appliedCode = editingcode;
     }}

From cd0a66a3c2b7c252a26fb51f76044465b165699c Mon Sep 17 00:00:00 2001
From: kg0816 <211191696+kg0816@users.noreply.github.com>
Date: Mon, 10 Nov 2025 10:54:17 +0900
Subject: [PATCH 4/5] fix event dependencies

---
 src/iframe/life-game.js | 16 +++++++++++-----
 src/routes/+page.svelte |  2 +-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 3f8e436..a585e4b 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -119,6 +119,11 @@ function progressBoard() {
   renderBoard();
 }
 
+const resetTimer = () => {
+  timer = "stop";
+  clearInterval(timerId);
+};
+
 //イベント
 
 on.play = () => {
@@ -127,8 +132,7 @@ on.play = () => {
 };
 
 on.pause = () => {
-  timer = "stop";
-  clearInterval(timerId);
+  resetTimer();
 };
 
 on.load_board = (boardTemplate) => {
@@ -146,7 +150,7 @@ on.sizechange = (newSizenum) => {
   board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
   renderBoard();
   generationChange(0);
-  on.pause();
+  resetTimer();
 };
 
 on.boardreset = () => {
@@ -154,7 +158,7 @@ on.boardreset = () => {
   board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
   renderBoard();
   generationChange(0);
-  on.pause();
+  resetTimer();
 };
 
 on.boardrandom = () => {
@@ -164,7 +168,7 @@ on.boardrandom = () => {
   );
   renderBoard();
   generationChange(0);
-  on.pause();
+  resetTimer();
 };
 
 on.timer_change = (ms) => {
@@ -193,6 +197,7 @@ on.placetemplate = (newBoard) => {
   board = newBoard;
   renderBoard();
   generationChange(0);
+  resetTimer();
   stop();
 };
 
@@ -211,5 +216,6 @@ on.load_board = (loadedBoard) => {
   board = loadedBoard;
   renderBoard();
   generationChange(0);
+  resetTimer();
   stop();
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e25874a..f2c6f30 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -298,7 +298,7 @@
       sendEvent("boardreset");
     }}
   >
-    Board Reset
+    Reset board
   </button>
 
   <button

From 630de5fce72a28ce0a2816370cc6c1c5f8815b49 Mon Sep 17 00:00:00 2001
From: kg0816 <211191696+kg0816@users.noreply.github.com>
Date: Mon, 10 Nov 2025 13:09:48 +0900
Subject: [PATCH 5/5] fix resetTimer

---
 src/iframe/life-game.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 6e14bb0..e7bf8b3 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -117,8 +117,10 @@ function progressBoard() {
 }
 
 const resetTimer = () => {
-  timer = "stop";
-  clearInterval(timerId);
+  if (timer !== "stop") {
+    timer = "stop";
+    clearInterval(timerId);
+  }
 };
 
 //イベント