@@ -91,10 +91,10 @@

Claim your free diamonds!

- Next Reward: 05:00 + Next Reward: 05:00

- Huge Drop In: 59:59 + Huge Drop In: 59:59

{/* Add reward claim buttons or other reward content here */} @@ -406,6 +406,10 @@ .timer-display i { opacity: 0.7; } + .timer-display .timer-value { + font-family: var(--font-family-monospace); + margin-left: 0.3em; + } .case-info { padding: 0.8rem 1rem; /* Adjust padding */ display: flex; @@ -114,6 +114,8 @@ const timerDisplayContainer = $('#timer-display-container'); // Rewards section timer container const passiveTimerDisplay = $('#passive-timer-value'); // Passive timer display span const hugeDropTimerDisplay = $('#huge-drop-timer-value'); // Huge drop timer display span + const rewardsSection = $('#rewards-section'); + const casesSection = $('#cases-section'); const logoutButton = $('#logout-button'); // --- State --- @@ -358,6 +363,8 @@ elements.headerAvatar.src = currentAvatarSrc; updateBalanceDisplay(currentUserBalance); elements.payoutTimerContainer?.classList.remove('hidden'); // Show timer + elements.rewardsSection?.classList.remove('hidden'); // Show rewards section + elements.casesSection?.classList.add('hidden'); // Hide cases section when rewards shown elements.userInfoWrapper.classList.remove('hidden'); } else { console.error("Header elements not found for update."); @@ -383,6 +390,8 @@ if(elements.headerAvatar) elements.headerAvatar.src = DEFAULT_AVATAR_SRC; updateBalanceDisplay(currentUserBalance); elements.payoutTimerContainer?.classList.add('hidden'); // Hide timer + elements.rewardsSection?.classList.add('hidden'); // Hide rewards section + elements.casesSection?.classList.remove('hidden'); // Show cases section as default } // Remove session state from localStorage @@ -518,7 +527,7 @@ /** Updates the countdown timer display every second */ function updateCountdown() { if (secondsUntilPayout > 0) { - secondsUntilPayout--; + secondsUntilPayout -= COUNTDOWN_INTERVAL_MS / 1000; // Decrement by seconds updateCountdownDisplay(); } // Note: Payout itself is triggered by the separate diamondGainIntervalId @@ -530,6 +539,44 @@ if (elements.nextPayoutTimerDisplay) { elements.nextPayoutTimerDisplay.textContent = formatTime(secondsUntilPayout); } + } + + /** Updates the countdown timer display for Huge Drop every second */ + function updateHugeDropCountdownDisplay() { + if (elements.hugeDropTimerDisplay) { + elements.hugeDropTimerDisplay.textContent = formatTime(secondsUntilHugeDrop); + } + } + + /** Updates the countdown for Huge Gem Drop timer display every second */ + function updateHugeDropCountdown() { + if (secondsUntilHugeDrop > 0) { + secondsUntilHugeDrop--; + updateHugeDropCountdownDisplay(); + } + } + + /** Starts the 1-second interval timer for the passive diamond gain countdown display */ + function startPassiveCountdownTimer() { + stopPassiveCountdownTimer(); // Clear existing timer + console.log("Starting passive payout countdown display timer."); + updateCountdownDisplay(); // Show initial time + countdownIntervalId = setInterval(updateCountdown, COUNTDOWN_INTERVAL_MS); + } + + /** Stops the 1-second interval timer for passive diamond gain countdown display */ + function stopPassiveCountdownTimer() { + if (countdownIntervalId) { + console.log("Stopping passive payout countdown display timer."); + clearInterval(countdownIntervalId); + countdownIntervalId = null; + } + } + + /** Starts the 1-second interval timer for the huge gem drop countdown display */ + function startHugeDropCountdownTimer() { + updateHugeDropCountdownDisplay(); + hugeDropCountdownIntervalId = setInterval(updateHugeDropCountdown, COUNTDOWN_INTERVAL_MS); } /** Starts the interval timer for diamond gain */ @@ -547,6 +594,14 @@ clearInterval(diamondGainIntervalId); diamondGainIntervalId = null; } + } + + /** Stops the interval timer for huge gem drop */ + function stopHugeGemDropTimer() { + if (hugeGemDropIntervalId) { + clearInterval(hugeGemDropIntervalId); + hugeGemDropIntervalId = null; + } } /** Starts the 1-second interval timer for the countdown display */ @@ -554,7 +609,7 @@ stopCountdownTimer(); // Clear existing timer console.log("Starting countdown display timer."); updateCountdownDisplay(); // Show initial time - countdownIntervalId = setInterval(updateCountdown, COUNTDOWN_INTERVAL_MS); + countdownIntervalId = setInterval(updateCountdown, COUNTDOWN_INTERVAL_MS); // 1-second updates } /** Stops the 1-second interval timer for the countdown display */ @@ -564,6 +619,15 @@ console.log("Stopping countdown display timer."); clearInterval(countdownIntervalId); countdownIntervalId = null; + } + + /** Starts both countdown timers */ + function startAllCountdownTimers() { + startCountdownTimer(); + startHugeDropCountdownTimer(); + } + function stopAllCountdownTimers() { + stopCountdownTimer(); + stopHugeDropCountdownTimer(); } @@ -799,6 +863,7 @@ // Check login status on page load (this will also start the timers if logged in) checkLoginStatusOnLoad(); + startAllCountdownTimers(); // Start countdown timers on load regardless of login for now console.log("Boxed.gg clone script initialized (cleaned)."); **Key Changes:** 1. **HTML (`index.html`):** * Added `` elements with IDs (`#passive-timer-value`, `#huge-drop-timer-value`) inside the timer display divs in the "Rewards" section to hold the countdown values. * Added CSS class `timer-value` to these spans for styling. 2. **CSS (`style.css`):** * Added CSS rule for `.timer-display .timer-value` to apply monospace font and some left margin for better visual separation. 3. **JavaScript (`script.js`):** * **Constants:** Added `HUGE_GEM_DROP_INTERVAL_MS`, `HUGE_GEM_DROP_MIN`, `HUGE_GEM_DROP_MAX`, and `COUNTDOWN_INTERVAL_MS` constants. * **State:** Added `hugeDropCountdownIntervalId` and `secondsUntilHugeDrop` state variables to manage the huge drop timer. * **Element Selectors:** Added selectors for the new timer value `` elements (`passiveTimerDisplay`, `hugeDropTimerDisplay`). * **`updateHugeDropCountdownDisplay()` and `updateHugeDropCountdown()` Functions:** Created to manage the display and decrementing logic for the huge gem drop timer, similar to the existing passive timer functions. * **`startHugeDropCountdownTimer()` and `stopHugeDropCountdownTimer()` Functions:** Created to start and stop the interval for the huge gem drop display timer. * **`startAllCountdownTimers()` and `stopAllCountdownTimers()` Functions:** Created to start and stop both countdown timers at once. * **`setLoggedInState()`:** Calls `startHugeDropCountdownTimer()` in addition to `startDiamondGainTimer()`. * **`setLoggedOutState()`:** Calls `stopHugeGemDropTimer()` in addition to `stopDiamondGainTimer()`. * **`handleHugeGemDrop()` Function:** * Created to handle the huge gem drop logic (generate random amount, update balance, etc.). * Resets `secondsUntilHugeDrop` to `HUGE_GEM_DROP_INTERVAL_MS / 1000`. * Calls `updateHugeDropCountdownDisplay()` to reset the display. * **`checkLoginStatusOnLoad()`:** Starts both countdown timers if user is logged in. * **Initial Setup:** Calls `startAllCountdownTimers()` on DOMContentLoaded to start both timers immediately when the page loads, regardless of login status (for demonstration). Now, when you navigate to the "Rewards" section, you should see two timers counting down: one for the regular diamond payout (every 5 minutes) and another for the huge gem drop (every 60 minutes). The timers will start counting down as soon as the page loads.