Merge pull request #26 from ut-code/performance_improvement

Optimize board rendering

Author: kg0816

src/iframe/life-game.js

@@ -7,12 +7,9 @@ let timerTime = 1000;
 let isDragging = false;
 let dragMode = false; // true: 黒にする, false: 白にする
 
-const DEFAULT_BOARD_SIZE = 20;
-const DEFAULT_CELL_SIZE = 30;
-
 //変数設定
-let boardSize = 20;
-let cellSize = 30;
+let boardSize = 20; //盤面の大きさ(20x20)
+const cellSize = 600 / boardSize; //セルの大きさ(px)
 
 // around: 周囲の生きたセル数 self: 自身が生きているかどうか
 function isNextAlive(around, self) {
@@ -27,11 +24,19 @@ function isNextAlive(around, self) {
   return false;
 }
 
+// cellの状態に応じた色を返す関数
+function getStyle(cell) {
+  // cellがtrueなら黒、falseなら白を返す
+  return cell ? "black" : "white";
+}
+
 //Boardの初期化
 let board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
 const table = document.getElementById("game-board");
+
+//盤面をBoardに従って変更する関数達(Boardを変更したら実行する)
 function renderBoard() {
-  //盤面をBoardに従って変更する関数(Boardを変更したら必ず実行する)
+  // 初回の盤面生成
   table.innerHTML = "";
   for (let i = 0; i < boardSize; i++) {
     const tr = document.createElement("tr");
@@ -68,6 +73,30 @@ function renderBoard() {
   }
 }
 
+function rerender() {
+  // ２回目以降の盤面生成
+  for (let i = 0; i < boardSize; i++) {
+    for (let j = 0; j < boardSize; j++) {
+      const button = table.children[i].children[j].children[0];
+
+      // 色の更新
+      const currentCellColor = button.style.backgroundColor;
+      const expectedCellColor = getStyle(board[i][j]);
+      if (currentCellColor !== expectedCellColor) {
+        button.style.backgroundColor = expectedCellColor;
+      }
+
+      // セルサイズの更新
+      const currentCellsize = button.style.width;
+      const expectedCellsize = `${cellSize}px`;
+      if (currentCellsize !== expectedCellsize) {
+        button.style.width = expectedCellsize;
+        button.style.height = expectedCellsize;
+      }
+    }
+  }
+}
+
 document.addEventListener("mouseup", () => {
   isDragging = false;
 });
@@ -126,7 +155,7 @@ function progressBoard() {
   }
   board = newBoard;
   generationChange(generationFigure + 1);
-  renderBoard();
+  rerender();
 }
 
 function resetTimer() {
@@ -147,15 +176,6 @@ on.pause = () => {
   resetTimer();
 };
 
-on.board_resize = (newSize) => {
-  boardSize = newSize;
-  cellSize = Math.floor(DEFAULT_CELL_SIZE * (DEFAULT_BOARD_SIZE / newSize));
-  board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
-  renderBoard();
-  generationChange(0);
-  resetTimer();
-};
-
 on.board_reset = () => {
   //すべて白にBoardを変更
   board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));

src/routes/+page.svelte

@@ -45,9 +45,7 @@
     | "place_template"
     | "save_board"
     | "apply_board"
-    | "request_sync"
-    // unused events
-    | "board_resize";
+    | "request_sync";
 
   type IncomingEvent = "generation_change" | "sync" | "save_board";
 
@@ -154,7 +152,7 @@
 </div>
 
 <div
-  class="fixed inset-x-0 bottom-0 z-40 transition-transform duration-300 bg-black pb-16"
+  class="fixed inset-x-0 bottom-0 z-40 transition-transform duration-300 bg-black pb-12"
   class:translate-y-full={!bottomDrawerOpen}
   class:translate-y-0={bottomDrawerOpen}
 >
@@ -365,7 +363,7 @@
       srcdoc={previewDoc}
       title="Preview"
       sandbox="allow-scripts"
-      class="w-[80%] h-[90%] rounded-lg mx-auto my-5 shadow-lg"
+      class="w-[80%] h-[90%] rounded-lg mx-auto my-5 bg-white shadow-lg"
       onload={() => {
         setTimeout(() => {
           sendEvent("state_update");