Merge branch 'more-ui-objects' into 'master'

More UIObjects

See merge request pedrotrschneider/project-edu!3

index.html

@@ -25,13 +25,20 @@
     
     <!-- Game Objects -->
     <script type="text/javascript" src="pandora/game_objects/GameObject.js"></script>
-    <!-- 2D Game Objects -->
-    <script type="text/javascript" src="pandora/game_objects/2d_objects/Object2D.js"></script>
-    <script type="text/javascript" src="pandora/game_objects/2d_objects/Shape2D.js"></script>
-    <script type="text/javascript" src="pandora/game_objects/2d_objects/Sprite2D.js"></script>
-    <!-- UI Game Objects -->
-    <script type="text/javascript" src="pandora/game_objects/ui_objects/UIObject.js"></script>
-    <script type="text/javascript" src="pandora/game_objects/ui_objects/Button.js"></script>
+    
+      <!-- 2D Game Objects -->
+      <script type="text/javascript" src="pandora/game_objects/2d_objects/Object2D.js"></script>
+      <script type="text/javascript" src="pandora/game_objects/2d_objects/Shape2D.js"></script>
+      <script type="text/javascript" src="pandora/game_objects/2d_objects/Sprite2D.js"></script>
+    
+      <!-- UI Game Objects -->
+      <script type="text/javascript" src="pandora/game_objects/ui_objects/UIObject.js"></script>
+      <script type="text/javascript" src="pandora/game_objects/ui_objects/Button.js"></script>
+      <script type="text/javascript" src="pandora/game_objects/ui_objects/Label.js"></script>
+      <script type="text/javascript" src="pandora/game_objects/ui_objects/Slider.js"></script>
+      <script type="text/javascript" src="pandora/game_objects/ui_objects/CheckBox.js"></script>
+      <script type="text/javascript" src="pandora/game_objects/ui_objects/Select.js"></script>
+      <script type="text/javascript" src="pandora/game_objects/ui_objects/Radio.js"></script>
 
     <!-- Handlers -->
     <script type="text/javascript" src="pandora/handlers/GameHandler.js"></script>

pandora/Enums.js

@@ -6,4 +6,9 @@ const SHAPES = {
 const RENDER_MODES = {
     P2D: 1,
     WEBGL: 2,
+}
+
+const DEFAULT_STYLE = {
+    "font-family": "Lato",
+    "font-size": "12px"
 }

pandora/game_objects/ui_objects/Button.js

@@ -8,7 +8,8 @@ class Button extends UIObject
         this.label = label;
         this.P5Element.html(label);
         this.P5Element.position(0, 0);
-        
+
+        this.setStyle(DEFAULT_STYLE);
 
         this.connectCallbacks();
     }

pandora/game_objects/ui_objects/CheckBox.js

@@ -0,0 +1,32 @@
+class CheckBox extends UIObject
+{
+    constructor(name, label = "checkbox", val = false)
+    {
+        super(name);
+
+        this.label = label;
+        this.P5Element = createCheckbox(label, val);
+        this.P5Element.position(0, 0);
+
+        this.setStyle(DEFAULT_STYLE);
+
+        this.connectCallbacks();
+        this.P5Element.changed(this.onChanged);
+    }
+
+    setLabel(label)
+    {
+        this.label = label;
+        this.P5Element.html(label);
+    }
+
+    _onChanged()
+    {
+        console.log(this.P5Element.checked());
+    }
+
+    onChanged()
+    {
+        this.pandoraObject._onChanged();
+    }
+}

pandora/game_objects/ui_objects/Label.js

@@ -0,0 +1,20 @@
+class Label extends UIObject
+{
+    constructor(name, text = "Label")
+    {
+        super(name);
+        this.text = text;
+        this.P5Element = createDiv(text);
+        this.P5Element.position(0, 0);
+
+        this.setStyle(DEFAULT_STYLE);
+
+        this.connectCallbacks();
+    }
+
+    setText(t)
+    {
+        this.P5Element.html(t);
+        this.text = t;
+    }
+}

pandora/game_objects/ui_objects/Radio.js

@@ -0,0 +1,74 @@
+class Radio extends UIObject
+{
+    constructor(name)
+    {
+        super(name);
+
+        this.P5Element = createRadio();
+        this.setPosition(10, 10);
+        this.setStyle(DEFAULT_STYLE);
+        this.multiLine = false;
+
+        this.connectCallbacks();
+        this.P5Element.changed(this.onChanged);
+    }
+
+    // Setters
+    setSelected(value)
+    {
+        this.P5Element.selected(value);
+    }
+
+    // Getters
+    getSelected()
+    {
+        return this.P5Element.selected();
+    }
+
+    // Methods
+    addOption(value)
+    {
+        this.P5Element.option(value);
+
+        if (this.multiLine) this.makeMultiline();
+    }
+
+
+    // TODO make this work question mark?
+    // removeOption(value)
+    // {
+    //     this.P5Element.remove(value);
+    // }
+
+    makeMultiline()
+    {
+        this.multiLine = true;
+        const inputs = selectAll('input', this.P5Element),
+            labels = selectAll('label', this.P5Element),
+            len = inputs.length;
+
+        for (let i = 0; i < len; ++i)
+            createDiv().parent(this.P5Element).child(inputs[i]).child(labels[i]);
+
+        this.fixRadioDivElement();
+    }
+
+    fixRadioDivElement()
+    {
+        this.P5Element._getInputChildrenArray = function()
+        {
+            return this.elt.getElementsByTagName('input');
+        }
+    }
+
+    // Callbacks
+    _onChanged()
+    {
+        console.log(this.getSelected());
+    }
+
+    onChanged()
+    {
+        this.pandoraObject._onChanged();
+    }
+}

pandora/game_objects/ui_objects/Select.js

@@ -0,0 +1,57 @@
+class Select extends UIObject
+{
+    constructor(name)
+    {
+        super(name);
+
+        this.P5Element = createSelect();
+        this.setPosition(0, 0);
+        this.setSize(100, 20);
+        this.setStyle(DEFAULT_STYLE);
+
+        this.connectCallbacks();
+        this.P5Element.changed(this.onChanged);
+    }
+
+    // Setters
+    setSelected(value)
+    {
+        this.P5Element.selected(value);
+    }
+
+    // Getters
+    getSelected()
+    {
+        return this.P5Element.selected();
+    }
+
+    // Methods
+    addOption(value)
+    {
+        this.P5Element.option(value);
+    }
+
+    // TODO confirm if disable methods really dont exist or if
+    // something is fucky wooky.
+
+    // disableAll()
+    // {
+    //     this.P5Element.disable();
+    // }
+
+    // disableOption(value)
+    // {
+    //     this.P5Element.disable(value);
+    // }
+
+    // Callbacks
+    _onChanged()
+    {
+
+    }
+
+    onChanged()
+    {
+        this.pandoraObject._onChanged();
+    }
+}

pandora/game_objects/ui_objects/Slider.js

@@ -0,0 +1,24 @@
+class Slider extends UIObject
+{
+    constructor(name, min = 0, max = 100, value = 0, step = 0)
+    {
+        super(name);
+        this.P5Element = createSlider(min, max, value, step);
+        this.setPosition(0, 0);
+        this.setSize(200, 25);
+        this.setStyle(DEFAULT_STYLE);
+
+        this.connectCallbacks();
+        this.P5Element.changed(this.onChanged);
+    }
+
+    _onChanged()
+    {
+        console.log(this.getValue());
+    }
+
+    onChanged()
+    {
+        this.pandoraObject._onChanged();
+    }
+}

pandora/game_objects/ui_objects/UIObject.js

@@ -10,19 +10,21 @@ class UIObject extends GameObject
 
     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);
+        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);
+
+        this.P5Element.pandoraObject = this;
     }
 
     // Setters
@@ -88,6 +90,7 @@ class UIObject extends GameObject
     }
 
     // Callbacks
+    // NOTE all callbacks change the scope to the P5 element
     _onMousePressed()
     {
 
@@ -152,4 +155,71 @@ class UIObject extends GameObject
     {
 
     }
+
+    // -----------------------------------------------
+
+    onMousePressed()
+    {
+        this.pandoraObject._onMousePressed();
+    }
+
+    onDoubleClicked()
+    {
+        this.pandoraObject._onDoubleClicked();
+    }
+
+    onMouseWheel()
+    {
+        this.pandoraObject._onMouseWheel();
+    }
+
+    onMouseReleased()
+    {
+        this.pandoraObject._onMouseReleased();
+    }
+
+    onMouseClicked()
+    {
+        this.pandoraObject._onMouseClicked();
+    }
+
+    onMouseMoved()
+    {
+        this.pandoraObject._onMouseMoved();
+    }
+
+    onMouseOver()
+    {
+        this.pandoraObject._onMouseOver();
+    }
+
+    onMouseOut()
+    {
+        this.pandoraObject._onMouseOut();
+    }
+
+    onTouchStarted()
+    {
+        this.pandoraObject._onTouchStarted();
+    }
+
+    onTouchMoved()
+    {
+        this.pandoraObject._onTouchMoved();
+    }
+
+    onTouchEnded()
+    {
+        this.pandoraObject._onTouchEnded();
+    }
+
+    onDragOver()
+    {
+        this.pandoraObject._onDragOver();
+    }
+
+    onDragLeave()
+    {
+        this.pandoraObject._onDragLeave();
+    }
 }

pandora/handlers/GameHandler.js

@@ -5,6 +5,7 @@ const GameHandler = {
     renderMode: null,
 
     bDrawDebugFPS: false,
+    debugFpsLabel: null,
 
     prevMillis: 0,
     delta: 0,
@@ -34,6 +35,9 @@ const GameHandler = {
         }
         frameRate(fps);
         smooth();
+
+        if (this.bDrawDebugFPS)
+            this.debugFpsLabel = new Label(`FPS: ${frameRate()}`)
     },
 
     instanceGameObject: function(obj)
@@ -49,6 +53,7 @@ const GameHandler = {
 
     update: function()
     {
+        if (this.bDrawDebugFPS) this.debugFpsLabel.setText(`FPS: ${frameRate()}`)
         this.delta = (millis() - this.prevMillis) / 1000;
         for (let i = 0; i < this.rootObjects.length; i++)
             this.rootObjects[i].update(this.delta);
@@ -56,17 +61,16 @@ const GameHandler = {
 
     draw: function()
     {
-        if (this.renderMode == RENDER_MODES.WEBGL) translate(-windowWidth / 2, -windowHeight / 2);
-        if (this.bDrawDebugFPS)
-        {
-            textSize(12);
-            noStroke();
-            fill(0);
-            text("FPS: " + frameRate(), 10, 20);
-        }
+        if (this.renderMode == RENDER_MODES.WEBGL)
+            translate(-windowWidth / 2, -windowHeight / 2);
 
         for (let i = 0; i < this.rootObjects.length; i++)
             this.rootObjects[i].draw(this.delta);
         this.prevMillis = millis();
     }
+}
+
+function windowResized()
+{
+    resizeCanvas(windowWidth, windowHeight);
 }