Added interface widget layering

wizguin · Jan 28, 2022 · d640a8b · d640a8b
1 parent 554eb3f
commit d640a8b
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 54 deletions.
diff --git a/src/scenes/components/DraggableContainer.js b/src/scenes/components/DraggableContainer.js
@@ -25,6 +25,8 @@ export default class DraggableContainer extends EventComponent {
         this.offsetX = 0
         this.offsetY = 0
 
+        this.widgetLayer
+
         /* END-USER-CTR-CODE */
     }
 
@@ -43,8 +45,15 @@ export default class DraggableContainer extends EventComponent {
 
         zone.setInteractive({ draggable: true })
 
-        zone.on('dragstart', (pointer) => { this.onDragStart(pointer) })
-        zone.on('drag', (pointer) => { this.onDrag(pointer) })
+        zone.on('pointerdown', (pointer) => this.onDown(pointer))
+        zone.on('dragstart', (pointer) => this.onDragStart(pointer))
+        zone.on('drag', (pointer) => this.onDrag(pointer))
+    }
+
+    onDown(pointer) {
+        if (this.widgetLayer && pointer.button == 0) {
+            this.widgetLayer.bringToTop(this.gameObject)
+        }
     }
 
     onDragStart(pointer) {

diff --git a/src/scenes/interface/game/main/Main.js b/src/scenes/interface/game/main/Main.js
@@ -40,6 +40,8 @@ export default class Main extends BaseScene {
         this.request_button;
         /** @type {Phaser.GameObjects.Sprite} */
         this.mod_m;
+        /** @type {Phaser.GameObjects.Layer} */
+        this.widgetLayer;
         /** @type {Waddle} */
         this.waddle;
         /** @type {Buddy} */
@@ -170,20 +172,23 @@ export default class Main extends BaseScene {
         // mod_m
         const mod_m = this.add.sprite(1434, 69, "main", "mod/m");
 
+        // widgetLayer
+        const widgetLayer = this.add.layer();
+
         // waddle
         const waddle = new Waddle(this, 1099, 332);
-        this.add.existing(waddle);
         waddle.visible = false;
+        widgetLayer.add(waddle);
 
         // buddy
         const buddy = new Buddy(this, 1140, 436);
-        this.add.existing(buddy);
         buddy.visible = false;
+        widgetLayer.add(buddy);
 
         // playerCard
         const playerCard = new PlayerCard(this, 446, 436);
-        this.add.existing(playerCard);
         playerCard.visible = false;
+        widgetLayer.add(playerCard);
 
         // actionsMenu
         const actionsMenu = new ActionsMenu(this, 366, 872);
@@ -262,7 +267,7 @@ export default class Main extends BaseScene {
         // player_button (components)
         const player_buttonButton = new Button(player_button);
         player_buttonButton.spriteName = "blue-button";
-        player_buttonButton.callback = () => this.playerCard.showCard(this.world.client.id);
+        player_buttonButton.callback = () => this.onPlayerClick();
         const player_buttonShowHint = new ShowHint(player_button);
         player_buttonShowHint.text = "Edit Player";
 
@@ -326,6 +331,7 @@ export default class Main extends BaseScene {
         this.crosshair = crosshair;
         this.request_button = request_button;
         this.mod_m = mod_m;
+        this.widgetLayer = widgetLayer;
         this.waddle = waddle;
         this.buddy = buddy;
         this.playerCard = playerCard;
@@ -348,6 +354,8 @@ export default class Main extends BaseScene {
 
         this.events.on('sleep', this.onSleep, this)
 
+        this.setupWidgets()
+
         // Factories
 
         this.balloonFactory = new BalloonFactory(this)
@@ -409,6 +417,19 @@ export default class Main extends BaseScene {
         }
     }
 
+    setupWidgets() {
+        for (let widget of this.widgetLayer.list) {
+            if (widget.__DraggableContainer) {
+                widget.__DraggableContainer.widgetLayer = this.widgetLayer
+            }
+        }
+    }
+
+    showWidget(widget) {
+        this.widgetLayer.bringToTop(widget)
+        widget.visible = true
+    }
+
     onSnowballClick() {
         this.crosshair.visible = true
         this.crosshair.x = this.input.x
@@ -445,8 +466,12 @@ export default class Main extends BaseScene {
         this.network.send('send_message', { message: text })
     }
 
+    onPlayerClick() {
+        this.playerCard.showCard(this.world.client.id)
+    }
+
     onBuddyClick() {
-        this.buddy.visible = true
+        this.showWidget(this.buddy)
         this.buddy.showPage()
     }
 

diff --git a/src/scenes/interface/game/main/Main.scene b/src/scenes/interface/game/main/Main.scene
@@ -203,7 +203,7 @@
                 "ShowHint"
             ],
             "Button.spriteName": "blue-button",
-            "Button.callback": "() => this.playerCard.showCard(this.world.client.id)",
+            "Button.callback": "() => this.onPlayerClick()",
             "ShowHint.text": "Edit Player",
             "texture": {
                 "key": "main",
@@ -482,52 +482,61 @@
             "y": 69
         },
         {
-            "prefabId": "032db1d9-1eac-4321-b4b3-ef359e514589",
-            "id": "9774c68e-f80f-4832-8d58-7c3ce94f98fd",
-            "unlock": [
-                "visible",
-                "x",
-                "y"
-            ],
-            "label": "waddle",
-            "scope": "CLASS",
-            "components": [],
-            "x": 1099,
-            "y": 332,
-            "visible": false,
-            "nestedPrefabs": []
-        },
-        {
-            "prefabId": "27889184-8ae4-4103-ab57-1cbad21b7401",
-            "id": "9acd4a58-cbf9-4751-b96a-2822f121af9c",
-            "unlock": [
-                "visible",
-                "x",
-                "y"
-            ],
-            "label": "buddy",
+            "type": "Layer",
+            "id": "a205badf-674d-4f0f-bb3e-e687b24d30e9",
+            "label": "widgetLayer",
             "scope": "CLASS",
             "components": [],
-            "x": 1140,
-            "y": 436,
-            "visible": false,
-            "nestedPrefabs": []
-        },
-        {
-            "prefabId": "aa26f680-5a55-46f1-b89f-e40211af8a8d",
-            "id": "9770a528-0c5a-4720-a6db-eabd53c787e1",
-            "unlock": [
-                "visible",
-                "x",
-                "y"
-            ],
-            "label": "playerCard",
-            "scope": "CLASS",
-            "components": [],
-            "x": 446,
-            "y": 436,
-            "visible": false,
-            "nestedPrefabs": []
+            "list": [
+                {
+                    "prefabId": "032db1d9-1eac-4321-b4b3-ef359e514589",
+                    "id": "9774c68e-f80f-4832-8d58-7c3ce94f98fd",
+                    "unlock": [
+                        "visible",
+                        "x",
+                        "y"
+                    ],
+                    "label": "waddle",
+                    "scope": "CLASS",
+                    "components": [],
+                    "x": 1099,
+                    "y": 332,
+                    "visible": false,
+                    "nestedPrefabs": []
+                },
+                {
+                    "prefabId": "27889184-8ae4-4103-ab57-1cbad21b7401",
+                    "id": "9acd4a58-cbf9-4751-b96a-2822f121af9c",
+                    "unlock": [
+                        "visible",
+                        "x",
+                        "y"
+                    ],
+                    "label": "buddy",
+                    "scope": "CLASS",
+                    "components": [],
+                    "x": 1140,
+                    "y": 436,
+                    "visible": false,
+                    "nestedPrefabs": []
+                },
+                {
+                    "prefabId": "aa26f680-5a55-46f1-b89f-e40211af8a8d",
+                    "id": "9770a528-0c5a-4720-a6db-eabd53c787e1",
+                    "unlock": [
+                        "visible",
+                        "x",
+                        "y"
+                    ],
+                    "label": "playerCard",
+                    "scope": "CLASS",
+                    "components": [],
+                    "x": 446,
+                    "y": 436,
+                    "visible": false,
+                    "nestedPrefabs": []
+                }
+            ]
         },
         {
             "prefabId": "c0278f51-86ed-479c-93d8-d832408669c2",

diff --git a/src/scenes/interface/game/playercard/PlayerCard.js b/src/scenes/interface/game/playercard/PlayerCard.js
@@ -138,7 +138,10 @@ export default class PlayerCard extends BaseContainer {
      */
     showCard(id, refresh = false) {
         // Don't open player's card if it's already open
-        if (id == this.id && this.visible && !refresh) return
+        if (id == this.id && this.visible && !refresh) {
+            this.interface.main.showWidget(this)
+            return
+        }
 
         if (id in this.world.room.penguins) {
             let penguin = this.world.room.penguins[id]
@@ -184,7 +187,8 @@ export default class PlayerCard extends BaseContainer {
         this.id = penguin.id
         // Update buttons
         this.updateButtons()
-        this.visible = true
+
+        this.interface.main.showWidget(this)
     }
 
     updateButtons() {