コンフリクトの解消

Author: TKHR-Shiu

src/iframe/life-game.js

@@ -6,6 +6,11 @@ let generationFigure = 0;
 let timerTime = 1000;
 let isDragging = false;
 let dragMode = false; // true: 黒にする, false: 白にする
+let isPlacingTemplate = false;
+let patternShape = [];
+let patternHeight = 0;
+let patternWidth = 0;
+let previewCells = [];
 
 //変数設定
 let boardSize = 20; //盤面の大きさ(20x20)
@@ -51,20 +56,50 @@ function renderBoard() {
       button.style.height = `${cellSize}px`;
       button.style.padding = "0"; //cellSizeが小さいとき、セルが横長になることを防ぐ
       button.style.display = "block"; //cellSizeが小さいとき、行間が空きすぎるのを防ぐ
+      button.onclick = () => {
+        if (isPlacingTemplate) {
+          clearPreview();
+          isPlacingTemplate = false;
+          if (i + patternHeight < boardSize + 1 && j + patternWidth < boardSize + 1) {
+            for (let r = 0; r < patternHeight; r++) {
+              for (let c = 0; c < patternWidth; c++) {
+                const boardRow = i + r;
+                const boardCol = j + c;
+                board[boardRow][boardCol] = patternShape[r][c] === 1;
+              }
+            }
+            rerender();
+            generationChange(0);
+            resetTimer();
+            stop();
+          } else {
+            window.parent.postMessage(
+              {
+                type: "Size shortage",
+                data: {},
+              },
+              "*",
+            );
+          }
+        }
+      };
       button.onmousedown = (e) => {
         e.preventDefault();
-        if (timer === "stop") {
+        if (timer === "stop" && !isPlacingTemplate) {
           isDragging = true;
           board[i][j] = !board[i][j];
           dragMode = board[i][j];
           button.style.backgroundColor = board[i][j] ? "black" : "white";
         }
       };
       button.onmouseenter = () => {
-        if (isDragging && timer === "stop" && board[i][j] !== dragMode) {
+        if (isDragging && timer === "stop" && board[i][j] !== dragMode && !isPlacingTemplate) {
           board[i][j] = dragMode;
           button.style.backgroundColor = board[i][j] ? "black" : "white";
         }
+        if (isPlacingTemplate) {
+          drawPreview(i, j);
+        }
       };
       td.appendChild(button);
       tr.appendChild(td);
@@ -73,6 +108,37 @@ function renderBoard() {
   }
 }
 
+table.onmouseleave = () => {
+  if (isPlacingTemplate) {
+    clearPreview();
+  }
+};
+
+function drawPreview(row, col) {
+  clearPreview();
+  for (let r = 0; r < patternHeight; r++) {
+    for (let c = 0; c < patternWidth; c++) {
+      if (patternShape[r][c] === 1) {
+        const boardRow = row + r;
+        const boardCol = col + c;
+        if (boardRow < boardSize && boardCol < boardSize) {
+          const cell = table.rows[boardRow].cells[boardCol].firstChild;
+          cell.style.backgroundColor = "gray";
+          previewCells.push({ row: boardRow, col: boardCol });
+        }
+      }
+    }
+  }
+}
+
+function clearPreview() {
+  previewCells.forEach((cellPos) => {
+    const cell = table.rows[cellPos.row].cells[cellPos.col].firstChild;
+    cell.style.backgroundColor = board[cellPos.row][cellPos.col] ? "black" : "white";
+  });
+  previewCells = [];
+}
+
 function rerender() {
   // ２回目以降の盤面生成
   for (let i = 0; i < boardSize; i++) {
@@ -216,11 +282,12 @@ on.request_sync = () => {
   console.log("generationFigure:", generationFigure, "boardSize:", boardSize);
 };
 
-on.place_template = (newBoard) => {
-  board = newBoard;
-  renderBoard();
-  generationChange(0);
-  resetTimer();
+on.place_template = (template) => {
+  patternShape = template;
+  patternHeight = patternShape.length;
+  patternWidth = patternShape[0].length;
+  isPlacingTemplate = true;
+  table.style.cursor = "crosshair";
   stop();
 };
 

src/routes/+page.svelte

@@ -47,7 +47,7 @@
     | "apply_board"
     | "request_sync";
 
-  type IncomingEvent = "generation_change" | "sync" | "save_board";
+  type IncomingEvent = "generation_change" | "sync" | "Size shortage" | "save_board";
 
   function handleMessage(event: MessageEvent<{ type: IncomingEvent; data: unknown }>) {
     switch (event.data.type) {
@@ -61,6 +61,14 @@
         sizeValue = data.boardSize;
         break;
       }
+      case "Size shortage": {
+        alert(
+          isJapanese
+            ? "盤面からはみ出してしまうため、キャンセルしました"
+            : "This action was canceled because it would have extended beyond the board.",
+        );
+        break;
+      }
       case "save_board": {
         const board = event.data.data as boolean[][];
         const preview = createPreview(board);
@@ -168,13 +176,8 @@
             onclick={() => {
               sendEvent("request_sync");
 
-              const newBoard = Array.from({ length: sizeValue }, () =>
-                Array.from({ length: sizeValue }, () => false),
-              );
               const patternData = patterns[patternName];
               const patternShape = patternData.shape;
-              const patternHeight = patternShape.length;
-              const patternWidth = patternShape[0].length;
 
               if (sizeValue < (patternData.minBoardSize || 0)) {
                 if (isJapanese) {
@@ -190,18 +193,8 @@
                 return;
               }
               // パターンがボードの中央に来るよう、パターンの左上のセルの位置(startRow, startCol)を調整
-              const startRow = Math.floor((sizeValue - patternHeight) / 2);
-              const startCol = Math.floor((sizeValue - patternWidth) / 2);
-
-              for (let r = 0; r < patternHeight; r++) {
-                for (let c = 0; c < patternWidth; c++) {
-                  const boardRow = startRow + r;
-                  const boardCol = startCol + c;
-                  newBoard[boardRow][boardCol] = patternShape[r][c] === 1;
-                }
-              }
               bottomDrawerOpen = false;
-              sendEvent("place_template", newBoard);
+              sendEvent("place_template", patternShape);
             }}
           >
             <img