feat: Increase maximum popup images to 40 with smart performance optimizations

- Updated image count slider max from 8 to 40
- Increased range mode max from 10 to 40
- Updated random mode from 1-5 to 1-10 images
- Added dynamic delay calculation: faster delays for larger popup counts
- Added performance warning for counts >20 popups
- Enhanced UI with warning indicators and updated help text
- Added smart timing to prevent long delays with many popups

game.js

@@ -4491,10 +4491,12 @@ TaskChallengeGame.prototype.setupPopupImagesTabListeners = function() {
     const countValue = document.getElementById('popup-image-count-value');
     if (countSlider && countValue) {
         countSlider.oninput = () => {
-            countValue.textContent = countSlider.value;
+            const count = parseInt(countSlider.value);
+            countValue.textContent = count;
             const config = this.popupImageManager.getConfig();
-            config.imageCount = parseInt(countSlider.value);
+            config.imageCount = count;
             this.popupImageManager.updateConfig(config);
+            this.updatePopupCountWarning(count);
         };
     }
 
@@ -4511,8 +4513,10 @@ TaskChallengeGame.prototype.setupPopupImagesTabListeners = function() {
     if (maxCountInput) {
         maxCountInput.onchange = () => {
             const config = this.popupImageManager.getConfig();
-            config.maxCount = parseInt(maxCountInput.value);
+            const maxCount = parseInt(maxCountInput.value);
+            config.maxCount = maxCount;
             this.popupImageManager.updateConfig(config);
+            this.updatePopupCountWarning(maxCount);
         };
     }
 
@@ -4743,8 +4747,12 @@ TaskChallengeGame.prototype.loadPopupImagesSettings = function() {
     this.updatePopupCountControls(config.imageCountMode);
     this.updatePopupDurationControls(config.durationMode);
     
-    // Update info display
+    // Update info display and warnings
     this.updatePopupImagesInfo();
+    
+    // Check for high count warnings
+    const currentCount = config.imageCountMode === 'fixed' ? config.imageCount : config.maxCount;
+    this.updatePopupCountWarning(currentCount);
 };
 
 TaskChallengeGame.prototype.updatePopupImagesInfo = function() {
@@ -4762,6 +4770,17 @@ TaskChallengeGame.prototype.updatePopupImagesInfo = function() {
     }
 };
 
+TaskChallengeGame.prototype.updatePopupCountWarning = function(count) {
+    const warningEl = document.getElementById('popup-warning');
+    if (warningEl) {
+        if (count > 20) {
+            warningEl.style.display = 'block';
+        } else {
+            warningEl.style.display = 'none';
+        }
+    }
+};
+
 // Import/Export Tab Management
 TaskChallengeGame.prototype.setupImportExportTabListeners = function() {
     const exportAllBtn = document.getElementById('export-all-messages-btn');

gameData.js

@@ -294,7 +294,7 @@ const gameData = {
         imageCount: 3, // Number of images to show
         imageCountMode: 'fixed', // 'fixed', 'random', 'range'
         minCount: 2, // For range mode
-        maxCount: 5, // For range mode
+        maxCount: 10, // For range mode - increased from 5
         displayDuration: 8000, // 8 seconds default
         durationMode: 'fixed', // 'fixed', 'random', 'range'
         minDuration: 5000, // For range mode (5s)

index.html

@@ -564,14 +564,14 @@
                                 <label for="popup-count-mode">Count Mode:</label>
                                 <select id="popup-count-mode">
                                     <option value="fixed">Fixed Amount</option>
-                                    <option value="random">Random (1-5)</option>
+                                    <option value="random">Random (1-10)</option>
                                     <option value="range">Custom Range</option>
                                 </select>
                             </div>
                             
                             <div id="popup-fixed-count" class="control-group">
                                 <label for="popup-image-count">Number of Images:</label>
-                                <input type="range" id="popup-image-count" min="1" max="8" value="3" />
+                                <input type="range" id="popup-image-count" min="1" max="40" value="3" />
                                 <span id="popup-image-count-value">3</span>
                             </div>
                             
@@ -579,11 +579,11 @@
                                 <div class="range-inputs">
                                     <div>
                                         <label for="popup-min-count">Minimum:</label>
-                                        <input type="number" id="popup-min-count" min="1" max="5" value="2" />
+                                        <input type="number" id="popup-min-count" min="1" max="20" value="2" />
                                     </div>
                                     <div>
                                         <label for="popup-max-count">Maximum:</label>
-                                        <input type="number" id="popup-max-count" min="2" max="10" value="5" />
+                                        <input type="number" id="popup-max-count" min="2" max="40" value="5" />
                                     </div>
                                 </div>
                             </div>
@@ -732,6 +732,9 @@
                                 <button id="clear-all-popups" class="btn btn-danger">Clear All</button>
                             </div>
                             <p class="help-text">Test your popup settings to see how they look</p>
+                            <div id="popup-warning" class="warning-text" style="display: none;">
+                                ⚠️ High popup counts (>20) may impact performance and visibility
+                            </div>
                         </div>
 
                         <!-- Status & Info -->

popupImageManager.js

@@ -81,11 +81,12 @@ class PopupImageManager {
         // Generate popup configurations
         const popupConfigs = this.generatePopupConfigs(imageCount, images);
 
-        // Create and show popups with slight delays
+        // Create and show popups with smart delays based on popup count
+        const baseDelay = Math.max(100, Math.min(300, 3000 / popupConfigs.length)); // Dynamic delay: faster for more popups
         popupConfigs.forEach((config, index) => {
             setTimeout(() => {
                 this.createPopup(config);
-            }, index * 300); // 300ms delay between each popup to allow for image loading
+            }, index * baseDelay);
         });
 
         console.log(`Triggered ${imageCount} punishment popups`);
@@ -119,7 +120,7 @@ class PopupImageManager {
     calculateImageCount() {
         switch (this.config.imageCountMode) {
             case 'random':
-                return Math.floor(Math.random() * 5) + 1; // 1-5 images
+                return Math.floor(Math.random() * 10) + 1; // 1-10 images (increased from 1-5)
             case 'range':
                 const min = this.config.minCount;
                 const max = this.config.maxCount;

styles.css

@@ -2763,6 +2763,17 @@ body.theme-monochrome {
     box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
 }
 
+.warning-text {
+    background: #fff3cd;
+    color: #856404;
+    padding: 10px;
+    border: 1px solid #ffeaa7;
+    border-radius: 5px;
+    margin-top: 10px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
 .test-buttons {
     display: flex;
     gap: 10px;