/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Game constants const GRID_SIZE = 7; const ROOMS = GRID_SIZE * GRID_SIZE; const MAX_ARROWS = 3; function generateMap() { const map = Array(ROOMS).fill(null); // Place Wumpus const wumpusRoom = Math.floor(Math.random() * ROOMS); map[wumpusRoom] = 'wumpus'; // Place Pits const pitCount = Math.floor(ROOMS / 8); for (let i = 0; i < pitCount; i++) { let pitRoom; do { pitRoom = Math.floor(Math.random() * ROOMS); } while (map[pitRoom] !== null); map[pitRoom] = 'pit'; } // Place Player let playerRoom; do { playerRoom = Math.floor(Math.random() * ROOMS); } while (map[playerRoom] !== null); return { map, playerRoom, destinationRoom: null, arrows: MAX_ARROWS, wumpusAlive: true }; } function getAdjacentRooms(room) { const row = Math.floor(room / GRID_SIZE); const col = room % GRID_SIZE; const adjacent = [ row > 0 ? room - GRID_SIZE : null, // Up row < GRID_SIZE - 1 ? room + GRID_SIZE : null, // Down col > 0 ? room - 1 : null, // Left col < GRID_SIZE - 1 ? room + 1 : null // Right ].filter(r => r !== null); return adjacent; } function checkNearbyHazards(map, playerRoom) { const adjacentRooms = getAdjacentRooms(playerRoom); const hazards = adjacentRooms.map(room => map[room]).filter(Boolean); return { nearPit: hazards.includes('pit'), nearWumpus: hazards.includes('wumpus') }; } function WumpusGame() { const [game, setGame] = useState(() => generateMap()); const [message, setMessage] = useState("Welcome to Hunt the Wumpus! Kill the Wumpus to reveal the treasure!"); const [gameState, setGameState] = useState('playing'); const [wumpusImageUrl, setWumpusImageUrl] = useState(null); const [pitImageUrl, setPitImageUrl] = useState(null); const [winImageUrl, setWinImageUrl] = useState(null); const [lossReason, setLossReason] = useState(null); // Generate a dancing Wumpus image when game is lost to Wumpus useEffect(() => { if (gameState === 'lost' && lossReason === 'wumpus') { const imageDescription = "a mischievous wumpus monster dancing victoriously, cartoon style, transparent background"; const encodedDesc = encodeURIComponent(imageDescription); const imageUrl = `https://maxm-imggenurl.web.val.run/${encodedDesc}`; setWumpusImageUrl(imageUrl); } }, [gameState, lossReason]); // Generate a pit fall image when falling into a pit useEffect(() => { if (gameState === 'lost' && lossReason === 'pit') { const imageDescription = "a cartoon character falling down a deep dark pit, comical falling pose, transparent background"; const encodedDesc = encodeURIComponent(imageDescription); const imageUrl = `https://maxm-imggenurl.web.val.run/${encodedDesc}`; setPitImageUrl(imageUrl); } }, [gameState, lossReason]); // Generate a winning celebration image useEffect(() => { if (gameState === 'won') { const imageDescription = "heroic adventurer celebrating victory with treasure, cartoon style, epic pose, confetti in background"; const encodedDesc = encodeURIComponent(imageDescription); const imageUrl = `https://maxm-imggenurl.web.val.run/${encodedDesc}`; setWinImageUrl(imageUrl); } }, [gameState]); const movePlayer = (newRoom) => { if (gameState !== 'playing') return; const adjacentRooms = getAdjacentRooms(game.playerRoom); if (!adjacentRooms.includes(newRoom)) { setMessage("You can only move to adjacent rooms!"); return; } const { map, playerRoom, destinationRoom } = game; switch(map[newRoom]) { case 'wumpus': setMessage("Oh no! You were eaten by the Wumpus! 💀"); setGameState('lost'); setLossReason('wumpus'); // Explicitly set loss reason break; case 'pit': setMessage("You fell into a bottomless pit! 🕳️"); setGameState('lost'); setLossReason('pit'); // Explicitly set loss reason break; case 'destination': if (!game.wumpusAlive) { setMessage("Congratulations! You found the treasure! 🏆"); setGameState('won'); } else { setMessage("The treasure is hidden until you kill the Wumpus!"); } break; default: const { nearPit, nearWumpus } = checkNearbyHazards(map, newRoom); let newMessage = "You moved safely."; if (nearPit) newMessage += " You sense a draft..."; if (nearWumpus) newMessage += " You smell a terrible stench!"; setGame({ ...game, playerRoom: newRoom }); setMessage(newMessage); } }; const shootArrow = (direction) => { if (gameState !== 'playing') return; const { playerRoom, map, wumpusAlive, arrows } = game; const adjacentRooms = getAdjacentRooms(playerRoom); const targetRoom = adjacentRooms[direction]; if (!targetRoom) { setMessage("You can't shoot in that direction!"); return; } const newArrowCount = arrows - 1; let newMessage = `You shoot an arrow ${['up', 'down', 'left', 'right'][direction]}. `; if (map[targetRoom] === 'wumpus' && wumpusAlive) { newMessage += "You killed the Wumpus! 🏹 A hidden treasure appears!"; const newMap = [...map]; newMap[targetRoom] = null; // Place destination after killing Wumpus let destinationRoom; do { destinationRoom = Math.floor(Math.random() * ROOMS); } while (newMap[destinationRoom] !== null); newMap[destinationRoom] = 'destination'; setGame(prev => ({ ...prev, map: newMap, destinationRoom, arrows: newArrowCount, wumpusAlive: false })); } else { newMessage += "The arrow misses."; // Check if this was the last arrow if (newArrowCount === 0 && wumpusAlive) { newMessage += " You're out of arrows! The Wumpus survives... 😱"; setGameState('lost'); setLossReason('arrows'); } setGame(prev => ({ ...prev, arrows: newArrowCount })); } setMessage(newMessage); }; const resetGame = () => { const newGame = generateMap(); setGame(newGame); setMessage("New game started! Kill the Wumpus to reveal the treasure!"); setGameState('playing'); setWumpusImageUrl(null); setPitImageUrl(null); setWinImageUrl(null); setLossReason(null); }; // Render pit fall overlay if (gameState === 'lost' && lossReason === 'pit') { return (

You Fell into a Bottomless Pit! 🕳️

); } // Render dancing Wumpus overlay if game is lost to Wumpus if (gameState === 'lost' && lossReason === 'wumpus') { return (

You Were Eaten! 💀

); } // Render game lost due to running out of arrows if (gameState === 'lost' && lossReason === 'arrows') { return (

Game Over! You're out of arrows! 🏹

); } // Render win screen with full-screen celebration if (gameState === 'won') { return (

{/* Confetti-like elements */} {[...Array(50)].map((_, i) => (

))}

🏆 VICTORY! 🏆

You defeated the Wumpus and found the treasure!

); } return (

🏹 Hunt the Wumpus 🏹

{game.map.map((cell, index) => ( ))}

{message}

{(gameState === 'won') && ( )} View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Hunt the Wumpus

`, { headers: { "content-type": "text/html" } }); }

huntTheWumpusWebVersion