function MainComponent() { const [player1, setPlayer1] = React.useState(''); const [player2, setPlayer2] = React.useState(''); const [player3, setPlayer3] = React.useState(''); const [player4, setPlayer4] = React.useState(''); const [player1Roll, setPlayer1Roll] = React.useState(null); const [player2Roll, setPlayer2Roll] = React.useState(null); const [player3Roll, setPlayer3Roll] = React.useState(null); const [player4Roll, setPlayer4Roll] = React.useState(null); const handleInputChange = (e)=>{ const { name, value } = e.target; if (name === "player1") setPlayer1(value); if (name === "player2") setPlayer2(value); if (name === "player3") setPlayer3(value); if (name === "player4") setPlayer4(value); }; const startGame = ()=>{ setPlayer1Roll(null); setPlayer2Roll(null); setPlayer3Roll(null); setPlayer4Roll(null); }; const rollDice = ()=>{ setPlayer1Roll(Math.floor(Math.random() * 6) + 1); setPlayer2Roll(Math.floor(Math.random() * 6) + 1); setPlayer3Roll(Math.floor(Math.random() * 6) + 1); setPlayer4Roll(Math.floor(Math.random() * 6) + 1); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-blue-600 mb-6", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "JavaFX Client-Server Dice Game"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-roboto mr-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Player 1:"), /*#__PURE__*/ React.createElement("input", { className: "border py-1 px-2 w-full", type: "text", name: "player1", placeholder: "Enter player name", value: player1, onChange: handleInputChange, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-roboto mr-2", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Player 2:"), /*#__PURE__*/ React.createElement("input", { className: "border py-1 px-2 w-full", type: "text", name: "player2", placeholder: "Enter player name", value: player2, onChange: handleInputChange, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-roboto mr-2", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Player 3:"), /*#__PURE__*/ React.createElement("input", { className: "border py-1 px-2 w-full", type: "text", name: "player3", placeholder: "Enter player name", value: player3, onChange: handleInputChange, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-roboto mr-2", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Player 4:"), /*#__PURE__*/ React.createElement("input", { className: "border py-1 px-2 w-full", type: "text", name: "player4", placeholder: "Enter player name", value: player4, onChange: handleInputChange, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white font-roboto py-2 px-4 rounded w-full mt-4", onClick: startGame, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Start Game")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Player 1"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-full w-[80px] h-[80px] flex items-center justify-center shadow-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, player1Roll !== null ? player1Roll : '🎲'))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Player 2"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-full w-[80px] h-[80px] flex items-center justify-center shadow-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, player2Roll !== null ? player2Roll : '🎲')))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around items-center mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Player 3"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-full w-[80px] h-[80px] flex items-center justify-center shadow-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, player3Roll !== null ? player3Roll : '🎲'))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Player 4"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-full w-[80px] h-[80px] flex items-center justify-center shadow-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, player4Roll !== null ? player4Roll : '🎲')))), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white font-roboto py-2 px-4 rounded w-full mt-4", onClick: rollDice, __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "Roll Dice"))); }