function ShogiPiece({ color = "black", pieceType }) { const colorClasses = color === "black" ? "bg-[#4A4A4A] text-white" : "bg-[#F0F0F0] text-[#4A4A4A]"; return /*#__PURE__*/ React.createElement("div", { className: `w-[60px] h-[80px] ${colorClasses} font-serif flex items-center justify-center border border-[#121212] text-2xl`, __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, pieceType); } function ShogiPieceStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ShogiPiece, { pieceType: "歩", color: "black", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ShogiPiece, { pieceType: "歩", color: "white", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ShogiPiece, { pieceType: "玉", color: "black", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ShogiPiece, { pieceType: "玉", color: "white", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ShogiPiece, { pieceType: "金", color: "black", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ShogiPiece, { pieceType: "金", color: "white", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function GameBoard({ pieces: initialPieces = {} }) { const [pieces, setPieces] = useState(initialPieces || { "3-3": { symbol: "⚪", player: 1 }, "3-4": { symbol: "⚫", player: 2 }, "4-3": { symbol: "⚫", player: 2 }, "4-4": { symbol: "⚪", player: 1 } }); const [currentPlayer, setCurrentPlayer] = useState(1); const [validMoves, setValidMoves] = useState([]); const [boardSize, setBoardSize] = useState(450); const [gameOver, setGameOver] = useState(false); useEffect(()=>{ const updateSize = ()=>{ const width = Math.min(450, Math.max(320, window.innerWidth - 32)); setBoardSize(width); }; updateSize(); window.addEventListener("resize", updateSize); return ()=>window.removeEventListener("resize", updateSize); }, []); useEffect(()=>{ setValidMoves(getValidMoves()); }, [ currentPlayer, pieces ]); const cellSize = boardSize / 8; const directions = [ [ -1, -1 ], [ -1, 0 ], [ -1, 1 ], [ 0, -1 ], [ 0, 1 ], [ 1, -1 ], [ 1, 0 ], [ 1, 1 ] ]; const isValidPosition = (row, col)=>{ return row >= 0 && row < 8 && col >= 0 && col < 8; }; const getValidMoves = ()=>{ const moves = new Set(); for(let row = 0; row < 8; row++){ for(let col = 0; col < 8; col++){ const position = `${row}-${col}`; if (pieces[position]) continue; for (const [dr, dc] of directions){ let r = row + dr; let c = col + dc; let hasOpponentPiece = false; while(isValidPosition(r, c)){ const pos = `${r}-${c}`; const piece = pieces[pos]; if (!piece) break; if (piece.player === currentPlayer) { if (hasOpponentPiece) { moves.add(position); } break; } hasOpponentPiece = true; r += dr; c += dc; } } } } return Array.from(moves); }; const flipPieces = (row, col)=>{ const newPieces = { ...pieces }; newPieces[`${row}-${col}`] = { symbol: currentPlayer === 1 ? "⚪" : "⚫", player: currentPlayer }; directions.forEach(([dr, dc])=>{ const piecesToFlip = []; let r = row + dr; let c = col + dc; while(isValidPosition(r, c)){ const pos = `${r}-${c}`; const piece = pieces[pos]; if (!piece) break; if (piece.player === currentPlayer) { piecesToFlip.forEach(([fr, fc])=>{ newPieces[`${fr}-${fc}`] = { symbol: currentPlayer === 1 ? "⚪" : "⚫", player: currentPlayer }; }); break; } piecesToFlip.push([ r, c ]); r += dr; c += dc; } }); return newPieces; }; const handleCellClick = (position)=>{ if (gameOver || !validMoves.includes(position)) return; const [row, col] = position.split("-").map(Number); const newPieces = flipPieces(row, col); setPieces(newPieces); setCurrentPlayer(currentPlayer === 1 ? 2 : 1); }; const cells = []; for(let row = 0; row < 8; row++){ for(let col = 0; col < 8; col++){ const position = `${row}-${col}`; const piece = pieces[position]; const isValidMove = validMoves.includes(position); cells.push(/*#__PURE__*/ React.createElement("div", { key: position, style: { position: "absolute", top: `${row * cellSize}px`, left: `${col * cellSize}px`, width: `${cellSize}px`, height: `${cellSize}px` }, onClick: ()=>handleCellClick(position), className: `border border-[#000000] flex items-center justify-center bg-[#008000] ${isValidMove ? "bg-[#90EE90]" : ""}`, __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, piece && /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 147, columnNumber: 21 }, __self: this }, piece.symbol))); } } return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 154, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl mb-4 text-center font-bold", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, gameOver ? "ゲーム終了" : `プレイヤー${currentPlayer}の番です (${currentPlayer === 1 ? "⚪" : "⚫"})`), /*#__PURE__*/ React.createElement("div", { className: "relative border-2 border-[#000000] mx-auto", style: { width: `${boardSize}px`, height: `${boardSize}px` }, __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, cells)); } function GameBoardStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#F5F5DC]", __source: { fileName: "", lineNumber: 172, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GameBoard, { __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this })); } function CapturedPieces({ pieces = [], isPlayer = true }) { return /*#__PURE__*/ React.createElement("div", { className: `flex flex-wrap gap-2 p-4 bg-[#F7DDC4] rounded-lg border-2 border-[#8B4513] min-h-[100px] w-[200px] ${isPlayer ? "mt-2" : "mb-2"}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, pieces.map((piece, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[30px] h-[30px] flex items-center justify-center text-[#8B4513] font-bold", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, piece))); } function CapturedPiecesStory() { const samplePlayerPieces = [ "歩", "歩", "歩", "金" ]; const sampleOpponentPieces = [ "銀", "桂", "歩" ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CapturedPieces, { pieces: sampleOpponentPieces, isPlayer: false, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "将棋盤がここに配置されます"), /*#__PURE__*/ React.createElement(CapturedPieces, { pieces: samplePlayerPieces, isPlayer: true, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F5F5DC] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 font-noto-sans", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "将棋"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(GameBoard, { __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this })))); }