Skip to content

Commit 4856d0e

Browse files
aster-voidaster-void
authored
Merge pull request #16 from ut-code/UIdesign_v3
UIdesign v3
2 parents 986cb11 + 371cc24 commit 4856d0e

3 files changed

Lines changed: 154 additions & 89 deletions

File tree

‎src/iframe/life-game.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
<html lang="ja">
1+
<html lang="ja" style="height: 90%">
22
<head>
33
<meta charset="utf-8" />
44
<title>Title</title>
55
</head>
6-
<body>
7-
<h1>
8-
<div id="generation">第0世代</div>
9-
</h1>
10-
ボードのサイズ<span id="sizeLabel"></span>:
11-
<input type="number" id="sizeInput" style="width: 50px" />
12-
<button id="sizeChangeButton">サイズ変更</button>
13-
6+
<body
7+
style="
8+
height: 100%;
9+
display: flex;
10+
align-items: flex-start;
11+
justify-content: center;
12+
padding-top: 10px;
13+
"
14+
>
1415
<table id="game-board" style="border-collapse: collapse"></table>
15-
<button id="randombutton">RANDOM</button>
16-
<button id="resetbutton">RESET</button>
16+
1717
<button id="saveButton">SAVE</button>
1818
<button id="loadButton">LOAD</button>
19-
<div id="pattern-button-container"></div>
19+
2020
<script src="./life-game.js"></script>
2121
</body>
2222
</html>

‎src/iframe/life-game.js‎

Lines changed: 54 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@ let timerId = 0;
55
let generationFigure = 0;
66
let timerTime = 1000;
77

8-
//変数設定
98
const defaultBoardSize = 20;
10-
const defaultCellSize = 22;
11-
let boardSize = defaultBoardSize;
12-
let CELL_SIZE = defaultCellSize;
13-
const BOARD_MIN = 100;
14-
const BOARD_MAX = 10;
9+
const defaultCellSize = 30;
10+
11+
//変数設定
12+
let boardSize = 20;
13+
let CELL_SIZE = 30;
1514

1615
// around: 周囲の生きたセル数 self: 自身が生きているかどうか
1716
function isNextAlive(around, self) {
@@ -26,22 +25,8 @@ function isNextAlive(around, self) {
2625
return false;
2726
}
2827

29-
const generation = document.getElementById("generation"); //世代を表す文（第+数字+世代)
30-
//BUTTON
31-
const randomButton = document.getElementById("randombutton");
32-
const resetButton = document.getElementById("resetbutton");
33-
const sizeChangeButton = document.getElementById("sizeChangeButton");
3428
const saveButton = document.getElementById("saveButton");
3529
const loadButton = document.getElementById("loadButton");
36-
//サイズ入力欄
37-
const sizeInput = document.getElementById("sizeInput");
38-
const sizeLabel = document.getElementById("sizeLabel");
39-
40-
// サイズ入力欄の設定
41-
sizeInput.min = BOARD_MAX;
42-
sizeInput.max = BOARD_MIN;
43-
sizeInput.value = defaultBoardSize;
44-
sizeLabel.textContent = `(${BOARD_MAX}〜${BOARD_MIN})`;
4530

4631
//Boardの初期化
4732
let board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
@@ -80,28 +65,16 @@ function renderBoard() {
8065
renderBoard();
8166
progressBoard();
8267

83-
randomButton.onclick = () => {
84-
//白黒ランダムにBoardを変更
85-
board = Array.from({ length: boardSize }, () =>
86-
Array.from({ length: boardSize }, () => Math.random() > 0.5),
87-
);
88-
renderBoard();
89-
generationChange(0);
90-
stop();
91-
};
92-
93-
resetButton.onclick = () => {
94-
//すべて白にBoardを変更
95-
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
96-
renderBoard();
97-
generationChange(0);
98-
stop();
99-
};
100-
10168
function generationChange(num) {
10269
//現在の世代を表すgenerationFigureを変更し、文章も変更
10370
generationFigure = num;
104-
generation.textContent = "第" + generationFigure + "世代";
71+
window.parent.postMessage(
72+
{
73+
type: "generation_change",
74+
data: generationFigure,
75+
},
76+
"*",
77+
);
10578
}
10679

10780
function progressBoard() {
@@ -166,6 +139,34 @@ on.resize = (newBoardSize) => {
166139
boardSize = newBoardSize;
167140
};
168141

142+
on.boardreset = () => {
143+
//すべて白にBoardを変更
144+
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
145+
renderBoard();
146+
generationChange(0);
147+
on.pause();
148+
};
149+
150+
on.boardrandom = () => {
151+
//白黒ランダムにBoardを変更
152+
board = Array.from({ length: boardSize }, () =>
153+
Array.from({ length: boardSize }, () => Math.random() > 0.5),
154+
);
155+
renderBoard();
156+
generationChange(0);
157+
on.pause();
158+
};
159+
160+
on.sizechange = (newSizenum) => {
161+
const newSize = parseInt(newSizenum, 10);
162+
boardSize = newSize;
163+
CELL_SIZE = Math.floor(defaultCellSize * (defaultBoardSize / newSize));
164+
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
165+
renderBoard();
166+
generationChange(0);
167+
on.pause();
168+
};
169+
169170
on.timer_change = (ms) => {
170171
timerTime = ms;
171172
if (timer === "start") {
@@ -174,22 +175,22 @@ on.timer_change = (ms) => {
174175
}
175176
};
176177

177-
sizeChangeButton.onclick = () => {
178-
const newSize = parseInt(sizeInput.value, 10);
179-
if (isNaN(newSize) || newSize < BOARD_MAX || BOARD_MIN < newSize) {
180-
alert(`サイズは ${BOARD_MAX} から ${BOARD_MIN} の間で入力してください。`);
181-
sizeInput.value = boardSize;
182-
return;
183-
}
184-
boardSize = newSize;
185-
CELL_SIZE = Math.floor(defaultCellSize * (defaultBoardSize / newSize));
186-
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
187-
renderBoard();
188-
generationChange(0);
189-
stop();
190-
updatePatternButtons();
178+
on.stateupdate = () => {
179+
window.parent.postMessage(
180+
{
181+
type: "stateupdate",
182+
data: {
183+
generationFigure: generationFigure,
184+
boardSize: boardSize,
185+
},
186+
},
187+
"*",
188+
);
189+
console.log("generationFigure:", generationFigure, "boardSize:", boardSize);
191190
};
192191

192+
on.sizechange(boardSize);
193+
193194
saveButton.onclick = async () => {
194195
window.parent.postMessage({ type: "save_board", data: board }, "*");
195196
};

‎src/routes/+page.svelte‎

Lines changed: 88 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99
import { onMount } from "svelte";
1010
import { loadBoard, saveBoard } from "./api.ts";
1111
12-
let code = $state(lifeGameJS);
12+
let editingcode = $state(lifeGameJS);
13+
let appliedCode = $state(lifeGameJS);
1314
1415
let previewDoc = $derived(
1516
lifeGameHTML.replace(
1617
/<script src="\.\/life-game\.js"><\/script>/,
1718
`<script>
1819
\n${event}\n
19-
\n${lifeGameJS}\n
20+
\n${appliedCode}\n
2021
\n${placetemplate}\n
2122
<\/script>`,
2223
),
@@ -25,17 +26,32 @@
2526
let showEditor = $state(true);
2627
let preview_iframe: HTMLIFrameElement | undefined = $state();
2728
let isProgress = $state(false);
28-
let intervalMs = 1000;
29-
let drawerOpen = $state(false);
3029
let resetModalOpen = $state(false);
3130
let bottomDrawerOpen = $state(false);
3231
32+
let intervalMs = $state(1000);
33+
let generationFigure = $state(0);
34+
let sizeInputValue = $state(20);
35+
3336
onMount(() => {
34-
window.addEventListener("message", (event) => {
37+
const handleMessage = (event: MessageEvent) => {
3538
if (event.data.type === "patternError") {
3639
alert(event.data.message);
3740
}
38-
});
41+
if (event.data.type === "generation_change") {
42+
generationFigure = event.data.data;
43+
}
44+
if (event.data.type === "stateupdate") {
45+
generationFigure = event.data.data.generationFigure;
46+
sizeInputValue = event.data.data.boardSize;
47+
}
48+
};
49+
50+
window.addEventListener("message", handleMessage);
51+
52+
return () => {
53+
window.removeEventListener("message", handleMessage);
54+
};
3955
});
4056
4157
function sendEvent(event: string, message?: unknown) {
@@ -71,20 +87,11 @@
7187
</script>
7288

7389
<div class="navbar bg-[#E0E0E0] shadow-sm">
74-
<button
75-
class="btn btn-sm btn-ghost btn-circle bg-[#E0E0E0] mx-5 w-8 rounded border-none"
76-
onclick={() => {
77-
drawerOpen = !drawerOpen;
78-
}}
79-
>
80-
<img src={icons.bars_3} alt="settings" />
81-
</button>
82-
83-
<div class="mx-5 avatar w-8 rounded">
90+
<div class="ml-15 avatar w-8 rounded">
8491
<img src={icons.utcode} alt="ut.code();_Logo" />
8592
</div>
8693

87-
<div class="font-semibold text-black text-[20px]">Life code</div>
94+
<div class="font-semibold text-black text-[20px] ml-5">Life code</div>
8895

8996
<button
9097
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] ml-auto"
@@ -158,7 +165,7 @@
158165
</div>
159166
</div>
160167

161-
<div class="flex h-screen box-border">
168+
<div class="flex box-border h-screen" style="height: calc(100vh - 4rem - 3rem);">
162169
<div
163170
class={[
164171
"flex overflow-hidden bg-[rgb(202,202,202)] shrink-0 transition-[flex-basis] duration-300 ease-in-out",
@@ -170,7 +177,13 @@
170177
srcdoc={previewDoc}
171178
title="Preview"
172179
sandbox="allow-scripts"
173-
class="w-[90%] h-[80%] rounded-lg m-auto shadow-lg"
180+
class="w-[80%] h-[90%] rounded-lg mx-auto my-5 shadow-lg"
181+
onload={() => {
182+
setTimeout(() => {
183+
sendEvent("stateupdate");
184+
console.log("generationFigure onload:", generationFigure);
185+
}, 50);
186+
}}
174187
></iframe>
175188
</div>
176189

@@ -180,19 +193,42 @@
180193
showEditor ? "basis-[40%] opacity-100" : "basis-0 opacity-0",
181194
]}
182195
>
183-
<textarea bind:value={code} class="w-full h-full border-none p-4 font-mono bg-black text-[#0f0]"
196+
<textarea
197+
bind:value={editingcode}
198+
class="w-full h-full border-none p-4 font-mono bg-black text-[#0f0]"
184199
></textarea>
185200
</div>
186201
</div>
187202

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

211+
<div class="font-bold text-black ml-10">
212+
第 {generationFigure} 世代
213+
</div>
214+
215+
<p class="ml-10 text-black">ボードのサイズ(10~100):</p>
216+
<input type="number" bind:value={sizeInputValue} class="w-10 text-black bg-white ml-2" />
217+
218+
<button
219+
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black ml-2"
220+
onclick={() => {
221+
isProgress = false;
222+
if (isNaN(sizeInputValue) || sizeInputValue < 10 || sizeInputValue > 100) {
223+
alert("サイズは10から100の間で指定してください。");
224+
return;
225+
}
226+
sendEvent("sizechange", sizeInputValue.toString());
227+
}}
228+
>
229+
Change
230+
</button>
231+
196232
<div
197233
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"
198234
>
@@ -219,7 +255,35 @@
219255
</div>
220256

221257
<button
222-
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-2"
258+
class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-100 text-black"
259+
onclick={() => {
260+
isProgress = false;
261+
sendEvent("boardreset");
262+
}}
263+
>
264+
Reset
265+
</button>
266+
267+
<button
268+
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
269+
onclick={() => {
270+
isProgress = false;
271+
sendEvent("boardrandom");
272+
}}
273+
>
274+
Random
275+
</button>
276+
277+
<button
278+
class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-5 text-black"
279+
onclick={() => {
280+
appliedCode = editingcode;
281+
}}
282+
>
283+
Apply Code
284+
</button>
285+
<button
286+
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
223287
onclick={() => {
224288
intervalMs = intervalMs / 2;
225289
sendEvent("timer_change", intervalMs);
@@ -229,7 +293,7 @@
229293
</button>
230294

231295
<button
232-
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-2"
296+
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
233297
onclick={() => {
234298
intervalMs = intervalMs * 2;
235299
sendEvent("timer_change", intervalMs);
@@ -239,7 +303,7 @@
239303
</button>
240304

241305
<button
242-
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-2"
306+
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
243307
onclick={() => {
244308
intervalMs = 1000;
245309
sendEvent("timer_change", intervalMs);

0 commit comments

Comments
 (0)