Spaces:
Sleeping
Sleeping
File size: 2,482 Bytes
08fcfd1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
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> ) } |