[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Game from './components/Game' export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/Board.tsx" isEdit="true" isMerged="true" import Square from './Square' interface BoardProps { squares: (string | null)[] onClick: (i: number) => void } export default function Board({ squares, onClick }: BoardProps) { return (

{squares.map((square, i) => ( onClick(i)} /> ))}

) } [V0_FILE]typescriptreact:file="app/utils/gameLogic.ts" isEdit="true" isMerged="true" export function calculateWinner(squares: (string | null)[]): { winner: string; line: number[] } | null { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ] for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i] if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return { winner: squares[a], line: lines[i] } } } return null } export function getAIMove(squares: (string | null)[]): number { // Check for winning move for (let i = 0; i < 9; i++) { if (!squares[i]) { const testSquares = squares.slice() testSquares[i] = 'o' if (calculateWinner(testSquares)) { return i } } } // Check for blocking player's winning move for (let i = 0; i < 9; i++) { if (!squares[i]) { const testSquares = squares.slice() testSquares[i] = 'x' if (calculateWinner(testSquares)) { return i } } } // Take center if available if (!squares[4]) return 4 // Take a corner const corners = [0, 2, 6, 8] const availableCorners = corners.filter(i => !squares[i]) if (availableCorners.length > 0) { return availableCorners[Math.floor(Math.random() * availableCorners.length)] } // Take any available side const sides = [1, 3, 5, 7] const availableSides = sides.filter(i => !squares[i]) if (availableSides.length > 0) { return availableSides[Math.floor(Math.random() * availableSides.length)] } // This should never happen if the board is not full return -1 } [V0_FILE]typescriptreact:file="app/components/TypewriterText.tsx" isMerged="true" 'use client' import { useState, useEffect } from 'react' interface TypewriterTextProps { text: string delay?: number } export default function TypewriterText({ text, delay = 50 }: TypewriterTextProps) { const [currentText, setCurrentText] = useState('') const [currentIndex, setCurrentIndex] = useState(0) useEffect(() => { if (currentIndex < text.length) { const timeout = setTimeout(() => { setCurrentText(prevText => prevText + text[currentIndex]) setCurrentIndex(prevIndex => prevIndex + 1) }, delay) return () => clearTimeout(timeout) } }, [currentIndex, delay, text]) useEffect(() => { setCurrentText('') setCurrentIndex(0) }, [text]) return {currentText} } [V0_FILE]typescriptreact:file="app/components/Game.tsx" isEdit="true" isQuickEdit="true" 'use client' import { useState, useEffect } from 'react' import { useRouter } from 'next/navigation' import Board from './Board' import WinningLine from './WinningLine' import TypewriterText from './TypewriterText' import { calculateWinner, getAIMove } from '../utils/gameLogic' export default function Game() { const [board, setBoard] = useState(Array(9).fill(null)) const [isXNext, setIsXNext] = useState(true) const [showWinningLine, setShowWinningLine] = useState(false) const router = useRouter() const winInfo = calculateWinner(board) const winner = winInfo ? winInfo.winner : null const winningLine = winInfo ? winInfo.line : null const isGameOver = winner || board.every(Boolean) useEffect(() => { if (!isXNext && !isGameOver) { const timer = setTimeout(() => { const aiMove = getAIMove(board) handleMove(aiMove) }, 1300) return () => clearTimeout(timer) } }, [isXNext, isGameOver, board]) useEffect(() => { if (winningLine) { const timer = setTimeout(() => setShowWinningLine(true), 50) return () => clearTimeout(timer) } }, [winningLine]) useEffect(() => { if (winner === 'x') { const timer = setTimeout(() => { router.push('https://iverfinne.no') }, 2000) // Redirect after 2 seconds return () => clearTimeout(timer) } }, [winner, router]) const handleMove = (i: number) => { if (winner || board[i]) return const newBoard = board.slice() newBoard[i] = isXNext ? 'x' : 'o' setBoard(newBoard) setIsXNext(!isXNext) setShowWinningLine(false) } const resetGame = () => { setBoard(Array(9).fill(null)) setIsXNext(true) setShowWinningLine(false) } let status if (winner) { status = winner === 'x' ? 'you win!' : 'ai wins!' } else if (isGameOver) { status = 'draw!' } else if (isXNext) { status = 'your turn' } else { status = 'ai is thinking...' } return (

{}} /> {showWinningLine && winningLine && ( )}

{(isGameOver && winner !== 'x') && (

)}

) } [V0_FILE]typescriptreact:file="app/components/Square.tsx" isEdit="true" isQuickEdit="true" interface SquareProps { value: string | null onClick: () => void } export default function Square({ value, onClick }: SquareProps) { return ( ) } [V0_FILE]typescriptreact:file="app/components/WinningLine.tsx" isEdit="true" isQuickEdit="true" 'use client' import { useEffect, useState } from 'react' interface WinningLineProps { start: number end: number } export default function WinningLine({ start, end }: WinningLineProps) { const [animate, setAnimate] = useState(false) useEffect(() => { const timer = setTimeout(() => setAnimate(true), 50) return () => clearTimeout(timer) }, []) const getCoordinates = (index: number) => { const col = index % 3 const row = Math.floor(index / 3) return { x: col * 100 + 50, y: row * 100 + 50 } } const startCoord = getCoordinates(start) const endCoord = getCoordinates(end) const lineLength = Math.sqrt( Math.pow(endCoord.x - startCoord.x, 2) + Math.pow(endCoord.y - startCoord.y, 2) ) return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import './globals.css' import { GeistMono } from 'geist/font/mono' export const metadata = { title: 'three in a row', description: 'a simple tic-tac-toe game built with next.js', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }

About

Tags

Share

About

Tags

Share

More from iverfinne

More Templates Like This

About

Tags

Share

About

Tags

Share

More from iverfinne

More Templates Like This