Overwrite-event

src/life-game/event.js

@@ -0,0 +1,10 @@
+const on = {};
+
+let timerId = 0;
+
+window.addEventListener("message", (event) => {
+  const handler = on[event.data.type];
+  if (handler) {
+    handler(event.data);
+  }
+});

src/life-game/life-game.js

@@ -159,6 +159,26 @@ function progressBoard() {
   renderBoard();
 }
 
+//イベント
+
+on.play = () => {
+  timer = "start";
+  timerId = setInterval(progressBoard, 1000);
+};
+
+on.pause = () => {
+  timer = "stop";
+  clearInterval(timerId);
+};
+
+on.load_board = (boardTemplate) => {
+  board = boardTemplate;
+};
+
+on.resize = (newBoardSize) => {
+  boardSize = newBoardSize;
+};
+
 //以下パターンデータ
 //(注)minBoardSizeは、パターンが余裕をもって変形できるために必要なボードのサイズを表し、パターン自体より大きい。
 

src/routes/+page.svelte

@@ -2,23 +2,27 @@
   import * as icons from "$lib/icons/index.ts";
   import lghtml from "../life-game/life-game.html?raw";
   import lgjs from "../life-game/life-game.js?raw";
-  import PlayandPause from "../life-game/play-pause.js?raw";
+  import Event from "../life-game/event.js?raw";
 
   let code = $state(lgjs);
 
   let previewDoc = $derived(
     lghtml.replace(
       /<script src="\.\/life-game\.js"><\/script>/,
       `<script>
+      \n${Event}\n
       \n${lgjs}\n
-      \n${PlayandPause}\n
       <\/script>`,
     ),
   );
 
   let showEditor = $state(true);
   let preview_iframe: HTMLIFrameElement | undefined = $state();
   let isProgress = $state(false);
+
+  function sendEvent(event: any, message?: any) {
+    preview_iframe?.contentWindow?.postMessage({ type: event }, message ? message : "*");
+  }
 </script>
 
 <div class="navbar bg-[#E0E0E0] shadow-sm">
@@ -35,7 +39,8 @@
   <button
     class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-5"
     onclick={() => {
-      preview_iframe?.contentWindow?.postMessage({ type: isProgress ? "pause" : "play" }, "*");
+      const eventName = isProgress ? "pause" : "play";
+      sendEvent(eventName);
       isProgress = !isProgress;
     }}
   >