Example-TCG-Site/templates/store/open_pack.html

{% extends 'base/layout.html' %}
{% load static %}

{% block content %}
<div style="max-width: 1000px; margin: 0 auto; text-align: center; min-height: 600px;">
    <h1 id="pack-title">{{ pack.listing.name }}</h1>
    
    <div id="pack-container" style="margin: 4rem auto; perspective: 1000px; width: 300px; height: 420px; cursor: pointer;">
        <div id="pack-wrapper" style="width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s;">
            <div class="pack-face" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: linear-gradient(135deg, #4f46e5, #0ea5e9); border-radius: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);">
                <div style="font-size: 5rem;">🎁</div>
                <div style="position: absolute; bottom: 2rem; color: white; font-weight: bold;">Click to Open</div>
            </div>
        </div>
    </div>

    <div id="cards-container" style="display: none; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem;">
        <!-- Cards injected here -->
    </div>
    
    <div id="actions" style="margin-top: 2rem; display: none;">
        <a href="{% url 'store:my_packs' %}" class="btn">Back to My Packs</a>
    </div>
</div>

<style>
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }
    .shaking {
        animation: shake 0.5s;
        animation-iteration-count: infinite;
    }
    .card-reveal {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.5s forwards;
    }
    @keyframes fadeInUp {
        to { opacity: 1; transform: translateY(0); }
    }
</style>

<script>
    const packWrapper = document.getElementById('pack-wrapper');
    const packContainer = document.getElementById('pack-container');
    const cardsContainer = document.getElementById('cards-container');
    const actions = document.getElementById('actions');
    const packTitle = document.getElementById('pack-title');
    
    packContainer.addEventListener('click', function() {
        if (packContainer.classList.contains('opened')) return;
        
        packWrapper.classList.add('shaking');
        
        // Use fetch with CSRF token
        const csrftoken = document.cookie.split('; ').find(row => row.startsWith('csrftoken='))?.split('=')[1];
        
        fetch(window.location.href, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({})
        })
        .then(response => response.json())
        .then(data => {
            setTimeout(() => {
                packWrapper.classList.remove('shaking');
                packWrapper.style.transform = 'scale(0) rotate(720deg)';
                packWrapper.style.opacity = '0';
                
                setTimeout(() => {
                    packContainer.style.display = 'none';
                    cardsContainer.style.display = 'grid';
                    actions.style.display = 'block';
                    packTitle.textContent = "New Cards!";
                    
                    data.cards.forEach((card, index) => {
                        const cardEl = document.createElement('div');
                        cardEl.className = 'tcg-card card-reveal';
                        cardEl.style.animationDelay = `${index * 0.2}s`;
                        
                        let imgHtml = '';
                        if (card.image_url) {
                            imgHtml = `<img src="${card.image_url}" style="width: 100%; height: auto;">`;
                        } else {
                            imgHtml = `<div style="aspect-ratio: 2.5/3.5; background: #000; display: flex; align-items: center; justify-content: center; color: white;">${card.name}</div>`;
                        }
                        
                        cardEl.innerHTML = `
                            <div style="aspect-ratio: 2.5/3.5; background: #000; position: relative;">
                                ${imgHtml}
                            </div>
                            <div class="tcg-card-body">
                                <h4>${card.name}</h4>
                                <p>${card.set} - ${card.rarity}</p>
                            </div>
                        `;
                        cardsContainer.appendChild(cardEl);
                    });
                }, 500);
            }, 1000);
        })
        .catch(err => {
            console.error(err);
            packWrapper.classList.remove('shaking');
            alert('Error opening pack');
        });
        
        packContainer.classList.add('opened');
    });
</script>
{% endblock %}