basic orange website

website/index.html

@@ -7,7 +7,11 @@
     <title>Document</title>
 
     <!-- Main Script Files -->
-    <script src="./index.js" type="text/javascript" defer="true"></script>
+    <script src="./lib/p5.js"></script>
+    <script src="./index.js" type="text/javascript"></script>
+    
+    <!-- Element Script Files -->
+    <script src="./ui_elements/canvas.js"></script>
 
     <!-- API Script Files -->
 </head>

website/index.js

@@ -1,22 +1,17 @@
-const url = "http://localhost:8000/api/post_test/"
+let canvas;
-const data = {
+function setup() {
-    test_type: "words",
+    // Creating the canvas
-    test_length: 500,
+    canvas = new Canvas();
-    test_time: 100,
+    canvas.resize();
-    test_seed: 123040004,
+    canvas.center();
-    quote_id: 0,
-    wpm: 60,
-    accuracy: 100,
-    user_id: 0
 }
-const xhr = new XMLHttpRequest();
-const button = document.getElementById("button");
 
-button.addEventListener("click", (e) => {
+function draw() {
-    send();
+    background(255,100,100);
-});
+}
-
+
-function send() {
+
-    xhr.open("POST", url);
+function windowResized() {
-    xhr.send(JSON.stringify(data));
+    canvas.resize();
+    canvas.center();
 }

website/ui_elements/canvas.js

@@ -0,0 +1,21 @@
+class Canvas {
+    constructor() {
+        this.x = 0;
+        this.y = 0;
+        this.canvas = createCanvas(0, 0);
+    }
+
+
+    center() {
+        this.canvas.position(this.x, this.y);
+    }
+
+
+    resize() {
+        this.canvas.resize(windowWidth, windowHeight);
+    }
+
+    disable() {
+        this.canvas.resize(0, 0);
+    }
+}