function MainComponent() { const [player1, setPlayer1] = React.useState(""); const [player2, setPlayer2] = React.useState(""); const [board, setBoard] = React.useState(Array.from({ length: 64 }).fill(null)); const [currentPlayer, setCurrentPlayer] = React.useState("プレイヤー1 (黒)"); const [scores, setScores] = React.useState({ player1: 2, player2: 2 }); const initializeGame = ()=>{ setBoard(Array.from({ length: 64 }).fill(null)); setCurrentPlayer(Math.random() > 0.5 ? "プレイヤー1 (黒)" : "プレイヤー2 (白)"); setScores({ player1: 2, player2: 2 }); }; const handlePlayerInput = (e)=>{ const { name, value } = e.target; if (name === "player1") setPlayer1(value); if (name === "player2") setPlayer2(value); }; const handleCellClick = (index)=>{ const newBoard = [ ...board ]; newBoard[index] = currentPlayer.includes("黒") ? "黒" : "白"; setBoard(newBoard); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#006600]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-white font-crimson-text mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "オセロゲーム"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 w-[300px] mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-2 text-lg mb-2 border border-black", type: "text", placeholder: "プレイヤー1の名前を入力", name: "player1", value: player1, onChange: handlePlayerInput, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-2 text-lg mb-2 border border-black", type: "text", placeholder: "プレイヤー2の名前を入力", name: "player2", value: player2, onChange: handlePlayerInput, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#333333] text-white text-lg w-[300px]", onClick: initializeGame, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "ゲーム開始"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#004400] rounded-lg w-[320px]", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white text-xl font-crimson-text mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "ゲームボード"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, board.map((cell, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "w-[35px] h-[35px] bg-green-700 border border-gray-800 flex items-center justify-center cursor-pointer", onClick: ()=>handleCellClick(idx), __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, cell && /*#__PURE__*/ React.createElement("span", { className: `text-2xl ${cell === "黒" ? "text-black" : "text-white"}`, __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, cell === "黒" ? "⚫" : "⚪")))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-white font-crimson-text", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "プレイヤー1 (黒): ", /*#__PURE__*/ React.createElement("span", { id: "player1-score", __source: { fileName: "", lineNumber: 72, columnNumber: 28 }, __self: this }, scores.player1)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "プレイヤー2 (白): ", /*#__PURE__*/ React.createElement("span", { id: "player2-score", __source: { fileName: "", lineNumber: 73, columnNumber: 28 }, __self: this }, scores.player2)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "現在のプレイヤー: ", /*#__PURE__*/ React.createElement("span", { id: "current-player", __source: { fileName: "", lineNumber: 74, columnNumber: 26 }, __self: this }, currentPlayer)))))); }