Promote version 682bd85 to main

Promoted commit 682bd85a8457683b08dbec2413c891ab27f51aaa to main branch

index.html

@@ -41,6 +41,7 @@
             <div class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-premium-black to-transparent z-10"></div>
             <div class="absolute inset-0 bg-premium-orange/5 blur-xl opacity-0 motion-blur"></div>
         </div>
+        
         <!-- Roll Button -->
         <div class="mt-16 flex justify-center">
             <button id="rollButton" class="roll-button relative px-12 py-4 bg-premium-charcoal rounded-full border-2 border-premium-gold/50 text-premium-gold font-bold text-xl uppercase tracking-wider hover:bg-premium-gold/10 hover:border-premium-gold hover:text-premium-orange transition-all duration-300 group">
@@ -49,35 +50,8 @@
                 <span class="absolute inset-0 rounded-full border-2 border-premium-orange opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
             </button>
         </div>
-
-        <!-- Multiplier Section -->
-        <div class="multiplier-section mt-12">
-            <div class="text-premium-gold text-center mb-4 font-bold uppercase tracking-wider">Win Multiplier</div>
-            
-            <div class="relative h-24 w-full overflow-hidden">
-                <div class="multiplier-carousel absolute top-0 left-0 h-full flex items-center justify-center gap-4 transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)]">
-                    <!-- Multipliers (generated by JS) -->
-                </div>
-                
-                <!-- Motion Blur Effects -->
-                <div class="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-premium-black to-transparent z-10"></div>
-                <div class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-premium-black to-transparent z-10"></div>
-                <div class="absolute inset-0 bg-premium-orange/5 blur-xl opacity-0 motion-blur"></div>
-                
-                <!-- Center indicator -->
-                <div class="absolute left-1/2 top-0 bottom-0 w-1 -ml-0.5 bg-premium-gold/80"></div>
-                <div class="absolute left-1/2 top-0 w-6 h-8 -ml-3 bg-gradient-to-b from-premium-gold to-transparent"></div>
-                <div class="absolute left-1/2 bottom-0 w-6 h-8 -ml-3 bg-gradient-to-t from-premium-gold to-transparent"></div>
-            </div>
-            
-            <div class="mt-4 text-center">
-                <button id="multiplyButton" class="multiply-button relative px-8 py-2 bg-premium-charcoal rounded-full border border-premium-gold/50 text-premium-gold font-bold uppercase tracking-wider hover:bg-premium-gold/10 hover:border-premium-gold hover:text-premium-orange transition-all duration-300 group disabled:opacity-50" disabled>
-                    <span class="relative z-10">MULTIPLY</span>
-                    <span class="absolute inset-0 rounded-full bg-premium-orange blur-md opacity-0 group-hover:opacity-30 transition-opacity duration-300"></span>
-                </button>
-            </div>
-        </div>
-<!-- Nioplay Branding -->
+        
+        <!-- Nioplay Branding -->
         <div class="absolute top-4 right-4 text-premium-gold/80 font-serif italic text-sm">Nioplay</div>
     </div>
     <script src="components/loot-box.js"></script>

script.js

@@ -1,63 +1,20 @@
 
 document.addEventListener('DOMContentLoaded', () => {
     const carousel = document.querySelector('.loot-carousel');
-    const multiplierCarousel = document.querySelector('.multiplier-carousel');
     const rollButton = document.getElementById('rollButton');
-    const multiplyButton = document.getElementById('multiplyButton');
-    const motionBlur = document.querySelectorAll('.motion-blur');
+    const motionBlur = document.querySelector('.motion-blur');
     const rarities = ['common', 'rare', 'rare', 'common', 'epic', 'common', 'legendary', 'rare', 'common', 'epic', 'rare', 'common'];
-    const multipliers = Array.from({length: 100}, (_, i) => i + 1);
+    
     const rewards = [
-        { rarity: 'common', name: 'Basic Skin', description: 'A standard cosmetic item for your collection', baseValue: 100 },
-        { rarity: 'common', name: '100 Coins', description: 'Use them to purchase items in the shop', baseValue: 100 },
-        { rarity: 'rare', name: 'Rare Emote', description: 'Show off with this exclusive animation', baseValue: 500 },
-        { rarity: 'rare', name: '500 Coins', description: 'A nice boost to your wallet', baseValue: 500 },
-        { rarity: 'epic', name: 'Epic Weapon', description: 'Powerful gear to dominate the battlefield', baseValue: 2000 },
-        { rarity: 'epic', name: 'Premium Pass', description: '7 days of premium benefits', baseValue: 2000 },
-        { rarity: 'legendary', name: 'Legendary Character', description: 'The rarest hero in the game', baseValue: 10000 },
-        { rarity: 'legendary', name: '10,000 Coins', description: 'Enough to buy anything you want', baseValue: 10000 }
+        { rarity: 'common', name: 'Basic Skin', description: 'A standard cosmetic item for your collection' },
+        { rarity: 'common', name: '100 Coins', description: 'Use them to purchase items in the shop' },
+        { rarity: 'rare', name: 'Rare Emote', description: 'Show off with this exclusive animation' },
+        { rarity: 'rare', name: '500 Coins', description: 'A nice boost to your wallet' },
+        { rarity: 'epic', name: 'Epic Weapon', description: 'Powerful gear to dominate the battlefield' },
+        { rarity: 'epic', name: 'Premium Pass', description: '7 days of premium benefits' },
+        { rarity: 'legendary', name: 'Legendary Character', description: 'The rarest hero in the game' },
+        { rarity: 'legendary', name: '10,000 Coins', description: 'Enough to buy anything you want' }
     ];
-
-    // Generate multiplier options
-    multipliers.forEach(multiplier => {
-        const option = document.createElement('div');
-        option.className = `multiplier-option w-20 h-20 flex items-center justify-center rounded-lg border-2 border-premium-gold/20 text-premium-gold font-bold text-xl transition-colors duration-300 ${
-            multiplier % 10 === 0 ? 'bg-premium-gold/10 border-premium-gold/50' : ''
-        }`;
-        option.textContent = `${multiplier}x`;
-        multiplierCarousel.appendChild(option);
-    });
-
-    // Multiply button handler
-    multiplyButton.addEventListener('click', () => {
-        multiplyButton.disabled = true;
-        motionBlur[1].classList.add('active');
-        
-        const boxWidth = 80 + 16; // width + gap
-        const randomIndex = Math.floor(Math.random() * multipliers.length);
-        const targetPosition = -(randomIndex * boxWidth) + (window.innerWidth / 2 - boxWidth / 2);
-
-        multiplierCarousel.style.transitionDuration = '0ms';
-        multiplierCarousel.style.transform = `translateX(${-boxWidth * multipliers.length}px)`;
-
-        setTimeout(() => {
-            multiplierCarousel.style.transitionDuration = '3000ms';
-            multiplierCarousel.style.transform = `translateX(${targetPosition}px)`;
-        }, 10);
-
-        setTimeout(() => {
-            motionBlur[1].classList.remove('active');
-            const selectedMultiplier = multipliers[randomIndex];
-            const reward = JSON.parse(multiplyButton.dataset.reward);
-            reward.multiplier = selectedMultiplier;
-            reward.description = `${reward.description} (${reward.baseValue * selectedMultiplier} total value)`;
-
-            const popup = document.createElement('reward-popup');
-            document.body.appendChild(popup);
-            setTimeout(() => popup.show(reward), 500);
-        }, 3000);
-    });
-});
 // Generate loot boxes
     rarities.forEach((rarity, index) => {
         const box = document.createElement('div');
@@ -109,15 +66,9 @@ document.addEventListener('DOMContentLoaded', () => {
             // Get random reward based on rarity
             const possibleRewards = rewards.filter(r => r.rarity === rarities[randomIndex]);
             const reward = possibleRewards[Math.floor(Math.random() * possibleRewards.length)];
+            
             const popup = document.createElement('reward-popup');
             document.body.appendChild(popup);
-            
-            // Enable multiply button
-            multiplyButton.disabled = false;
-            
-            // Store reward for multiplying
-            multiplyButton.dataset.reward = JSON.stringify(reward);
-            
             setTimeout(() => popup.show(reward), 1000);
 }, 800);
             

style.css

@@ -8,6 +8,7 @@
     50% { transform: translateY(-20px) scale(1.1); }
     100% { transform: translateY(0) scale(1.1); }
 }
+
 @keyframes particle-burst {
     0% { 
         opacity: 0;
@@ -20,23 +21,6 @@
     }
 }
 
-.multiplier-option {
-    background: rgba(255, 215, 0, 0.05);
-    transition: all 0.3s ease;
-}
-
-.multiplier-option:hover {
-    background: rgba(255, 215, 0, 0.15);
-    transform: scale(1.05);
-}
-
-.multiplier-section {
-    background: rgba(10, 10, 10, 0.7);
-    border-radius: 16px;
-    padding: 1.5rem;
-    border: 1px solid rgba(255, 215, 0, 0.1);
-    box-shadow: 0 0 20px rgba(255, 215, 0, 0.05);
-}
 .loot-box {
     position: relative;
     width: 140px;