fix: stop using async in lifespan, rename particle example to lifespan

Author: lajbel

examples/particle.js renamed to examples/lifespan.js

@@ -1,6 +1,5 @@
 // @ts-check
 
-// Particle spawning
 
 kaplay();
 
@@ -18,26 +17,25 @@ sprites.forEach((spr) => {
 
 setGravity(800);
 
-// Spawn one particle every 0.1 second
-loop(0.1, () => {
-    // TODO: they are resolving collision with each other for some reason
-    // Compose particle properties with components
+// Spawn one object every 0.1 second
+loop(0.2, () => {
+    // Compose object properties with components
     const item = add([
         pos(mousePos()),
         sprite(choose(sprites)),
         anchor("center"),
         scale(rand(0.5, 1)),
         area({ collisionIgnore: ["particle"] }),
         body(),
-        lifespan(1, { fade: 0.5 }),
+        // lifespan() comp destroys the object after desired seconds
+        lifespan(1, {
+            // it will fade after 0.5 seconds
+            fade: 0.5
+        }),
         opacity(1),
         move(choose([LEFT, RIGHT]), rand(60, 240)),
         "particle",
     ]);
 
-    item.onCollide("particle", (p) => {
-        console.log("dea");
-    });
-
     item.jump(rand(320, 640));
 });

src/components/misc/lifespan.ts

@@ -24,18 +24,23 @@ export function lifespan(time: number, opt: LifespanCompOpt = {}): EmptyComp {
         id: "lifespan",
         require: ["opacity"],
         async add(this: GameObj<OpacityComp>) {
-            await _k.game.root.wait(time);
-            this.opacity = this.opacity ?? 1;
-            if (fade > 0) {
-                await _k.game.root.tween(
-                    this.opacity,
-                    0,
-                    fade,
-                    (a) => this.opacity = a,
-                    easings.linear,
-                );
-            }
-            this.destroy();
+            _k.game.root.wait(time, () => {
+                this.opacity = this.opacity ?? 1;
+                if (fade > 0) {
+                    _k.game.root.tween(
+                        this.opacity,
+                        0,
+                        fade,
+                        (a) => this.opacity = a,
+                        easings.linear,
+                    ).onEnd(() => {
+                        this.destroy();
+                    });
+                }
+                else {
+                    this.destroy();
+                }
+            });
         },
     };
 }