[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" // Common 5-letter words for the game const WORDS = [ "ABOUT", "ABOVE", "ABUSE", "ACTOR", "ACUTE", "ADMIT", "ADOPT", "ADULT", "AFTER", "AGAIN", "AGENT", "AGREE", "AHEAD", "ALARM", "ALBUM", "ALERT", "ALIEN", "ALIGN", "ALIKE", "ALIVE", "ALLOW", "ALONE", "ALONG", "ALTER", "AMONG", "ANGER", "ANGLE", "ANGRY", "APART", "APPLE", "APPLY", "ARENA", "ARGUE", "ARISE", "ARRAY", "ASIDE", "ASSET", "AUDIO", "AUDIT", "AVOID", "AWAKE", "AWARD", "AWARE", "BADLY", "BAKER", "BASES", "BASIC", "BEACH", "BEGAN", "BEGIN", "BEING", "BELOW", "BENCH", "BILLY", "BIRTH", "BLACK", "BLAME", "BLANK", "BLIND", "BLOCK", "BLOOD", "BOARD", "BOOST", "BOOTH", "BOUND", "BRAIN", "BRAND", "BRASS", "BRAVE", "BREAD", "BREAK", "BREED", "BRIEF", "BRING", "BROAD", "BROKE", "BROWN", "BUILD", "BUILT", "BUYER", "CABLE", "CALIF", "CARRY", "CATCH", "CAUSE", "CHAIN", "CHAIR", "CHAOS", "CHARM", "CHART", "CHASE", "CHEAP", "CHECK", "CHEST", "CHIEF", "CHILD", "CHINA", "CHOSE", "CIVIL", "CLAIM", "CLASS", "CLEAN", "CLEAR", "CLICK", "CLIMB", "CLOCK", "CLOSE", "CLOUD", "COACH", "COAST", "COULD", "COUNT", "COURT", "COVER", "CRAFT", "CRASH", "CRAZY", "CREAM", "CRIME", "CROSS", "CROWD", "CROWN", "CRUDE", "CURVE", "CYCLE", "DAILY", "DANCE", "DATED", "DEALT", "DEATH", "DEBUT", "DELAY", "DEPTH", "DOING", "DOUBT", "DOZEN", "DRAFT", "DRAMA", "DRANK", "DREAM", "DRESS", "DRILL", "DRINK", "DRIVE", "DROVE", "DYING", "EAGER", "EARLY", "EARTH", "EIGHT", "ELITE", "EMPTY", "ENEMY", "ENJOY", "ENTER", "ENTRY", "EQUAL", "ERROR", "EVENT", "EVERY", "EXACT", "EXIST", "EXTRA", "FAITH", "FALSE", "FAULT", "FIBER", "FIELD", "FIFTH", "FIFTY", "FIGHT", "FINAL", "FIRST", "FIXED", "FLASH", "FLEET", "FLOOR", "FLUID", "FOCUS", "FORCE", "FORTH", "FORTY", "FORUM", "FOUND", "FRAME", "FRANK", "FRAUD", "FRESH", "FRONT", "FRUIT", "FULLY", "FUNNY", "GIANT", "GIVEN", "GLASS", "GLOBE", "GOING", "GRACE", "GRADE", "GRAND", "GRANT", "GRASS", "GRAVE", "GREAT", "GREEN", "GROSS", "GROUP", "GROWN", "GUARD", "GUESS", "GUEST", "GUIDE", "HAPPY", "HARRY", "HEART", "HEAVY", "HENCE", "HENRY", "HORSE", "HOTEL", "HOUSE", "HUMAN", "IDEAL", "IMAGE", "INDEX", "INNER", "INPUT", "ISSUE", "JAPAN", "JIMMY", "JOINT", "JONES", "JUDGE", "KNOWN", "LABEL", "LARGE", "LASER", "LATER", "LAUGH", "LAYER", "LEARN", "LEASE", "LEAST", "LEAVE", "LEGAL", "LEVEL", "LEWIS", "LIGHT", "LIMIT", "LINKS", "LIVES", "LOCAL", "LOOSE", "LOWER", "LUCKY", "LUNCH", "LYING", "MAGIC", "MAJOR", "MAKER", "MARCH", "MARIA", "MATCH", "MAYBE", "MAYOR", "MEANT", "MEDIA", "METAL", "MIGHT", "MINOR", "MINUS", "MIXED", "MODEL", "MONEY", "MONTH", "MORAL", "MOTOR", "MOUNT", "MOUSE", "MOUTH", "MOVED", "MOVIE", "MUSIC", "NEEDS", "NEVER", "NEWLY", "NIGHT", "NOISE", "NORTH", "NOTED", "NOVEL", "NURSE", "OCCUR", "OCEAN", "OFFER", "OFTEN", "ORDER", "OTHER", "OUGHT", "PAINT", "PANEL", "PAPER", "PARTY", "PEACE", "PETER", "PHASE", "PHONE", "PHOTO", "PIANO", "PIECE", "PILOT", "PITCH", "PLACE", "PLAIN", "PLANE", "PLANT", "PLATE", "POINT", "POUND", "POWER", "PRESS", "PRICE", "PRIDE", "PRIME", "PRINT", "PRIOR", "PRIZE", "PROOF", "PROUD", "PROVE", "QUEEN", "QUICK", "QUIET", "QUITE", "RADIO", "RAISE", "RANGE", "RAPID", "RATIO", "REACH", "READY", "REALM", "REBEL", "REFER", "RELAX", "REPAY", "REPLY", "RIGHT", "RIGID", "RIVAL", "RIVER", "ROBIN", "ROGER", "ROMAN", "ROUGH", "ROUND", "ROUTE", "ROYAL", "RURAL", "SCALE", "SCENE", "SCOPE", "SCORE", "SENSE", "SERVE", "SETUP", "SEVEN", "SHALL", "SHAPE", "SHARE", "SHARP", "SHEET", "SHELF", "SHELL", "SHIFT", "SHINE", "SHIRT", "SHOCK", "SHOOT", "SHORT", "SHOWN", "SIGHT", "SILLY", "SINCE", "SIXTH", "SIXTY", "SIZED", "SKILL", "SLEEP", "SLIDE", "SMALL", "SMART", "SMILE", "SMITH", "SMOKE", "SOLID", "SOLVE", "SORRY", "SOUND", "SOUTH", "SPACE", "SPARE", "SPEAK", "SPEED", "SPEND", "SPENT", "SPLIT", "SPOKE", "SPORT", "STAFF", "STAGE", "STAKE", "STAND", "START", "STATE", "STEAM", "STEEL", "STEEP", "STEER", "STICK", "STILL", "STOCK", "STONE", "STOOD", "STORE", "STORM", "STORY", "STRIP", "STUCK", "STUDY", "STUFF", "STYLE", "SUGAR", "SUITE", "SUPER", "SWEET", "TABLE", "TAKEN", "TASTE", "TAXES", "TEACH", "TEAMS", "TEETH", "TERRY", "TEXAS", "THANK", "THEFT", "THEIR", "THEME", "THERE", "THESE", "THICK", "THING", "THINK", "THIRD", "THOSE", "THREE", "THREW", "THROW", "THUMB", "TIGHT", "TIRED", "TITLE", "TODAY", "TOPIC", "TOTAL", "TOUCH", "TOUGH", "TOWER", "TRACK", "TRADE", "TRAIN", "TREAT", "TREND", "TRIAL", "TRIBE", "TRICK", "TRIED", "TRIES", "TRUCK", "TRULY", "TRUNK", "TRUST", "TRUTH", "TWICE", "TWIST", "TYLER", "UNDER", "UNDUE", "UNION", "UNITY", "UNTIL", "UPPER", "UPSET", "URBAN", "USAGE", "USUAL", "VALID", "VALUE", "VIDEO", "VIRUS", "VISIT", "VITAL", "VOCAL", "VOICE", "WASTE", "WATCH", "WATER", "WHEEL", "WHERE", "WHICH", "WHILE", "WHITE", "WHOLE", "WHOSE", "WOMAN", "WOMEN", "WORLD", "WORRY", "WORSE", "WORST", "WORTH", "WOULD", "WRITE", "WRONG", "WROTE", "YOUNG", "YOUTH", ] type LetterState = "correct" | "present" | "absent" | "empty" interface GameState { board: string[][] currentRow: number currentCol: number gameStatus: "playing" | "won" | "lost" targetWord: string } export default function WordleGame() { const [gameState, setGameState] = useState(() => ({ board: Array(6) .fill(null) .map(() => Array(5).fill("")), currentRow: 0, currentCol: 0, gameStatus: "playing", targetWord: WORDS[Math.floor(Math.random() * WORDS.length)], })) const [letterStates, setLetterStates] = useState>({}) const [errorMessage, setErrorMessage] = useState("") const getLetterState = (letter: string, position: number, word: string): LetterState => { if (letter === word[position]) { return "correct" } else if (word.includes(letter)) { return "present" } else { return "absent" } } const showError = (message: string) => { setErrorMessage(message) setTimeout(() => setErrorMessage(""), 3000) } const handleKeyPress = useCallback( (key: string) => { console.log("[v0] Key pressed:", key, "Current state:", gameState.currentRow, gameState.currentCol) if (gameState.gameStatus !== "playing") return setGameState((prev) => { const newState = { ...prev } if (key === "ENTER") { console.log("[v0] Enter pressed, currentCol:", newState.currentCol) if (newState.currentCol === 5) { const currentWord = newState.board[newState.currentRow].join("") console.log("[v0] Submitting word:", currentWord, "Target:", newState.targetWord) console.log("[v0] Processing word") const newLetterStates = { ...letterStates } for (let i = 0; i < currentWord.length; i++) { const letter = currentWord[i] let state: LetterState if (letter === newState.targetWord[i]) { state = "correct" } else if (newState.targetWord.includes(letter)) { state = "present" } else { state = "absent" } if ( !newLetterStates[letter] || (newLetterStates[letter] === "absent" && state !== "absent") || (newLetterStates[letter] === "present" && state === "correct") ) { newLetterStates[letter] = state } } setTimeout(() => setLetterStates(newLetterStates), 0) console.log("[v0] Updated letter states:", newLetterStates) if (currentWord === newState.targetWord) { newState.gameStatus = "won" console.log("[v0] Game won!") } else if (newState.currentRow === 5) { newState.gameStatus = "lost" console.log("[v0] Game lost!") } else { newState.currentRow++ newState.currentCol = 0 console.log("[v0] Moving to next row:", newState.currentRow) } } else { showError("Not enough letters") } } else if (key === "BACKSPACE") { if (newState.currentCol > 0) { newState.currentCol-- newState.board[newState.currentRow][newState.currentCol] = "" } } else if (key.length === 1 && /[A-Z]/.test(key)) { if (newState.currentCol < 5) { newState.board[newState.currentRow][newState.currentCol] = key newState.currentCol++ } } return newState }) }, [gameState.gameStatus, letterStates], ) useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { const key = event.key.toUpperCase() if (key === "ENTER" || key === "BACKSPACE") { handleKeyPress(key) } else if (/^[A-Z]$/.test(key)) { handleKeyPress(key) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [handleKeyPress]) const resetGame = () => { setGameState({ board: Array(6) .fill(null) .map(() => Array(5).fill("")), currentRow: 0, currentCol: 0, gameStatus: "playing", targetWord: WORDS[Math.floor(Math.random() * WORDS.length)], }) setLetterStates({}) setErrorMessage("") } const getCellClass = (letter: string, rowIndex: number, colIndex: number) => { if (!letter) return "border-2 border-gray-300 bg-white hover:border-gray-400 transition-colors" if (rowIndex < gameState.currentRow) { const state = getLetterState(letter, colIndex, gameState.targetWord) switch (state) { case "correct": return "bg-gray-900 border-gray-900 text-white shadow-lg transform scale-105" case "present": return "bg-gray-600 border-gray-600 text-white shadow-md" case "absent": return "bg-gray-300 border-gray-300 text-gray-700" } } if (rowIndex === gameState.currentRow && colIndex < gameState.currentCol) { return "border-2 border-gray-500 bg-white shadow-sm" } return "border-2 border-gray-300 bg-white hover:border-gray-400 transition-all duration-200" } return (

WORDLE

{errorMessage && (

{errorMessage}

)}

{gameState.board.map((row, rowIndex) => (

{row.map((letter, colIndex) => (

{letter}

))}

{gameState.gameStatus !== "playing" && (

{gameState.gameStatus === "won" ? ( 🎉 Congratulations! ) : ( Game Over! )}

The word was:{" "} {gameState.targetWord}

)}

Guess the 5-letter word in 6 tries!

Use your keyboard to type

Correct

Wrong position

Not in word

) }

About

Tags

Share

About

Tags

Share

More from felixmacaspac

More Templates Like This

About

Tags

Share

About

Tags

Share

More from felixmacaspac

More Templates Like This