feat: add buttons release time parmater

decentraland · Sep 5, 2024 · 3b2021d · 3b2021d
1 parent c40bd4e
commit 3b2021d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -123,7 +123,7 @@ We already implement the generic UI to use inside the mini-games. Like the Play
 #### Menu Button UI
 
 ```ts
-// MenuButton(position: TransformType, assetShape, assetIcon, hoverText, callback)
+// MenuButton(position: TransformType, assetShape, assetIcon, hoverText, callback, enabledByDefault (optional), releaseTime (optional) )
 import { ui } from '@dcl-sdk/mini-games/src'
 
 // All the available icons

diff --git a/src/ui/button.ts b/src/ui/button.ts
@@ -21,14 +21,16 @@ export class MenuButton {
   buttonShapeDisabled: ButtonShapeData
   iconGlowMat: PBMaterial_PbrMaterial
   iconDisabledMat: PBMaterial_PbrMaterial
+  releaseTime: number
 
   constructor(
     transform: TransformTypeWithOptionals,
     buttonShapeData: ButtonShapeData,
     icon: IconData,
     _hoverText: string,
     callback: () => void,
-    enabledByDefault?: boolean
+    enabledByDefault?: boolean,
+    releaseTime: number = 500
   ) {
     const {
       engine,
@@ -41,8 +43,7 @@ export class MenuButton {
         PointerEvents,
         VisibilityComponent,
         Tween,
-        TweenSequence,
-        TweenState
+        TweenSequence
       },
       tweenSystem
     } = getSDK()
@@ -52,6 +53,8 @@ export class MenuButton {
       this.enabled = enabledByDefault
     }
 
+    this.releaseTime = releaseTime
+
     this.buttonShapeEnabled = buttonShapeData
     this.buttonShapeDisabled = uiAssets.shapes.RECT_BLACK
     if (!buttonShapeData.isRect) {
@@ -102,13 +105,15 @@ export class MenuButton {
 
     engine.addSystem(() => {
       // TODO: Why is not been triggered ?
-      if (tweenSystem.tweenCompleted(this.button)) {
-        console.log('asd', Tween.getOrNull(this.button))
-      }
+      // if (tweenSystem.tweenCompleted(this.button)) {
+      //   console.log('asd', Tween.getOrNull(this.button))
+      // }
 
       // TODO: this should be tweenCompleted but no idea why is not working :sadcat:
-      if (TweenState.getOrNull(this.button)?.currentTime === 1 && TweenSequence.getOrNull(this.button)) {
+      // if (TweenState.getOrNull(this.button)?.currentTime === 1 && TweenSequence.getOrNull(this.button)) {
+      if (tweenSystem.tweenCompleted(this.button)) {
         if (!TweenSequence.get(this.button).sequence.length) {
+          this.enable()
           // Tween.deleteFrom(this.button)
           TweenSequence.deleteFrom(this.button)
           VisibilityComponent.getMutable(this.glowPlane).visible = false
@@ -120,11 +125,13 @@ export class MenuButton {
           }
         }
       }
+      // this.disable()
 
       if (inputSystem.isTriggered(InputAction.IA_POINTER, PointerEventType.PET_DOWN, this.button)) {
         if (this.enabled) {
           callback()
           this.playSound('mini-game-assets/sounds/button_click.mp3')
+          this.disable()
           //flash the emissive of the icon
           Material.setPbrMaterial(this.icon, {
             texture: Material.Texture.Common({ src: uiAtlas }),
@@ -137,7 +144,7 @@ export class MenuButton {
           VisibilityComponent.getMutable(this.glowPlane).visible = true
           //tween button inward
           Tween.createOrReplace(this.button, {
-            duration: 500,
+            duration: this.releaseTime / 2,
             currentTime: 0,
             playing: true,
             easingFunction: EasingFunction.EF_EASEOUTSINE,
@@ -146,7 +153,7 @@ export class MenuButton {
           TweenSequence.createOrReplace(this.button, {
             sequence: [
               {
-                duration: 500,
+                duration: this.releaseTime / 2,
                 currentTime: 0,
                 playing: true,
                 easingFunction: EasingFunction.EF_EASEOUTSINE,