const { createApp } = Vue;

const App = {
    template: `
        <div class="app-container">
            <div class="grid-container">
                <div class="square" v-for="(square, index) in squares" :key="index">
                    <div class="connection-dot" :class="{ connected: square.connected }"></div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            squares: [
                { connected: false, ws: null },
                { connected: false, ws: null },
                { connected: false, ws: null },
                { connected: false, ws: null }
            ]
        }
    },
    mounted() {
        // 为每个正方形建立独立的WebSocket连接
        this.squares.forEach((square, index) => {
            this.connectWebSocket(square, index);
        });
    },
    methods: {
        connectWebSocket(square, index) {
            // 替换为实际的WebSocket服务器地址
            const wsUrl = `ws://localhost:8501/?token=${index + 1}`;

            try {
                square.ws = new WebSocket(wsUrl);

                square.ws.onopen = () => {
                    square.connected = true;
                    console.log(`WebSocket ${index + 1} connected`);

                    // 连接建立后发送初始消息
                    try {
                        square.ws.send(JSON.stringify({
                            type: "init"
                        }));
                        console.log(`Initial message sent to WebSocket ${index + 1}`);
                    } catch (error) {
                        console.error(`Failed to send initial message to WebSocket ${index + 1}:`, error);
                    }
                };

                square.ws.onclose = (e) => {
                    square.connected = false;
                    console.log(`WebSocket ${index + 1} disconnected`);
                    console.log(e.code, e.reason, e.wasClean)
                    // 尝试重新连接
                    // setTimeout(() => this.connectWebSocket(square, index), 1000);
                };

                square.ws.onerror = (error) => {
                    console.error(`WebSocket ${index + 1} error:`, error);
                };

                square.ws.onmessage = (event) => {
                    console.log(`WebSocket ${index + 1} message:`, event.data);
                    // 处理接收到的消息
                    try {
                        const message = JSON.parse(event.data);
                        const arr = JSON.parse(message.data);
                        
                        if (Array.isArray(arr) && arr.length === 2) {
                            const [x, y] = arr;
                            console.log(`Creating dot at (${x}, ${y}) for square ${index}`);
                            
                            const squareElement = document.querySelectorAll('.square')[index];
                            if (!squareElement) {
                                console.error('Square element not found');
                                return;
                            }
                            
                            // 创建圆点元素
                            const dot = document.createElement('div');
                            dot.className = 'game-dot';
                            dot.style.left = `${x}px`;
                            dot.style.top = `${y}px`;
                            dot.style.zIndex = '10';
                            
                            // 添加到游戏场景
                            squareElement.appendChild(dot);
                            console.log('Dot added successfully');
                        }
                    } catch (error) {
                        console.error('Error processing message:', error);
                    }
                };
            } catch (error) {
                console.error(`WebSocket ${index + 1} init error:`, error);
            }
        }
    }
};

createApp(App).mount('#app');