diff --git a/website/api/api.js b/website/api/api.js index 0db01b9..0edb2f1 100644 --- a/website/api/api.js +++ b/website/api/api.js @@ -278,12 +278,19 @@ class API { xhr.open('GET', `https://random-word-api.herokuapp.com/word?number=100`); xhr.send(); xhr.onload = () => { + const effectiveWidth = (windowWidth - 200) / 13; let textArr = JSON.parse(xhr.response); + let finalText = []; let text = ""; for (let i = 0; i < textArr.length; i++) { - text += `${textArr[i]} ` + if (text.length + textArr[i].length < effectiveWidth) { + text += `${textArr[i]} ` + } else { + finalText.push(text); + text = textArr[i]; + } } - user.nextTest = text; + user.nextTest = finalText; }; } } \ No newline at end of file diff --git a/website/index.html b/website/index.html index f3db97f..f209821 100644 --- a/website/index.html +++ b/website/index.html @@ -16,7 +16,8 @@ - + + diff --git a/website/ui_elements/textbox.js b/website/ui_elements/textbox.js index 6af37d8..bf04f63 100644 --- a/website/ui_elements/textbox.js +++ b/website/ui_elements/textbox.js @@ -49,7 +49,6 @@ class Textbox { this.backgroundColor = pBackgroundColor; this.letters = []; - this.words = ""; this.allowedLetters = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm','n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', @@ -61,6 +60,10 @@ class Textbox { if (this.isTest) { this.testContent = user.nextTest; + this.currentLine = 0; + this.words = [""]; + } else { + this.words = ""; } } @@ -159,15 +162,24 @@ class Textbox { */ letterTyped(pKey) { if (pKey === "Backspace" && this.letters.length > 0) { - this.letters.pop(); - this.words = this.words.substring(0, this.words.length-1) + this.letters.pop(); + + if (this.isTest) { + this.words[this.currentLine] = this.words[this.currentLine].substring(0, this.words[this.currentLine].length-1); + } else { + this.words = this.words.substring(0, this.words.length-1) + } return; } for (let i = 0; i < this.allowedLetters.length; i++) { if (pKey.toLowerCase() === this.allowedLetters[i]) { this.letters.push(pKey); - this.words += pKey; + if (this.isTest) { + this.words[this.currentLine] += pKey; + } else { + this.words += pKey; + } return; } } @@ -210,7 +222,7 @@ class Textbox { fill(this.textColor); textSize(23); textAlign(LEFT); - if (this.words.length == 0 && this.line) { + if (this.words.length === 0 && this.line) { fill("#000") rect(this.x, this.y-15, 1, 30) } @@ -223,40 +235,53 @@ class Textbox { let i = this.x; let j = this.y; - // currently this loop just prints out every letter in the array, including any enter characters - for (let x = 0; x < this.testContent.length; x++) { - if (i > this.x + this.width) i = this.x, j += 30; - if (this.testContent[x] === "Enter") { - i = this.x, j+= 30; - } else { - text(this.testContent[x], i, j); - i += 13 - } + if (this.words[this.currentLine].length > this.testContent[this.currentLine].length) { + this.currentLine++; + this.words.push(""); } - // these variables allow me to use the values of x and y while updating them - i = this.x; - j = this.y; - - // currently this loop just prints out every letter in the array, including any enter characters - for (let x = 0; x < this.letters.length; x++) { - if (i > this.x + this.width) i = this.x, j += 30; - if (this.letters[x] === "Enter") { - i = this.x, j+= 30; - } else { - if (this.letters[x] === this.testContent[x]) { - fill('green'); + if (this.currentLine > 0) { + for (let x = 0; x < this.testContent[this.currentLine-1].length; x++) { + if (x < this.words[this.currentLine-1].length) { + if (this.words[this.currentLine-1][x] === this.testContent[this.currentLine-1][x]) { + fill("#00AA0044"); + } else { + fill("#AA000044"); + } } else { - fill('red'); + fill("#00044"); } - text(this.testContent[x], i, j); - i += 13 - } - if (this.letters.length > 0 && x == this.letters.length-1 && this.line) { - fill("black") - rect(i, j-15, 1, 30) + text(this.testContent[this.currentLine-1][x], i, j); + i += 13; } + j+= 30; } + + i = this.x; + + for (let x = 0; x < this.testContent[this.currentLine].length; x++) { + if (x < this.words[this.currentLine].length) { + if (this.words[this.currentLine][x] === this.testContent[this.currentLine][x]) { + fill("#00AA00"); + } else { + fill("#AA0000"); + } + } else { + fill("#000"); + } + text(this.testContent[this.currentLine][x], i, j); + i += 13; + } + + i = this.x; + j+=30; + + fill("#000"); + for (let x = this.currentLine + 1; x < this.testContent.length; x++) { + text(this.testContent[x], i, j); + j += 30; + } + } else { // these variables allow me to use the values of x and y while updating them let i = this.x;