function MainComponent() { const [showCharacters, setShowCharacters] = React.useState(false); const [selectedCharacter, setSelectedCharacter] = React.useState(null); const [opponentCharacter, setOpponentCharacter] = React.useState(null); const [showCourt, setShowCourt] = React.useState(false); const [actionMessage, setActionMessage] = React.useState(''); const characters = [ { name: "MJ", image: "images/mj_cartoon.png" }, { name: "LeBron", image: "images/lebron_cartoon.png" }, { name: "Kobe", image: "images/kobe_cartoon.png" }, { name: "Shaq", image: "images/shaq_cartoon.png" }, { name: "Kareem", image: "images/kareem_cartoon.png" }, { name: "Bird", image: "images/bird_cartoon.png" } ]; const toggleCharacters = ()=>setShowCharacters(!showCharacters); const selectCharacter = (character)=>{ setSelectedCharacter(character); const opponents = characters.filter((c)=>c.name !== character.name); const randomOpponent = opponents[Math.floor(Math.random() * opponents.length)]; setOpponentCharacter(randomOpponent); setShowCourt(true); }; React.useEffect(()=>{ const handleKeyDown = (e)=>{ switch(e.key){ case " ": setActionMessage('Shoot/Block/Steal'); break; case "w": case "ArrowUp": setActionMessage('Jump'); break; case "a": case "ArrowLeft": setActionMessage('Move Left'); break; case "d": case "ArrowRight": setActionMessage('Move Right'); break; case "ArrowDown": setActionMessage('Celebrate'); break; default: setActionMessage(''); break; } }; window.addEventListener("keydown", handleKeyDown); return ()=>{ window.removeEventListener("keydown", handleKeyDown); }; }, []); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#f3f4f6] flex justify-center items-center", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffff] shadow-lg rounded-lg overflow-hidden w-[800px] h-[600px]", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[100px] bg-[#4f46e5] flex justify-between items-center p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl text-white", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Super Basketball"), /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-full", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, !showCharacters && !showCourt && /*#__PURE__*/ React.createElement("div", { onClick: toggleCharacters, className: "cursor-pointer", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-basketball-ball text-[#ffab00] text-[100px]", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-lg mt-4", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "Choose Your Legend")), showCharacters && !showCourt && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, characters.map((character)=>/*#__PURE__*/ React.createElement("div", { className: "text-center", key: character.name, onClick: ()=>selectCharacter(character), __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: character.image, alt: `${character.name} animation`, className: "w-[80px] h-[80px] rounded-full mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }, character.name)))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#4f46e5] text-white py-2 px-4 rounded-lg", onClick: toggleCharacters, __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Back to Game")), showCourt && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-lg mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Basketball Court (Game to 21 against ", opponentCharacter.name, ")"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, actionMessage))))); }