From edc937986ea07390303727103f2cd841e1c91a83 Mon Sep 17 00:00:00 2001 From: kg0816 <211191696+kg0816@users.noreply.github.com> Date: Sun, 2 Nov 2025 16:04:22 +0900 Subject: [PATCH 1/9] separate generation from iframe --- src/life-game/life-game.html | 3 --- src/life-game/life-game.js | 8 +++++++- src/routes/+page.svelte | 13 +++++++++++-- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/life-game/life-game.html b/src/life-game/life-game.html index c0099b7..6009788 100644 --- a/src/life-game/life-game.html +++ b/src/life-game/life-game.html @@ -4,9 +4,6 @@ Title -

-
第0世代
-

ボードのサイズ: diff --git a/src/life-game/life-game.js b/src/life-game/life-game.js index 6751695..6d9097c 100644 --- a/src/life-game/life-game.js +++ b/src/life-game/life-game.js @@ -113,7 +113,13 @@ resetButton.onclick = () => { function generationChange(num) { //現在の世代を表すgenerationFigureを変更し、文章も変更 generationFigure = num; - generation.textContent = "第" + generationFigure + "世代"; + window.parent.postMessage( + { + type: "generation_change", + data: generationFigure, + }, + "*", + ); } function progressBoard() { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ab74c26..aa6e20b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -28,16 +28,21 @@ let resetModalOpen = $state(false); let bottomDrawerOpen = $state(false); + let generationFigure = $state(0); + onMount(() => { window.addEventListener("message", (event) => { if (event.data.type === "patternError") { alert(event.data.message); } + if (event.data.type === "generation_change") { + generationFigure = event.data.data; + } }); }); function sendEvent(event: string, message?: unknown) { - preview_iframe?.contentWindow?.postMessage({ type: event, date: message }, "*"); + preview_iframe?.contentWindow?.postMessage({ type: event, data: message }, "*"); } @@ -156,7 +161,7 @@ -
+
+
+ 第 {generationFigure} 世代 +
+
From ed2eca2055f773c67961201793fc13fe9062baf1 Mon Sep 17 00:00:00 2001 From: kg0816 <211191696+kg0816@users.noreply.github.com> Date: Sun, 2 Nov 2025 16:24:18 +0900 Subject: [PATCH 2/9] separate reset random button --- src/life-game/life-game.html | 3 --- src/life-game/life-game.js | 36 ++++++++++++++++++------------------ src/routes/+page.svelte | 18 ++++++++++++++++++ 3 files changed, 36 insertions(+), 21 deletions(-) diff --git a/src/life-game/life-game.html b/src/life-game/life-game.html index 6009788..9fb1456 100644 --- a/src/life-game/life-game.html +++ b/src/life-game/life-game.html @@ -9,9 +9,6 @@
- 　　　　　　 - -
diff --git a/src/life-game/life-game.js b/src/life-game/life-game.js index 6d9097c..4cbdecf 100644 --- a/src/life-game/life-game.js +++ b/src/life-game/life-game.js @@ -92,24 +92,6 @@ function renderBoard() { renderBoard(); progressBoard(); -randomButton.onclick = () => { - //白黒ランダムにBoardを変更 - board = Array.from({ length: boardSize }, () => - Array.from({ length: boardSize }, () => Math.random() > 0.5), - ); - renderBoard(); - generationChange(0); - stop(); -}; - -resetButton.onclick = () => { - //すべて白にBoardを変更 - board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false)); - renderBoard(); - generationChange(0); - stop(); -}; - function generationChange(num) { //現在の世代を表すgenerationFigureを変更し、文章も変更 generationFigure = num; @@ -188,6 +170,24 @@ on.resize = (newBoardSize) => { boardSize = newBoardSize; }; +on.boardreset = () => { + //すべて白にBoardを変更 + board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false)); + renderBoard(); + generationChange(0); + stop(); +}; + +on.boardrandom = () => { + //白黒ランダムにBoardを変更 + board = Array.from({ length: boardSize }, () => + Array.from({ length: boardSize }, () => Math.random() > 0.5), + ); + renderBoard(); + generationChange(0); + stop(); +}; + sizeChangeButton.onclick = () => { const newSize = parseInt(sizeInput.value, 10); if (isNaN(newSize) || newSize < boardSizeMin || boardSizeMax < newSize) { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index aa6e20b..af54c73 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -173,6 +173,24 @@ 第 {generationFigure} 世代
+ + + +
From 53623ccceb804000c86d2d4ef14ab1ae1f312194 Mon Sep 17 00:00:00 2001 From: kg0816 <211191696+kg0816@users.noreply.github.com> Date: Tue, 4 Nov 2025 11:54:12 +0900 Subject: [PATCH 3/9] separate boardsize --- src/life-game/life-game.html | 4 --- src/life-game/life-game.js | 44 ++++++++++++++---------------- src/routes/+page.svelte | 53 ++++++++++++++++++++++++++---------- 3 files changed, 59 insertions(+), 42 deletions(-) diff --git a/src/life-game/life-game.html b/src/life-game/life-game.html index 9fb1456..4e9c1b8 100644 --- a/src/life-game/life-game.html +++ b/src/life-game/life-game.html @@ -4,10 +4,6 @@ Title - ボードのサイズ: - - -
diff --git a/src/life-game/life-game.js b/src/life-game/life-game.js index 4cbdecf..13a996c 100644 --- a/src/life-game/life-game.js +++ b/src/life-game/life-game.js @@ -6,7 +6,7 @@ let generationFigure = 0; //定数 const defaultBoardSize = 20; -const defaultCellSize = 22; //px +const defaultCellSize = 30; //px const boardSizeMax = 100; const boardSizeMin = 10; const defaultLiveAroundMax = 3; @@ -40,21 +40,6 @@ function deadCellJudge(around) { } } -const generation = document.getElementById("generation"); //世代を表す文（第+数字+世代) -//BUTTON -const randomButton = document.getElementById("randombutton"); -const resetButton = document.getElementById("resetbutton"); -const sizeChangeButton = document.getElementById("sizeChangeButton"); -//サイズ入力欄 -const sizeInput = document.getElementById("sizeInput"); -const sizeLabel = document.getElementById("sizeLabel"); - -// サイズ入力欄の設定 -sizeInput.min = boardSizeMin; -sizeInput.max = boardSizeMax; -sizeInput.value = defaultBoardSize; -sizeLabel.textContent = `(${boardSizeMin}〜${boardSizeMax})`; - //Boardの初期化 let board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false)); const table = document.getElementById("game-board"); @@ -160,6 +145,12 @@ on.play = () => { on.pause = () => { timer = "stop"; clearInterval(timerId); + window.parent.postMessage( + { + type: "pause", + }, + "*", + ); }; on.load_board = (boardTemplate) => { @@ -175,7 +166,7 @@ on.boardreset = () => { board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false)); renderBoard(); generationChange(0); - stop(); + on.pause(); }; on.boardrandom = () => { @@ -185,14 +176,20 @@ on.boardrandom = () => { ); renderBoard(); generationChange(0); - stop(); + on.pause(); }; -sizeChangeButton.onclick = () => { - const newSize = parseInt(sizeInput.value, 10); +on.sizechange = (newSizenum) => { + const newSize = parseInt(newSizenum, 10); if (isNaN(newSize) || newSize < boardSizeMin || boardSizeMax < newSize) { - alert(`サイズは ${boardSizeMin} から ${boardSizeMax} の間で入力してください。`); - sizeInput.value = boardSize; + window.parent.postMessage( + { + type: "sizeError", + message: `サイズは ${boardSizeMin} から ${boardSizeMax} の間で入力してください。`, + }, + "*", + ); + newSizenum = boardSize; return; } boardSize = newSize; @@ -200,6 +197,5 @@ sizeChangeButton.onclick = () => { board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false)); renderBoard(); generationChange(0); - stop(); - updatePatternButtons(); + on.pause(); }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index af54c73..150a421 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -29,16 +29,29 @@ let bottomDrawerOpen = $state(false); let generationFigure = $state(0); + let sizeInputValue = $state(20); onMount(() => { - window.addEventListener("message", (event) => { + const handleMessage = (event: MessageEvent) => { if (event.data.type === "patternError") { alert(event.data.message); } + if (event.data.type === "sizeError") { + alert(event.data.message); + } if (event.data.type === "generation_change") { generationFigure = event.data.data; } - }); + if (event.data.type === "pause") { + isProgress = false; + } + }; + + window.addEventListener("message", handleMessage); + + return () => { + window.removeEventListener("message", handleMessage); + }; }); function sendEvent(event: string, message?: unknown) { @@ -169,26 +182,20 @@ {bottomDrawerOpen ? "▼" : "▲ テンプレート"} -
+
第 {generationFigure} 世代
- +

ボードのサイズ(10~100):

+
Right Arrow
+ + + +
From 596ca83d9f3d2ffcb145afd55a4836ae1e25d99c Mon Sep 17 00:00:00 2001 From: kg0816 <211191696+kg0816@users.noreply.github.com> Date: Tue, 4 Nov 2025 15:10:18 +0900 Subject: [PATCH 4/9] small fix --- src/life-game/life-game.html | 4 ++-- src/routes/+page.svelte | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/life-game/life-game.html b/src/life-game/life-game.html index 4e9c1b8..5b4b51d 100644 --- a/src/life-game/life-game.html +++ b/src/life-game/life-game.html @@ -1,9 +1,9 @@ - + Title - +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 150a421..ac547aa 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -159,7 +159,7 @@ srcdoc={previewDoc} title="Preview" sandbox="allow-scripts" - class="w-[90%] h-[80%] rounded-lg m-auto shadow-lg" + class="w-[90%] h-[90%] rounded-lg m-auto shadow-lg" >
@@ -195,7 +195,7 @@ sendEvent("sizechange", sizeInputValue.toString()); }} > - Change board size + Change
-
+
From c61aea40e4ddcf6a0af8c4024b26c88d160b30a2 Mon Sep 17 00:00:00 2001 From: kg0816 <211191696+kg0816@users.noreply.github.com> Date: Wed, 5 Nov 2025 12:18:40 +0900 Subject: [PATCH 6/9] pause fix --- src/iframe/life-game.js | 6 ------ src/routes/+page.svelte | 3 +++ 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js index 06d8ef4..61eaef8 100644 --- a/src/iframe/life-game.js +++ b/src/iframe/life-game.js @@ -127,12 +127,6 @@ on.play = () => { on.pause = () => { timer = "stop"; clearInterval(timerId); - window.parent.postMessage( - { - type: "pause", - }, - "*", - ); }; on.load_board = (boardTemplate) => { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9943da8..ae34d5a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -192,6 +192,7 @@ - -
+
ut.code();_Logo
-
Life code
+
Life code