From 2f2b895cb39eb3aa244b5e813616c1b472368b51 Mon Sep 17 00:00:00 2001
From: kg0816 <211191696+kg0816@users.noreply.github.com>
Date: Tue, 11 Nov 2025 15:35:12 +0900
Subject: [PATCH] add drag_to_paint function

---
 src/iframe/life-game.js | 20 +++++++++++++++++---
 src/routes/+page.svelte |  4 ++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 8060a2d..8ce2604 100644
--- a/src/iframe/life-game.js
+++ b/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();
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 98c0e5d..f740ff9 100644
--- a/src/routes/+page.svelte
+++ b/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);