/** * This val implements a Dino Code Adventure game using React. * It uses client-side React for the game logic and UI, and * includes a server-side endpoint for storing high scores. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useCallback } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const GRID_SIZE = 5; const MAX_MOVES = 10; const ANIMATION_SPEED = 1000; // 1 second per move const CELL_CONTENTS = { EMPTY: '', DINO: '🦕', ELEPHANT: '🐘', GIRAFFE: '🦒', LION: '🦁', MONKEY: '🐒', HIPPO: '🦛', TREE: '🌳', TELEPORTER: '🌀', PATH: '👣', }; const MOVE_TYPES = { UP: 'U', DOWN: 'D', LEFT: 'L', RIGHT: 'R', }; const initialGrid = () => { const grid = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(CELL_CONTENTS.EMPTY)); const animals = [CELL_CONTENTS.ELEPHANT, CELL_CONTENTS.GIRAFFE, CELL_CONTENTS.LION, CELL_CONTENTS.MONKEY, CELL_CONTENTS.HIPPO]; // Place dino grid[0][0] = CELL_CONTENTS.DINO; // Place animals animals.forEach(animal => { let x, y; do { x = Math.floor(Math.random() * GRID_SIZE); y = Math.floor(Math.random() * GRID_SIZE); } while (grid[y][x] !== CELL_CONTENTS.EMPTY); grid[y][x] = animal; }); // Place trees and teleporter for (let i = 0; i < 2; i++) { let x, y; do { x = Math.floor(Math.random() * GRID_SIZE); y = Math.floor(Math.random() * GRID_SIZE); } while (grid[y][x] !== CELL_CONTENTS.EMPTY); grid[y][x] = CELL_CONTENTS.TREE; } let tx, ty; do { tx = Math.floor(Math.random() * GRID_SIZE); ty = Math.floor(Math.random() * GRID_SIZE); } while (grid[ty][tx] !== CELL_CONTENTS.EMPTY); grid[ty][tx] = CELL_CONTENTS.TELEPORTER; return grid; }; function App() { const [grid, setGrid] = useState(initialGrid); const [moves, setMoves] = useState([]); const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); const [message, setMessage] = useState("Welcome to Dino Code Adventure!"); const [showPreview, setShowPreview] = useState(false); const [previewGrid, setPreviewGrid] = useState(null); const [isAnimating, setIsAnimating] = useState(false); const [highScores, setHighScores] = useState([]); useEffect(() => { fetchHighScores(); }, []); const fetchHighScores = async () => { const response = await fetch('/highscores'); const scores = await response.json(); setHighScores(scores); }; const addMove = (move) => { if (moves.length < MAX_MOVES && !gameOver && !isAnimating) { setMoves([...moves, move]); setShowPreview(false); } }; const deleteMove = (index) => { if (!isAnimating) { const newMoves = moves.filter((_, i) => i !== index); setMoves(newMoves); setShowPreview(false); } }; const togglePreviewPath = () => { if (isAnimating) return; if (showPreview) { setShowPreview(false); setPreviewGrid(null); return; } let newGrid = grid.map(row => [...row]); let dinoPos = { x: 0, y: 0 }; // Find initial dino position for (let y = 0; y < GRID_SIZE; y++) { for (let x = 0; x < GRID_SIZE; x++) { if (newGrid[y][x] === CELL_CONTENTS.DINO) { dinoPos = { x, y }; break; } } } moves.forEach(move => { let newPos = { ...dinoPos }; switch (move) { case MOVE_TYPES.UP: newPos.y = (newPos.y - 1 + GRID_SIZE) % GRID_SIZE; break; case MOVE_TYPES.DOWN: newPos.y = (newPos.y + 1) % GRID_SIZE; break; case MOVE_TYPES.LEFT: newPos.x = (newPos.x - 1 + GRID_SIZE) % GRID_SIZE; break; case MOVE_TYPES.RIGHT: newPos.x = (newPos.x + 1) % GRID_SIZE; break; } if (newGrid[newPos.y][newPos.x] === CELL_CONTENTS.TREE) { // Don't move if hit tree return; } if (newGrid[newPos.y][newPos.x] === CELL_CONTENTS.TELEPORTER) { // Don't show preview for teleporter dinoPos = newPos; return; } if (newGrid[newPos.y][newPos.x] === CELL_CONTENTS.EMPTY) { newGrid[newPos.y][newPos.x] = CELL_CONTENTS.PATH; } dinoPos = newPos; }); // Place dino at final position newGrid[dinoPos.y][dinoPos.x] = CELL_CONTENTS.DINO; setPreviewGrid(newGrid); setShowPreview(true); }; const animateMove = (move, currentGrid, dinoPos) => { return new Promise(resolve => { let newGrid = currentGrid.map(row => [...row]); let newDinoPos = { ...dinoPos }; newGrid[dinoPos.y][dinoPos.x] = CELL_CONTENTS.EMPTY; switch (move) { case MOVE_TYPES.UP: newDinoPos.y = (newDinoPos.y - 1 + GRID_SIZE) % GRID_SIZE; break; case MOVE_TYPES.DOWN: newDinoPos.y = (newDinoPos.y + 1) % GRID_SIZE; break; case MOVE_TYPES.LEFT: newDinoPos.x = (newDinoPos.x - 1 + GRID_SIZE) % GRID_SIZE; break; case MOVE_TYPES.RIGHT: newDinoPos.x = (newDinoPos.x + 1) % GRID_SIZE; break; } if (newGrid[newDinoPos.y][newDinoPos.x] === CELL_CONTENTS.TREE) { // Move back if hit tree newDinoPos = { ...dinoPos }; } else if (newGrid[newDinoPos.y][newDinoPos.x] === CELL_CONTENTS.TELEPORTER) { // Teleport to random empty cell do { newDinoPos = { x: Math.floor(Math.random() * GRID_SIZE), y: Math.floor(Math.random() * GRID_SIZE) }; } while (newGrid[newDinoPos.y][newDinoPos.x] !== CELL_CONTENTS.EMPTY); } newGrid[newDinoPos.y][newDinoPos.x] = CELL_CONTENTS.DINO; setTimeout(() => { setGrid(newGrid); resolve(newDinoPos); }, ANIMATION_SPEED); }); }; const runMoves = useCallback(async () => { if (isAnimating) return; setIsAnimating(true); setShowPreview(false); let currentGrid = grid.map(row => [...row]); let dinoPos = { x: 0, y: 0 }; let newScore = score; // Find initial dino position for (let y = 0; y < GRID_SIZE; y++) { for (let x = 0; x < GRID_SIZE; x++) { if (currentGrid[y][x] === CELL_CONTENTS.DINO) { dinoPos = { x, y }; break; } } } const movesToExecute = [...moves]; for (let move of movesToExecute) { dinoPos = await animateMove(move, currentGrid, dinoPos); currentGrid = grid.map(row => [...row]); if ([CELL_CONTENTS.ELEPHANT, CELL_CONTENTS.GIRAFFE, CELL_CONTENTS.LION, CELL_CONTENTS.MONKEY, CELL_CONTENTS.HIPPO].includes(currentGrid[dinoPos.y][dinoPos.x])) { newScore++; } } setScore(newScore); setMoves([]); setGameOver(true); setMessage(`Game Over! Your score: ${newScore}`); setIsAnimating(false); // Submit high score await fetch('/highscore', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ score: newScore }) }); fetchHighScores(); }, [grid, moves, score]); const resetGame = () => { if (isAnimating) return; setGrid(initialGrid()); setMoves([]); setScore(0); setGameOver(false); setMessage("New game started! Good luck!"); setShowPreview(false); setPreviewGrid(null); }; useEffect(() => { const handleKeyDown = (event) => { if (isAnimating) return; switch (event.key) { case 'ArrowUp': addMove(MOVE_TYPES.UP); break; case 'ArrowDown': addMove(MOVE_TYPES.DOWN); break; case 'ArrowLeft': addMove(MOVE_TYPES.LEFT); break; case 'ArrowRight': addMove(MOVE_TYPES.RIGHT); break; default: break; } }; window.addEventListener('keydown', handleKeyDown); return () => { window.removeEventListener('keydown', handleKeyDown); }; }, [isAnimating, moves]); const displayGrid = showPreview ? previewGrid : grid; return (

Dino Code Adventure

{displayGrid && displayGrid.map((row, y) => ( row.map((cell, x) => (

{cell}

)) ))}

Moves:

{moves.map((move, index) => (

{move}

))}

Score: {score}

{message}

High Scores:

{highScore.score}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1 const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_highscores_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, score INTEGER NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); if (request.method === 'POST' && request.url.endsWith('/highscore')) { const { score } = await request.json(); await sqlite.execute(`INSERT INTO ${KEY}_highscores_${SCHEMA_VERSION} (score) VALUES (?)`, [score]); return new Response('Score saved', { status: 200 }); } if (request.url.endsWith('/highscores')) { const result = await sqlite.execute(`SELECT score FROM ${KEY}_highscores_${SCHEMA_VERSION} ORDER BY score DESC LIMIT 5`); return new Response(JSON.stringify(result.rows), { headers: { 'Content-Type': 'application/json' } }); } return new Response(` Dino Code Adventure

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; } `; export default server;

KidsCodingDameDinoAdventure