Skip to content

Commit 767e792

Browse files
Haruto-ImaiHaruto-Imai
authored
Merge pull request #47 from ut-code/fix-code-templates
JSファイル群について以下の修正を行いました cellSizeの変更(600から450へ) syncの変更(request_syncをget_boardsizeに) 盤面位置の変更(bodyを中央配置に設定) セルがboolean型になるバグの修正 timer/playイベント/pauseイベントの削除 stop()の削除 progressboardの削除　(世代数が１になるバグの修正) rerender関数のセルサイズ変更ロジックの削除
2 parents ba8ee44 + 46f96de commit 767e792

File tree

3 files changed

+34
-89
lines changed

3 files changed

+34
-89
lines changed

‎src/iframe/life-game.js‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ let patternWidth = 0;
1010
let previewCells = [];
1111

1212
//盤面の大きさ
13-
let boardSize = 20;
13+
const boardSize = 20;
1414
const cellSize = 450 / boardSize;
1515

1616
//セルの色
@@ -89,7 +89,6 @@ function renderBoard() {
8989
}
9090
}
9191
rerender();
92-
stop();
9392
} else {
9493
window.parent.postMessage(
9594
{
@@ -105,7 +104,7 @@ function renderBoard() {
105104
e.preventDefault();
106105
if (!isPlacingTemplate) {
107106
isDragging = true;
108-
board[i][j] = board[i][j] === 1 ? 0 : 1;
107+
board[i][j] = board[i][j] ? 0 : 1;
109108
dragMode = board[i][j];
110109
button.style.backgroundColor = board[i][j] ? aliveCellColor : deadCellColor;
111110
}
@@ -169,14 +168,6 @@ function rerender() {
169168
if (currentCellColor !== expectedCellColor) {
170169
button.style.backgroundColor = expectedCellColor;
171170
}
172-
173-
// セルサイズの更新
174-
const currentCellsize = button.style.width;
175-
const expectedCellsize = `${cellSize}px`;
176-
if (currentCellsize !== expectedCellsize) {
177-
button.style.width = expectedCellsize;
178-
button.style.height = expectedCellsize;
179-
}
180171
}
181172
}
182173
}

‎src/lib/assets/life-game-rules/lifespan.js‎

Lines changed: 15 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use strict";
22

3-
let timer = "stop";
43
let generationFigure = 0;
54
let isDragging = false;
65
let dragMode = 0; // 1: 黒にする, 0: 白にする
@@ -11,8 +10,8 @@ let patternWidth = 0;
1110
let previewCells = [];
1211

1312
//変数設定
14-
let boardSize = 20; //盤面の大きさ(20x20)
15-
const cellSize = 600 / boardSize; //セルの大きさ(px)
13+
const boardSize = 20; //盤面の大きさ(20x20)
14+
const cellSize = 450 / boardSize; //セルの大きさ(px)
1615
const maxLifespan = 2; // セルの最大寿命
1716

1817
// around: 周囲の生きたセル数, currentLifespan: 現在の寿命
@@ -54,6 +53,14 @@ const table = document.getElementById("game-board");
5453

5554
//盤面をBoardに従って変更する関数達(Boardを変更したら実行する)
5655
function renderBoard() {
56+
// bodyを中央配置に設定
57+
document.body.style.display = "flex";
58+
document.body.style.justifyContent = "center";
59+
document.body.style.alignItems = "center";
60+
document.body.style.minHeight = "100vh";
61+
document.body.style.margin = "0";
62+
document.body.style.padding = "0";
63+
5764
// 初回の盤面生成
5865
table.innerHTML = "";
5966
for (let i = 0; i < boardSize; i++) {
@@ -97,7 +104,6 @@ function renderBoard() {
97104
}
98105
rerender();
99106
generationChange(0);
100-
stop();
101107
} else {
102108
window.parent.postMessage(
103109
{
@@ -111,16 +117,16 @@ function renderBoard() {
111117
};
112118
button.onmousedown = (e) => {
113119
e.preventDefault();
114-
if (timer === "stop" && !isPlacingTemplate) {
120+
if (!isPlacingTemplate) {
115121
isDragging = true;
116-
board[i][j] = !board[i][j];
122+
board[i][j] = board[i][j] ? 0 : 1;
117123
dragMode = board[i][j];
118124
button.lifespan = board[i][j] ? maxLifespan : 0;
119125
button.style.backgroundColor = getStyle(board[i][j], button.lifespan);
120126
}
121127
};
122128
button.onmouseenter = () => {
123-
if (isDragging && timer === "stop" && board[i][j] !== dragMode && !isPlacingTemplate) {
129+
if (isDragging && board[i][j] !== dragMode && !isPlacingTemplate) {
124130
board[i][j] = dragMode;
125131
button.lifespan = board[i][j] ? maxLifespan : 0;
126132
button.style.backgroundColor = getStyle(board[i][j], button.lifespan);
@@ -180,14 +186,6 @@ function rerender() {
180186
if (currentCellColor !== expectedCellColor) {
181187
button.style.backgroundColor = expectedCellColor;
182188
}
183-
184-
// セルサイズの更新
185-
const currentCellsize = button.style.width;
186-
const expectedCellsize = `${cellSize}px`;
187-
if (currentCellsize !== expectedCellsize) {
188-
button.style.width = expectedCellsize;
189-
button.style.height = expectedCellsize;
190-
}
191189
}
192190
}
193191
}
@@ -197,7 +195,6 @@ document.addEventListener("mouseup", () => {
197195
});
198196

199197
renderBoard();
200-
progressBoard();
201198

202199
function generationChange(num) {
203200
//現在の世代を表すgenerationFigureを変更し、文章も変更
@@ -271,14 +268,6 @@ on.progress = () => {
271268
progressBoard();
272269
};
273270

274-
on.play = () => {
275-
timer = "start";
276-
};
277-
278-
on.pause = () => {
279-
timer = "stop";
280-
};
281-
282271
on.board_reset = () => {
283272
//すべて白にBoardを変更
284273
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => 0));
@@ -295,18 +284,8 @@ on.board_randomize = () => {
295284
generationChange(0);
296285
};
297286

298-
on.request_sync = () => {
299-
window.parent.postMessage(
300-
{
301-
type: "sync",
302-
data: {
303-
generationFigure: generationFigure,
304-
boardSize: boardSize,
305-
},
306-
},
307-
"*",
308-
);
309-
console.log("generationFigure:", generationFigure, "boardSize:", boardSize);
287+
on.get_boardsize = () => {
288+
window.parent.postMessage({ type: "get_boardsize", data: boardSize }, "*");
310289
};
311290

312291
on.place_template = (template) => {
@@ -315,7 +294,6 @@ on.place_template = (template) => {
315294
patternWidth = patternShape[0].length;
316295
isPlacingTemplate = true;
317296
table.style.cursor = "crosshair";
318-
stop();
319297
};
320298

321299
on.save_board = async () => {
@@ -326,5 +304,4 @@ on.apply_board = (newBoard) => {
326304
board = newBoard;
327305
renderBoard();
328306
generationChange(0);
329-
stop();
330307
};

‎src/lib/assets/life-game-rules/probabilistics.js‎

Lines changed: 17 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use strict";
22

3-
let timer = "stop";
43
let generationFigure = 0;
54
let isDragging = false;
65
let dragMode = 0; // 1: 黒にする, 0: 白にする
@@ -11,18 +10,18 @@ let patternWidth = 0;
1110
let previewCells = [];
1211

1312
//変数設定
14-
let boardSize = 20; //盤面の大きさ(20x20)
15-
const cellSize = 600 / boardSize; //セルの大きさ(px)
13+
const boardSize = 20; //盤面の大きさ(20x20)
14+
const cellSize = 450 / boardSize; //セルの大きさ(px)
1615

1716
// around: 周囲の生きたセル数 self: 自身が生きているかどうか
1817
function isNextAlive(around, self) {
1918
// 自身が生きている & 周囲が 2 か 3 で生存 50%の確率でこのルールに従う
2019
if (self && 2 <= around && around <= 3) {
21-
return Math.random() > 0.5 ? self : !self;
20+
return Math.random() > 0.5 ? 1 : 0;
2221
}
2322
// 自身が生きている & 周囲が2,3以外で死亡 50%の確率でこのルールに従う
2423
if (self && (around < 2 || around > 3)) {
25-
return Math.random() > 0.5 ? !self : self;
24+
return Math.random() > 0.5 ? 0 : 1;
2625
}
2726
// 自身が死んでいる & 周囲が 3 で誕生 50%の確率でこのルールに従う
2827
if (!self && around === 3) {
@@ -45,6 +44,14 @@ const table = document.getElementById("game-board");
4544

4645
//盤面をBoardに従って変更する関数達(Boardを変更したら実行する)
4746
function renderBoard() {
47+
// bodyを中央配置に設定
48+
document.body.style.display = "flex";
49+
document.body.style.justifyContent = "center";
50+
document.body.style.alignItems = "center";
51+
document.body.style.minHeight = "100vh";
52+
document.body.style.margin = "0";
53+
document.body.style.padding = "0";
54+
4855
// 初回の盤面生成
4956
table.innerHTML = "";
5057
for (let i = 0; i < boardSize; i++) {
@@ -80,7 +87,6 @@ function renderBoard() {
8087
}
8188
rerender();
8289
generationChange(0);
83-
stop();
8490
} else {
8591
window.parent.postMessage(
8692
{
@@ -94,15 +100,15 @@ function renderBoard() {
94100
};
95101
button.onmousedown = (e) => {
96102
e.preventDefault();
97-
if (timer === "stop" && !isPlacingTemplate) {
103+
if (!isPlacingTemplate) {
98104
isDragging = true;
99-
board[i][j] = !board[i][j];
105+
board[i][j] = board[i][j] ? 0 : 1;
100106
dragMode = board[i][j];
101107
button.style.backgroundColor = board[i][j] ? "black" : "white";
102108
}
103109
};
104110
button.onmouseenter = () => {
105-
if (isDragging && timer === "stop" && board[i][j] !== dragMode && !isPlacingTemplate) {
111+
if (isDragging && board[i][j] !== dragMode && !isPlacingTemplate) {
106112
board[i][j] = dragMode;
107113
button.style.backgroundColor = board[i][j] ? "black" : "white";
108114
}
@@ -160,14 +166,6 @@ function rerender() {
160166
if (currentCellColor !== expectedCellColor) {
161167
button.style.backgroundColor = expectedCellColor;
162168
}
163-
164-
// セルサイズの更新
165-
const currentCellsize = button.style.width;
166-
const expectedCellsize = `${cellSize}px`;
167-
if (currentCellsize !== expectedCellsize) {
168-
button.style.width = expectedCellsize;
169-
button.style.height = expectedCellsize;
170-
}
171169
}
172170
}
173171
}
@@ -177,7 +175,6 @@ document.addEventListener("mouseup", () => {
177175
});
178176

179177
renderBoard();
180-
progressBoard();
181178

182179
function generationChange(num) {
183180
//現在の世代を表すgenerationFigureを変更し、文章も変更
@@ -234,14 +231,6 @@ on.progress = () => {
234231
progressBoard();
235232
};
236233

237-
on.play = () => {
238-
timer = "start";
239-
};
240-
241-
on.pause = () => {
242-
timer = "stop";
243-
};
244-
245234
on.board_reset = () => {
246235
//すべて白にBoardを変更
247236
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => 0));
@@ -258,18 +247,8 @@ on.board_randomize = () => {
258247
generationChange(0);
259248
};
260249

261-
on.request_sync = () => {
262-
window.parent.postMessage(
263-
{
264-
type: "sync",
265-
data: {
266-
generationFigure: generationFigure,
267-
boardSize: boardSize,
268-
},
269-
},
270-
"*",
271-
);
272-
console.log("generationFigure:", generationFigure, "boardSize:", boardSize);
250+
on.get_boardsize = () => {
251+
window.parent.postMessage({ type: "get_boardsize", data: boardSize }, "*");
273252
};
274253

275254
on.place_template = (template) => {
@@ -278,7 +257,6 @@ on.place_template = (template) => {
278257
patternWidth = patternShape[0].length;
279258
isPlacingTemplate = true;
280259
table.style.cursor = "crosshair";
281-
stop();
282260
};
283261

284262
on.save_board = async () => {
@@ -289,5 +267,4 @@ on.apply_board = (newBoard) => {
289267
board = newBoard;
290268
renderBoard();
291269
generationChange(0);
292-
stop();
293270
};

0 commit comments

Comments
 (0)