From 66b6c6642aecdbae18b20cf20fb92526966408f8 Mon Sep 17 00:00:00 2001 From: RintaroAbe Date: Tue, 9 Jun 2026 18:20:14 +0900 Subject: [PATCH 1/5] fix: fix cell size alignment and border display --- frontend/src/components/Board.tsx | 10 +++++++--- frontend/src/components/Cell.tsx | 4 +++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Board.tsx b/frontend/src/components/Board.tsx index 635358c..eca12a6 100644 --- a/frontend/src/components/Board.tsx +++ b/frontend/src/components/Board.tsx @@ -85,9 +85,13 @@ export const BoardComponent: React.FC = ({ board, setBoard, flaggingMode, display: "grid", justifyContent: "center", alignContent: "center", - gridTemplateColumns: `repeat(${size}, ${currentCellSize+5}px)`, - paddingBottom: "50px", - width: `${(currentCellSize + 5) * size}px`, + gridTemplateColumns: `repeat(${size}, ${currentCellSize}px)`, + gridTemplateRows: `repeat(${size}, ${currentCellSize}px)`, + + gap: "1px", + background: "black", + border: "1px solid black", + width: `${currentCellSize * size + (size - 1)}px`, borderRadius: "8px", }}> {board.map((row, r) => diff --git a/frontend/src/components/Cell.tsx b/frontend/src/components/Cell.tsx index 27d6d65..a4a8176 100644 --- a/frontend/src/components/Cell.tsx +++ b/frontend/src/components/Cell.tsx @@ -63,7 +63,9 @@ export const Cell: React.FC = ({ cell, cellSize, onClick, board, hasClick style={{ width: cellSize, height: cellSize, - border: "1px solid #666", + padding: 0, + margin: 0, + border: "1px solid black", background: cell.isOpen ? "#ddd" : "#999", fontSize: `${cellSize * 0.5}px`, justifyContent: "center", From 29ecd7d7971d7fd4bca444eee373389e3d787159 Mon Sep 17 00:00:00 2001 From: RintaroAbe Date: Tue, 9 Jun 2026 20:12:54 +0900 Subject: [PATCH 2/5] fix: add window resize support and fix text color --- frontend/src/components/Board.tsx | 21 +++++++++++++-------- frontend/src/components/Cell.tsx | 1 + 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Board.tsx b/frontend/src/components/Board.tsx index eca12a6..2415588 100644 --- a/frontend/src/components/Board.tsx +++ b/frontend/src/components/Board.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useRef, useState } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import type { Board } from "../types/types"; import { generateBoard } from "../utils/board"; import { Cell } from "./Cell"; @@ -23,15 +23,20 @@ const calculateCellSize = () => { return Math.floor((containerSize - safePadding) / size); }; -const initialCellSize = calculateCellSize(); - export const BoardComponent: React.FC = ({ board, setBoard, flaggingMode, onGameOver, onGameClear, userName }) => { const [isGameActive, setIsGameActive] = useState(true); const [hasClickedOnce, setHasClickedOnce] = useState(false); + const [cellSize, setCellSize] = useState(calculateCellSize); const startTimeRef = useRef(0); const chainedblockRef = useRef(0); const openedblockRef = useRef(0); + useEffect(() => { + const handleResize = () => setCellSize(calculateCellSize()); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + const handleGameOver = () => { setIsGameActive(false); onGameOver(); @@ -58,7 +63,7 @@ export const BoardComponent: React.FC = ({ board, setBoard, flaggingMode, } }, [onGameClear, userName]); - const currentCellSize = initialCellSize; + const handleClick = (r: number, c: number) => { if (!isGameActive) return; if (!hasClickedOnce) { @@ -85,13 +90,13 @@ export const BoardComponent: React.FC = ({ board, setBoard, flaggingMode, display: "grid", justifyContent: "center", alignContent: "center", - gridTemplateColumns: `repeat(${size}, ${currentCellSize}px)`, - gridTemplateRows: `repeat(${size}, ${currentCellSize}px)`, + gridTemplateColumns: `repeat(${size}, ${cellSize}px)`, + gridTemplateRows: `repeat(${size}, ${cellSize}px)`, gap: "1px", background: "black", border: "1px solid black", - width: `${currentCellSize * size + (size - 1)}px`, + width: `${cellSize * size + (size - 1)}px`, borderRadius: "8px", }}> {board.map((row, r) => @@ -99,7 +104,7 @@ export const BoardComponent: React.FC = ({ board, setBoard, flaggingMode, { diff --git a/frontend/src/components/Cell.tsx b/frontend/src/components/Cell.tsx index a4a8176..ca8f7e3 100644 --- a/frontend/src/components/Cell.tsx +++ b/frontend/src/components/Cell.tsx @@ -67,6 +67,7 @@ export const Cell: React.FC = ({ cell, cellSize, onClick, board, hasClick margin: 0, border: "1px solid black", background: cell.isOpen ? "#ddd" : "#999", + color: "black", fontSize: `${cellSize * 0.5}px`, justifyContent: "center", alignItems: "center", From 136b60ee3ad26b75cf23442b824f6f7692bf6d9a Mon Sep 17 00:00:00 2001 From: RintaroAbe Date: Tue, 9 Jun 2026 20:15:00 +0900 Subject: [PATCH 3/5] fix: remove unused clock file --- frontend/src/components/timer.tsx | 34 ------------------------------- 1 file changed, 34 deletions(-) delete mode 100644 frontend/src/components/timer.tsx diff --git a/frontend/src/components/timer.tsx b/frontend/src/components/timer.tsx deleted file mode 100644 index be89399..0000000 --- a/frontend/src/components/timer.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { useState, useEffect } from "react"; - -type TimerProps = { - start: number; - isActive: boolean; -}; - -function Timer({ start, isActive }: TimerProps) { - const [elapsedTime, setElapsedTime] = useState(0); - - useEffect(() => { - if (!isActive) return; - const timer = setInterval(() => { - setElapsedTime(Math.floor((Date.now() - start) / 1000)); - }, 1000); - - return () => clearInterval(timer); - }, [start, isActive]); - - const hours = Math.floor(elapsedTime / 3600); - const minutes = Math.floor((elapsedTime % 3600) / 60); - const seconds = elapsedTime % 60; - const format = (num: number) => String(num).padStart(2, '0'); - - return ( -

- {`⏰`} - {hours > 0 ? `${format(hours)}:` : ''} - {format(minutes)}:{format(seconds)} -

- ); -} - -export default Timer; \ No newline at end of file From 72d2f65a734417deed7ec710f2f9e7924e93660c Mon Sep 17 00:00:00 2001 From: RintaroAbe Date: Tue, 9 Jun 2026 20:19:21 +0900 Subject: [PATCH 4/5] fix: remove gap and use border-only approach for cell dividers --- frontend/src/components/Board.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/src/components/Board.tsx b/frontend/src/components/Board.tsx index 2415588..d6f1497 100644 --- a/frontend/src/components/Board.tsx +++ b/frontend/src/components/Board.tsx @@ -63,7 +63,6 @@ export const BoardComponent: React.FC = ({ board, setBoard, flaggingMode, } }, [onGameClear, userName]); - const handleClick = (r: number, c: number) => { if (!isGameActive) return; if (!hasClickedOnce) { @@ -93,10 +92,8 @@ export const BoardComponent: React.FC = ({ board, setBoard, flaggingMode, gridTemplateColumns: `repeat(${size}, ${cellSize}px)`, gridTemplateRows: `repeat(${size}, ${cellSize}px)`, - gap: "1px", - background: "black", border: "1px solid black", - width: `${cellSize * size + (size - 1)}px`, + width: `${cellSize * size}px`, borderRadius: "8px", }}> {board.map((row, r) => From 4a75021f1682aeb6e87b4f67dbb902dadc63083c Mon Sep 17 00:00:00 2001 From: RintaroAbe Date: Tue, 9 Jun 2026 20:20:32 +0900 Subject: [PATCH 5/5] chore: erase unnecessary break line --- frontend/src/components/Board.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/Board.tsx b/frontend/src/components/Board.tsx index d6f1497..8208668 100644 --- a/frontend/src/components/Board.tsx +++ b/frontend/src/components/Board.tsx @@ -91,7 +91,6 @@ export const BoardComponent: React.FC = ({ board, setBoard, flaggingMode, alignContent: "center", gridTemplateColumns: `repeat(${size}, ${cellSize}px)`, gridTemplateRows: `repeat(${size}, ${cellSize}px)`, - border: "1px solid black", width: `${cellSize * size}px`, borderRadius: "8px",