function MainComponent() { const [selectedPlayer, setSelectedPlayer] = React.useState(null); const players = [ { id: 'scorpion', name: 'Scorpion', moveset: 'Kunai Throw, Teleport, Hellfire', fatality: 'Toasty!' }, { id: 'subzero', name: 'Sub Zero', moveset: 'Ice Blast, Slide, Ice Clone', fatality: 'Spine Rip' }, { id: 'johnnycage', name: 'Johnny Cage', moveset: 'Shadow Kick, Fireball, Nut Punch', fatality: 'Decapitation' }, { id: 'nightwolf', name: 'Nightwolf', moveset: 'Arrow Shot, Shoulder Charge, Spirit Animals', fatality: 'Lightning Strike' }, { id: 'kitana', name: 'Kitana', moveset: 'Fan Toss, Square Wave Punch, Fan Lift', fatality: 'Kiss of Death' }, { id: 'sonyablade', name: 'Sonya Blade', moveset: 'Energy Rings, Leg Grab, Air Drop', fatality: 'Fire Kiss' }, { id: 'liukang', name: 'Liu Kang', moveset: 'Dragon Fire, Flying Kick, Bicycle Kick', fatality: 'Dragon Transformation' }, { id: 'kunglao', name: 'Kung Lao', moveset: 'Hat Throw, Teleport, Whirlwind Spin', fatality: 'Hat Slice' }, { id: 'raiden', name: 'Raiden', moveset: 'Lightning Bolt, Teleport, Electric Fly', fatality: 'Electrocution' }, { id: 'shangtsung', name: 'Shang Tsung', moveset: 'Soul Steal, Fireballs, Morph', fatality: 'Soul Drain' }, { id: 'kano', name: 'Kano', moveset: 'Knife Throw, Cannonball, Choke', fatality: 'Heart Rip' }, { id: 'baraka', name: 'Baraka', moveset: 'Blade Spark, Chop Chop, Blade Swipe', fatality: 'Blade Lift' }, { id: 'kabal', name: 'Kabal', moveset: 'Nomad Dash, Tornado Slam, Gas Blast', fatality: 'Face Grinder' }, { id: 'shaokahn', name: 'Shao Kahn', moveset: 'Wrath Hammer, Charges, Uppercut', fatality: 'Hammer Smash' } ]; const handleSelectPlayer = (player)=>{ setSelectedPlayer(player); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#010101] min-h-screen p-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FFFFFF] text-5xl font-bold font-crimson-text mb-8", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Mortal Kombat Arena"), selectedPlayer ? /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-[#121212] rounded-lg p-4 m-2", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FFD700] font-bold text-4xl font-crimson-text mb-4 text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, selectedPlayer.name), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedPlayer(null), className: "py-2 px-4 bg-red-600 text-white rounded shadow", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-left", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }), " Choose Another Fighter"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#FFFFFF] text-lg font-roboto mb-1", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Moveset: ", selectedPlayer.moveset), /*#__PURE__*/ React.createElement("p", { className: "text-[#FFFFFF] text-lg font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Fatality: ", selectedPlayer.fatality)))) : /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, players.map((player)=>/*#__PURE__*/ React.createElement("div", { key: player.id, className: "bg-[#333333] rounded-lg p-4 flex flex-col items-center justify-between cursor-pointer hover:bg-[#444444] transition-all", onClick: ()=>handleSelectPlayer(player), __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./images/${player.id}.png`, alt: `${player.name} ready for a fight`, className: "w-[150px] h-[150px] object-cover rounded mt-2", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#FFD700] font-bold text-xl font-crimson-text mb-1 mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, player.name))))); }