diff --git a/website/index.html b/website/index.html
index 7d224c2..d2facd9 100644
--- a/website/index.html
+++ b/website/index.html
@@ -12,12 +12,16 @@
-
-
+
+
+
+
+
+
diff --git a/website/index.js b/website/index.js
index 62960a8..1780d1b 100644
--- a/website/index.js
+++ b/website/index.js
@@ -10,11 +10,11 @@ function setup() {
api = new API();
screenManager = new ScreenManager();
+ screenManager.setScreen(new StartScreen());
}
// this function is called once per frame and draws all other elements
function draw() {
- background(200);
screenManager.draw();
}
diff --git a/website/screens/endscreen.js b/website/screens/endscreen.js
new file mode 100644
index 0000000..e69de29
diff --git a/website/screens/screenmanager.js b/website/screens/screenmanager.js
index 12a64a2..4c3f2eb 100644
--- a/website/screens/screenmanager.js
+++ b/website/screens/screenmanager.js
@@ -1,13 +1,19 @@
class ScreenManager {
constructor() {
- this.textbox = new Textbox(400, 200, 700);
- this.timer = new Timer(0, 0, 100, 100, 0, true, '#000', true, '#000','#F3C969', 10, true);
- this.button = new Button(300, 300, 100, 50, 0, true, '#fff', false, '#000', '#666', 'button');
+ this.textbox;
+ this.timer;
+ this.screen;
}
draw() {
- this.textbox.draw();
- this.timer.draw();
- this.button.draw();
+ this.screen.draw();
+ }
+
+ setScreen(pScreen) {
+ this.screen = pScreen;
+ }
+
+ getScreen() {
+ return this.screen;
}
}
\ No newline at end of file
diff --git a/website/screens/startscreen.js b/website/screens/startscreen.js
new file mode 100644
index 0000000..6092037
--- /dev/null
+++ b/website/screens/startscreen.js
@@ -0,0 +1,12 @@
+class StartScreen {
+ constructor() {
+ screenManager.textbox = new Textbox(0,0,0,0,0,false,"#000", false, "#000", "#000");
+ }
+
+ draw() {
+ background("#eeeee4");
+ textSize(100);
+ textAlign(CENTER, CENTER);
+ text("Press enter to start test", 0, 0, windowWidth - 100, windowHeight - 100);
+ }
+}
\ No newline at end of file
diff --git a/website/screens/testscreen.js b/website/screens/testscreen.js
new file mode 100644
index 0000000..724a930
--- /dev/null
+++ b/website/screens/testscreen.js
@@ -0,0 +1,14 @@
+class TestScreen {
+ constructor() {
+ screenManager.textbox = new Textbox(100,100,windowWidth - 100,windowHeight,0,true,"#000", false, "#000", "#000");
+ screenManager.timer = new Timer(0,0,windowWidth,50,0,true,"#fff", true, "#000", "#666", 15, true);
+ screenManager.timer.start();
+ }
+
+ draw() {
+ background("#eeeee4");
+ screenManager.textbox.draw();
+ screenManager.timer.draw();
+ screenManager.timer.tick();
+ }
+}
\ No newline at end of file
diff --git a/website/ui_elements/textbox.js b/website/ui_elements/textbox.js
index 46920f9..b57f13c 100644
--- a/website/ui_elements/textbox.js
+++ b/website/ui_elements/textbox.js
@@ -110,6 +110,11 @@ class Textbox {
letterTyped(pKey) {
console.log(pKey);
+ if (pKey === "Enter" && screenManager.screen.constructor.name === "StartScreen") {
+ screenManager.setScreen(new TestScreen());
+ return;
+ }
+
if (pKey === "Backspace" && this.letters.length > 1) {
this.letters.pop();
return;
@@ -140,9 +145,16 @@ class Textbox {
}
draw() {
- // sets the default characteristics these should be replaced with attributes
- color(0);
+ // doesn't render the textbox if it should not be visible to the user.
+ if (this.visible === false) {
+ return;
+ }
+
+ // sets the parameters of what the text should look like;
+ color(this.textColor);
textSize(23);
+ textAlign(LEFT);
+ // font needs to be monospaced for outputting text to the screen like I do
textFont('monospace');
// these variables allow me to use the values of x and y while updating them
diff --git a/website/ui_elements/timer.js b/website/ui_elements/timer.js
index fbd9c09..0d64285 100644
--- a/website/ui_elements/timer.js
+++ b/website/ui_elements/timer.js
@@ -166,6 +166,7 @@ class Timer {
draw() {
// if the time shouldn't be rendered it quickly exits out of this method
if (!this.visible) return;
+ textAlign(LEFT);
// adds a border for the bar if one is needed
if (this.border && this.bar) {