Merge pull request #10 from ut-code/separate_user-doc

aster-void · web-flow · commit 0926872a9bd5 · 2025-10-23T11:28:28.000+09:00
Separate user doc
diff --git a/src/life-game/LifeGameFunctions/PlayAndPause.js b/src/life-game/LifeGameFunctions/PlayAndPause.js
@@ -1,5 +1,11 @@
+let timerId = 0;
+
 window.addEventListener("message", (event) => {
-  if (event.data.type === "play-pause") {
-    console.log("Play/Pause toggled");
+  if (event.data.type === "play") {
+    timer = "start";
+    timerId = setInterval(progressBoard, 1000);
+  } else if (event.data.type === "pause") {
+    timer = "stop";
+    clearInterval(timerId);
   }
 });
diff --git a/src/life-game/life-game.html b/src/life-game/life-game.html
@@ -6,17 +6,14 @@
   <body>
     <h1>
       <div id="generation">第0世代</div>
-      <div id="timer">停止中</div>
     </h1>
     ボードのサイズ<span id="sizeLabel"></span>:
     <input type="number" id="sizeInput" style="width: 50px" />
     <button id="sizeChangeButton">サイズ変更</button>
 
     <table id="game-board" style="border-collapse: collapse"></table>
-    <button id="startbutton">START</button>　　　　　　<button id="stopbutton">STOP</button
-    >　　　　　　<button id="randombutton">RANDOM</button>　　　　　　<button id="resetbutton">
-      RESET
-    </button>
+    <button id="randombutton">RANDOM</button>　　　　　　
+    <button id="resetbutton">RESET</button>
     <div id="pattern-button-container"></div>
     <script src="./life-game.js"></script>
   </body>
diff --git a/src/life-game/life-game.js b/src/life-game/life-game.js
@@ -1,5 +1,5 @@
 "use strict";
-let timerId = 0;
+
 let timer = "stop";
 let generationFigure = 0;
 
@@ -40,10 +40,7 @@ function deadCellJudge(around) {
 }
 
 const generation = document.getElementById("generation"); //世代を表す文（第+数字+世代)
-const isProgress = document.getElementById("timer"); //進行中かを表す文(再生中/停止中)
 //BUTTON
-const startButton = document.getElementById("startbutton");
-const stopButton = document.getElementById("stopbutton");
 const randomButton = document.getElementById("randombutton");
 const resetButton = document.getElementById("resetbutton");
 const sizeChangeButton = document.getElementById("sizeChangeButton");
@@ -88,7 +85,9 @@ function renderBoard() {
     table.appendChild(tr);
   }
 }
+
 renderBoard();
+progressBoard();
 
 randomButton.onclick = () => {
   //白黒ランダムにBoardを変更
@@ -108,35 +107,12 @@ resetButton.onclick = () => {
   stop();
 };
 
-startButton.onclick = start;
-stopButton.onclick = stop;
-
-function timerChange(sentence) {
-  //現在再生中かを表すtimer変数を変更し、文章も変更
-  timer = sentence;
-  isProgress.textContent = timer === "start" ? "再生中" : "停止中";
-}
-
 function generationChange(num) {
   //現在の世代を表すgenerationFigureを変更し、文章も変更
   generationFigure = num;
   generation.textContent = "第" + generationFigure + "世代";
 }
 
-function start() {
-  if (timer === "stop") {
-    timerId = setInterval(progressBoard, 1000);
-    timerChange("start");
-  }
-}
-
-function stop() {
-  if (timer === "start") {
-    clearInterval(timerId);
-    timerChange("stop");
-  }
-}
-
 function progressBoard() {
   const newBoard = structuredClone(board);
   for (let i = 0; i < boardSize; i++) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,7 +4,9 @@
   import lgjs from "../life-game/life-game.js?raw";
   import PlayandPause from "../life-game/LifeGameFunctions/PlayAndPause.js?raw";
 
-  let code = $state(
+  let code = $state(lgjs);
+
+  let previewDoc = $derived(
     lghtml.replace(
       /<script src="\.\/life-game\.js"><\/script>/,
       `<script>
@@ -14,10 +16,9 @@
     ),
   );
 
-  let previewDoc = $derived(code);
   let showEditor = $state(true);
   let preview_iframe: HTMLIFrameElement | undefined = $state();
-  let PlayAndPause = $state(true);
+  let isProgress = $state(false);
 </script>
 
 <div class="navbar bg-[#E0E0E0] shadow-sm">
@@ -34,13 +35,13 @@
   <button
     class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-5"
     onclick={() => {
-      PlayAndPause = !PlayAndPause;
-      preview_iframe?.contentWindow?.postMessage({ type: "play-pause" }, "*");
+      preview_iframe?.contentWindow?.postMessage({ type: isProgress ? "pause" : "play" }, "*");
+      isProgress = !isProgress;
     }}
   >
-    <input type="checkbox" bind:checked={PlayAndPause} />
-    <img class="size-6 swap-on" src={icons.Play} alt="Play" />
-    <img class="size-6 swap-off" src={icons.Pause} alt="Pause" />
+    <input type="checkbox" bind:checked={isProgress} />
+    <img class="size-6 swap-on" src={icons.Pause} alt="Pause" />
+    <img class="size-6 swap-off" src={icons.Play} alt="Play" />
   </button>
 
   <div class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-5">
