function Component8X8GameBoardSprite({ idx, type, isKing }) { const pieceSprite = { light: '/sprites/light_piece.png', dark: '/sprites/dark_piece.png', lightKing: '/sprites/light_king_piece.png', darkKing: '/sprites/dark_king_piece.png' }; const spriteUrl = isKing ? pieceSprite[type + 'King'] : pieceSprite[type]; return /*#__PURE__*/ React.createElement("div", { key: type + '-' + idx, style: { gridColumn: idx % 8 + 1, gridRow: Math.floor(idx / 8) + 1 }, className: `w-full h-full bg-[url('${spriteUrl}')] bg-cover`, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }); } function Component8X8GameBoardSpriteStory() { return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-1", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component8X8GameBoardSprite, { idx: 0, type: "light", isKing: false, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Component8X8GameBoardSprite, { idx: 1, type: "dark", isKing: true, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [pieces, setPieces] = React.useState([ ...Array.from({ length: 24 }).fill().map((_, idx)=>({ idx, type: "light", isKing: false })), ...Array.from({ length: 24 }).fill().map((_, idx)=>({ idx: idx + 40, type: "dark", isKing: false })) ]); const handlePieceClick = (idx)=>{ // Game logic to handle piece clicks, e.g., moving pieces, king transformation, capturing pieces }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center justify-center bg-[#121212]", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl mb-8 text-[#ffcc00]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Ethereal Lights vs Mysterious Shadows"), /*#__PURE__*/ React.createElement("div", { className: "w-[600px] h-[600px] bg-[#422800] grid grid-cols-8 relative", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, pieces.map((piece, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "w-full h-full cursor-pointer", onClick: ()=>handlePieceClick(piece.idx), __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(Component8X8GameBoardSprite, { idx: piece.idx, type: piece.type, isKing: piece.isKing, __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex space-x-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 rounded bg-[#4CAF50] text-white font-roboto", name: "restart", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Restart"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 rounded bg-[#F44336] text-white font-roboto", name: "quit", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Quit")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between w-[600px]", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-white", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Lights Turn"), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-white", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Captured Pieces: 0"))); }