function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 8 }).fill(Array.from({ length: 8 }).fill(null))); const [isBlackTurn, setIsBlackTurn] = React.useState(true); const [message, setMessage] = React.useState(""); const fetchMessage = async ()=>{ const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: "Start the Othello game" } ] }) }); const data = await response.json(); setMessage(data.choices[0].message.content); }; React.useEffect(()=>{ fetchMessage(); }, []); const checkLegalMove = (board, x, y, isBlackTurn)=>{ if (board[x][y] !== null) return false; const directions = [ [ -1, 0 ], [ 1, 0 ], [ 0, -1 ], [ 0, 1 ], [ -1, -1 ], [ 1, 1 ], [ -1, 1 ], [ 1, -1 ] ]; const currentPlayer = isBlackTurn ? "B" : "W"; const opponent = isBlackTurn ? "W" : "B"; for (const [dx, dy] of directions){ let i = x + dx; let j = y + dy; let seenOpponent = false; while(i >= 0 && i < 8 && j >= 0 && j < 8){ if (board[i][j] === opponent) { seenOpponent = true; } else if (board[i][j] === currentPlayer && seenOpponent) { return true; } else { break; } i += dx; j += dy; } } return false; }; const renderCell = (x, y)=>{ const cellContent = board[x][y]; const bgColor = cellContent === "B" ? "bg-black" : cellContent === "W" ? "bg-white" : "bg-green-500"; return /*#__PURE__*/ React.createElement("div", { key: `${x}-${y}`, className: `w-[50px] h-[50px] border border-black flex items-center justify-center ${bgColor}`, onClick: ()=>handleCellClick(x, y), __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, cellContent && /*#__PURE__*/ React.createElement("div", { className: `w-[40px] h-[40px] rounded-full ${cellContent === "B" ? "bg-black" : "bg-white"}`, __source: { fileName: "", lineNumber: 64, columnNumber: 25 }, __self: this })); }; const handleCellClick = (x, y)=>{ if (!checkLegalMove(board, x, y, isBlackTurn)) return; const directions = [ [ -1, 0 ], [ 1, 0 ], [ 0, -1 ], [ 0, 1 ], [ -1, -1 ], [ 1, 1 ], [ -1, 1 ], [ 1, -1 ] ]; const currentPlayer = isBlackTurn ? "B" : "W"; const opponent = isBlackTurn ? "W" : "B"; const newBoard = board.map((row)=>row.slice()); newBoard[x][y] = currentPlayer; for (const [dx, dy] of directions){ let i = x + dx; let j = y + dy; const discsToFlip = []; while(i >= 0 && i < 8 && j >= 0 && j < 8 && newBoard[i][j] === opponent){ discsToFlip.push([ i, j ]); i += dx; j += dy; } if (i >= 0 && i < 8 && j >= 0 && j < 8 && newBoard[i][j] === currentPlayer) { for (const [flipX, flipY] of discsToFlip){ newBoard[flipX][flipY] = currentPlayer; } } } setIsBlackTurn(!isBlackTurn); setBoard(newBoard); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen w-full flex flex-col items-center justify-center bg-[#2b2b2b]", __source: { fileName: "", lineNumber: 106, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-4 font-roboto", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, "オンライン対戦可能なオセロゲーム"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, board.map((row, x)=>row.map((_, y)=>renderCell(x, y)))), /*#__PURE__*/ React.createElement("p", { className: "text-white mt-4 font-roboto", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, message)); }