added some basic screen functionality

website/index.html

@@ -12,12 +12,16 @@
     
     <!-- Element Script Files -->
     <script src="./ui_elements/canvas.js"></script>
-    <script src="./screens/screenmanager.js"></script>
-
     <script src="./ui_elements/textbox.js"></script>
     <script src="./ui_elements/timer.js"></script>
     <script src="./ui_elements/button.js"></script>
 
+    <!-- Screen Files-->
+    <script src="./screens/screenmanager.js"></script>
+    <script src="./screens/startscreen.js"></script>
+    <script src="./screens/testscreen.js"></script>
+    <script src="./screens/endscreen.js"></script>
+
     <!-- API Script Files -->
     <script src="./api/api.js"></script>
 </head>

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();
 }
 

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;
     }
 }

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);
+    }
+}

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();
+    }
+}

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

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) {