components/game-over.js

class GameOver extends HTMLElement {
    static get observedAttributes() {
        return ['visible'];
    }
    
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.visible = 'false';
    }
    
    connectedCallback() {
        this.render();
    }
    
    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'visible') {
            this.visible = newValue;
            this.render();
        }
    }
    
    render() {
        this.shadowRoot.innerHTML = `
            <style>
                .game-over {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.8);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease;
                    z-index: 10;
                }
                
                .visible {
                    opacity: 1;
                    pointer-events: all;
                }
                
                .game-over h2 {
                    color: #fff;
                    font-size: 2rem;
                    margin-bottom: 2rem;
                    text-align: center;
                    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
                }
                
                .restart-btn {
                    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
                    color: white;
                    border: none;
                    padding: 0.75rem 2rem;
                    font-size: 1rem;
                    border-radius: 0.5rem;
                    cursor: pointer;
                    transition: transform 0.2s ease, box-shadow 0.2s ease;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                }
                
                .restart-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                }
                
                .restart-btn:active {
                    transform: translateY(0);
                }
            </style>
            <div class="game-over ${this.visible === 'true' ? 'visible' : ''}">
                <h2>GAME OVER</h2>
                <button class="restart-btn">
                    <i data-feather="refresh-cw" class="mr-2"></i>
                    Play Again
                </button>
            </div>
        `;
        
        if (this.visible === 'true') {
            const button = this.shadowRoot.querySelector('.restart-btn');
            button.addEventListener('click', () => {
                this.dispatchEvent(new CustomEvent('restart-game'));
            });
            feather.replace();
        }
    }
}
customElements.define('custom-game-over', GameOver);