diff --git a/website/index.html b/website/index.html index 24754b5..5b599c8 100644 --- a/website/index.html +++ b/website/index.html @@ -12,10 +12,11 @@ + - + \ No newline at end of file diff --git a/website/index.js b/website/index.js index 57c572a..42eece1 100644 --- 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() { diff --git a/website/ui_elements/textbox.js b/website/ui_elements/textbox.js new file mode 100644 index 0000000..650d447 --- /dev/null +++ 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; + } +} \ No newline at end of file