function MainComponent() { const [grid, setGrid] = useState([]); const [revealedTiles, setRevealedTiles] = useState([]); const [gameOver, setGameOver] = useState(false); const [gameWon, setGameWon] = useState(false); const [gameStarted, setGameStarted] = useState(false); const [totalSafeTiles, setTotalSafeTiles] = useState(0); const [revealedCount, setRevealedCount] = useState(0); const [showPopup, setShowPopup] = useState(false); const [difficulty, setDifficulty] = useState("medium"); const [showDifficultySelect, setShowDifficultySelect] = useState(false); // Difficulty settings const difficultySettings = { easy: { gridSize: 6, bombCount: 8 }, medium: { gridSize: 5, bombCount: 6 }, hard: { gridSize: 4, bombCount: 5 } }; const { gridSize: GRID_SIZE, bombCount: BOMB_COUNT } = difficultySettings[difficulty]; // Generate random bomb layout const generateGrid = ()=>{ const newGrid = Array(GRID_SIZE).fill().map(()=>Array(GRID_SIZE).fill(0)); const bombs = []; // Place bombs randomly while(bombs.length < BOMB_COUNT){ const row = Math.floor(Math.random() * GRID_SIZE); const col = Math.floor(Math.random() * GRID_SIZE); const bombKey = `${row}-${col}`; if (!bombs.includes(bombKey)) { bombs.push(bombKey); newGrid[row][col] = 1; } } return newGrid; }; // Start new game const startGame = ()=>{ const newGrid = generateGrid(); setGrid(newGrid); setRevealedTiles(Array(GRID_SIZE).fill().map(()=>Array(GRID_SIZE).fill(false))); setGameOver(false); setGameWon(false); setGameStarted(true); setRevealedCount(0); setShowPopup(false); setShowDifficultySelect(false); setTotalSafeTiles(GRID_SIZE * GRID_SIZE - BOMB_COUNT); }; // Handle tile click const handleTileClick = (row, col)=>{ if (gameOver || gameWon || revealedTiles[row][col]) return; const newRevealedTiles = [ ...revealedTiles ]; newRevealedTiles[row][col] = true; setRevealedTiles(newRevealedTiles); if (grid[row][col] === 1) { // Hit a bomb setGameOver(true); setShowPopup(true); } else { // Safe tile const newRevealedCount = revealedCount + 1; setRevealedCount(newRevealedCount); if (newRevealedCount === totalSafeTiles) { // Won the game setGameWon(true); setShowPopup(true); } } }; // Get reward gem color based on position const getRewardGem = (row, col)=>{ const gems = [ "https://ucarecdn.com/11065c53-da67-4254-9f53-57041cefe682/-/format/auto/", "https://ucarecdn.com/188ce46f-6344-4a38-bb0f-8824170bc6e1/-/format/auto/", "https://ucarecdn.com/11065c53-da67-4254-9f53-57041cefe682/-/format/auto/", "https://ucarecdn.com/188ce46f-6344-4a38-bb0f-8824170bc6e1/-/format/auto/" ]; return gems[(row + col) % 4]; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-indigo-900 via-teal-900 to-cyan-900 p-2 sm:p-4 relative overflow-hidden", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 overflow-hidden", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-10 sm:top-20 left-5 sm:left-10 w-48 sm:w-72 h-48 sm:h-72 bg-teal-500/10 rounded-full blur-3xl", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-10 sm:bottom-20 right-5 sm:right-10 w-64 sm:w-96 h-64 sm:h-96 bg-cyan-500/10 rounded-full blur-3xl", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-60 sm:w-80 h-60 sm:h-80 bg-turquoise-500/5 rounded-full blur-3xl", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto relative z-10", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4 sm:mb-8 backdrop-blur-xl bg-white/5 rounded-2xl sm:rounded-3xl p-4 sm:p-8 border border-white/10 shadow-2xl", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl sm:text-5xl font-bold bg-gradient-to-r from-white via-cyan-200 to-teal-200 bg-clip-text text-transparent mb-2 sm:mb-3", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "Hex Minesweeper"), /*#__PURE__*/ React.createElement("p", { className: "text-cyan-100/80 text-sm sm:text-lg", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, "Find all safe tiles without hitting a bomb!")), !gameStarted && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4 sm:mb-8 px-2", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-xl bg-white/5 rounded-xl sm:rounded-2xl p-4 sm:p-6 border border-white/10 shadow-xl w-full max-w-md", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg sm:text-xl font-bold text-white mb-3 sm:mb-4 text-center", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "Select Difficulty"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2 sm:gap-3", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, Object.entries(difficultySettings).map(([key, settings])=>/*#__PURE__*/ React.createElement("button", { key: key, onClick: ()=>setDifficulty(key), className: `px-4 sm:px-6 py-3 rounded-lg sm:rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 ${difficulty === key ? "backdrop-blur-xl bg-gradient-to-r from-teal-500/30 to-cyan-500/30 border border-white/30 text-white shadow-lg" : "backdrop-blur-xl bg-white/10 border border-white/20 text-white/80 hover:bg-white/20 hover:border-white/30"}`, __source: { fileName: "", lineNumber: 128, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm uppercase tracking-wide", __source: { fileName: "", lineNumber: 137, columnNumber: 21 }, __self: this }, key), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-white/70", __source: { fileName: "", lineNumber: 138, columnNumber: 21 }, __self: this }, settings.gridSize, "x", settings.gridSize, " •", " ", settings.bombCount, " bombs")))))), gameStarted && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:flex sm:justify-center gap-2 sm:gap-4 mb-4 sm:mb-8 px-2", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-xl bg-white/10 rounded-xl sm:rounded-2xl p-3 sm:p-4 border border-white/20 shadow-xl text-center", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl sm:text-3xl font-bold text-emerald-300 mb-1", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, revealedCount), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-white/70 uppercase tracking-wide", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, "Safe Tiles")), /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-xl bg-white/10 rounded-xl sm:rounded-2xl p-3 sm:p-4 border border-white/20 shadow-xl text-center", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl sm:text-3xl font-bold text-red-300 mb-1", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, BOMB_COUNT), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-white/70 uppercase tracking-wide", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, "Bombs")), /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-xl bg-white/10 rounded-xl sm:rounded-2xl p-3 sm:p-4 border border-white/20 shadow-xl text-center", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl sm:text-3xl font-bold text-cyan-300 mb-1", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, totalSafeTiles - revealedCount), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-white/70 uppercase tracking-wide", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, "Remaining")), /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-xl bg-white/10 rounded-xl sm:rounded-2xl p-3 sm:p-4 border border-white/20 shadow-xl text-center", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg sm:text-2xl font-bold text-teal-300 mb-1", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, difficulty.toUpperCase()), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-white/70 uppercase tracking-wide", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, "Difficulty"))), gameStarted ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4 sm:mb-8 px-2", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-2xl bg-white/5 rounded-2xl sm:rounded-3xl p-2 sm:p-4 border border-white/10 shadow-2xl", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `grid gap-1 ${GRID_SIZE === 6 ? "grid-cols-6" : GRID_SIZE === 5 ? "grid-cols-5" : "grid-cols-4"}`, __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, grid.map((row, rowIndex)=>row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("button", { key: `${rowIndex}-${colIndex}`, onClick: ()=>handleTileClick(rowIndex, colIndex), disabled: gameOver || gameWon || revealedTiles[rowIndex][colIndex], className: `w-16 h-16 sm:w-20 md:w-28 sm:h-20 md:h-28 transition-all duration-300 transform hover:scale-105 active:scale-95 disabled:cursor-not-allowed relative overflow-hidden ${revealedTiles[rowIndex][colIndex] ? "backdrop-blur-xl bg-gradient-to-br from-teal-500/20 to-cyan-500/20 border border-white/30 shadow-lg" : "backdrop-blur-xl bg-white/10 border border-white/20 shadow-xl hover:bg-gradient-to-br hover:from-teal-500/20 hover:to-cyan-500/20 hover:border-white/40 hover:shadow-2xl"}`, style: { clipPath: "polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%)" }, __source: { fileName: "", lineNumber: 202, columnNumber: 21 }, __self: this }, !revealedTiles[rowIndex][colIndex] && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-teal-400/20 to-cyan-400/20 opacity-0 hover:opacity-100 transition-opacity duration-300", style: { clipPath: "polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%)" }, __source: { fileName: "", lineNumber: 220, columnNumber: 25 }, __self: this }), revealedTiles[rowIndex][colIndex] ? /*#__PURE__*/ React.createElement("img", { src: cell === 1 ? "https://ucarecdn.com/c3127d80-2e6c-435d-947c-0a2de79b0abd/-/format/auto/" : getRewardGem(rowIndex, colIndex), alt: cell === 1 ? "Bomb" : "Reward", className: "w-full h-full object-contain p-1 sm:p-2", __source: { fileName: "", lineNumber: 230, columnNumber: 25 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/4821c130-17da-4c6e-9bd1-bd2fe366db15/-/format/auto/", alt: "Hidden tile", className: "w-full h-full object-contain p-1 sm:p-2 hover:brightness-125 transition-all duration-300", __source: { fileName: "", lineNumber: 240, columnNumber: 25 }, __self: this }))))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4 sm:mb-8 px-4", __source: { fileName: "", lineNumber: 253, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-48 h-48 sm:w-80 sm:h-80 mx-auto mb-4 sm:mb-8 backdrop-blur-2xl bg-white/5 rounded-2xl sm:rounded-3xl flex items-center justify-center border border-white/10 shadow-2xl relative overflow-hidden", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-teal-500/10 via-cyan-500/10 to-turquoise-500/10 animate-pulse", __source: { fileName: "", lineNumber: 256, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/fc48b40c-e976-4230-b89f-59a313961819/-/format/auto/", alt: "Hex tile", className: "w-24 h-24 sm:w-40 sm:h-40 object-contain relative z-10", __source: { fileName: "", lineNumber: 257, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-white/80 text-base sm:text-xl font-medium", __source: { fileName: "", lineNumber: 263, columnNumber: 13 }, __self: this }, "Select difficulty and click Start to begin your adventure!")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-center gap-3 sm:gap-4 px-4", __source: { fileName: "", lineNumber: 270, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "px-8 sm:px-10 py-3 sm:py-4 backdrop-blur-xl bg-gradient-to-r from-teal-500/20 to-cyan-500/20 border border-white/20 text-white font-bold rounded-xl sm:rounded-2xl hover:from-teal-500/30 hover:to-cyan-500/30 hover:border-white/30 transition-all duration-300 shadow-2xl hover:shadow-teal-500/25 hover:scale-105 active:scale-95 transform", __source: { fileName: "", lineNumber: 271, columnNumber: 11 }, __self: this }, gameStarted ? "Restart Game" : "Start Game"), gameStarted && /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setGameStarted(false); setShowDifficultySelect(true); }, className: "px-6 sm:px-8 py-3 sm:py-4 backdrop-blur-xl bg-white/10 border border-white/20 text-white font-bold rounded-xl sm:rounded-2xl hover:bg-white/20 hover:border-white/30 transition-all duration-300 shadow-xl hover:scale-105 active:scale-95 transform", __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }, "Change Difficulty")), showPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 292, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "backdrop-blur-2xl bg-white/10 p-6 sm:p-10 rounded-2xl sm:rounded-3xl border border-white/20 text-center max-w-sm w-full mx-4 shadow-2xl relative overflow-hidden", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-teal-500/5 via-cyan-500/5 to-turquoise-500/5 animate-pulse", __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10", __source: { fileName: "", lineNumber: 297, columnNumber: 15 }, __self: this }, gameOver ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-5xl sm:text-7xl mb-4 sm:mb-6", __source: { fileName: "", lineNumber: 300, columnNumber: 21 }, __self: this }, "💥"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl sm:text-3xl font-bold text-red-300 mb-2 sm:mb-3", __source: { fileName: "", lineNumber: 301, columnNumber: 21 }, __self: this }, "Boom!"), /*#__PURE__*/ React.createElement("p", { className: "text-white/80 mb-6 sm:mb-8 text-base sm:text-lg", __source: { fileName: "", lineNumber: 304, columnNumber: 21 }, __self: this }, "You hit a bomb! Better luck next time.")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-5xl sm:text-7xl mb-4 sm:mb-6", __source: { fileName: "", lineNumber: 310, columnNumber: 21 }, __self: this }, "🎉"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl sm:text-3xl font-bold text-emerald-300 mb-2 sm:mb-3", __source: { fileName: "", lineNumber: 311, columnNumber: 21 }, __self: this }, "Victory!"), /*#__PURE__*/ React.createElement("p", { className: "text-white/80 mb-6 sm:mb-8 text-base sm:text-lg", __source: { fileName: "", lineNumber: 314, columnNumber: 21 }, __self: this }, "Congratulations! You found all safe tiles on ", difficulty, " ", "mode!")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-3 justify-center", __source: { fileName: "", lineNumber: 320, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowPopup(false); startGame(); }, className: "px-4 sm:px-6 py-3 backdrop-blur-xl bg-gradient-to-r from-teal-500/30 to-cyan-500/30 border border-white/30 text-white font-bold rounded-lg sm:rounded-xl hover:from-teal-500/40 hover:to-cyan-500/40 hover:border-white/40 transition-all duration-300 shadow-xl hover:scale-105 active:scale-95 transform", __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, "Play Again"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowPopup(false); setGameStarted(false); }, className: "px-4 sm:px-6 py-3 backdrop-blur-xl bg-white/10 border border-white/30 text-white font-bold rounded-lg sm:rounded-xl hover:bg-white/20 hover:border-white/40 transition-all duration-300 shadow-xl hover:scale-105 active:scale-95 transform", __source: { fileName: "", lineNumber: 330, columnNumber: 19 }, __self: this }, "Change Difficulty"))))))); }