From 2ccb23f298310f5a686605e7bb609560e14cd8e0 Mon Sep 17 00:00:00 2001 From: Gonzalo DCL Date: Tue, 13 Aug 2024 16:13:39 -0300 Subject: [PATCH] remvoe utils library --- src/progress/challenge.ts | 1 - src/sdk.ts | 10 ++++- src/ui/button.ts | 82 ++++++++++++++++++++++++--------------- src/ui/timer.ts | 24 +++++++++--- 4 files changed, 77 insertions(+), 40 deletions(-) diff --git a/src/progress/challenge.ts b/src/progress/challenge.ts index 3af059f..ec0bee9 100644 --- a/src/progress/challenge.ts +++ b/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) diff --git a/src/sdk.ts b/src/sdk.ts index 89def82..2b06972 100644 --- a/src/sdk.ts +++ b/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 GltfContainer: ReturnType @@ -22,6 +23,8 @@ type ICache = { PointerEvents: ReturnType Billboard: ReturnType Tween: ReturnType + TweenSequence: ReturnType + TweenState: ReturnType PlayerIdentityData: ReturnType Player: typeof PlayerComponent } @@ -32,12 +35,13 @@ const cache: ICache = {} as ICache /** * @internal */ -export function setSDK(value: Omit) { +export function setSDK(value: Omit) { 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) { 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, diff --git a/src/ui/button.ts b/src/ui/button.ts index 3f8abb5..f17c76d 100644 --- a/src/ui/button.ts +++ b/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') } diff --git a/src/ui/timer.ts b/src/ui/timer.ts index 7701df5..68d2793 100644 --- a/src/ui/timer.ts +++ b/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() {