function MainComponent({ onJoinRoom, onViewRules, showPopup, setShowPopup, onCreateGame }) { const [numPlayers, setNumPlayers] = React.useState(3); const [qrCode, setQrCode] = React.useState(''); const [gameCode, setGameCode] = React.useState(''); const handleCreateGame = ()=>{ const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; let generatedGameCode = ''; for(let i = 0; i < 6; i++){ generatedGameCode += characters.charAt(Math.floor(Math.random() * characters.length)); } fetch(`/integrations/qr-code/generatebasicbase64?data=${generatedGameCode}`).then((response)=>response.json()).then((data)=>{ setQrCode(data); setGameCode(generatedGameCode); }); onCreateGame(numPlayers); setShowPopup(false); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center justify-center bg-[#ffffff]", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-8", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./game-logo.png", alt: "Game logo in top center", className: "w-[200px] h-[200px] object-contain bg-none", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "create-room", onClick: ()=>setShowPopup('create'), className: "w-[200px] h-[50px] bg-blue-500 text-white font-bold rounded-md", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Create Room"), /*#__PURE__*/ React.createElement("button", { name: "join-room", onClick: onJoinRoom, className: "w-[200px] h-[50px] bg-red-500 text-white font-bold rounded-md", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Join Room"), /*#__PURE__*/ React.createElement("button", { name: "view-rules", onClick: onViewRules, className: "w-[200px] h-[50px] bg-green-500 text-white font-bold rounded-md", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Rules")), showPopup === 'create' && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg w-[300px]", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "numPlayers", className: "block mb-2 text-lg font-bold", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Number of Players"), /*#__PURE__*/ React.createElement("select", { name: "numPlayers", id: "numPlayers", value: numPlayers, onChange: (e)=>setNumPlayers(parseInt(e.target.value)), className: "block w-full p-2 border rounded-md", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, Array.from({ length: 8 }, (_, i)=>i + 3).map((num)=>/*#__PURE__*/ React.createElement("option", { key: num, value: num, __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, num))), /*#__PURE__*/ React.createElement("button", { name: "create", onClick: handleCreateGame, className: "mt-4 px-4 py-2 bg-blue-500 text-white font-bold rounded-md", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Create"))), qrCode && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg w-[400px] text-center", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `data:image/png;base64,${qrCode}`, alt: "QR code for the game", className: "w-[200px] h-[200px] mx-auto", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-bold text-lg mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Game Code: ", gameCode)))); } function StoryComponent() { const [showPopup, setShowPopup] = React.useState(false); const handleJoinRoom = ()=>{ console.log('Joining Room'); }; const handleViewRules = ()=>{ console.log('Viewing Rules'); }; const handleCreateGame = (numPlayers)=>{ console.log(`Creating game with ${numPlayers} players`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onJoinRoom: handleJoinRoom, onViewRules: handleViewRules, showPopup: showPopup, setShowPopup: setShowPopup, onCreateGame: handleCreateGame, __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this })); }