User:Polygnotus/Scripts/GetAPIBatch.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

(function() {
    'use strict';

    function addStyles() {
        const style = document.createElement('style');
        style.textContent = `
            #word-fetcher-container {
                position: fixed;
                top: 10px;
                right: 10px;
                background-color: white;
                padding: 10px;
                border-radius: 8px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                z-index: 9999;
                width: 300px;
            }
            #word-display, #typo-display {
                font-size: 1.2rem;
                margin-bottom: 0.5rem;
                min-height: 1.5rem;
            }
            #typo-display {
                color: red;
            }
            #next-button {
                font-size: 0.9rem;
                padding: 0.3rem 0.7rem;
                cursor: pointer;
            }
            #debug-info {
                margin-top: 0.5rem;
                font-size: 0.7rem;
                color: #666;
            }
            #article-name {
                margin-top: 0.5rem;
                font-style: italic;
            }
        `;
        document.head.appendChild(style);
    }

    function createUI() {
        const container = document.createElement('div');
        container.id = 'word-fetcher-container';
        container.innerHTML = `
            <div id="word-display">Correct: </div>
            <div id="typo-display">Typo: </div>
            <div id="article-name"></div>
            <button id="next-button">Next Word</button>
            <div id="debug-info"></div>
        `;
        document.body.appendChild(container);
    }

    class WordFetcher {
        constructor() {
            this.words = [];
            this.currentIndex = 0;
            this.wordDisplayElement = document.getElementById('word-display');
            this.typoDisplayElement = document.getElementById('typo-display');
            this.nextButton = document.getElementById('next-button');
            this.debugElement = document.getElementById('debug-info');
            this.articleNameElement = document.getElementById('article-name');

            this.nextButton.addEventListener('click', () => this.displayNextWordAndNavigate());

            this.fetchWords();
        }

        async fetchWords() {
            try {
                const response = await fetch('http://localhost:8082/output', {
                    mode: 'cors',
                });
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const newWords = await response.json();
                this.words = [...this.words, ...newWords.map(this.parseWordString)];
                this.updateDebugInfo();
            } catch (error) {
                console.error('Error fetching words:', error);
                this.debugElement.textContent = `Error: ${error.message}. CORS issue likely. Check console and ensure server allows CORS.`;
                this.wordDisplayElement.textContent = 'Unable to fetch words. See debug info.';
            }
        }

        parseWordString(wordString) {
            const [correct, typo, articleName] = wordString.split('|');
            return { correct, typo, articleName };
        }

        async displayNextWordAndNavigate() {
            if (this.currentIndex >= this.words.length) {
                await this.fetchWords();
            }

            if (this.words.length > 0) {
                const currentWord = this.words[this.currentIndex];
                this.wordDisplayElement.textContent = `Correct: ${currentWord.correct}`;
                this.typoDisplayElement.textContent = `Typo: ${currentWord.typo}`;
                this.articleNameElement.textContent = `Article: ${currentWord.articleName}`;
                
                this.navigateToWikipedia(currentWord.articleName);
                
                this.currentIndex++;

                if (this.currentIndex >= this.words.length) {
                    this.currentIndex = 0;
                    this.words = [];
                    this.fetchWords();
                }
            } else {
                this.wordDisplayElement.textContent = 'No words available. Check debug info.';
                this.typoDisplayElement.textContent = '';
                this.articleNameElement.textContent = '';
            }

            this.updateDebugInfo();
        }

        navigateToWikipedia(articleName) {
            const encodedArticleName = encodeURIComponent(articleName.replace(/ /g, '_'));
            const articleUrl = `https://en.wikipedia.org/wiki/${encodedArticleName}`;
            window.open(articleUrl, '_blank');
        }

        updateDebugInfo() {
            this.debugElement.textContent = `Words in buffer: ${this.words.length}, Current index: ${this.currentIndex}`;
        }
    }

    function init() {
        addStyles();
        createUI();
        new WordFetcher();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();