components/reward-popup.js

class RewardPopup extends HTMLElement {
    constructor() {
        super();
        this.visible = false;
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: ${this.visible ? 'block' : 'none'};
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.7);
                    backdrop-filter: blur(5px);
                    z-index: 100;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    opacity: ${this.visible ? 1 : 0};
                    transition: opacity 0.3s ease;
                }
                
                .popup {
                    background: rgba(20, 20, 20, 0.9);
                    border-radius: 16px;
                    border: 2px solid var(--premium-glow);
                    box-shadow: 0 0 30px rgba(255, 140, 0, 0.5);
                    width: 90%;
                    max-width: 500px;
                    padding: 30px;
                    text-align: center;
                    position: relative;
                    overflow: hidden;
                    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                }
                
                @keyframes popIn {
                    0% { transform: scale(0.8); opacity: 0; }
                    100% { transform: scale(1); opacity: 1; }
                }
                
                .popup::before {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 200%;
                    height: 200%;
                    background: radial-gradient(circle, rgba(255, 140, 0, 0.1) 0%, transparent 70%);
                    z-index: -1;
                }
                
                .title {
                    font-size: 28px;
                    font-weight: bold;
                    margin-bottom: 20px;
                    background: linear-gradient(to right, var(--premium-gold), var(--premium-glow));
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
                }
                
                .reward-details {
                    margin-bottom: 30px;
                }
                
                .reward-line {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    font-size: 16px;
                    color: rgba(255, 255, 255, 0.8);
                }
                
                .final-reward {
                    font-size: 36px;
                    font-weight: bold;
                    margin: 20px 0;
                    color: var(--premium-gold);
                    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
                    animation: pulse 2s infinite;
                }
                
                @keyframes pulse {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.05); }
                    100% { transform: scale(1); }
                }
                
                .continue-btn {
                    padding: 12px 30px;
                    border-radius: 25px;
                    background: linear-gradient(to right, var(--premium-gold), var(--premium-glow));
                    color: var(--premium-dark);
                    font-weight: bold;
                    border: none;
                    cursor: pointer;
                    transition: transform 0.2s, box-shadow 0.2s;
                }
                
                .continue-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
                }
                
                .confetti {
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    background: var(--premium-gold);
                    opacity: 0;
                }
            </style>
            
            <div class="popup">
                <h2 class="title">WIN REVEALED!</h2>
                
                <div class="reward-details">
                    <div class="reward-line">
                        <span>Base Reward:</span>
                        <span id="baseReward">0 SC</span>
                    </div>
                    <div class="reward-line">
                        <span>Multiplier:</span>
                        <span id="multiplier">×0</span>
                    </div>
                </div>
                
                <div class="final-reward" id="finalReward">0 SC</div>
                
                <button class="continue-btn" id="continueBtn">Continue</button>
            </div>
        `;
        
        // Add event listener for continue button
        if (this.shadowRoot.getElementById('continueBtn')) {
            this.shadowRoot.getElementById('continueBtn').addEventListener('click', () => this.hide());
        }
    }

    show(data) {
        this.visible = true;
        this.render();
        
        // Update reward details
        if (data) {
            this.shadowRoot.getElementById('baseReward').textContent = `${data.baseReward} SC`;
            this.shadowRoot.getElementById('multiplier').textContent = `×${data.multiplier}`;
            this.shadowRoot.getElementById('finalReward').textContent = `${data.finalReward} SC`;
            
            // Add rarity class for additional styling
            const finalRewardElement = this.shadowRoot.getElementById('finalReward');
            finalRewardElement.className = 'final-reward ' + data.rarity;
        }
        
        // Create confetti effect
        this.createConfetti();
    }

    hide() {
        this.visible = false;
        this.render();
    }

    createConfetti() {
        const popup = this.shadowRoot.querySelector('.popup');
        
        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            confetti.className = 'confetti';
            confetti.style.left = Math.random() * 100 + '%';
            confetti.style.top = -10 + 'px';
            confetti.style.backgroundColor = i % 2 === 0 ? 'var(--premium-gold)' : 'var(--premium-glow)';
            confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
            
            popup.appendChild(confetti);
            
            // Animate confetti
            const animation = confetti.animate([
                { top: -10 + 'px', opacity: 1, transform: `rotate(${Math.random() * 360}deg)` },
                { top: 100 + 'px', opacity: 0, transform: `rotate(${Math.random() * 360}deg)` }
            ], {
                duration: 1000 + Math.random() * 2000,
                delay: Math.random() * 1000,
                easing: 'cubic-bezier(0.1, 0.8, 0.9, 1)'
            });
            
            animation.onfinish = () => confetti.remove();
        }
    }
}

customElements.define('reward-popup', RewardPopup);