Merge branch 'user-interface-objects' into 'master'

User Interface

See merge request pedrotrschneider/project-edu!1

index.html

@@ -11,9 +11,11 @@
     <!--******************************
       p5Js Modules
     *******************************-->
+    <!-- Core -->
     <script src="libraries/p5.min.js"></script>
     <script src="libraries/p5.sound.min.js"></script>
-    
+    <script src="libraries/p5.dom.min.js"></script>
+
     <!--******************************
       Pandora Engine
     *******************************-->
@@ -24,9 +26,13 @@
     
     <!-- Game Objects -->
     <script src="pandora/game_objects/GameObject.js"></script>
+    <!-- 2D Game Objects -->
     <script src="pandora/game_objects/2d_objects/Object2D.js"></script>
     <script src="pandora/game_objects/2d_objects/Shape2D.js"></script>
     <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

@@ -0,0 +1,155 @@
+class UIObject extends GameObject
+{
+    constructor(name)
+    {
+        super(name);
+
+        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,7 +15,7 @@ class GameHandler
         this.bDrawDebugFPS = val;
     }
 
-    static init(fps=60)
+    static init(fps = 60)
     {
         if (!this.renderMode) this.renderMode = RENDER_MODES.P2D;
         switch (this.renderMode)

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()