{isWin ? \"You Win! 🏆\" : \"Game Over!\"}

\n {isWin\n ?

Congratulations! You've mastered the art of ghost-whacking!

\n : isTooManyWrongClicks\n ?

Too many wrong clicks! The ghosts have overwhelmed you...

\n :

The ghosts have overwhelmed you...

}\n

Final Score: {score}

{isWin ? \"🏆\" : \"👻\"}

\n \n

\n );\n}\n\n/**\n * GameDescription component - Displays game instructions and rules\n */\nfunction GameDescription() {\n return (\n

How to Play

Choose a difficulty level
Click or tap on ghosts as they appear
Avoid empty cells
Score points before time runs out

Game Rules

+1 point per ghost whacked
Game ends when timer hits 0 or after 10 wrong clicks
Higher levels = larger grids and faster ghosts
All levels have a 20-second time limit
Win by scoring {WINNING_SCORE} points

Enjoy the ghostly fun! 🎃

\n );\n}\n\n/**\n * Main App component for the Whack-a-Ghost game\n */\nfunction App() {\n const [score, setScore] = useState(0);\n const [activeGhost, setActiveGhost] = useState(-1);\n const [level, setLevel] = useState(0);\n const [gameStarted, setGameStarted] = useState(false);\n const [timeLeft, setTimeLeft] = useState(GAME_DURATIONS[0]);\n const [wrongClicks, setWrongClicks] = useState(0);\n const [lost, setLost] = useState(false);\n const [isTimeOut, setIsTimeOut] = useState(false);\n const [isTooManyWrongClicks, setIsTooManyWrongClicks] = useState(false);\n const [isWin, setIsWin] = useState(false);\n\n const gridSize = GRID_SIZES[level];\n const totalCells = gridSize * gridSize;\n\n /**\n * Starts a new game\n */\n const startGame = useCallback(() => {\n setScore(0);\n setGameStarted(true);\n setTimeLeft(GAME_DURATIONS[level]);\n setWrongClicks(0);\n setLost(false);\n setIsTimeOut(false);\n setIsTooManyWrongClicks(false);\n setIsWin(false);\n }, [level]);\n\n /**\n * Ends the current game\n * @param {boolean} isTimeout - Whether the game ended due to timeout\n * @param {boolean} isTooManyWrong - Whether the game ended due to too many wrong clicks\n * @param {boolean} isWinning - Whether the player has won the game\n */\n const endGame = useCallback((isTimeout: boolean, isTooManyWrong: boolean, isWinning: boolean) => {\n setGameStarted(false);\n setIsTimeOut(isTimeout);\n setIsTooManyWrongClicks(isTooManyWrong);\n setIsWin(isWinning);\n setLost(!isWinning);\n console.log(\n \"Game ended. isWin:\",\n isWinning,\n \"Score:\",\n score,\n \"isTimeout:\",\n isTimeout,\n \"isTooManyWrong:\",\n isTooManyWrong,\n );\n if (isWinning) {\n triggerConfetti();\n }\n }, [score]);\n\n /**\n * Handles ghost clicking logic\n * @param {number} index - Index of the clicked cell\n */\n const whackGhost = useCallback((index: number) => {\n if (index === activeGhost) {\n setScore((prevScore) => {\n const newScore = prevScore + 1;\n console.log(\"New score:\", newScore);\n if (newScore >= WINNING_SCORE) {\n console.log(\"Win condition met!\");\n endGame(false, false, true);\n }\n return newScore;\n });\n setActiveGhost(-1);\n } else {\n setWrongClicks((prevWrongClicks) => {\n const newWrongClicks = prevWrongClicks + 1;\n if (newWrongClicks >= MAX_WRONG_CLICKS) {\n endGame(false, true, false);\n }\n return newWrongClicks;\n });\n }\n }, [activeGhost, endGame]);\n\n /**\n * Triggers confetti animation for winning the game\n */\n const triggerConfetti = useCallback(() => {\n confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 },\n });\n }, []);\n\n /**\n * Returns to the home screen\n */\n const goHome = useCallback(() => {\n setGameStarted(false);\n setLost(false);\n setLevel(0);\n setIsWin(false);\n }, []);\n\n // Game loop effect\n useEffect(() => {\n if (!gameStarted) return;\n\n const ghostInterval = setInterval(() => {\n const newGhostPosition = Math.floor(Math.random() * totalCells);\n setActiveGhost(newGhostPosition);\n }, LEVEL_SPEEDS[level]);\n\n const timerInterval = setInterval(() => {\n setTimeLeft((prevTime) => {\n if (prevTime <= 1) {\n clearInterval(ghostInterval);\n clearInterval(timerInterval);\n endGame(true, false, false);\n return 0;\n }\n return prevTime - 1;\n });\n }, 1000);\n\n return () => {\n clearInterval(ghostInterval);\n clearInterval(timerInterval);\n };\n }, [gameStarted, level, totalCells, endGame]);\n\n return (\n

Whack-a-Ghost 👻

\n {!gameStarted\n ? (\n lost || isWin\n ? (\n \n )\n : (\n <>\n \n

Select Level

\n {LEVEL_SPEEDS.map((_, index) => (\n {\n setLevel(index);\n startGame();\n }}\n >\n Level {index + 1} ({GRID_SIZES[index]}x{GRID_SIZES[index]})\n \n ))}\n

\n \n )\n )\n : (\n <>\n

Score: {score}

Time: {timeLeft}s

Wrong: {wrongClicks}/{MAX_WRONG_CLICKS}

\n \n {[...Array(totalCells)].map((_, index) => (\n whackGhost(index)}\n >\n {activeGhost === index && \"👻\"}\n

\n ))}\n \n

\n \n \n

\n \n )}\n

\n \n View Source\n \n

\n \n );\n}\n\n/**\n * Client-side rendering function\n */\nexport function client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n } else {\n console.error(\"Root element not found\");\n }\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\n/**\n * Server-side rendering function\n * @param {Request} request - The incoming request object\n * @returns {Promise} The response object with the HTML content\n */\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n Whack-a-Ghost\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n@keyframes flicker {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.8; }\n}\n\nbody {\n margin: 0;\n font-family: 'Roboto', sans-serif;\n background-color: #1a1a1a;\n background-image: url(\"data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23333333' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E\");\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n color: #f0f0f0;\n}\n\n.game-container {\n text-align: center;\n background-color: rgba(0, 0, 0, 0.8);\n padding: 20px;\n border-radius: 20px;\n box-shadow: 0 0 30px rgba(173, 216, 230, 0.2);\n width: 90%;\n max-width: 800px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\nh1, h2 {\n font-family: 'Creepster', cursive;\n color: #ff6b6b;\n text-shadow: 3px 3px 6px rgba(255, 0, 0, 0.5);\n margin-bottom: 20px;\n}\n\nh1 {\n font-size: 3em;\n animation: flicker 5s infinite;\n}\n\nh2 {\n font-size: 2em;\n}\n\n.menu {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n\nbutton {\n margin: 10px;\n padding: 10px 20px;\n font-size: 18px;\n cursor: pointer;\n background-color: #4a0e0e;\n color: #f0f0f0;\n border: none;\n border-radius: 10px;\n transition: all 0.3s;\n font-family: 'Creepster', cursive;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);\n width: 100%;\n max-width: 300px;\n}\n\nbutton:hover, button:active {\n background-color: #6a0e0e;\n transform: scale(1.05);\n box-shadow: 0 0 25px rgba(255, 0, 0, 0.5);\n}\n\n.home-button {\n background-color: #2a4a0e;\n}\n\n.home-button:hover, .home-button:active {\n background-color: #3a6a0e;\n}\n\n.game-info {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n margin-bottom: 20px;\n width: 100%;\n}\n\n.score, .timer, .wrong-clicks {\n font-size: 18px;\n color: #4df0e8;\n text-shadow: 2px 2px 4px rgba(77, 240, 232, 0.5);\n margin: 5px;\n}\n\n.grid {\n display: grid;\n gap: 10px;\n margin: 0 auto 20px;\n justify-content: center;\n width: 100%;\n max-width: 600px;\n aspect-ratio: 1 / 1;\n}\n\n.cell {\n background-color: #2a2a2a;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 30px;\n cursor: pointer;\n border-radius: 10px;\n transition: all 0.3s;\n box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);\n aspect-ratio: 1 / 1;\n}\n\n.cell:hover, .cell:active {\n background-color: #3a3a3a;\n transform: scale(1.05);\n box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);\n}\n\n.ghost {\n background-color: #4a0e0e;\n animation: flicker 0.5s infinite;\n}\n\n.spooky-message {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: auto;\n min-height: 300px;\n}\n\n.spooky-message h2 {\n font-size: 3em;\n margin-bottom: 20px;\n}\n\n.spooky-message p {\n font-size: 1.2em;\n margin-bottom: 20px;\n}\n\n.spooky-ghost {\n font-size: 4em;\n animation: float 3s ease-in-out infinite;\n}\n\n@keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n}\n\n.source-link {\n margin-top: 20px;\n}\n\n.source-link a {\n color: #4df0e8;\n text-decoration: none;\n font-size: 0.9em;\n transition: all 0.3s;\n}\n\n.source-link a:hover {\n color: #ff6b6b;\n text-decoration: underline;\n}\n\n.game-description {\n background-color: rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n padding: 15px;\n margin-bottom: 20px;\n text-align: left;\n width: 100%;\n max-width: 600px;\n}\n\n.game-description h3 {\n color: #ff6b6b;\n font-family: 'Creepster', cursive;\n font-size: 1.5em;\n margin-bottom: 10px;\n}\n\n.game-description ul {\n list-style-type: none;\n padding-left: 0;\n}\n\n.game-description li {\n margin-bottom: 5px;\n font-size: 1em;\n}\n\n.game-description li::before {\n content: \"👻 \";\n margin-right: 5px;\n}\n\n.game-description p {\n font-size: 1.1em;\n font-weight: bold;\n color: #4df0e8;\n margin-top: 15px;\n}\n\n@media (max-width: 600px) {\n .game-container {\n padding: 10px;\n }\n\n h1 {\n font-size: 2.5em;\n }\n\n h2 {\n font-size: 1.8em;\n }\n\n button {\n font-size: 16px;\n padding: 8px 16px;\n }\n\n .game-info {\n font-size: 16px;\n }\n\n .cell {\n font-size: 24px;\n }\n\n .spooky-message h2 {\n font-size: 2.5em;\n }\n\n .spooky-message p {\n font-size: 1em;\n }\n\n .spooky-ghost {\n font-size: 3em;\n }\n\n .game-description h3 {\n font-size: 1.3em;\n }\n\n .game-description li {\n font-size: 0.9em;\n }\n\n .game-description p {\n font-size: 1em;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Ttt/whackaghost/code/main.tsx","extension","actionData","errors"]