rubiks-cube-mcp-server/public/scripts/websocket.js

MCP server for Rubik's Cube solving with real-time 3D visualization and MCP UI integration

// WebSocket 연결 및 이벤트 처리
const socket = io();

socket.on('connect', () => {
    console.log('Connected to server');
    document.getElementById('connectionStatus').textContent = '● Connected';
    document.getElementById('connectionStatus').className = 'connection-status connected';
    
    if (gameId) {
        socket.emit('joinGame', gameId);
    }
});

socket.on('disconnect', () => {
    console.log('Disconnected from server');
    document.getElementById('connectionStatus').textContent = '● Disconnected';
    document.getElementById('connectionStatus').className = 'connection-status disconnected';
});

socket.on('gameState', (data) => {
    console.log('Game state update:', data);
    updateGameState(data.state);
    updateStatus(data.status);
});

function updateGameState(state) {
    document.getElementById('moveCount').textContent = state.moveHistory.length;
    document.getElementById('lastMove').textContent = state.moveHistory[state.moveHistory.length - 1] || 'None';
    
    // 3D 큐브 색상 업데이트
    if (cubeRenderer) {
        cubeRenderer.updateCubeColors(state);
    }
}

function updateStatus(status) {
    const statusElement = document.getElementById('status');
    const gameStatusElement = document.getElementById('gameStatus');
    
    if (status === 'completed') {
        statusElement.textContent = '🎉 SOLVED!';
        statusElement.className = 'status solved';
        gameStatusElement.textContent = 'Completed';
    } else {
        statusElement.textContent = 'Solving...';
        statusElement.className = 'status active';
        gameStatusElement.textContent = 'Active';
    }
}