diff --git a/app/games/slide-puzzle/components/GameBoard.tsx b/app/games/slide-puzzle/components/GameBoard.tsx index f91f8f0..784ae47 100644 --- a/app/games/slide-puzzle/components/GameBoard.tsx +++ b/app/games/slide-puzzle/components/GameBoard.tsx @@ -8,7 +8,8 @@ export default function GameBoard() { const router = useRouter(); const [board, setBoard] = useState([]); const [moves, setMoves] = useState(0); - const [isComplete, setIsComplete] = useState(false); + const isComplete = + board.length > 0 && board.every((value, index) => value === index); const [startTime, setStartTime] = useState(null); const [difficulty, setDifficulty] = useState<"easy" | "hard">("easy"); @@ -65,7 +66,6 @@ export default function GameBoard() { const initialBoard = Array.from({ length: size }, (_, i) => i); setBoard(shuffleBoard(initialBoard)); setMoves(0); - setIsComplete(false); setStartTime(Date.now()); }, [shuffleBoard, difficulty]); @@ -89,23 +89,22 @@ export default function GameBoard() { ]; setBoard(newBoard); setMoves((prev) => prev + 1); - - // 状態更新後に完成チェックを実行 - const isCompleted = newBoard.every((value, idx) => value === idx); - if (isCompleted) { - const finalTime = Date.now() - (startTime ?? 0); - setIsComplete(true); - setTimeout(() => { - router.push( - `/games/slide-puzzle/complete?time=${finalTime}&moves=${ - moves + 1 - }&difficulty=${difficulty}`, - ); - }, 500); - } } }; + // 完成時の処理 + useEffect(() => { + if (isComplete) { + const finalTime = Date.now() - (startTime ?? 0); + const timer = setTimeout(() => { + router.push( + `/games/slide-puzzle/complete?time=${finalTime}&moves=${moves}&difficulty=${difficulty}`, + ); + }, 500); + return () => clearTimeout(timer); + } + }, [isComplete, startTime, moves, difficulty, router]); + // シャッフルボタンのクリックハンドラ const handleShuffle = () => { initializeBoard(); diff --git a/app/guess-number/GuessNumber.tsx b/app/guess-number/GuessNumber.tsx index aee3d30..6cb13a6 100644 --- a/app/guess-number/GuessNumber.tsx +++ b/app/guess-number/GuessNumber.tsx @@ -10,7 +10,8 @@ const numbers = [ ]; export const GuessNumber = () => { - const [time, setTime] = useState(0); + const timeRef = useRef(0); + const timeDisplayRef = useRef(null); const timer = useRef(null); const [isStarted, setIsStarted] = useState(false); const [correctNumber, setCorrectNumber] = useState(); @@ -36,21 +37,29 @@ export const GuessNumber = () => { 結果をXで共有する -
{time.toFixed(1)}s
+
+ 0.0s +