加速・減速機能実装

src/iframe/life-game.js

@@ -3,10 +3,13 @@
 let timer = "stop";
 let timerId = 0;
 let generationFigure = 0;
+let timerTime = 1000;
 
 //変数設定
-let boardSize = 20;
-const CELL_SIZE = 22;
+const defaultBoardSize = 20;
+const defaultCellSize = 22;
+let boardSize = defaultBoardSize;
+let CELL_SIZE = defaultCellSize;
 const BOARD_MIN = 100;
 const BOARD_MAX = 10;
 
@@ -145,7 +148,7 @@ function progressBoard() {
 
 on.play = () => {
   timer = "start";
-  timerId = setInterval(progressBoard, 1000);
+  timerId = setInterval(progressBoard, timerTime);
 };
 
 on.pause = () => {
@@ -161,6 +164,14 @@ on.resize = (newBoardSize) => {
   boardSize = newBoardSize;
 };
 
+on.timer_change = (ms) => {
+  timerTime = ms;
+  if (timer === "start") {
+    clearInterval(timerId);
+    timerId = setInterval(progressBoard, timerTime);
+  }
+};
+
 sizeChangeButton.onclick = () => {
   const newSize = parseInt(sizeInput.value, 10);
   if (isNaN(newSize) || newSize < BOARD_MAX || BOARD_MIN < newSize) {

src/routes/+page.svelte

@@ -24,6 +24,7 @@
   let showEditor = $state(true);
   let preview_iframe: HTMLIFrameElement | undefined = $state();
   let isProgress = $state(false);
+  let intervalMs = 1000;
   let drawerOpen = $state(false);
   let resetModalOpen = $state(false);
   let bottomDrawerOpen = $state(false);
@@ -37,7 +38,7 @@
   });
 
   function sendEvent(event: string, message?: unknown) {
-    preview_iframe?.contentWindow?.postMessage({ type: event, date: message }, "*");
+    preview_iframe?.contentWindow?.postMessage({ type: event, data: message }, "*");
   }
 </script>
 
@@ -188,4 +189,34 @@
   >
     <img class="size-6" src={icons.RightArrow} alt="Right Arrow" />
   </div>
+
+  <button
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap 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)] swap 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)] swap ml-2"
+    onclick={() => {
+      intervalMs = 1000;
+      sendEvent("timer_change", intervalMs);
+    }}
+  >
+    Reset Timer
+  </button>
 </div>