function JapaneseTheme({ children, variant = "default" }) { const patterns = { default: "bg-[#f7f3eb] bg-opacity-90", seigaiha: "bg-[#f5e6d3]", asanoha: "bg-[#e8d4c4]" }; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen p-8 ${patterns[variant]}`, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto bg-[#ffffff] bg-opacity-80 p-6 rounded-lg shadow-lg border border-[#d4a168] font-serif", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#8b4513] p-8", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, children || /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-[#4a1e1b] font-bold", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, "和風デザイン"), /*#__PURE__*/ React.createElement("p", { className: "text-[#594545]", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, "伝統的な日本のデザインをモチーフにした優雅なレイアウト"))))); } function JapaneseThemeStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseTheme, { variant: "default", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(JapaneseTheme, { variant: "seigaiha", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#4a1e1b]", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "青海波パターン"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "伝統的な和柄をモダンにアレンジ"))), /*#__PURE__*/ React.createElement(JapaneseTheme, { variant: "asanoha", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#4a1e1b]", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "麻の葉パターン"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "日本の伝統美をデジタルで表現")))); } function ShogiBoard({ onMove, position }) { const [selectedPiece, setSelectedPiece] = useState(null); const initialPosition = { "9,1": "香", "8,1": "桂", "7,1": "銀", "6,1": "金", "5,1": "玉", "4,1": "金", "3,1": "銀", "2,1": "桂", "1,1": "香", "8,2": "飛", "2,2": "角", "9,3": "歩", "8,3": "歩", "7,3": "歩", "6,3": "歩", "5,3": "歩", "4,3": "歩", "3,3": "歩", "2,3": "歩", "1,3": "歩", "9,7": "歩", "8,7": "歩", "7,7": "歩", "6,7": "歩", "5,7": "歩", "4,7": "歩", "3,7": "歩", "2,7": "歩", "1,7": "歩", "8,8": "角", "2,8": "飛", "9,9": "香", "8,9": "桂", "7,9": "銀", "6,9": "金", "5,9": "玉", "4,9": "金", "3,9": "銀", "2,9": "桂", "1,9": "香" }; const currentPosition = position || initialPosition; const handleCellClick = (x, y)=>{ if (selectedPiece) { onMove?.({ from: selectedPiece, to: `${x},${y}` }); setSelectedPiece(null); } else if (currentPosition[`${x},${y}`]) { setSelectedPiece(`${x},${y}`); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[600px] h-[600px] bg-[#E8C397] rounded-lg shadow-lg p-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-9 gap-1 w-full h-full", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 9 }) ].map((_, y)=>[ ...Array.from({ length: 9 }) ].map((_, x)=>{ const key = `${9 - x},${y + 1}`; const piece = currentPosition[key]; const isSelected = selectedPiece === key; return /*#__PURE__*/ React.createElement("div", { key: key, onClick: ()=>handleCellClick(9 - x, y + 1), className: ` border border-[#4A3825] bg-[#E8B26F] flex items-center justify-center font-kaisei text-2xl cursor-pointer ${isSelected ? "bg-[#FFD700] bg-opacity-30" : ""} hover:bg-[#D4A76A] `, __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, piece); }))))); } function ShogiBoardStory() { const [gamePosition, setGamePosition] = useState(null); const handleMove = ({ from, to })=>{ setGamePosition((prev)=>{ const newPosition = { ...prev }; newPosition[to] = newPosition[from]; delete newPosition[from]; return newPosition; }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#F5F5F5]", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ShogiBoard, { position: gamePosition, onMove: handleMove, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isLoggedIn, setIsLoggedIn] = useState(false); const [username, setUsername] = useState(""); return /*#__PURE__*/ React.createElement(JapaneseTheme, { __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#8B4513] bg-opacity-80 p-6 shadow-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white font-mincho mb-4 md:mb-0", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "将棋の間"), /*#__PURE__*/ React.createElement("nav", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-[#FFE4B5] font-mincho", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "ルール"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-[#FFE4B5] font-mincho", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, "歴史"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-[#FFE4B5] font-mincho", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "対局"), isLoggedIn ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-mincho", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, username, "様"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsLoggedIn(false), className: "bg-[#654321] text-white px-4 py-2 rounded hover:bg-[#8B4513] font-mincho", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, "ログアウト")) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsLoggedIn(true), className: "bg-[#654321] text-white px-4 py-2 rounded hover:bg-[#8B4513] font-mincho", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "ログイン")))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 flex-grow", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white bg-opacity-90 p-8 rounded-lg shadow-xl my-8", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 flex justify-center", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(ShogiBoard, { __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border-t border-b border-[#8B4513] py-6 my-6", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-4", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chess text-4xl text-[#8B4513]", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-mincho text-[#2C1810]", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "伝統の対局場へようこそ"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#8B4513] bg-opacity-20 py-6", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#2C1810] font-mincho", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "© 2024 将棋の間")))); }