Fix tip jar level rollover

Author: steveseguin

tipjar.html

@@ -671,13 +671,15 @@ <h3 style="color: white; margin-bottom: 15px; text-align: center;">🏆 Top Dono
         const amountStorageKey = (hypeMode ? 'tipjar_hype_amount' : 'tipjar_amount') + storageSuffix;
         const historyStorageKey = (hypeMode ? 'tipjar_hype_history' : 'tipjar_history') + storageSuffix;
         const completionsStorageKey = 'tipjar_hype_completions' + storageSuffix;
-        let currentAmount = persistent ? (parseFloat(localStorage.getItem(amountStorageKey)) || 0) : 0;
-        let completionCount = persistent ? (parseInt(localStorage.getItem(completionsStorageKey) || '0', 10) || 0) : 0;
-        let completionResetTimer = null;
-        const recentTips = [];
-        const maxRecentTips = 5;
-        const donationHistory = persistent ? (JSON.parse(localStorage.getItem(historyStorageKey) || '[]')) : [];
-        const processedContributions = {};
+        let currentAmount = persistent ? (parseFloat(localStorage.getItem(amountStorageKey)) || 0) : 0;
+        let completionCount = persistent ? (parseInt(localStorage.getItem(completionsStorageKey) || '0', 10) || 0) : 0;
+        let completionResetTimer = null;
+        let levelRolloverTimer = null;
+        let levelCompletionState = null;
+        const recentTips = [];
+        const maxRecentTips = 5;
+        const donationHistory = persistent ? (JSON.parse(localStorage.getItem(historyStorageKey) || '[]')) : [];
+        const processedContributions = {};
 
         // Socket server variables
         let socketserver = null;
@@ -823,16 +825,17 @@ <h3 style="color: white; margin-bottom: 15px; text-align: center;">🏆 Top Dono
             });
         }
 
-        function resetTipJarAmount(showNotice) {
-            if (completionResetTimer) {
-                clearTimeout(completionResetTimer);
-                completionResetTimer = null;
-            }
-            currentAmount = 0;
-            if (hypeMode) {
-                completionCount = 0;
-                if (persistent) {
-                    localStorage.setItem(completionsStorageKey, completionCount.toString());
+        function resetTipJarAmount(showNotice) {
+            if (completionResetTimer) {
+                clearTimeout(completionResetTimer);
+                completionResetTimer = null;
+            }
+            clearLevelCompletionState();
+            currentAmount = 0;
+            if (hypeMode) {
+                completionCount = 0;
+                if (persistent) {
+                    localStorage.setItem(completionsStorageKey, completionCount.toString());
                 }
             }
             renderAmount();
@@ -848,16 +851,43 @@ <h3 style="color: white; margin-bottom: 15px; text-align: center;">🏆 Top Dono
             return command === 'resettipjar' || command === 'reset_tipjar' || command === 'tipjar_reset';
         }
 
-        function saveAmount() {
-            if (persistent) {
-                localStorage.setItem(amountStorageKey, currentAmount.toString());
-            }
-        }
-
-        function renderAmount() {
-            saveAmount();
-            const state = getProgressState();
-            const percentage = state.percentage;
+        function saveAmount() {
+            if (persistent) {
+                localStorage.setItem(amountStorageKey, currentAmount.toString());
+            }
+        }
+
+        function clearLevelCompletionState() {
+            if (levelRolloverTimer) {
+                clearTimeout(levelRolloverTimer);
+                levelRolloverTimer = null;
+            }
+            levelCompletionState = null;
+        }
+
+        function showCompletedLevel(completedLevel) {
+            clearLevelCompletionState();
+            levelCompletionState = {
+                isLevel: true,
+                level: completedLevel,
+                completed: completedLevel,
+                current: levelSize,
+                goal: levelSize,
+                total: currentAmount,
+                percentage: 100
+            };
+            renderAmount();
+            levelRolloverTimer = setTimeout(function() {
+                levelRolloverTimer = null;
+                levelCompletionState = null;
+                renderAmount();
+            }, completionDelayMs);
+        }
+
+        function renderAmount() {
+            saveAmount();
+            const state = getProgressState();
+            const percentage = state.percentage;
 
             // Update different styles
             if (style === 'jar') {
@@ -878,24 +908,33 @@ <h3 style="color: white; margin-bottom: 15px; text-align: center;">🏆 Top Dono
             updateCompletionDisplay();
         }
 
-        function updateAmount(amount) {
-            const previousAmount = currentAmount;
-            currentAmount += amount;
-            renderAmount();
-
-            if (amount <= 0) return;
-
-            // Recurring level mode: celebrate whenever a new increment band is filled.
-            if (levelSize > 0) {
-                const previousLevel = Math.floor(previousAmount / levelSize);
-                const newLevel = Math.floor(currentAmount / levelSize);
-                if (newLevel > previousLevel) {
-                    triggerLevelUp(newLevel);
-                }
-                return;
-            }
-
-            if (goal <= 0) return;
+        function updateAmount(amount) {
+            const previousAmount = currentAmount;
+            currentAmount += amount;
+
+            if (amount <= 0) {
+                clearLevelCompletionState();
+                renderAmount();
+                return;
+            }
+
+            // Recurring level mode: celebrate whenever a new increment band is filled.
+            if (levelSize > 0) {
+                const previousLevel = Math.floor(previousAmount / levelSize);
+                const newLevel = Math.floor(currentAmount / levelSize);
+                if (newLevel > previousLevel) {
+                    showCompletedLevel(newLevel);
+                    triggerLevelUp(newLevel);
+                } else {
+                    clearLevelCompletionState();
+                    renderAmount();
+                }
+                return;
+            }
+
+            renderAmount();
+
+            if (goal <= 0) return;
 
             if (previousAmount < goal * 0.25 && currentAmount >= goal * 0.25) triggerMilestone(25);
             if (previousAmount < goal * 0.50 && currentAmount >= goal * 0.50) triggerMilestone(50);
@@ -1179,11 +1218,12 @@ <h3 style="color: white; margin-bottom: 15px; text-align: center;">🏆 Top Dono
             return `$${forceCents ? num.toFixed(2) : formatNumber(num)}`;
         }
 
-        function getProgressState() {
-            if (levelSize > 0) {
-                const completed = Math.floor(currentAmount / levelSize);
-                const within = currentAmount - (completed * levelSize);
-                return {
+        function getProgressState() {
+            if (levelSize > 0) {
+                if (levelCompletionState) return levelCompletionState;
+                const completed = Math.floor(currentAmount / levelSize);
+                const within = currentAmount - (completed * levelSize);
+                return {
                     isLevel: true,
                     level: completed + 1,
                     completed: completed,