Active state for the buttons; deactivate by clicking twice.

matthiasbruch · Feb 17, 2024 · 659495c · 659495c
1 parent dba6a72
commit 659495c
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 17 deletions.
diff --git a/Sources/ButtonFilled3.psd b/Sources/ButtonFilled3.psd
diff --git a/images/buttons/button-digging-active.png b/images/buttons/button-digging-active.png
diff --git a/images/buttons/button-digging.png b/images/buttons/button-digging.png
diff --git a/images/buttons/button-drop-active.png b/images/buttons/button-drop-active.png
diff --git a/images/buttons/button-scan-active.png b/images/buttons/button-scan-active.png
diff --git a/images/buttons/button-scan.png b/images/buttons/button-scan.png
diff --git a/scripts/gameStage.js b/scripts/gameStage.js
@@ -102,9 +102,12 @@ var gameStage = function() {
     }
 
     function handleTileRightClick(mapTile, mouseEvent) {
-        interactionHelper.setNextMode(null);
-
-        mapTile.toggleTileMarking();
+        if (interactionHelper.getNextMode()) {
+            interactionHelper.setNextMode(null);
+        }
+        else {
+            mapTile.toggleTileMarking();
+        }
     }
 
     function handleTileReveal(mapTile) {

diff --git a/scripts/interactionHelper.js b/scripts/interactionHelper.js
@@ -53,6 +53,12 @@ var interactionHelper = function() {
     }
 
     function setNextMode(interaction) {
+        if (interaction) {
+            interactionMenuHelper.setButtonActive(interaction);
+        }
+        else {
+            interactionMenuHelper.setAllInactive();
+        }
         selectedInteraction = interaction;
     }
 

diff --git a/scripts/interactionMenuHelper.js b/scripts/interactionMenuHelper.js
@@ -13,52 +13,86 @@ var interactionMenuHelper = function() {
 
     async function addButton(interactionType, disable) {
         var asset = await PIXI.Assets.load('images/buttons/button-' + interactionType + '.png');
+        var assetActive = await PIXI.Assets.load('images/buttons/button-' + interactionType + '-active.png');
         var sprite = new PIXI.Sprite(asset);
-        buttonRegister[interactionType] = sprite;
+        var spriteActive = new PIXI.Sprite(assetActive);
+        spriteActive.alpha = 0;
 
-        sprite.x = buttonPosition;
-        sprite.y = appInstance.view.height - 70;
-
 
-        sprite.on('click', function() {
-            interactionHelper.setNextMode(interactionType);
+        var container = new PIXI.Container();
+        container.eventMode = 'static';
+        container.cursor = 'pointer';
+        container.x = buttonPosition;
+        container.y = appInstance.view.height - 70;
+        container.width = 70;
+        container.height = 70;
+        container.addChild(sprite);
+        container.addChild(spriteActive);
+
+        container.on('click', function() {
+            if (interactionType === interactionHelper.getNextMode()) {
+                interactionHelper.setNextMode(null);
+            }
+            else {
+                interactionHelper.setNextMode(interactionType);
+            }
         });
 
-        appInstance.stage.addChild(sprite);
+        appInstance.stage.addChild(container);
 
         if (disable) {
-            sprite.eventMode = 'none';
+            container.eventMode = 'none';
             sprite.alpha = 0.5;
         }
         else {
-            sprite.eventMode = 'static';
+            container.eventMode = 'static';
         }
 
         buttonPosition += 80;
+
+
+        buttonRegister[interactionType] = sprite;
+        buttonRegister[interactionType + '-active'] = spriteActive;
+        buttonRegister[interactionType + '-container'] = container;
+    }
+
+    function setButtonActive(interactionType) {
+        setAllInactive();
+
+        soundHelper.play(soundHelper.soundKey.Interaction);
+        buttonRegister[interactionType + '-active'].alpha = 1;
+    }
+
+    function setAllInactive() {
+        buttonRegister[interactionHelper.interactionTypes.Digging + '-active'].alpha = 0;
+        buttonRegister[interactionHelper.interactionTypes.Scan + '-active'].alpha = 0;
+        buttonRegister[interactionHelper.interactionTypes.Drop + '-active'].alpha = 0;
     }
 
     function handleStatUpdate(stats) {
         if (stats.credits >= 2) {
-            buttonRegister[interactionHelper.interactionTypes.Scan].eventMode = 'static';
+            buttonRegister[interactionHelper.interactionTypes.Scan + '-container'].eventMode = 'static';
             buttonRegister[interactionHelper.interactionTypes.Scan].alpha = 1;
         }
         else {
-            buttonRegister[interactionHelper.interactionTypes.Scan].eventMode = 'none';
+            buttonRegister[interactionHelper.interactionTypes.Scan + '-container'].eventMode = 'none';
             buttonRegister[interactionHelper.interactionTypes.Scan].alpha = 0.5;
         }
 
         if (stats.credits >= 8) {
-            buttonRegister[interactionHelper.interactionTypes.Drop].eventMode = 'static';
+            buttonRegister[interactionHelper.interactionTypes.Drop + '-container'].eventMode = 'static';
             buttonRegister[interactionHelper.interactionTypes.Drop].alpha = 1;
         }
         else {
-            buttonRegister[interactionHelper.interactionTypes.Drop].eventMode = 'none';
+            buttonRegister[interactionHelper.interactionTypes.Drop + '-container'].eventMode = 'none';
             buttonRegister[interactionHelper.interactionTypes.Drop].alpha = 0.5;
         }
     }
 
     return {
         initialize: initialize,
-        handleStatUpdate: handleStatUpdate
+        handleStatUpdate: handleStatUpdate,
+        setButtonActive: setButtonActive,
+        setAllInactive: setAllInactive
     }
 }();