function GameBoard({ width = 10, height = 20, blocks = [], onCollision }) { const [grid, setGrid] = useState(Array(height).fill().map(()=>Array(width).fill(null))); useEffect(()=>{ const newGrid = Array(height).fill().map(()=>Array(width).fill(null)); blocks.forEach((block)=>{ const { x, y, type } = block; if (y >= 0 && y < height && x >= 0 && x < width) { newGrid[y][x] = type; } }); setGrid(newGrid); }, [ blocks, width, height ]); return /*#__PURE__*/ React.createElement("div", { className: "inline-block border-2 border-gray-700 bg-gray-900 p-1", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid", style: { display: "grid", gridTemplateColumns: `repeat(${width}, 30px)`, gap: "1px" }, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, grid.map((row, y)=>row.map((cell, x)=>/*#__PURE__*/ React.createElement("div", { key: `${x}-${y}`, className: `w-[30px] h-[30px] ${cell ? "bg-blue-500" : "bg-gray-800"}`, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, cell && /*#__PURE__*/ React.createElement(React.Fragment, null)))))); } function GameBoardStory() { const [blocks] = useState([ { x: 0, y: 0, type: "I" }, { x: 1, y: 0, type: "I" }, { x: 2, y: 0, type: "I" }, { x: 3, y: 0, type: "I" } ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GameBoard, { width: 10, height: 20, blocks: blocks, onCollision: ()=>console.log("Collision detected"), __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this })); } function TetrisBlock({ shape = [ [ 1, 1 ], [ 1, 1 ] ], color = "bg-[#00f0f0]", rotation = 0, position = { x: 0, y: 0 } }) { const rotatedShape = useMemo(()=>{ const size = shape.length; let result = Array(size).fill().map(()=>Array(size).fill(0)); for(let y = 0; y < size; y++){ for(let x = 0; x < size; x++){ switch(rotation % 4){ case 0: result[y][x] = shape[y][x]; break; case 1: result[y][x] = shape[size - 1 - x][y]; break; case 2: result[y][x] = shape[size - 1 - y][size - 1 - x]; break; case 3: result[y][x] = shape[x][size - 1 - y]; break; } } } return result; }, [ shape, rotation ]); return /*#__PURE__*/ React.createElement("div", { className: "inline-block", style: { transform: `translate(${position.x * 25}px, ${position.y * 25}px)` }, __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, rotatedShape.map((row, y)=>/*#__PURE__*/ React.createElement("div", { key: y, className: "flex", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, row.map((cell, x)=>/*#__PURE__*/ React.createElement("div", { key: `${x}-${y}`, className: `w-[25px] h-[25px] border border-gray-800 ${cell ? color : "bg-transparent"}`, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }))))); } function TetrisBlockStory() { const [rotation, setRotation] = useState(0); const [position, setPosition] = useState({ x: 0, y: 0 }); const shapes = { I: [ [ 1, 1, 1, 1 ] ], O: [ [ 1, 1 ], [ 1, 1 ] ], T: [ [ 0, 1, 0 ], [ 1, 1, 1 ] ], L: [ [ 1, 0 ], [ 1, 0 ], [ 1, 1 ] ], J: [ [ 0, 1 ], [ 0, 1 ], [ 1, 1 ] ], S: [ [ 0, 1, 1 ], [ 1, 1, 0 ] ], Z: [ [ 1, 1, 0 ], [ 0, 1, 1 ] ] }; const colors = { I: "bg-[#00f0f0]", O: "bg-[#f0f000]", T: "bg-[#a000f0]", L: "bg-[#f0a000]", J: "bg-[#0000f0]", S: "bg-[#00f000]", Z: "bg-[#f00000]" }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, Object.entries(shapes).map(([key, shape])=>/*#__PURE__*/ React.createElement("div", { key: key, className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-20", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, key, "ピース:"), /*#__PURE__*/ React.createElement(TetrisBlock, { shape: shape, color: colors[key], rotation: rotation, position: position, __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setRotation((r)=>(r + 1) % 4), className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "回転"), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPosition((p)=>({ ...p, x: p.x - 1 })), className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, "←"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPosition((p)=>({ ...p, x: p.x + 1 })), className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, "→"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPosition((p)=>({ ...p, y: p.y + 1 })), className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, "↓")))); } function MainComponent() { const [score, setScore] = useState(0); const [gameOver, setGameOver] = useState(false); const [isPlaying, setIsPlaying] = useState(false); const handleKeyPress = useCallback((event)=>{ if (!isPlaying || gameOver) return; switch(event.key){ case "ArrowLeft": case "a": break; case "ArrowRight": case "d": break; case "ArrowDown": case "s": break; case "ArrowUp": case "w": break; case " ": break; } }, [ isPlaying, gameOver ]); useEffect(()=>{ window.addEventListener("keydown", handleKeyPress); return ()=>{ window.removeEventListener("keydown", handleKeyPress); }; }, [ handleKeyPress ]); const startGame = ()=>{ setScore(0); setGameOver(false); setIsPlaying(true); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto text-center", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8 font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "テトリス"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-4 rounded-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-xl mb-2 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "スコア:"), /*#__PURE__*/ React.createElement("p", { className: "text-white text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, score))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), gameOver && /*#__PURE__*/ React.createElement("div", { className: "bg-[#ff0000] bg-opacity-80 p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "ゲームオーバー")), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-[#4a9eff] hover:bg-[#357abd] text-white font-bold py-2 px-6 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, isPlaying ? "リスタート" : "ゲームスタート"), /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-[#2a2a2a] p-4 rounded-lg text-left", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white text-xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "操作方法:"), /*#__PURE__*/ React.createElement("ul", { className: "text-white space-y-2 font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "← or A : 左に移動"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "→ or D : 右に移動"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "↓ or S : 下に移動"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "↑ or W : 回転"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "スペース : ハードドロップ"))))); }