User:Polygnotus/Scripts/GetAPIBatch.js: Difference between revisions

Revision as of 22:06, 26 August 2024

Latest revision as of 00:25, 9 September 2024

(7 intermediate revisions by the same user not shown)

Line 2:

'use strict';

function addStyles() {

// Add styles

const style = document.createElement('style');

GM_addStyle(`

#word-fetcher-containerstyle.textContent {= `

position:#word-fetcher-container fixed;{

top position: 10pxfixed;

right top: 10px;

background-color right: white10px;

padding background-color: 10pxwhite;

border-radius padding: 8px10px;

box-shadow: 0 4px 6px rgba(0, 0, 0,border-radius: 0.1)8px;

z box-indexshadow: 99990 4px 6px rgba(0, 0, 0, 0.1);

} z-index: 9999;

#word-display { width: 300px;

font-size: 1.2rem;}

margin#word-bottom:display, 0.5rem;#typo-display {

min font-heightsize: 1.5rem2rem;

} margin-bottom: 0.5rem;

#next min-buttonheight: {1.5rem;

font-size: 0.9rem;}

padding:#typo-display 0.3rem 0.7rem;{

cursor color: pointerred;

}

#debugnext-infobutton {

margin font-topsize: 0.5rem9rem;

font-size padding: 0.3rem 0.7rem;

color cursor: #666pointer;

}

#debug-info {

`);

margin-top: 0.5rem;

font-size: 0.7rem;

color: #666;

}

#article-name {

margin-top: 0.5rem;

font-style: italic;

}

`;

document.bodyhead.appendChild(containerstyle);

`);}

function createUI() {

// Create and append UI elements

const container = document.createElement('div');

container.id = 'word-fetcher-container';

container.innerHTML = `

<div id="word-display">Click 'Next Word' toCorrect: start</div>

<buttondiv id="nexttypo-buttondisplay">NextTypo: Word</buttondiv>

<div id="debugarticle-infoname"></div>

<button id="next-button">Next Word</button>

`;

<div id="debug-info"></div>

document.body.appendChild(container);

`;

document.body.appendChild(container);

}

class TypoFetcherWordFetcher {

constructor() {

this.words = [];

this.currentIndex = 0;

this.displayElementwordDisplayElement = 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.displayNextWorddisplayNextWordAndNavigate());

this.fetchWords();

Line 56 ⟶ 72:

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.';

}

}

async displayNextWordparseWordString(wordString) {

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

return { correct, typo, articleName };

}

async displayNextWordAndNavigate() {

if (this.currentIndex >= this.words.length) {

await this.fetchWords();

Line 75 ⟶ 99:

if (this.words.length > 0) {

this.displayElement.textContentconst 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++;

Line 84 ⟶ 114:

}

} else {

this.displayElementwordDisplayElement.textContent = 'No more 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');

}

Line 95 ⟶ 133:

}

newfunction TypoFetcherinit(); {

addStyles();

createUI();

new WordFetcher();

}

if (document.readyState === 'loading') {

document.addEventListener('DOMContentLoaded', init);

} else {

init();

}

})();