components/game-board.js

class CustomGameBoard extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .game-container {
                    @apply bg-gray-800 p-4 rounded-lg shadow-xl;
                }
                .game-title {
                    @apply text-xl font-bold mb-4 text-center;
                }
            </style>
            <div class="game-container">
                <h2 class="game-title">Logic Puzzle Board</h2>
                <div class="game-board"></div>
            </div>
        `;
    }
}

customElements.define('custom-game-board', CustomGameBoard);