function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 64 }).fill(null)); const [currentPlayer, setCurrentPlayer] = React.useState('white'); const [scores, setScores] = React.useState({ white: 2, black: 2 }); const [highlightedTiles, setHighlightedTiles] = React.useState([]); React.useEffect(()=>{ const initialTiles = [ ...board ]; initialTiles[27] = 'black'; initialTiles[28] = 'white'; initialTiles[35] = 'white'; initialTiles[36] = 'black'; setBoard(initialTiles); }, []); React.useEffect(()=>{ const directions = [ -1, 1, -8, 8, -7, 7, -9, 9 ]; const playableTiles = []; board.forEach((tile, index)=>{ if (tile) return; for (let direction of directions){ let currentIndex = index; let tilesToFlip = []; let canFlip = false; while(true){ currentIndex += direction; if (currentIndex < 0 || currentIndex >= 64 || !isSameRowOrColumn(currentIndex, currentIndex - direction, direction)) { break; } const currentTile = board[currentIndex]; if (!currentTile) { break; } else if (currentTile !== currentPlayer) { tilesToFlip.push(currentIndex); } else { if (tilesToFlip.length > 0) canFlip = true; break; } } if (canFlip) { playableTiles.push(index); break; } } }); setHighlightedTiles(playableTiles); }, [ currentPlayer, board ]); const isSameRowOrColumn = (index1, index2, direction)=>{ const row1 = Math.floor(index1 / 8); const row2 = Math.floor(index2 / 8); const col1 = index1 % 8; const col2 = index2 % 8; if (direction === -1 || direction === 1) return row1 === row2; if (direction === -8 || direction === 8) return col1 === col2; if (direction === -9 || direction === 9) return Math.abs(row1 - row2) === 1; if (direction === -7 || direction === 7) return Math.abs(row1 - row2) === 1; }; const handleTileClick = (index)=>{ if (!highlightedTiles.includes(index)) return; const newBoard = [ ...board ]; newBoard[index] = currentPlayer; flipTiles(index); setCurrentPlayer(currentPlayer === 'white' ? 'black' : 'white'); const newScores = calculateScores(); setScores(newScores); }; const flipTiles = (index)=>{ // Implement flipping logic (Skipped for brevity) }; const calculateScores = ()=>{ let white = 0; let black = 0; board.forEach((tile)=>{ if (tile === 'white') white++; if (tile === 'black') black++; }); return { white, black }; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#293241] p-4", __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-[#E0FBFC] mb-8", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, "オセロゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full max-w-[600px] mb-6", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-[#F0EFEB] rounded-full mr-2", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#E0FBFC] font-crimson-text", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Player 1: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 103, columnNumber: 69 }, __self: this }, scores.white))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-[#3D5A80] rounded-full mr-2", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#E0FBFC] font-crimson-text", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Player 2: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 107, columnNumber: 69 }, __self: this }, scores.black)))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1 bg-[#3D5A80] p-1 rounded-lg", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, board.map((tile, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>handleTileClick(index), className: `w-14 h-14 rounded-full ${tile === 'white' ? 'bg-[#E0FBFC]' : tile === 'black' ? 'bg-[#293241]' : 'bg-[#98C1D9] cursor-pointer hover:bg-[#EE6C4D]'} ${highlightedTiles.includes(index) ? 'ring-4 ring-[#EE6C4D]' : ''}`, __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this })))); }