function MainComponent() { const title = "SkillForge: The Soft Skills Odyssey"; const [player, setPlayer] = React.useState({ name: '', skills: { Communication: 50, Teamwork: 50, Adaptability: 50, "Problem-Solving": 50, "Emotional Intelligence": 50, Leadership: 50, "Time Management": 50, Negotiation: 50, Networking: 50, Reflection: 50 } }); const environments = [ "Office Workspace", "Virtual Collaboration Hub", "Innovation Lab", "Project Management Center", "Conference and Events Center", "Virtual Team Building Retreat", "Creative Studio", "Negotiation Chamber", "Customer Service Center", "Personal Growth Oasis" ]; const [currentEnvironmentIndex, setCurrentEnvironmentIndex] = React.useState(0); const [isGameStarted, setGameStarted] = React.useState(false); const handleInputChange = (event)=>{ setPlayer((prevPlayer)=>({ ...prevPlayer, name: event.target.value })); }; const startGame = ()=>{ if (player.name) { setCurrentEnvironmentIndex(0); setGameStarted(true); } }; const completeChallenges = ()=>{ setCurrentEnvironmentIndex((prevIndex)=>{ if (prevIndex < environments.length - 1) { return prevIndex + 1; } else { setGameStarted(false); // Game ends when all environments are visited return prevIndex; } }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 flex flex-col items-center justify-center min-h-screen bg-[#f2f2f2]", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, title), isGameStarted ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] mb-6", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Welcome to SkillForge: The Soft Skills Odyssey, ", player.name, "!"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212] mb-6", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Entering ", environments[currentEnvironmentIndex], "..."), /*#__PURE__*/ React.createElement("button", { onClick: completeChallenges, className: "mt-4 px-4 py-2 bg-[#4CAF50] text-white rounded font-roboto font-bold", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Complete Challenges")) : /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full md:w-1/2 lg:w-1/3 p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "player_name", value: player.name, onChange: handleInputChange, placeholder: "Enter your avatar name", className: "w-full px-4 py-2 border rounded-lg text-[#121212] mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "mt-4 w-full px-8 py-2 bg-[#4CAF50] text-white rounded font-roboto font-bold", disabled: !player.name, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Start Your Odyssey")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } main { animation: fadeIn 1s ease-in-out; } `)); }