added basic screenmanager class

.gitignore

@@ -1,3 +1,4 @@
 /target
 Cargo.lock
 /database/database.sqlite
+/NEA_Screenshots

website/index.html

@@ -12,6 +12,8 @@
     
     <!-- 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>

website/index.js

@@ -1,6 +1,4 @@
-let canvas;
+let canvas, api, screenManager;
-let api;
-let textbox, timer, button;
 
 function setup() {
     // Creating the canvas
@@ -10,27 +8,20 @@ function setup() {
 
     frameRate(60);
 
-    textbox = new Textbox(400, 200, 700);
-    timer = new Timer(0, 0, 100, 100, 0, true, '#000', true, '#000','#F3C969', 10, true);
-    timer.start();
     api = new API();
-    button = new Button(300, 300, 100, 50, 0, true, '#fff', false, '#000', '#666', 'button');
+    screenManager = new ScreenManager();
 }
 
 // this function is called once per frame and draws all other elements
 function draw() {
     background(200);
-    textbox.draw();
+    screenManager.draw();
-    timer.tick();
-    timer.draw();
-    button.draw(); 
-    button.isPressed();
 }
 
 
 // whenever a key is pressed this function is called
 function keyPressed() {
-    textbox.letterTyped(key);
+    screenManager.textbox.letterTyped(key);
 }
 
 // This ensures that the canvas is always the correct size and at the center

website/screens/screenmanager.js

@@ -0,0 +1,13 @@
+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');
+    }
+
+    draw() {
+        this.textbox.draw();
+        this.timer.draw();
+        this.button.draw();
+    }
+}