✨ Refactor base UI class

- Stop using P5 Touch GUI,
- Refactor UIObject to work only with P5Elements,
- Add Button class to test UIObject's functionality.

index.html

@@ -32,6 +32,7 @@
     <script src="pandora/game_objects/2d_objects/Sprite2D.js"></script>
     <!-- UI Game Objects -->
     <script src="pandora/game_objects/ui_objects/UIObject.js"></script>
+    <script src="pandora/game_objects/ui_objects/Button.js"></script>
 
     <!-- Handlers -->
     <script src="pandora/handlers/GameHandler.js"></script>

pandora/game_objects/ui_objects/Button.js

@@ -0,0 +1,21 @@
+class Button extends UIObject
+{
+    constructor(name, label = "Button")
+    {
+        super(name);
+
+        this.P5Element = createButton();
+        this.label = label;
+        this.P5Element.html(label);
+        this.P5Element.position(0, 0);
+        
+
+        this.connectCallbacks();
+    }
+
+    setLabel(label)
+    {
+        this.label = label;
+        this.P5Element.html(label);
+    }
+}

pandora/game_objects/ui_objects/UIObject.js

@@ -1,8 +1,155 @@
-class UIObject extends GameObject {
-    constructor(name) {
+class UIObject extends GameObject
+{
+    constructor(name)
+    {
         super(name);
 
-        this.position = Vector2.ZERO();
-        this.size = Vector2(100, 100);
+        this.P5Element = null;
+        this.visible = true;
+    }
+
+    connectCallbacks()
+    {
+        this.P5Element.mousePressed(this._onMousePressed);
+        this.P5Element.doubleClicked(this._onDoubleClicked);
+        this.P5Element.mouseWheel(this._onMouseWheel);
+        this.P5Element.mouseReleased(this._onMouseReleased);
+        this.P5Element.mouseClicked(this._onMouseClicked);
+        this.P5Element.mouseMoved(this._onMouseMoved);
+        this.P5Element.mouseOver(this._onMouseOver);
+        this.P5Element.mouseOut(this._onMouseOut);
+        this.P5Element.touchStarted(this._onTouchStarted);
+        this.P5Element.touchMoved(this._onTouchMoved);
+        this.P5Element.touchEnded(this._onTouchEnded);
+        this.P5Element.dragOver(this._onDragOver);
+        this.P5Element.dragLeave(this._onDragLeave);
+    }
+
+    // Setters
+    setPosition(x, y)
+    {
+        this.P5Element.position(x, y);
+    }
+
+    setSize(w, h)
+    {
+        this.P5Element.size(w, h);
+    }
+
+    setVisibility(vis)
+    {
+        if (vis) this.P5Element.show();
+        else this.P5Element.hide();
+        this.visible = !this.visible;
+    }
+
+    setValue(val)
+    {
+        this.P5Element.value(val)
+    }
+
+    setStyle(style)
+    {
+        for (const [key, value] of Object.entries(style))
+        {
+            this.P5Element.style(`${key}`, value);
+        }
+    }
+
+    // Getters
+    getPosition()
+    {
+        return this.P5Element.position();
+    }
+
+    getVisibility()
+    {
+        return this.visible;
+    }
+
+    getValue()
+    {
+        return this.P5Element.value();
+    }
+
+    // Methods
+    toggleVisibility()
+    {
+        this.setVisibility(!this.visible);
+    }
+
+    addChild(child)
+    {
+        child.parent = this;
+        child.parented = true;
+        this.children.push(child);
+
+        child.P5Element.parent(this.P5Element);
+    }
+
+    // Callbacks
+    _onMousePressed()
+    {
+
+    }
+
+    _onDoubleClicked()
+    {
+
+    }
+
+    _onMouseWheel()
+    {
+
+    }
+
+    _onMouseReleased()
+    {
+
+    }
+
+    _onMouseClicked()
+    {
+
+    }
+
+    _onMouseMoved()
+    {
+
+    }
+
+    _onMouseOver()
+    {
+
+    }
+
+    _onMouseOut()
+    {
+
+    }
+
+    _onTouchStarted()
+    {
+
+    }
+
+    _onTouchMoved()
+    {
+
+    }
+
+    _onTouchEnded()
+    {
+
+    }
+
+    _onDragOver()
+    {
+
+    }
+
+    _onDragLeave()
+    {
+
     }
 }

pandora/handlers/GameHandler.js

@@ -15,8 +15,7 @@ class GameHandler
         this.bDrawDebugFPS = val;
     }
 
-    static gui;
-    static init(fps=60)
+    static init(fps = 60)
     {
         if (!this.renderMode) this.renderMode = RENDER_MODES.P2D;
         switch (this.renderMode)
@@ -31,8 +30,6 @@ class GameHandler
         }
         frameRate(fps);
         smooth();
-
-        this.gui = createGui();
     }
 
     static instanceGameObject(obj)
@@ -65,7 +62,6 @@ class GameHandler
             fill(0);
             text("FPS: " + frameRate(), 10, 20);
         }
-        drawGui();
 
         for (let i = 0; i < this.rootObjects.length; i++)
             this.rootObjects[i].draw(this.delta);

src/sketch.js

@@ -1,29 +1,33 @@
-class TestObject extends Sprite2D
+class TestObject extends Button
 {
-    constructor(name, p5Img)
-    {
-        super(name, p5Img);
-
-        this.position.x = 0;
-        this.position.y = 0;
-        this.texture.width = windowWidth;
-        this.texture.height = windowHeight;
-    }
+    // constructor(name)
+    // {
+    //     super(name);
+    // }
 
     _update(delta)
     {
-        this.position.x -= 100 * delta;
+
     }
 
     _draw(delta)
     {
 
     }
+
+    _onMousePressed() {
+        print("Hello")
+    }
+
+    _onMouseOver() {
+        print("over")
+    }
 }
 
-let test;
+let test, test2;
 let testImg;
 let testFont;
+let testButton, testSlider;
 
 function preload()
 {
@@ -38,9 +42,12 @@ function setup()
     GameHandler.init();
     textFont(testFont);
 
-    test = new TestObject("mySprite", testImg);
+    test = new TestObject("myTest");
     GameHandler.addRootObject(test);
-    // print(test)
+    test.setLabel("hello");
+
+    test2 = new TestObject("myTest2");
+    test.addChild(test2);
 }
 
 function draw()