diff --git a/src/tictactoe/Board.tsx b/src/tictactoe/Board.tsx index 246d0af..6f26b4e 100644 --- a/src/tictactoe/Board.tsx +++ b/src/tictactoe/Board.tsx @@ -1,6 +1,7 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { useNakama } from "./providers/NakamaProvider"; +import getHaiku from "./utils/haikus"; interface BoardProps { board: string[][]; @@ -47,6 +48,21 @@ export default function Board({ status = isMyTurn ? "Your turn" : "Opponent's turn"; } + const [haiku, setHaiku] = useState(getHaiku()); + const [haikuIndex, setHaikuIndex] = useState(0); + + useEffect(() => { + const totalTime = 3 * 2400 + 6000 + 2400; + + const timer = setTimeout(() => { + const next = getHaiku(); + setHaiku(next); + setHaikuIndex((i) => i + 1); + }, totalTime); + + return () => clearTimeout(timer); + }, [haikuIndex]); + return ( <> {matchId && ( @@ -154,6 +170,58 @@ export default function Board({ )} + {!winner && ( +
+ + + {haiku.map((line, i) => ( + + {line} + + ))} + + +
+ )} + {/* Winner pulse animation */} {winner && (