function PlayerView() { const [position, setPosition] = useState({ x: 0, y: 0, z: 0 }); const [rotation, setRotation] = useState(0); useEffect(()=>{ const handleKeyPress = (e)=>{ const speed = 10; const rotateSpeed = 5; switch(e.key){ case "w": setPosition((prev)=>({ ...prev, x: prev.x + speed * Math.sin(rotation * Math.PI / 180), z: prev.z + speed * Math.cos(rotation * Math.PI / 180) })); break; case "s": setPosition((prev)=>({ ...prev, x: prev.x - speed * Math.sin(rotation * Math.PI / 180), z: prev.z - speed * Math.cos(rotation * Math.PI / 180) })); break; case "a": setRotation((prev)=>prev - rotateSpeed); break; case "d": setRotation((prev)=>prev + rotateSpeed); break; } }; window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, [ rotation ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#000000] overflow-hidden perspective-[1000px]", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full relative", style: { transform: `rotateY(${rotation}deg) translate3d(${-position.x}px, ${-position.y}px, ${-position.z}px)` }, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[2px] h-[2px] bg-white rounded-full", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), [ ...Array.from({ length: 20 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute w-4 h-4 bg-white", style: { transform: `translate3d(${Math.sin(i) * 500}px, 0px, ${Math.cos(i) * 500}px)` }, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })))); } function PlayerViewStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PlayerView, { __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); } function ScaryCharacter({ isAnimating = true }) { const [hover, setHover] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `relative w-[200px] h-[300px] flex flex-col items-center ${isAnimating ? "animate-float" : ""}`, onMouseEnter: ()=>setHover(true), onMouseLeave: ()=>setHover(false), __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[100px] h-[100px] rounded-full bg-[#e0d5cc] relative", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-[40px] h-[2px] bg-[#352c2a] left-[20px] top-[60px] transform rotate-[-10deg]", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[40px] h-[2px] bg-[#352c2a] right-[20px] top-[60px] transform rotate-[10deg]", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `absolute w-[30px] h-[30px] rounded-full bg-[#352c2a] left-[25px] top-[30px] ${hover ? "animate-glow" : ""}`, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `absolute w-[30px] h-[30px] rounded-full bg-[#352c2a] right-[25px] top-[30px] ${hover ? "animate-glow" : ""}`, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[150px] h-[200px] bg-[#1a1a1a] mt-[-20px] relative", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-[80px] h-[120px] bg-[#0d0d0d] left-[35px] bottom-0", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[100px] h-[40px] bg-[#352c2a] transform skew-x-[-20deg] mt-[-10px]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, ` @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes glow { 0%, 100% { box-shadow: 0 0 5px #ff0000; } 50% { box-shadow: 0 0 20px #ff0000; } } .animate-float { animation: float 3s ease-in-out infinite; } .animate-glow { animation: glow 2s ease-in-out infinite; } `)); } function ScaryCharacterStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex flex-col gap-8", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ScaryCharacter, { __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ScaryCharacter, { isAnimating: false, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this })); } function HauntedHouse() { const [selectedRoom, setSelectedRoom] = useState("livingRoom"); const rooms = { livingRoom: { name: "Living Room", description: "A dimly lit room with tattered furniture and cobwebs", items: [ "Dusty Sofa", "Cracked Mirror", "Old Fireplace" ], exits: [ "hallway", "kitchen" ] }, kitchen: { name: "Kitchen", description: "Ancient appliances and mysterious stains cover the counters", items: [ "Rusted Sink", "Broken Cabinets", "Creaky Chairs" ], exits: [ "livingRoom", "basement" ] }, hallway: { name: "Hallway", description: "Long shadows stretch across peeling wallpaper", items: [ "Crooked Paintings", "Vintage Phone", "Broken Lamp" ], exits: [ "livingRoom", "bedroom", "attic" ] }, bedroom: { name: "Bedroom", description: "Heavy curtains block most light, casting eerie shadows", items: [ "Four-poster Bed", "Wardrobe", "Vanity Mirror" ], exits: [ "hallway", "bathroom" ] }, bathroom: { name: "Bathroom", description: "Dripping faucets echo in the darkness", items: [ "Cracked Bathtub", "Foggy Mirror", "Leaky Sink" ], exits: [ "bedroom" ] }, attic: { name: "Attic", description: "Dust particles dance in thin beams of light", items: [ "Old Trunk", "Rocking Chair", "Broken Toys" ], exits: [ "hallway" ] }, basement: { name: "Basement", description: "Damp air and strange noises fill the space", items: [ "Wine Rack", "Tool Bench", "Storage Boxes" ], exits: [ "kitchen" ] } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] text-[#a8a8a8] font-crimson-text p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#800000] text-4xl mb-6", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, rooms[selectedRoom].name), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] p-6 rounded-lg shadow-xl mb-6", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, rooms[selectedRoom].description), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#800000] text-2xl mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "In this room:"), /*#__PURE__*/ React.createElement("ul", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, rooms[selectedRoom].items.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-[#2a2a2a] p-3 rounded flex items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search-location mr-2", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }), item)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#800000] text-2xl mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Exits:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, rooms[selectedRoom].exits.map((exit, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setSelectedRoom(exit), className: "bg-[#2a2a2a] hover:bg-[#3a3a3a] px-4 py-2 rounded transition-colors", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-door-open mr-2", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }), rooms[exit].name))))))); } function HauntedHouseStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000000]", __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(HauntedHouse, { __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this })); } function MainComponent() { const [showJumpScare, setShowJumpScare] = useState(false); const [audioPlaying, setAudioPlaying] = useState(false); const audioRef = useRef(null); useEffect(()=>{ const timing = Math.random() * 10000 + 5000; const jumpScareTimer = setTimeout(()=>{ setShowJumpScare(true); setTimeout(()=>setShowJumpScare(false), 1000); }, timing); return ()=>clearTimeout(jumpScareTimer); }, [ showJumpScare ]); const startGame = ()=>{ if (audioRef.current) { audioRef.current.play(); setAudioPlaying(true); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] relative overflow-hidden", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent to-[#000000] pointer-events-none", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("audio", { ref: audioRef, loop: true, className: "hidden", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "/spooky-background.mp3", type: "audio/mp3", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this })), !audioPlaying && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-50 bg-black bg-opacity-90", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "px-8 py-4 bg-[#420000] text-white font-crimson-text rounded-lg hover:bg-[#580000] transition-colors", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Enter If You Dare")), /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 bg-[#420000] p-4 rounded-lg text-white z-40", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "W - Move Forward"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "S - Move Backward"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "A - Turn Left"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "D - Turn Right"))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 py-8", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[400px]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(PlayerView, { __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ScaryCharacter, { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(HauntedHouse, { __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }))), showJumpScare && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center z-50 animate-jumpscare", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#ff0000] text-9xl", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-skull", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, ` @keyframes jumpscare { 0% { transform: scale(0.1); opacity: 0; } 50% { transform: scale(2); opacity: 1; } 100% { transform: scale(0.1); opacity: 0; } } .animate-jumpscare { animation: jumpscare 1s ease-in-out; } `)); }