function MainComponent() { const [scores, setScores] = React.useState({ player1: 0, player2: 0, player3: 0, player4: 0 }); const handleInputChange = (event)=>{ const { name, value } = event.target; const updatedScores = { ...scores, [name]: Number(value) }; setScores(updatedScores); }; const handleResetClick = ()=>{ setScores({ player1: 0, player2: 0, player3: 0, player4: 0 }); }; const totalScore = Object.values(scores).reduce((acc, score)=>acc + score, 0); const isTotalZero = totalScore === 0; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] py-10 px-4 sm:px-6 lg:px-8 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4 bg-[#008080]", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-2xl text-white font-semibold", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "麻雀点数管理")), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "player1", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "プレーヤー1"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "player1", id: "player1", className: "mt-1 p-2 w-full border rounded-md shadow-sm", placeholder: "点数を入力", value: scores.player1, onChange: handleInputChange, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "player2", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "プレーヤー2"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "player2", id: "player2", className: "mt-1 p-2 w-full border rounded-md shadow-sm", placeholder: "点数を入力", value: scores.player2, onChange: handleInputChange, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "player3", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "プレーヤー3"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "player3", id: "player3", className: "mt-1 p-2 w-full border rounded-md shadow-sm", placeholder: "点数を入力", value: scores.player3, onChange: handleInputChange, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "player4", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "プレーヤー4"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "player4", id: "player4", className: "mt-1 p-2 w-full border rounded-md shadow-sm", placeholder: "点数を入力", value: scores.player4, onChange: handleInputChange, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), !isTotalZero && /*#__PURE__*/ React.createElement("p", { className: "text-red-600 text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 28 }, __self: this }, "合計が0になるように調整してください。"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-[200px] mr-2 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#008080] hover:bg-[#004c4c]", disabled: !isTotalZero, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "更新"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-[200px] py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#ff4500] hover:bg-[#b03000]", onClick: handleResetClick, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "リセット"))))); }

麻雀 点数管理

麻雀点数管理