added textbox element

2022-09-29 16:22:48 +01:00 · 2022-09-29 16:22:48 +01:00 · d6d020d62f
commit d6d020d62f
parent 2285ac71b5
3 changed files with 143 additions and 1 deletions
--- a/website/index.html
+++ b/website/index.html
@ -12,10 +12,11 @@
    
    <!-- Element Script Files -->
    <script src="./ui_elements/canvas.js"></script>
+    <script src="./ui_elements/textbox.js"></script>

    <!-- API Script Files -->
 </head>
 <body>
-    <button id="button">Submit JSON</button>
+
 </body>
 </html>
--- a/website/index.js
+++ b/website/index.js
@ -1,9 +1,13 @@
 let canvas;
+let textbox;
+
 function setup() {
    // Creating the canvas
    canvas = new Canvas();
    canvas.resize();
    canvas.center();
+
+    textbox = new Textbox();
 }

 function draw() {
--- a/website/ui_elements/textbox.js
+++ b/website/ui_elements/textbox.js
@ -0,0 +1,137 @@
+class Textbox {
+    constructor(pX, pY, pWidth, pHeight, pLayer, pVisible, pTextColor, pBorder, pBorderColor, pBackgroundColor) {
+        this.x = pX;
+        this.y = pY;
+        this.width = pWidth;
+        this.height = pHeight;
+        this.layer = pLayer;
+        this.visible = pVisible;
+        this.textColor = pTextColor;
+        this.border = pBorder;
+        this.borderColor = pBorderColor;
+        this.backgroundColor = pBackgroundColor;
+
+        this.letters = [];
+        this.words = "";
+        this.allowedLetters = []
+    }
+
+    getX() {
+        return this.x;
+    }
+
+    setX(pX) {
+        this.x = pX;
+    }
+
+    getY() {
+        return this.y;
+    }
+
+    setY(pY) {
+        this.y = pY;
+    }
+
+    getWidth() {
+        return this.width;
+    }
+
+    setWidth(pWidth) {
+        this.width = pWidth;
+    } 
+    
+    getHeight() {
+        return this.height;
+    } 
+    
+    setHeight(pHeight) {
+        this.height = pHeight;
+    } 
+    
+    getLayer() {
+        return this.layer;
+    } 
+    
+    setLayer(pLayer) {
+        this.layer = pLayer;
+    } 
+    
+    getVisible() {
+        return this.visible;
+    } 
+    
+    setVisible(pVisible) {
+        this.visible = pVisible;
+    } 
+    
+    getTextColor() {
+        return this.textColor;
+    } 
+    
+    setTextColor(pTextColor) {
+        this.textColor = pTextColor;
+    } 
+    
+    getBorder() {
+        return this.border;
+    } 
+    
+    setBorder(pBorder) {
+        this.border = pBorder;
+    } 
+    
+    getBorderColor() {
+        return this.borderColor;
+    } 
+    
+    setBorderColor(pBorderColor) {
+        this.borderColor = pBorderColor;
+    } 
+
+    getBackgroundColor() {
+        return this.backgroundColor;
+    } 
+    
+    setBackgroundColor(pBackgroundColor) {
+        this.backgroundColor = pBackgroundColor;
+    }
+
+    getLetters() {
+        return this.letters;
+    }
+    
+    setLetters(pLetters) {
+        this.letters = pLetters;
+    }
+
+    letterTyped(pKey) {
+        if (pkey == "backspace" && letters.length) {
+           letters.pop()
+           return
+        }
+ 
+       for (i in allowedLetters.length - 1) {
+           if (pkey == i) {
+               letters.push(pKey)
+               return;
+            }    
+        }
+
+    }
+
+    getWords() {
+        return this.words;
+    }
+
+    setWords(pWords) {
+        this.words = pWords;
+    }
+
+    getAllowedLetters() {
+        return this.allowedLetters;
+    }
+
+    setAllowedLetters(pAllowedLetters) {
+        this.allowedLetters = pAllowedLetters;
+    }
+}