Added wikipedia mode to funbox (#2069)

* Added wikipedia mode to funbox

* removed console log

* added loader when getting section

* Fixed error where Wikipedia section would be too short for certain time or words amount.

* fixed error where words where not added to UI

* Add minimum of 100 words for poetry and wikipedia funbox in time mode

Co-authored-by: Jack <bartnikjack@gmail.com>

gulpfile.js

@@ -179,6 +179,7 @@ const refactoredSrc = [
   "./src/js/test/test-config.js",
   "./src/js/test/layout-emulator.js",
   "./src/js/test/poetry.js",
+  "./src/js/test/wikipedia.js",
   "./src/js/test/today-tracker.js",
   "./src/js/test/weak-spot.js",
   "./src/js/test/wordset.js",

src/js/test/test-logic.js

@@ -30,6 +30,7 @@ import * as Replay from "./replay.js";
 import axiosInstance from "./axios-instance";
 import * as MonkeyPower from "./monkey-power";
 import * as Poetry from "./poetry.js";
+import * as Wikipedia from "./wikipedia.js";
 import * as TodayTracker from "./today-tracker";
 import * as WeakSpot from "./weak-spot";
 import * as Wordset from "./wordset";
@@ -554,11 +555,30 @@ export async function init() {
     }
     const wordset = Wordset.withWords(wordList);
 
-    if (Config.funbox == "poetry") {
-      let poem = await Poetry.getPoem();
-      poem.words.forEach((word) => {
-        words.push(word);
-      });
+    if (
+      (Config.funbox == "wikipedia" || Config.funbox == "poetry") &&
+      Config.mode != "custom"
+    ) {
+      let wordCount = 0;
+
+      // If mode is words, get as many sections as you need until the wordCount is fullfilled
+      while (
+        (Config.mode == "words" && Config.words >= wordCount) ||
+        (Config.mode === "time" && wordCount < 100)
+      ) {
+        let section =
+          Config.funbox == "wikipedia"
+            ? await Wikipedia.getSection()
+            : await Poetry.getPoem();
+        for (let word of section.words) {
+          if (wordCount >= Config.words && Config.mode == "words") {
+            wordCount++;
+            break;
+          }
+          wordCount++;
+          words.push(word);
+        }
+      }
     } else {
       for (let i = 0; i < wordsBound; i++) {
         let randomWord = wordset.randomWord();
@@ -1102,6 +1122,26 @@ export function calculateWpmAndRaw() {
 
 export async function addWord() {
   let bound = 100;
+  if (Config.funbox === "wikipedia" || Config.funbox == "poetry") {
+    if (Config.mode == "time" && words.length - words.currentIndex < 20) {
+      let section =
+        Config.funbox == "wikipedia"
+          ? await Wikipedia.getSection()
+          : await Poetry.getPoem();
+      let wordCount = 0;
+      for (let word of section.words) {
+        if (wordCount >= Config.words && Config.mode == "words") {
+          break;
+        }
+        wordCount++;
+        words.push(word);
+        TestUI.addWord(word);
+      }
+    } else {
+      return;
+    }
+  }
+
   if (Config.funbox === "plus_one") bound = 1;
   if (Config.funbox === "plus_two") bound = 2;
   if (

src/js/test/wikipedia.js

@@ -0,0 +1,65 @@
+import * as Loader from "./loader";
+
+export class Section {
+  constructor(title, author, words) {
+    this.title = title;
+    this.author = author;
+    this.words = words;
+  }
+}
+
+export async function getSection() {
+  // console.log("Getting section");
+  Loader.show();
+
+  const randomPostURL =
+    "https://en.wikipedia.org/api/rest_v1/page/random/summary";
+  var sectionObj = {};
+  var randomPostReq = await fetch(randomPostURL);
+  var pageid = 0;
+  if (randomPostReq.status == 200) {
+    let postObj = await randomPostReq.json();
+    sectionObj.title = postObj.title;
+    sectionObj.author = postObj.author;
+    pageid = postObj.pageid;
+  }
+
+  return new Promise((res, rej) => {
+    if (randomPostReq.status != 200) {
+      Loader.hide();
+      rej(randomPostReq.status);
+    }
+
+    const sectionURL = `https://en.wikipedia.org/w/api.php?action=query&format=json&pageids=${pageid}&prop=extracts&exintro=true&explaintext=true&origin=*`;
+
+    var sectionReq = new XMLHttpRequest();
+    sectionReq.onload = () => {
+      if (sectionReq.readyState == 4) {
+        if (sectionReq.status == 200) {
+          let sectionText = JSON.parse(sectionReq.responseText).query.pages[
+            pageid.toString()
+          ].extract;
+          let words = [];
+
+          // Remove non-ascii characters, double whitespaces and finally trailing whitespaces.
+          sectionText = sectionText.replace(/[\u{0080}-\u{10FFFF}]/gu, "");
+          sectionText = sectionText.replace(/\s+/g, " ");
+          sectionText = sectionText.trim();
+
+          sectionText.split(" ").forEach((word) => {
+            words.push(word);
+          });
+
+          let section = new Section(sectionObj.title, sectionObj.author, words);
+          Loader.hide();
+          res(section);
+        } else {
+          Loader.hide();
+          rej(sectionReq.status);
+        }
+      }
+    };
+    sectionReq.open("GET", sectionURL);
+    sectionReq.send();
+  });
+}

static/funbox/_list.json

@@ -109,6 +109,11 @@
     "type": "script",
     "info": "Practice typing some beautiful prose."
   },
+  {
+    "name": "wikipedia",
+    "type": "script",
+    "info": "Practice typing wikipedia sections."
+  },
   {
     "name": "weakspot",
     "type": "script",