Skip to content

UIdesign v3 #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aster-void merged 12 commits into from
Nov 7, 2025
Merged

UIdesign v3 #16

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
edc9379
separate generation from iframe
kg0816 Nov 2, 2025
ed2eca2
separate reset random button
kg0816 Nov 2, 2025
53623cc
separate boardsize
kg0816 Nov 4, 2025
596ca83
small fix
kg0816 Nov 4, 2025
10bb539
Merge branch 'main' of https://github.com/ut-code/life-code into UIde…
kg0816 Nov 4, 2025
05d2789
small fix
kg0816 Nov 4, 2025
c61aea4
pause fix
kg0816 Nov 5, 2025
3858e51
min/max size separate
kg0816 Nov 5, 2025
38a99b8
small fix
kg0816 Nov 5, 2025
eadcfce
reload bug fix
kg0816 Nov 6, 2025
bb6cb98
Merge remote-tracking branch 'origin/main' into UIdesign_v3
kg0816 Nov 6, 2025
371cc24
Merge branch 'main' into UIdesign_v3
Haruto-Imai Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 10 additions & 12 deletions src/iframe/life-game.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
<html lang="ja">
<html lang="ja" style="height: 90%">
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
<h1>
<div id="generation">第0世代</div>
</h1>
ボードのサイズ<span id="sizeLabel"></span>:
<input type="number" id="sizeInput" style="width: 50px" />
<button id="sizeChangeButton">サイズ変更</button>

<body
style="
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 10px;
"
>
<table id="game-board" style="border-collapse: collapse"></table>
<button id="randombutton">RANDOM</button>　　　　　　
<button id="resetbutton">RESET</button>
<div id="pattern-button-container"></div>
<script src="./life-game.js"></script>
</body>
</html>
92 changes: 48 additions & 44 deletions src/iframe/life-game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@ let timer = "stop";
let timerId = 0;
let generationFigure = 0;

const defaultBoardSize = 20;
const defaultCellSize = 30;

//変数設定
let boardSize = 20;
const CELL_SIZE = 22;
const BOARD_MIN = 100;
const BOARD_MAX = 10;
let CELL_SIZE = 30;
const BOARD_MIN = 10;
const BOARD_MAX = 100;

// around: 周囲の生きたセル数 self: 自身が生きているかどうか
function isNextAlive(around, self) {
Expand All @@ -23,21 +26,6 @@ function isNextAlive(around, self) {
return false;
}

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 = BOARD_MAX;
sizeInput.max = BOARD_MIN;
sizeInput.value = defaultBoardSize;
sizeLabel.textContent = `(${BOARD_MAX}〜${BOARD_MIN})`;

//Boardの初期化
let board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
const table = document.getElementById("game-board");
Expand Down Expand Up @@ -75,28 +63,16 @@ 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;
generation.textContent = "第" + generationFigure + "世代";
window.parent.postMessage(
{
type: "generation_change",
data: generationFigure,
Copy link
Copy Markdown
Contributor

@aster-void aster-void Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これしようとすると大変になってくるので、外側で世代とかの情報を管理して、「世代交代」だけを iframe に渡すのがいいんじゃないかな。

Copy link
Copy Markdown
Contributor Author

@kg0816 kg0816 Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

intervalの間隔は編集可能にしておきたいのでその辺のコードは外に置きたくないってのがあります。
この先似たようなのが増えるわけではない(はず)なので複雑さもそこまでひどくならないとは思いますが...

Copy link
Copy Markdown
Contributor

@aster-void aster-void Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interval ってこっちで編集機能を用意しておくんじゃなかったっけ？

それならそれでもいいと思う

},
"*",
);
}

function progressBoard() {
Expand Down Expand Up @@ -151,6 +127,12 @@ on.play = () => {
on.pause = () => {
timer = "stop";
clearInterval(timerId);
window.parent.postMessage(
{
type: "pause",
Comment thread
aster-void marked this conversation as resolved.
Outdated
},
"*",
);
};

on.load_board = (boardTemplate) => {
Expand All @@ -161,18 +143,40 @@ on.resize = (newBoardSize) => {
boardSize = newBoardSize;
};

sizeChangeButton.onclick = () => {
const newSize = parseInt(sizeInput.value, 10);
if (isNaN(newSize) || newSize < BOARD_MAX || BOARD_MIN < newSize) {
alert(`サイズは ${BOARD_MAX} から ${BOARD_MIN} の間で入力してください。`);
sizeInput.value = boardSize;
on.boardreset = () => {
//すべて白にBoardを変更
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
renderBoard();
generationChange(0);
on.pause();
};

on.boardrandom = () => {
//白黒ランダムにBoardを変更
board = Array.from({ length: boardSize }, () =>
Array.from({ length: boardSize }, () => Math.random() > 0.5),
);
renderBoard();
generationChange(0);
on.pause();
};

on.sizechange = (newSizenum) => {
const newSize = parseInt(newSizenum, 10);
if (isNaN(newSize) || newSize < BOARD_MIN || BOARD_MAX < newSize) {
Copy link
Copy Markdown
Contributor

@aster-void aster-void Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここのバリデーション (10以上100以下である) も、外側に移すのが良さそう

Copy link
Copy Markdown
Contributor Author

@kg0816 kg0816 Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

こちらもですね

window.parent.postMessage(
{
type: "sizeError",
message: `サイズは ${BOARD_MIN} から ${BOARD_MAX} の間で入力してください。`,
},
"*",
);
return;
}
boardSize = newSize;
CELL_SIZE = Math.floor(defaultCellSize * (defaultBoardSize / newSize));
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
renderBoard();
generationChange(0);
stop();
updatePatternButtons();
on.pause();
};
64 changes: 58 additions & 6 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,34 @@
let resetModalOpen = $state(false);
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) {
preview_iframe?.contentWindow?.postMessage({ type: event, date: message }, "*");
preview_iframe?.contentWindow?.postMessage({ type: event, data: message }, "*");
}
</script>

Expand Down Expand Up @@ -129,7 +147,7 @@
</div>
</div>

<div class="flex h-screen box-border">
<div class="flex box-border h-screen" style="height: calc(100vh - 4rem - 3rem);">
<div
class={[
"flex overflow-hidden bg-[rgb(202,202,202)] shrink-0 transition-[flex-basis] duration-300 ease-in-out",
Expand All @@ -141,7 +159,7 @@
srcdoc={previewDoc}
title="Preview"
sandbox="allow-scripts"
class="w-[90%] h-[80%] rounded-lg m-auto shadow-lg"
class="w-[80%] h-[90%] rounded-lg mx-auto my-5 shadow-lg"
></iframe>
</div>

Expand All @@ -156,14 +174,30 @@
</div>
</div>

<div class="bg-[#E0E0E0] shadow-sm fixed bottom-0 left-0 right-0 z-50 h-12 p-0">
<div class="bg-[#E0E0E0] shadow-sm fixed bottom-0 left-0 right-0 z-50 h-12 p-0 flex items-center">
<button
class="btn rounded-none h-12 justify-start"
onclick={() => (bottomDrawerOpen = !bottomDrawerOpen)}
>
{bottomDrawerOpen ? "▼" : "▲ テンプレート"}
</button>

<div class="font-bold text-black ml-10">
第 {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={() => {
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"
>
Expand All @@ -188,4 +222,22 @@
>
<img class="size-6" src={icons.RightArrow} alt="Right Arrow" />
</div>

<button
class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-100 text-black"
onclick={() => {
sendEvent("boardreset");
}}
>
Reset
</button>

<button
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
onclick={() => {
sendEvent("boardrandom");
}}
>
Random
</button>
</div>