firasx/algorithm-playground

1 2class AlgorithmAPI {3  static async executeAlgorithm(algorithm, input, language = 'python') {4    const response = await fetch('/api/execute', {5      method: 'POST',6      headers: { 'Content-Type': 'application/json' },7      body: JSON.stringify({ algorithm, input, language })8    });9    return response.json();10  }11 12  static async getAlgorithmTemplate(category, name) {13    const response = await fetch(`/api/algorithms/${category}/${name}`);14    return response.json();15  }16}17 18class UIUtils {19  static copyCodeToClipboard(codeElement) {20    const code = codeElement.innerText;21    navigator.clipboard.writeText(code).then(() => {22      const copyBtn = codeElement.parentElement.querySelector('.code-copy-btn');23      copyBtn.textContent = 'Copied!';24      setTimeout(() => copyBtn.textContent = 'Copy', 2000);25    });26  }27 28  static initCodeBlocks() {29    document.querySelectorAll('.code-block').forEach(block => {30      const copyBtn = document.createElement('button');31      copyBtn.className = 'code-copy-btn';32      copyBtn.textContent = 'Copy';33      copyBtn.addEventListener('click', () => 34        this.copyCodeToClipboard(block.querySelector('code')));35      36      const header = block.querySelector('.code-header') || document.createElement('div');37      header.className = 'code-header';38      header.prepend(copyBtn);39      block.prepend(header);40    });41  }42 43  static initAnimations() {44    const observer = new IntersectionObserver((entries) => {45      entries.forEach(entry => {46        if (entry.isIntersecting) {47          entry.target.classList.add('animate-fadeIn');48        }49      });50    }, { threshold: 0.1 });51 52    document.querySelectorAll('[data-animate]').forEach(el => {53      observer.observe(el);54    });55  }56 57  static loadAlgorithmTemplates() {58    document.querySelectorAll('[data-algorithm]').forEach(el => {59      const [category, name] = el.dataset.algorithm.split('-');60      AlgorithmAPI.getAlgorithmTemplate(category, name).then(data => {61        const codeBlock = el.querySelector('code');62        if (codeBlock) codeBlock.textContent = data.code;63      });64    });65  }66}67 68document.addEventListener('DOMContentLoaded', () => {69  UIUtils.initCodeBlocks();70  UIUtils.initAnimations();71  UIUtils.loadAlgorithmTemplates();72 73  // Initialize dark mode toggle74  if (document.querySelector('darkmode-toggle')) {75    document.querySelector('darkmode-toggle').addEventListener('toggle', (e) => {76      document.documentElement.classList.toggle('dark', e.detail.isDark);77    });78  }79});80 81// Register service worker for PWA82if ('serviceWorker' in navigator) {83  window.addEventListener('load', () => {84    navigator.serviceWorker.register('/sw.js').then(registration => {85      console.log('ServiceWorker registration successful');86    }).catch(err => {87      console.log('ServiceWorker registration failed: ', err);88    });89  });90}91