components/score-display.js

class ScoreDisplay extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }
    
    connectedCallback() {
        this.render();
    }
    
    static get observedAttributes() {
        return ['score', 'status'];
    }
    
    attributeChangedCallback(name, oldValue, newValue) {
        this.render();
    }
    
    render() {
        const score = this.getAttribute('score') || '0';
        const status = this.getAttribute('status') || '';
        
        let statusClass = '';
        if (status === 'error') {
            statusClass = 'bg-red-500 text-white';
        } else if (status === 'success') {
            statusClass = 'bg-green-500 text-white';
        }
        
        this.shadowRoot.innerHTML = `
            <style>
                .score-container {
                    background-color: #1f2937;
                    border-radius: 0.5rem;
                    padding: 1rem;
                    text-align: center;
                    margin: 0 auto;
                    max-width: 200px;
                }
                .score {
                    font-size: 2rem;
                    font-weight: bold;
                    color: white;
                }
                .label {
                    font-size: 0.875rem;
                    color: #9ca3af;
                    margin-bottom: 0.5rem;
                }
            </style>
            <div class="score-container ${statusClass}">
                <div class="label">LEVEL</div>
                <div class="score">${score}</div>
            </div>
        `;
    }
}

customElements.define('score-display', ScoreDisplay);