import React, { useState, useEffect } from 'react'; import Grid from 'Grid'; import GameStatus from 'GameStatus'; import Timer from 'Timer'; import Ticker from 'Ticker'; import { getPatternName } from 'GameStatus'; import WinPopup from 'WinPopup'; import TooLuckyPopup from 'TooLuckyPopup'; import WarningPopup from 'WarningPopup'; import HelpTooltip from 'HelpTooltip'; import HighScoreTooltip from 'HighScoreTooltip'; import EmptyBoxPopup from 'EmptyBoxPopup'; import BossButton from 'BossButton'; import { initializeBoxes } from 'gameLogic'; import { getRevealIndices } from 'revealPatterns'; import { useSounds } from 'SoundEffects'; import { useKonamiCode } from 'KonamiCode'; import BouncingAsset from 'BouncingAsset'; export default function Game() { const [boxes, setBoxes] = useState([]); const { konamiActivated } = useKonamiCode(); const { playExplosion, playCheer } = useSounds(); const [gameState, setGameState] = useState('idle'); // idle, playing, won, lost const [startTime, setStartTime] = useState(null); const [elapsedTime, setElapsedTime] = useState(0); const [remainingBoxes, setRemainingBoxes] = useState(196); const [showWinPopup, setShowWinPopup] = useState(false); const [showTooLuckyPopup, setShowTooLuckyPopup] = useState(false); const [bombCount, setBombCount] = useState(0); const [remainingBombs, setRemainingBombs] = useState(0); const [hintsRemaining, setHintsRemaining] = useState(3); // Start with 3 hints const [showHintPopup, setShowHintPopup] = useState(false); const [showEmptyBoxPopup, setShowEmptyBoxPopup] = useState(false); const [showBossButton, setShowBossButton] = useState(false); const [lastClickTime, setLastClickTime] = useState(0); const [showWarning, setShowWarning] = useState(false); useEffect(() => { resetGame(); }, []); useEffect(() => { let timer; if (gameState === 'playing' && startTime) { timer = setInterval(() => { setElapsedTime((Date.now() - startTime) / 1000); }, 10); // Update more frequently for centisecond precision } return () => clearInterval(timer); }, [gameState, startTime]); // Pattern type for this game session (0-9) const [revealPattern, setRevealPattern] = useState(0); const resetGame = () => { // Get the new boxes and extract bomb count const newBoxes = initializeBoxes(); const bombCount = newBoxes.filter(box => box.type === 'explode').length; setBoxes(newBoxes); setGameState('idle'); setStartTime(null); setElapsedTime(0); setRemainingBoxes(196); setShowWinPopup(false); setShowTooLuckyPopup(false); setBombCount(bombCount); setRemainingBombs(bombCount); // Choose a new random pattern for the next game const newPattern = Math.floor(Math.random() * 13); setRevealPattern(newPattern); console.log(`New pattern: ${getPatternName(newPattern)}`); }; const handleBoxClick = (index) => { if (gameState === 'won' || gameState === 'lost') return; // Handle safety box that's already revealed if (boxes[index].isRevealed && boxes[index].type === 'safety' && !boxes[index].safetyUsed) { handleSafetyBoxClick(index); return; } // Implement click speed limiter const currentTime = Date.now(); if (currentTime - lastClickTime < 500) { // Clicks too fast - show warning setShowWarning(true); return; } // Update last click time setLastClickTime(currentTime); if (gameState === 'idle') { setGameState('playing'); setStartTime(Date.now()); // Force ticker to restart animation when game starts - improved const tickerElement = document.querySelector('.ticker-content'); if (tickerElement) { tickerElement.style.animation = 'none'; void tickerElement.offsetWidth; // Trigger reflow tickerElement.style.animation = 'ticker 67s linear infinite'; } } // Handle box click logic const newBoxes = [...boxes]; // Handle empty box click (for color change) after it's revealed if (boxes[index].isRevealed && boxes[index].type === 'empty') { handleEmptyBoxClick(index); return; } if (boxes[index].isRevealed) return; // Helper function to check if two boxes are adjacent const isAdjacent = (index1, index2, gridWidth = 14) => { const row1 = Math.floor(index1 / gridWidth); const col1 = index1 % gridWidth; const row2 = Math.floor(index2 / gridWidth); const col2 = index2 % gridWidth; // Check if they're in adjacent positions (including diagonals) return Math.abs(row1 - row2) <= 1 && Math.abs(col1 - col2) <= 1; }; const revealBox = (idx, isDirectClick = false) => { if (idx < 0 || idx >= newBoxes.length || newBoxes[idx].isRevealed) return; // Store the original index for bombs to know if it was directly clicked if (isDirectClick) { // Instead of adding to the array, store the direct click index in a separate variable newBoxes[index].directClickIndex = idx; } newBoxes[idx].isRevealed = true; setRemainingBoxes(prev => prev - 1); // If this is a bomb being revealed, decrement the remaining bombs count if (newBoxes[idx].type === 'explode') { setRemainingBombs(prev => prev - 1); } // Rule 2: If user clicks on a box, reveal ONLY bombs that are directly adjacent // and ONLY if the click was direct (not through another box's multi-reveal) if (isDirectClick && newBoxes[idx].type !== 'explode') { // Check all adjacent boxes const row = Math.floor(idx / 14); const col = idx % 14; // Check all 8 directions (including diagonals) for (let r = -1; r <= 1; r++) { for (let c = -1; c <= 1; c++) { if (r === 0 && c === 0) continue; // Skip self const newRow = row + r; const newCol = col + c; // Skip if out of bounds if (newRow < 0 || newRow >= 14 || newCol < 0 || newCol >= 14) continue; const adjacentIdx = newRow * 14 + newCol; // If adjacent box is a bomb and not revealed, reveal it if (adjacentIdx >= 0 && adjacentIdx < newBoxes.length && !newBoxes[adjacentIdx].isRevealed && newBoxes[adjacentIdx].type === 'explode') { newBoxes[adjacentIdx].isRevealed = true; setRemainingBoxes(prev => prev - 1); setRemainingBombs(prev => prev - 1); } } } } }; revealBox(index, true); // Pass true to indicate this is a direct click const box = newBoxes[index]; if (box.type === 'explode') { // Mark bomb as exploded but only end game if directly clicked newBoxes[index].exploded = true; playExplosion(); // End the game only if the bomb was directly clicked, not if revealed by special boxes // Check the directClickIndex property on the box itself if (box.directClickIndex === index) { setGameState('lost'); // Reveal all boxes visually without changing remainingBoxes count // And mark all explosive boxes as visible and exploded newBoxes.forEach(b => { if (!b.isRevealed) { b.isVisible = true; // Use a new property for visual reveal only if (b.type === 'explode') { b.exploded = true; // Mark all bombs as exploded for visibility } } }); } } else if (box.type === 'win') { // Check if the player found the win box too quickly (under 10 seconds) if (elapsedTime < 10) { // Too fast - doesn't count as a win setGameState('lost'); // Show a custom popup for "too lucky" scenario setShowTooLuckyPopup(true); playExplosion(); // Play explosion sound instead of cheer } else { // Normal win setGameState('won'); setShowWinPopup(true); playCheer(); } } else if (box.type === 'double') { // Clear another box using the current pattern const unrevealedIndices = newBoxes .map((b, i) => (!b.isRevealed && i !== index && b.type !== 'win' ? i : -1)) .filter(i => i !== -1); if (unrevealedIndices.length > 0) { // Use the current pattern instead of random selection const orderedIndices = getRevealIndices(index, unrevealedIndices, revealPattern); revealBox(orderedIndices[0]); // Select the first box based on pattern } } else if (box.type === 'multi') { // Clear boxes using the pattern logic const clearCount = box.clearCount; const unrevealedIndices = newBoxes .map((b, i) => (!b.isRevealed && i !== index && b.type !== 'win' ? i : -1)) .filter(i => i !== -1); if (unrevealedIndices.length > 0) { // Get indices ordered by the current pattern const orderedIndices = getRevealIndices(index, unrevealedIndices, revealPattern); // Reveal up to clearCount boxes following the pattern const boxesToReveal = Math.min(clearCount, orderedIndices.length); for (let i = 0; i < boxesToReveal; i++) { revealBox(orderedIndices[i]); } } } setBoxes(newBoxes); // Rule 3: When less than 10 unrevealed boxes remain, ensure bombs are not next to green boxes if (gameState === 'playing' && remainingBoxes <= 10) { // Find all green boxes (double boxes) const greenBoxIndices = newBoxes .map((b, i) => (b.type === 'double' ? i : -1)) .filter(i => i !== -1); // Find all bombs that are revealed const bombIndices = newBoxes .map((b, i) => (b.type === 'explode' && !b.isRevealed ? i : -1)) .filter(i => i !== -1); // Check if any bomb is adjacent to a green box for (const bombIdx of bombIndices) { let isNextToGreen = false; // Check if this bomb is adjacent to any green box for (const greenIdx of greenBoxIndices) { if (isAdjacent(bombIdx, greenIdx, 10)) { // 10 is the grid width isNextToGreen = true; break; } } // If bomb is next to green, automatically reveal it if (isNextToGreen) { newBoxes[bombIdx].isRevealed = true; setRemainingBoxes(prev => prev - 1); setRemainingBombs(prev => prev - 1); } } } // Check if player won (only winning box remains) if (gameState === 'playing' && remainingBoxes === 2 && box.type !== 'win') { setGameState('won'); setShowWinPopup(true); playCheer(); // When won, reveal all boxes visually without changing remainingBoxes count const wonBoxes = [...newBoxes]; wonBoxes.forEach(b => { if (!b.isRevealed) { b.isVisible = true; // Use a new property for visual reveal only } }); setBoxes(wonBoxes); } }; const handleSafetyBoxClick = (index) => { if (gameState !== 'playing') return; const box = boxes[index]; // Verify it's a safety box, is revealed, and hasn't been used if (box.type !== 'safety' || !box.isRevealed || box.safetyUsed) return; const newBoxes = [...boxes]; newBoxes[index].safetyUsed = true; // Mark as used // Reduce the timer by 5 seconds by adding 5 seconds to the start time // This effectively reduces the elapsed time by 5 seconds setStartTime(prev => prev + 5000); setBoxes(newBoxes); }; // Handle empty box click for color change const handleEmptyBoxClick = (index) => { // Only proceed if the box is already revealed and is an empty box if (!boxes[index].isRevealed || boxes[index].type !== 'empty') return; // Create a deep copy of the boxes const newBoxes = JSON.parse(JSON.stringify(boxes)); // Change to the next color in the cycle newBoxes[index].colorIndex = (newBoxes[index].colorIndex || 0) + 1; console.log(`Changing empty box ${index} color index to ${newBoxes[index].colorIndex}`); // Show the boss button on specific clicks (every 3rd click) if (newBoxes[index].colorIndex % 3 === 0) { setShowBossButton(true); return; // Don't proceed with other effects if showing boss button } // Show the popup after first color change if (newBoxes[index].colorIndex > 1) { setShowEmptyBoxPopup(true); } // Update the state with the new boxes setBoxes(newBoxes); // Trigger animation by adding/removing class const boxElement = document.querySelector(`[data-box-index="${index}"]`); if (boxElement) { // Remove and re-add the animation class to restart it boxElement.querySelector('.color-ripple').style.animation = 'none'; void boxElement.querySelector('.color-ripple').offsetWidth; boxElement.querySelector('.color-ripple').style.animation = 'ripple 0.6s linear'; } // Add a small sound effect for feedback const audio = new Audio(); audio.volume = 0.2; audio.src = "https://play.rosebud.ai/assets/cheer.mp3?rHFw"; audio.currentTime = 0.2; // Start slightly into the sound for a click-like effect audio.play().catch(e => console.log("Could not play sound effect", e)); }; // Comment: The handleBoxClick function has been defined above const handleRevealClick = () => { if (gameState !== 'playing' || remainingBoxes < 20) return; const newBoxes = [...boxes]; const unrevealedIndices = newBoxes .map((b, i) => (!b.isRevealed && !b.isVisible && b.type !== 'win' ? i : -1)) .filter(i => i !== -1); if (unrevealedIndices.length === 0) return; // Shuffle the array using Fisher-Yates algorithm for (let i = unrevealedIndices.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [unrevealedIndices[i], unrevealedIndices[j]] = [unrevealedIndices[j], unrevealedIndices[i]]; } // Reveal up to 15 boxes const boxesToReveal = Math.min(15, unrevealedIndices.length); for (let i = 0; i < boxesToReveal; i++) { const index = unrevealedIndices[i]; newBoxes[index].isRevealed = true; // If it's a bomb, mark it appropriately if (newBoxes[index].type === 'explode') { setRemainingBombs(prev => prev - 1); } } // Add 15 seconds penalty to the timer setStartTime(prev => prev - 15000); // Subtract 15000ms from start time setRemainingBoxes(prev => prev - boxesToReveal); setBoxes(newBoxes); }; const handleAssetClick = (asset) => { if (gameState === 'playing') { const newBoxes = [...boxes]; // Reveal all boxes visually without changing remainingBoxes count newBoxes.forEach(b => { if (!b.isRevealed) { b.isVisible = true; } // Mark all bombs as exploded for visibility if (b.type === 'explode') { b.exploded = true; } }); setBoxes(newBoxes); setGameState('lost'); playExplosion(); console.log(`Game ended by clicking ${asset}`); } }; return (

LINKSWEEPER

The internet is full of horrors and dangerous links.
Proceed quickly and with caution...

💀 {remainingBombs}

{gameState === 'playing' && ( )}

{(gameState === 'won' || gameState === 'lost') && ( )}

{showWinPopup && } {showTooLuckyPopup && } {/* Only show bouncing assets during gameplay */} {gameState !== 'idle' && ( <> )} {showWarning && ( setShowWarning(false)} /> )} {/* Show Empty Box Popup */} {showEmptyBoxPopup && ( setShowEmptyBoxPopup(false)} /> )} {/* Show Boss Button overlay */} {showBossButton && ( setShowBossButton(false)} /> )} {/* Add Help Tooltip */} {/* Add High Score Tooltip */}

); }