Arlo/CS-Coursework
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed textbox framerate issues

Browse Source
This commit is contained in:
Arlo Filley 2022-11-28 14:17:27 +00:00
parent 5df9198be8
commit 239391e777
3 changed files with 69 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
website/api/api.js
View File

@ -278,12 +278,19 @@ class API {
xhr.open('GET', `https://random-word-api.herokuapp.com/word?number=100`); xhr.open('GET', `https://random-word-api.herokuapp.com/word?number=100`);
xhr.send(); xhr.send();
xhr.onload = () => { xhr.onload = () => {
const effectiveWidth = (windowWidth - 200) / 13;
let textArr = JSON.parse(xhr.response); let textArr = JSON.parse(xhr.response);
let finalText = [];
let text = ""; let text = "";
for (let i = 0; i < textArr.length; i++) { 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;
}; };
} }
} }

3
website/index.html
View File

@ -16,7 +16,8 @@
<link rel="manifest" href="./assets/favicon/site.webmanifest"> <link rel="manifest" href="./assets/favicon/site.webmanifest">
<!-- Main Script Files --> <!-- Main Script Files -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script> -->
<script src="./lib/p5.js"></script>
<script src="./index.js" type="text/javascript"></script> <script src="./index.js" type="text/javascript"></script>
<!-- Element Script Files --> <!-- Element Script Files -->

91
website/ui_elements/textbox.js
View File

@ -49,7 +49,6 @@ class Textbox {
this.backgroundColor = pBackgroundColor; this.backgroundColor = pBackgroundColor;
this.letters = []; this.letters = [];
this.words = "";
this.allowedLetters = [ this.allowedLetters = [
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
'l', 'm','n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'l', 'm','n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w',
@ -61,6 +60,10 @@ class Textbox {
if (this.isTest) { if (this.isTest) {
this.testContent = user.nextTest; this.testContent = user.nextTest;
this.currentLine = 0;
this.words = [""];
} else {
this.words = "";
} }
} }
@ -159,15 +162,24 @@ class Textbox {
*/ */
letterTyped(pKey) { letterTyped(pKey) {
if (pKey === "Backspace" && this.letters.length > 0) { if (pKey === "Backspace" && this.letters.length > 0) {
this.letters.pop(); this.letters.pop();
this.words = this.words.substring(0, this.words.length-1)
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; return;
} }
for (let i = 0; i < this.allowedLetters.length; i++) { for (let i = 0; i < this.allowedLetters.length; i++) {
if (pKey.toLowerCase() === this.allowedLetters[i]) { if (pKey.toLowerCase() === this.allowedLetters[i]) {
this.letters.push(pKey); this.letters.push(pKey);
this.words += pKey; if (this.isTest) {
this.words[this.currentLine] += pKey;
} else {
this.words += pKey;
}
return; return;
} }
} }
@ -210,7 +222,7 @@ class Textbox {
fill(this.textColor); fill(this.textColor);
textSize(23); textSize(23);
textAlign(LEFT); textAlign(LEFT);
if (this.words.length == 0 && this.line) { if (this.words.length === 0 && this.line) {
fill("#000") fill("#000")
rect(this.x, this.y-15, 1, 30) rect(this.x, this.y-15, 1, 30)
} }
@ -223,40 +235,53 @@ class Textbox {
let i = this.x; let i = this.x;
let j = this.y; let j = this.y;
// currently this loop just prints out every letter in the array, including any enter characters if (this.words[this.currentLine].length > this.testContent[this.currentLine].length) {
for (let x = 0; x < this.testContent.length; x++) { this.currentLine++;
if (i > this.x + this.width) i = this.x, j += 30; this.words.push("");
if (this.testContent[x] === "Enter") {
i = this.x, j+= 30;
} else {
text(this.testContent[x], i, j);
i += 13
}
} }
// these variables allow me to use the values of x and y while updating them if (this.currentLine > 0) {
i = this.x; for (let x = 0; x < this.testContent[this.currentLine-1].length; x++) {
j = this.y; if (x < this.words[this.currentLine-1].length) {
if (this.words[this.currentLine-1][x] === this.testContent[this.currentLine-1][x]) {
// currently this loop just prints out every letter in the array, including any enter characters fill("#00AA0044");
for (let x = 0; x < this.letters.length; x++) { } else {
if (i > this.x + this.width) i = this.x, j += 30; fill("#AA000044");
if (this.letters[x] === "Enter") { }
i = this.x, j+= 30;
} else {
if (this.letters[x] === this.testContent[x]) {
fill('green');
} else { } else {
fill('red'); fill("#00044");
} }
text(this.testContent[x], i, j); text(this.testContent[this.currentLine-1][x], i, j);
i += 13 i += 13;
}
if (this.letters.length > 0 && x == this.letters.length-1 && this.line) {
fill("black")
rect(i, j-15, 1, 30)
} }
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 { } else {
// these variables allow me to use the values of x and y while updating them // these variables allow me to use the values of x and y while updating them
let i = this.x; let i = this.x;