function OthelloGame({ handleClick, pieces }) { const title = "オセロゲーム"; const gridSize = 8; const createGrid = ()=>{ let grid = []; for(let i = 0; i < gridSize * gridSize; i++){ const pieceContent = pieces?.[i] || ""; grid.push(/*#__PURE__*/ React.createElement("div", { key: i, onClick: ()=>handleClick(i), className: "w-[50px] h-[50px] bg-green-700 flex items-center justify-center text-white cursor-pointer", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, pieceContent)); } return grid; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-gray-200 p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-2xl mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, createGrid())); } function OthelloGameStory() { const pieces = { 0: "♚", 1: "♚", 63: "♔" }; const handleClick = (i)=>{ console.log("Square clicked:", i); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OthelloGame, { handleClick: handleClick, pieces: pieces, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 64 }).fill(null).map((_, i)=>i % 2 === 0 ? '⚫' : '⚪')); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-200 font-sans", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "オセロゲーム"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, board.map((piece, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "w-[50px] h-[50px] bg-green-700 flex items-center justify-center text-white", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, piece)))); }