add drag_to_paint function

src/iframe/life-game.js

@@ -4,6 +4,8 @@ let timer = "stop";
 let timerId = 0;
 let generationFigure = 0;
 let timerTime = 1000;
+let isDragging = false;
+let dragMode = false; // true: 黒にする, false: 白にする
 
 const DEFAULT_BOARD_SIZE = 20;
 const DEFAULT_CELL_SIZE = 30;
@@ -44,11 +46,19 @@ function renderBoard() {
       button.style.height = `${cellSize}px`;
       button.style.padding = "0"; //cellSizeが小さいとき、セルが横長になることを防ぐ
       button.style.display = "block"; //cellSizeが小さいとき、行間が空きすぎるのを防ぐ
-      button.onclick = () => {
+      button.onmousedown = (e) => {
+        e.preventDefault();
         if (timer === "stop") {
+          isDragging = true;
           board[i][j] = !board[i][j];
-          renderBoard();
-          //クリックされたら色を反転して盤面を変更
+          dragMode = board[i][j];
+          button.style.backgroundColor = board[i][j] ? "black" : "white";
+        }
+      };
+      button.onmouseenter = () => {
+        if (isDragging && timer === "stop" && board[i][j] !== dragMode) {
+          board[i][j] = dragMode;
+          button.style.backgroundColor = board[i][j] ? "black" : "white";
         }
       };
       td.appendChild(button);
@@ -58,6 +68,10 @@ function renderBoard() {
   }
 }
 
+document.addEventListener("mouseup", () => {
+  isDragging = false;
+});
+
 renderBoard();
 progressBoard();
 

src/routes/+page.svelte

@@ -302,7 +302,7 @@
     </button>
 
     <div class="font-bold text-black ml-4">
-      {isJapanese ? "第" + generationFigure + "世代" : "Generation" + generationFigure}
+      {isJapanese ? "第" + generationFigure + "世代" : "Generation:" + generationFigure}
     </div>
   </div>
 
@@ -319,7 +319,7 @@
     </button>
 
     <button
-      class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)]"
+      class="btn btn-ghost btn-circle text-black hover:bg-[rgb(220,220,220)]"
       onclick={() => {
         intervalMs = 1000;
         sendEvent("timer_change", intervalMs);