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

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

document.addEventListener('DOMContentLoaded', () => {
  const createGameBtn = document.getElementById('createGameBtn');
  const modal = document.getElementById('createGameModal');
  const closeBtn = document.querySelector('.close-btn');
  const difficultySlider = document.getElementById('difficultySlider');
  const difficultyValue = document.getElementById('difficultyValue');
  const createGameSubmitBtn = document.getElementById('createGameSubmitBtn');

  // --- Modal Logic ---
  if (createGameBtn) {
    createGameBtn.onclick = () => modal.style.display = 'block';
  }
  if (closeBtn) {
    closeBtn.onclick = () => modal.style.display = 'none';
  }
  window.onclick = (event) => {
    if (event.target == modal) {
      modal.style.display = 'none';
    }
  }
  if (difficultySlider) {
    difficultySlider.oninput = function() {
      difficultyValue.textContent = this.value;
    }
  }

  // --- API Calls ---
  if (createGameSubmitBtn) {
    createGameSubmitBtn.onclick = async () => {
      const difficulty = parseInt(difficultySlider.value, 10);
      
      try {
        const response = await fetch('/api/games', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ scramble: true, difficulty })
        });

        if (!response.ok) throw new Error('Failed to create game');
        
        // Reload to see the new game
        location.reload();

      } catch (error) {
        console.error('Error creating game:', error);
        alert('Could not create the game. Please check the console.');
      }
    };
  }

  // --- Copy Prompt Logic ---
  document.querySelectorAll('.copy-prompt-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation(); // Prevent card click event
      const gameId = btn.dataset.gameid;
      const promptText = `Join the Rubik\'s Cube game with gameId: ${gameId}, using the joinGame tool in your MCP client.`;
      
      navigator.clipboard.writeText(promptText).then(() => {
        const originalText = btn.textContent;
        btn.textContent = 'Copied!';
        setTimeout(() => { btn.textContent = originalText; }, 2000);
      }).catch(err => {
        console.error('Failed to copy text: ', err);
        alert('Failed to copy join prompt.');
      });
    });
  });
});