[V0_FILE]typescriptreact:file="types/game.ts" export type GameState = { guesses: string[][] currentGuess: string[] currentRow: number solution: string gameOver: boolean won: boolean } export type KeyboardKey = { key: string state: "correct" | "present" | "absent" | "unused" } export type GameMode = { id: string title: string description: string icon: string } [V0_FILE]typescriptreact:file="components/game-board.tsx" interface GameBoardProps { guesses: string[][] currentGuess: string[] currentRow: number } export function GameBoard({ guesses, currentGuess, currentRow }: GameBoardProps) { return (

{guesses.map((guess, i) => (

{guess.map((letter, j) => (

{letter}

))}

))} {currentRow < 6 && (

{Array(5) .fill("") .map((_, i) => (

{currentGuess[i] || ""}

))}

)}

) } [V0_FILE]typescriptreact:file="components/keyboard.tsx" import type { KeyboardKey } from "../types/game" interface KeyboardProps { onKeyPress: (key: string) => void keys: KeyboardKey[] } export function Keyboard({ onKeyPress, keys }: KeyboardProps) { const rows = [ ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], ["A", "S", "D", "F", "G", "H", "J", "K", "L"], ["Enter", "Z", "X", "C", "V", "B", "N", "M", "Backspace"], ] return (

{rows.map((row, i) => (

{row.map((key) => { const keyState = keys.find((k) => k.key === key)?.state || "unused" return ( ) })}

))}

) } [V0_FILE]typescriptreact:file="components/game-modes.tsx" import type { GameMode } from "../types/game" import Image from "next/image" import Link from "next/link" const gameModes: GameMode[] = [ { id: "squares", title: "Squares", description: "New word search game", icon: "https://sjc.microlink.io/UIEj4diLtpxJnxsXFh1kBdUnWWwJnA96sv8NeHitemMENjz_4ip14vMbaG6R-6WPO6Zw26cLnHM7KdXQ0-rYgA.jpeg", }, { id: "combinations", title: "Combinations", description: "Combine letters and create words", icon: "https://sjc.microlink.io/UIEj4diLtpxJnxsXFh1kBdUnWWwJnA96sv8NeHitemMENjz_4ip14vMbaG6R-6WPO6Zw26cLnHM7KdXQ0-rYgA.jpeg", }, { id: "spellbee", title: "SpellBee", description: "Make words with 7 letters", icon: "https://sjc.microlink.io/UIEj4diLtpxJnxsXFh1kBdUnWWwJnA96sv8NeHitemMENjz_4ip14vMbaG6R-6WPO6Zw26cLnHM7KdXQ0-rYgA.jpeg", }, { id: "strands", title: "Strands", description: "Solve a 5x5 letter grid", icon: "https://sjc.microlink.io/UIEj4diLtpxJnxsXFh1kBdUnWWwJnA96sv8NeHitemMENjz_4ip14vMbaG6R-6WPO6Zw26cLnHM7KdXQ0-rYgA.jpeg", }, ] export function GameModes() { return (

Play Other Games

{gameModes.map((mode) => (

{mode.title}

{mode.description}

Play

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { GameBoard } from "@/components/game-board" import { Keyboard } from "@/components/keyboard" import { GameModes } from "@/components/game-modes" import type { GameState, KeyboardKey } from "@/types/game" export default function Home() { const [gameState, setGameState] = useState({ guesses: Array(6).fill(Array(5).fill("")), currentGuess: Array(5).fill(""), currentRow: 0, solution: "WORLD", gameOver: false, won: false, }) const [keys, setKeys] = useState([]) const handleKeyPress = (key: string) => { if (gameState.gameOver) return if (key === "Enter") { // Handle guess submission if (gameState.currentGuess.filter(Boolean).length === 5) { const guess = gameState.currentGuess.join("") if (guess === gameState.solution) { setGameState((prev) => ({ ...prev, gameOver: true, won: true })) } else if (gameState.currentRow === 5) { setGameState((prev) => ({ ...prev, gameOver: true })) } else { setGameState((prev) => ({ ...prev, guesses: prev.guesses.map((g, i) => (i === prev.currentRow ? prev.currentGuess : g)), currentGuess: Array(5).fill(""), currentRow: prev.currentRow + 1, })) } } } else if (key === "Backspace") { setGameState((prev) => ({ ...prev, currentGuess: prev.currentGuess.map((letter, i) => i === prev.currentGuess.filter(Boolean).length - 1 ? "" : letter, ), })) } else if (/^[A-Z]$/.test(key)) { setGameState((prev) => ({ ...prev, currentGuess: prev.currentGuess.map((letter, i) => i === prev.currentGuess.filter(Boolean).length ? key : letter, ), })) } } return (

) }