function MainComponent() { const [players, setPlayers] = React.useState([ { name: 'Player 1', color: 'Green', position: 0 }, { name: 'Player 2', color: 'Red', position: 0 }, { name: 'Player 3', color: 'Blue', position: 0 }, { name: 'Player 4', color: 'Yellow', position: 0 } ]); const [currentPlayer, setCurrentPlayer] = React.useState(0); const [diceValue, setDiceValue] = React.useState(null); const rollDice = ()=>{ const newValue = Math.ceil(Math.random() * 6); setDiceValue(newValue); setPlayers((prevPlayers)=>prevPlayers.map((player, index)=>index === currentPlayer ? { ...player, position: player.position + newValue } : player)); setCurrentPlayer((currentPlayer + 1) % 4); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen overflow-hidden", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-green-400 via-red-500 to-blue-500", style: { animation: 'bg-animation 15s infinite alternate' }, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "z-10 p-5", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FFF] text-5xl font-bold py-8 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Ludo Game"), /*#__PURE__*/ React.createElement(PlayersList, { players: players, currentPlayerIndex: currentPlayer, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 bg-[#ff4757] text-white text-lg rounded font-roboto", onClick: rollDice, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Roll Dice"), /*#__PURE__*/ React.createElement(Dice, { value: diceValue, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(LudoBoard, { currentPositions: players.map((player)=>player.position), __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, ` @keyframes bg-animation { 0% { transform: scale(1); filter: blur(0px); } 50% { transform: scale(1.2); filter: blur(8px); } 100% { transform: scale(1); filter: blur(0px); } } `)); } function PlayersList({ players, currentPlayerIndex }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs bg-[#2C3E50] rounded-lg shadow-lg p-4 mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#FFF] font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, "Players"), /*#__PURE__*/ React.createElement("ul", { className: "flex flex-col gap-3", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, players.map((player, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `rounded-md p-2 ${currentPlayerIndex === index ? 'ring-4 ring-[#FFEA00]' : ''}`, style: { backgroundColor: player.color }, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium text-[#FFF]", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, player.name))))); } function Dice({ value }) { return /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-16 h-16 bg-[#FFF] rounded-full flex items-center justify-center font-bold text-2xl font-roboto text-[#2C3E50]", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, value); } function LudoBoard({ currentPositions }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl h-96 bg-[#34495E] rounded-lg shadow-lg p-4 my-8", __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#FFF] font-semibold mb-4 text-center font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, "Ludo Board"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 grid-rows-8 gap-1 w-full h-full", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, Array.from({ length: 64 }, (_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-10 h-10 ${currentPositions.includes(index) ? 'bg-[#FFEA00]' : 'bg-[#7F8C8D]'}`, __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this })))); }