function MainComponent() { const [player1, setPlayer1] = React.useState(''); const [player2, setPlayer2] = React.useState(''); const [board, setBoard] = React.useState(Array.from({ length: 9 }).fill(null).map(()=>Array.from({ length: 9 }).fill(null))); const [capturedPieces, setCapturedPieces] = React.useState([]); const [currentTurn, setCurrentTurn] = React.useState('Player 1'); const [aiLevel, setAiLevel] = React.useState('easy'); const [difficulty, setDifficulty] = React.useState('Easy'); const [selectedPiece, setSelectedPiece] = React.useState(null); const initialSetup = ()=>{ const initialBoard = [ [ '香', '桂', '銀', '金', '王', '金', '銀', '桂', '香' ], [ null, '飛', null, null, null, null, null, '角', null ], [ '歩', '歩', '歩', '歩', '歩', '歩', '歩', '歩', '歩' ], [ null, null, null, null, null, null, null, null, null ], [ null, null, null, null, null, null, null, null, null ], [ null, null, null, null, null, null, null, null, null ], [ '歩', '歩', '歩', '歩', '歩', '歩', '歩', '歩', '歩' ], [ null, '角', null, null, null, null, null, '飛', null ], [ '香', '桂', '銀', '金', '玉', '金', '銀', '桂', '香' ] ]; setBoard(initialBoard); }; const handlePieceMove = (row, col)=>{ if (!selectedPiece) { if (board[row][col]) { setSelectedPiece({ row, col }); } } else { const newBoard = board.map((row)=>[ ...row ]); newBoard[row][col] = board[selectedPiece.row][selectedPiece.col]; newBoard[selectedPiece.row][selectedPiece.col] = null; setBoard(newBoard); setSelectedPiece(null); setCurrentTurn(currentTurn === (player1 || 'Player 1') ? player2 || 'Player 2' : player1 || 'Player 1'); } }; const handleAiLevelChange = (e)=>{ const level = e.target.value; setAiLevel(level); setDifficulty(level.charAt(0).toUpperCase() + level.slice(1)); }; const handlePlayerNameChange = (player, name)=>{ if (player === 'player1') { setPlayer1(name); if (currentTurn === 'Player 1') setCurrentTurn(name || 'Player 1'); } else { setPlayer2(name); if (currentTurn === 'Player 2') setCurrentTurn(name || 'Player 2'); } }; React.useEffect(()=>{ initialSetup(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto w-full h-full flex flex-col items-center justify-center bg-[#fafafa]", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#333] text-white text-center p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "将棋ゲーム")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col md:flex-row w-full h-full justify-around mt-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "w-full md:w-[70%] aspect-square grid grid-cols-9 grid-rows-9 gap-0 p-2 bg-[#cccccc]", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, board.map((row, rowIdx)=>row.map((piece, colIdx)=>/*#__PURE__*/ React.createElement("div", { key: `${rowIdx}-${colIdx}`, className: `w-full h-0 pt-[100%] relative border border-black bg-white ${selectedPiece && selectedPiece.row === rowIdx && selectedPiece.col === colIdx ? 'bg-yellow-200' : ''}`, onClick: ()=>handlePieceMove(rowIdx, colIdx), __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, piece))))), /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-[25%] flex flex-col items-center mt-4 md:mt-0", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#444] text-white p-2 mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-center", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "プレイヤー"), /*#__PURE__*/ React.createElement("div", { className: "my-2", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "プレイヤー 1:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "player1", className: "w-full p-1 border text-black", value: player1, onChange: (e)=>handlePlayerNameChange('player1', e.target.value), placeholder: "プレイヤー1の名前を入力", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "my-2", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "プレイヤー 2:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "player2", className: "w-full p-1 border text-black", value: player2, onChange: (e)=>handlePlayerNameChange('player2', e.target.value), placeholder: "プレイヤー2の名前を入力", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#555] text-white p-2 mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-center", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "持ち駒"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-around mt-2", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, capturedPieces.map((piece, idx)=>/*#__PURE__*/ React.createElement("span", { key: idx, className: "w-[30px] h-[30px] bg-white border border-black flex justify-center items-center", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, piece)))), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#666] text-white p-2 mb-4", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-center", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "ゲーム情報"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "現在の手番: ", currentTurn), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "AI レベル:"), /*#__PURE__*/ React.createElement("select", { name: "aiLevel", value: aiLevel, onChange: handleAiLevelChange, className: "w-full p-1 border text-black", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "easy", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "初級"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, "中級"), /*#__PURE__*/ React.createElement("option", { value: "hard", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "上級")), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "難易度: ", difficulty)))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#333] text-white text-center p-2", __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, "© 2023 将棋ゲーム"))); }