components/score-display.js

class ScoreDisplay extends HTMLElement {
    static get observedAttributes() {
        return ['score'];
    }
    
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.score = 0;
    }
    
    connectedCallback() {
        this.render();
    }
    
    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'score') {
            this.score = newValue;
            this.render();
        }
    }
    
    render() {
        this.shadowRoot.innerHTML = `
            <style>
                .score-display {
                    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
                    border: 2px solid #6b46c1;
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
                }
            </style>
            <div class="score-display p-6 rounded-lg text-center">
                <h3 class="text-lg font-semibold text-purple-400 mb-2">SCORE</h3>
                <p class="text-4xl font-bold">${this.score}</p>
            </div>
        `;
    }
}
customElements.define('custom-score-display', ScoreDisplay);