remvoe utils library

src/progress/challenge.ts

@@ -31,7 +31,6 @@ export async function getActiveChallenges() {
     }
 
     activeChallenges = _activeChallenges
-    console.log('active challenge:', activeChallenges)
     return activeChallenges
   } catch (e) {
     console.log('getActiveChallenges. error:', e)

src/sdk.ts

@@ -1,4 +1,4 @@
-import { createInputSystem, IEngine, IInputSystem, Schemas } from '@dcl/sdk/ecs'
+import { createInputSystem, IEngine, IInputSystem, Schemas, createTweenSystem, TweenSystem } from '@dcl/sdk/ecs'
 import * as components from '@dcl/ecs/dist/components'
 import type players from '@dcl/sdk/players'
 import type { syncEntity as SyncEntityType } from '@dcl/sdk/network'
@@ -11,6 +11,7 @@ type ICache = {
   players: typeof players
   config: IOptions
   inputSystem: IInputSystem
+  tweenSystem: TweenSystem
   components: {
     Transform: ReturnType<typeof components.Transform>
     GltfContainer: ReturnType<typeof components.GltfContainer>
@@ -22,6 +23,8 @@ type ICache = {
     PointerEvents: ReturnType<typeof components.PointerEvents>
     Billboard: ReturnType<typeof components.Billboard>
     Tween: ReturnType<typeof components.Tween>
+    TweenSequence: ReturnType<typeof components.TweenSequence>
+    TweenState: ReturnType<typeof components.TweenState>
     PlayerIdentityData: ReturnType<typeof components.PlayerIdentityData>
     Player: typeof PlayerComponent
   }
@@ -32,12 +35,13 @@ const cache: ICache = {} as ICache
 /**
  * @internal
  */
-export function setSDK(value: Omit<ICache, 'inputSystem' | 'components'>) {
+export function setSDK(value: Omit<ICache, 'inputSystem' | 'components' | 'tweenSystem'>) {
   for (const key in value) {
     ;(cache as any)[key] = (value as any)[key]
   }
 
   cache.inputSystem = createInputSystem(value.engine)
+  cache.tweenSystem = createTweenSystem(value.engine)
 
   cache.components = {
     Transform: components.Transform(cache.engine),
@@ -50,6 +54,8 @@ export function setSDK(value: Omit<ICache, 'inputSystem' | 'components'>) {
     PointerEvents: components.PointerEvents(cache.engine),
     Billboard: components.Billboard(cache.engine),
     Tween: components.Tween(cache.engine),
+    TweenSequence: components.TweenSequence(cache.engine),
+    TweenState: components.TweenState(cache.engine),
     PlayerIdentityData: components.PlayerIdentityData(cache.engine),
     Player: value.engine.defineComponent('sdk-utils/player:player', {
       address: Schemas.String,

src/ui/button.ts

@@ -1,4 +1,5 @@
 import {
+  EasingFunction,
   Entity,
   InputAction,
   MaterialTransparencyMode,
@@ -8,7 +9,6 @@ import {
 } from '@dcl/sdk/ecs'
 import { Color4, Quaternion, Vector3 } from '@dcl/sdk/math'
 import { IconData, ButtonShapeData, uiAtlas, uiAssets } from './resources'
-import * as utils from '@dcl-sdk/utils'
 import { getSDK } from '../sdk'
 
 export class MenuButton {
@@ -33,7 +33,18 @@ export class MenuButton {
     const {
       engine,
       inputSystem,
-      components: { Material, MeshRenderer, Transform, GltfContainer, PointerEvents, VisibilityComponent }
+      components: {
+        Material,
+        MeshRenderer,
+        Transform,
+        GltfContainer,
+        PointerEvents,
+        VisibilityComponent,
+        Tween,
+        TweenSequence,
+        TweenState
+      },
+      tweenSystem
     } = getSDK()
 
     this.enabled = true
@@ -90,6 +101,26 @@ export class MenuButton {
     })
 
     engine.addSystem(() => {
+      // TODO: Why is not been triggered ?
+      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 (!TweenSequence.get(this.button).sequence.length) {
+          // Tween.deleteFrom(this.button)
+          TweenSequence.deleteFrom(this.button)
+          VisibilityComponent.getMutable(this.glowPlane).visible = false
+          //reset the emissive of the icon
+          if (this.enabled) {
+            Material.setPbrMaterial(this.icon, this.iconGlowMat)
+          } else {
+            Material.setPbrMaterial(this.icon, this.iconDisabledMat)
+          }
+        }
+      }
+
       if (inputSystem.isTriggered(InputAction.IA_POINTER, PointerEventType.PET_DOWN, this.button)) {
         if (this.enabled) {
           callback()
@@ -103,37 +134,26 @@ export class MenuButton {
             alphaTexture: Material.Texture.Common({ src: uiAtlas }),
             transparencyMode: MaterialTransparencyMode.MTM_ALPHA_TEST
           })
-
-          utils.tweens.stopTranslation(this.button)
           VisibilityComponent.getMutable(this.glowPlane).visible = true
           //tween button inward
-          utils.tweens.startTranslation(
-            this.button,
-            Vector3.create(0, 0, 0),
-            Vector3.create(0, -0.03, 0),
-            0.05,
-            utils.InterpolationType.EASEOUTSINE,
-            () => {
-              //when finished tween button outward
-
-              utils.tweens.startTranslation(
-                this.button,
-                Vector3.create(0, -0.03, 0),
-                Vector3.create(0, 0, 0),
-                0.3,
-                utils.InterpolationType.EASEOUTSINE,
-                () => {
-                  VisibilityComponent.getMutable(this.glowPlane).visible = false
-                  //reset the emissive of the icon
-                  if (this.enabled) {
-                    Material.setPbrMaterial(this.icon, this.iconGlowMat)
-                  } else {
-                    Material.setPbrMaterial(this.icon, this.iconDisabledMat)
-                  }
-                }
-              )
-            }
-          )
+          Tween.createOrReplace(this.button, {
+            duration: 500,
+            currentTime: 0,
+            playing: true,
+            easingFunction: EasingFunction.EF_EASEOUTSINE,
+            mode: Tween.Mode.Move({ start: Vector3.Zero(), end: Vector3.create(0, -0.03, 0) })
+          })
+          TweenSequence.createOrReplace(this.button, {
+            sequence: [
+              {
+                duration: 500,
+                currentTime: 0,
+                playing: true,
+                easingFunction: EasingFunction.EF_EASEOUTSINE,
+                mode: Tween.Mode.Move({ start: Vector3.create(0, -0.03, 0), end: Vector3.Zero() })
+              }
+            ]
+          })
         } else {
           this.playSound('mini-game-assets/sounds/wrong.mp3')
         }

src/ui/timer.ts

@@ -1,7 +1,7 @@
-import { Entity, TransformTypeWithOptionals } from '@dcl/sdk/ecs'
+import { EasingFunction, Entity, TransformTypeWithOptionals } from '@dcl/sdk/ecs'
 import { Counter3D } from './counter'
 import { Vector3 } from '@dcl/sdk/math'
-import * as utils from '@dcl-sdk/utils'
+
 import { getSDK } from '../sdk'
 
 export class Timer3D {
@@ -18,7 +18,8 @@ export class Timer3D {
   ) {
     const {
       engine,
-      components: { Transform }
+      tweenSystem,
+      components: { Transform, Tween }
     } = getSDK()
     this.root = engine.addEntity()
     Transform.create(this.root, transform)
@@ -48,6 +49,12 @@ export class Timer3D {
       )
       this.minutes.setNumber(0)
     }
+
+    engine.addSystem(() => {
+      if (tweenSystem.tweenCompleted(this.root)) {
+        Tween.deleteFrom(this.root)
+      }
+    })
   }
 
   setTimeSeconds(_seconds: number) {
@@ -59,9 +66,9 @@ export class Timer3D {
     this.seconds.setNumber(seconds)
   }
 
-  setTimeAnimated(_seconds: number, interpolation: utils.InterpolationType) {
+  setTimeAnimated(_seconds: number, interpolation: EasingFunction) {
     const {
-      components: { Transform }
+      components: { Transform, Tween }
     } = getSDK()
     const minutes = Math.floor(_seconds / 60)
     const remainingSeconds = _seconds % 60
@@ -77,7 +84,12 @@ export class Timer3D {
     this.seconds.setNumber(seconds)
 
     if (secondsChanged) {
-      utils.tweens.startScaling(this.root, Vector3.Zero(), Transform.get(this.root).scale, 0.4, interpolation)
+      Tween.createOrReplace(this.root, {
+        duration: 400,
+        currentTime: 0,
+        easingFunction: interpolation,
+        mode: Tween.Mode.Scale({ start: Vector3.Zero(), end: Transform.get(this.root).scale })
+      })
     }
   }
   hide() {