// This app will create a virtual pet simulation game where users can adopt, care for, and interact with a digital creature. // We'll use React for the frontend, SQLite for data persistence, and custom emoji combinations for visuals. /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const EMOTIONS = { happy: "😊", sad: "😢", angry: "😠", hungry: "🍽️", sleepy: "😴", }; const FOODS = ["🍎", "🍌", "🥕", "🍖", "🍣"]; function App() { const [pet, setPet] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetchPet(); }, []); const fetchPet = async () => { const response = await fetch("/pet"); const data = await response.json(); setPet(data); setLoading(false); }; const interact = async (action) => { const response = await fetch("/interact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action }), }); const data = await response.json(); setPet(data); }; if (loading) return

Loading your pet...

; if (!pet) return

Error loading pet

; return (

Virtual Pet Simulator

{pet.species === "cat" ? "🐱" : "🐶"} {EMOTIONS[pet.emotion]}

Name: {pet.name}

Health: {pet.health}

Happiness: {pet.happiness}

Last fed: {new Date(pet.lastFed).toLocaleString()}

{FOODS.map((food, index) => ( ))}

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}_pets_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, species TEXT NOT NULL, health INTEGER NOT NULL, happiness INTEGER NOT NULL, emotion TEXT NOT NULL, lastFed DATETIME NOT NULL ) `); if (request.method === "GET" && new URL(request.url).pathname === "/pet") { const pet = await getPet(); return new Response(JSON.stringify(pet), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/interact") { const { action } = await request.json(); const updatedPet = await updatePet(action); return new Response(JSON.stringify(updatedPet), { headers: { "Content-Type": "application/json" }, }); } return new Response( ` Virtual Pet Simulator

`, { headers: { "content-type": "text/html", }, }, ); } async function getPet() { 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); let pet = (await sqlite.execute(`SELECT * FROM ${KEY}_pets_${SCHEMA_VERSION} LIMIT 1`)).rows[0]; if (!pet) { pet = { name: "Fluffy", species: Math.random() > 0.5 ? "cat" : "dog", health: 100, happiness: 100, emotion: "happy", lastFed: new Date().toISOString(), }; await sqlite.execute( `INSERT INTO ${KEY}_pets_${SCHEMA_VERSION} (name, species, health, happiness, emotion, lastFed) VALUES (?, ?, ?, ?, ?, ?)`, [pet.name, pet.species, pet.health, pet.happiness, pet.emotion, pet.lastFed], ); } return pet; } async function updatePet(action) { 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); let pet = await getPet(); switch (action) { case "pet": pet.happiness = Math.min(100, pet.happiness + 10); pet.emotion = "happy"; break; case "play": pet.happiness = Math.min(100, pet.happiness + 15); pet.health = Math.max(0, pet.health - 5); pet.emotion = "happy"; break; case "sleep": pet.health = Math.min(100, pet.health + 20); pet.emotion = "sleepy"; break; default: if (action.startsWith("feed_")) { const foodIndex = parseInt(action.split("_")[1]); pet.health = Math.min(100, pet.health + 10); pet.happiness = Math.min(100, pet.happiness + 5); pet.lastFed = new Date().toISOString(); pet.emotion = "happy"; } } // Time passes... const timePassed = Math.floor((Date.now() - new Date(pet.lastFed).getTime()) / (1000 * 60 * 60)); pet.health = Math.max(0, pet.health - timePassed); pet.happiness = Math.max(0, pet.happiness - timePassed); if (pet.health < 30 || pet.happiness < 30) { pet.emotion = "sad"; } else if (pet.health < 50 || pet.happiness < 50) { pet.emotion = "angry"; } if (new Date(pet.lastFed).getTime() < Date.now() - 1000 * 60 * 60 * 4) { pet.emotion = "hungry"; } await sqlite.execute( `UPDATE ${KEY}_pets_${SCHEMA_VERSION} SET health = ?, happiness = ?, emotion = ?, lastFed = ? WHERE id = 1`, [pet.health, pet.happiness, pet.emotion, pet.lastFed], ); return pet; } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .container { background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } .pet-container { margin: 20px 0; } .pet { font-size: 4em; } .actions { display: flex; flex-direction: column; gap: 10px; } button { padding: 10px; font-size: 1em; cursor: pointer; } .food-options { display: flex; justify-content: center; gap: 5px; margin-top: 10px; } .food-options button { font-size: 1.5em; padding: 5px 10px; } `; export default server;

virtualPetSim

Version 5