function MainComponent() { const [user, setUser] = React.useState(null); const [role, setRole] = React.useState(null); const [gameState, setGameState] = React.useState(null); const handleLogin = (e)=>{ e.preventDefault(); const { username, role } = e.target.elements; setUser(username.value); setRole(role.value); }; const startGame = ()=>{ setGameState('playing'); }; if (!user) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen w-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "bg-white p-8 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4 text-center", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", className: "border p-2 mb-4 w-full rounded", placeholder: "Username", required: true, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "role", className: "border p-2 mb-4 w-full rounded", required: true, __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Select Role"), /*#__PURE__*/ React.createElement("option", { value: "owner", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Shop Owner"), /*#__PURE__*/ React.createElement("option", { value: "manager", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Manager"), /*#__PURE__*/ React.createElement("option", { value: "cashier", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Cashier")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#010101] text-white px-4 py-2 rounded w-full", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Login"))); } if (!gameState) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen w-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Welcome to the Game"), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-[#010101] text-white px-6 py-3 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Start Game")); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen w-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Game Area"), /*#__PURE__*/ React.createElement("div", { className: "border p-6 w-[400px] h-[400px] bg-white rounded shadow-md flex items-center justify-center", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Game content goes here")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGameState(null), className: "mt-4 bg-red-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "Exit Game")); }