Spaces:
Sleeping
Sleeping
import React, { useState } from 'react' | |
import { Button } from "@/components/ui/button" | |
import { Progress } from "@/components/ui/progress" | |
import { ScrollArea } from "@/components/ui/scroll-area" | |
export default function Component() { | |
const [position, setPosition] = useState(50) | |
const [inventory, setInventory] = useState<string[]>([]) | |
const [currentObjective, setCurrentObjective] = useState("Explore the Enchanted Forest") | |
const moveCharacter = (direction: 'left' | 'right') => { | |
setPosition(prev => Math.max(0, Math.min(100, prev + (direction === 'left' ? -10 : 10)))) | |
} | |
const gatherIngredient = () => { | |
const ingredients = ['Moonflower', 'Stardust', 'Dragon Scale', 'Phoenix Feather', 'Mermaid Tear'] | |
const newIngredient = ingredients[Math.floor(Math.random() * ingredients.length)] | |
setInventory(prev => [...prev, newIngredient]) | |
} | |
return ( | |
<div className="w-full max-w-4xl mx-auto p-4 bg-gradient-to-b from-purple-600 to-blue-800 rounded-lg shadow-lg"> | |
<h1 className="text-2xl font-bold text-white mb-4">Mystic Realms: The Alchemist's Journey</h1> | |
{/* Game Area */} | |
<div className="relative h-60 bg-gradient-to-r from-green-400 to-blue-500 rounded-lg mb-4 overflow-hidden"> | |
<div | |
className="absolute bottom-0 w-10 h-20 bg-red-500" | |
style={{ left: `${position}%`, transition: 'left 0.3s ease-out' }} | |
/> | |
</div> | |
{/* Controls */} | |
<div className="flex justify-center space-x-4 mb-4"> | |
<Button onClick={() => moveCharacter('left')}>Move Left</Button> | |
<Button onClick={gatherIngredient}>Gather Ingredient</Button> | |
<Button onClick={() => moveCharacter('right')}>Move Right</Button> | |
</div> | |
{/* Inventory */} | |
<div className="bg-white bg-opacity-20 rounded-lg p-4 mb-4"> | |
<h2 className="text-xl font-semibold text-white mb-2">Inventory</h2> | |
<ScrollArea className="h-20"> | |
<ul className="space-y-1"> | |
{inventory.map((item, index) => ( | |
<li key={index} className="text-white">{item}</li> | |
))} | |
</ul> | |
</ScrollArea> | |
</div> | |
{/* Objective */} | |
<div className="bg-white bg-opacity-20 rounded-lg p-4"> | |
<h2 className="text-xl font-semibold text-white mb-2">Current Objective</h2> | |
<p className="text-white">{currentObjective}</p> | |
<Progress value={33} className="mt-2" /> | |
</div> | |
</div> | |
) | |
} |