destroy-the-text 2.0.2 → 2.0.3

package/dist/AnimationManager.d.ts

@@ -0,0 +1,19 @@
+interface Animatable {
+    update(): void;
+    isAlive(): boolean;
+}
+declare class AnimationManagerSingleton {
+    private static instance;
+    private objects;
+    private animationId;
+    private isRunning;
+    private constructor();
+    static getInstance(): AnimationManagerSingleton;
+    register(obj: Animatable): void;
+    private start;
+    private loop;
+    getCount(): number;
+}
+export declare const AnimationManager: AnimationManagerSingleton;
+export {};
+//# sourceMappingURL=AnimationManager.d.ts.map

package/dist/AnimationManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationManager.d.ts","sourceRoot":"","sources":["../src/AnimationManager.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAClB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,OAAO,CAAC;CACpB;AAED,cAAM,yBAAyB;IAC7B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA4B;IACnD,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO;IAEP,MAAM,CAAC,WAAW,IAAI,yBAAyB;IAO/C,QAAQ,CAAC,GAAG,EAAE,UAAU;IAOxB,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,IAAI,CAiBV;IAEF,QAAQ,IAAI,MAAM;CAGnB;AAED,eAAO,MAAM,gBAAgB,2BAA0C,CAAC"}

package/dist/AnimationManager.js

@@ -0,0 +1,46 @@
+// @ts-ignore - jQuery require
+const $ = require("jquery");
+class AnimationManagerSingleton {
+    constructor() {
+        this.objects = [];
+        this.animationId = null;
+        this.isRunning = false;
+        this.loop = () => {
+            // Remove dead objects
+            this.objects = this.objects.filter((obj) => obj.isAlive());
+            // Update all objects in one pass
+            for (let i = 0; i < this.objects.length; i++) {
+                this.objects[i].update();
+            }
+            // Stop if no more objects
+            if (this.objects.length === 0) {
+                this.isRunning = false;
+                this.animationId = null;
+                return;
+            }
+            this.animationId = requestAnimationFrame(this.loop);
+        };
+    }
+    static getInstance() {
+        if (!AnimationManagerSingleton.instance) {
+            AnimationManagerSingleton.instance = new AnimationManagerSingleton();
+        }
+        return AnimationManagerSingleton.instance;
+    }
+    register(obj) {
+        this.objects.push(obj);
+        if (!this.isRunning) {
+            this.start();
+        }
+    }
+    start() {
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        this.loop();
+    }
+    getCount() {
+        return this.objects.length;
+    }
+}
+export const AnimationManager = AnimationManagerSingleton.getInstance();

package/dist/Letra.d.ts

@@ -4,8 +4,11 @@ export declare class Letra {
     private container;
     private direction;
     private gravitySpeed;
+    private lifespan;
+    private startTime;
     constructor(x: number, y: number, container: any);
-    private gravity;
+    update(): void;
+    isAlive(): boolean;
     private getPositiveOrNegative;
 }
 //# sourceMappingURL=Letra.d.ts.map

package/dist/Letra.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Letra.d.ts","sourceRoot":"","sources":["../src/Letra.ts"],"names":[],"mappings":"AAAA,qBAAa,KAAK;IACd,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;gBAErB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG;IA0BhD,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,qBAAqB;CAGhC"}
+{"version":3,"file":"Letra.d.ts","sourceRoot":"","sources":["../src/Letra.ts"],"names":[],"mappings":"AAKA,qBAAa,KAAK;IACd,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,SAAS,CAAsB;gBAE3B,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG;IAoBhD,MAAM;IAQN,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,qBAAqB;CAGhC"}

package/dist/Letra.js

@@ -1,8 +1,11 @@
+import { AnimationManager } from "./AnimationManager";
+// @ts-ignore - jQuery require
+const $ = require("jquery");
 export class Letra {
     constructor(x, y, container) {
         this.gravitySpeed = 0;
-        // @ts-ignore - jQuery require
-        const $ = require("jquery");
+        this.lifespan = 3000; // 3 seconds
+        this.startTime = Date.now();
         this.container = container.clone();
         this.container.removeClass("oculto");
         this.container.addClass("absolute");
@@ -12,22 +15,21 @@ export class Letra {
         this.container.css("font-size", container.parent().css("font-size"));
         this.container.css("font-weight", container.parent().css("font-weight"));
         this.container.css("font-family", container.parent().css("font-family"));
-        this.container.css("left", x + "px");
-        this.container.css("top", y + "px");
+        this.container.css("transform", `translate(${x}px, ${y}px)`);
+        this.container.css("will-change", "transform");
         $("body").append(this.container);
-        const interval = setInterval(() => this.gravity(), 10);
-        setTimeout(() => {
-            clearInterval(interval);
-            this.container.remove();
-        }, 3000);
         this.direction = { x: this.getPositiveOrNegative() * Math.random(), y: 0 };
+        // Register with global animation manager
+        AnimationManager.register(this);
     }
-    gravity() {
-        this.container.css("left", this.x + "px");
-        this.container.css("top", this.y + "px");
+    update() {
         this.gravitySpeed += 0.2;
         this.y += this.gravitySpeed;
         this.x += this.direction.x;
+        this.container.css("transform", `translate(${this.x}px, ${this.y}px)`);
+    }
+    isAlive() {
+        return Date.now() - this.startTime < this.lifespan;
     }
     getPositiveOrNegative() {
         return Math.floor(Math.random() * 2) === 0 ? -1 : 1;

package/dist/Pixel.d.ts

@@ -4,11 +4,13 @@ export declare class Pixel {
     private container;
     private direction;
     private gravitySpeed;
+    private lifespan;
+    private startTime;
     static activePixels: Pixel[];
     static MAX_PIXELS: number;
-    private interval;
     constructor(x: number, y: number, color: string);
-    private gravity;
+    update(): void;
+    isAlive(): boolean;
     private getPositiveOrNegative;
     destroy(): void;
 }

package/dist/Pixel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pixel.d.ts","sourceRoot":"","sources":["../src/Pixel.ts"],"names":[],"mappings":"AAAA,qBAAa,KAAK;IACd,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,CAAM;IAClC,MAAM,CAAC,UAAU,SAAO;IACxB,OAAO,CAAC,QAAQ,CAAM;gBAEV,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAyB/C,OAAO,CAAC,OAAO;IAmBf,OAAO,CAAC,qBAAqB;IAItB,OAAO;CAIjB"}
+{"version":3,"file":"Pixel.d.ts","sourceRoot":"","sources":["../src/Pixel.ts"],"names":[],"mappings":"AAKA,qBAAa,KAAK;IACd,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,SAAS,CAAsB;IACvC,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,CAAM;IAClC,MAAM,CAAC,UAAU,SAAO;gBAEZ,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAwB/C,MAAM;IAgBN,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,qBAAqB;IAItB,OAAO;CAGjB"}

package/dist/Pixel.js

@@ -1,26 +1,30 @@
+import { AnimationManager } from "./AnimationManager";
+// @ts-ignore - jQuery require
+const $ = require("jquery");
 export class Pixel {
     constructor(x, y, color) {
         this.gravitySpeed = 0;
+        this.lifespan = 3000; // 3 seconds
+        this.startTime = Date.now();
         const length = 25;
         this.x = x;
         this.y = y + this.getPositiveOrNegative() * Math.floor(Math.random() * length);
-        // @ts-ignore - jQuery require
-        const $ = require("jquery");
         this.container = $(document.createElement("div"));
         this.container.addClass("pixel");
         this.container.css("background", color);
-        this.container.css("left", this.x + "px");
-        this.container.css("top", this.y + "px");
+        this.container.css("transform", `translate(${this.x}px, ${this.y}px)`);
+        this.container.css("will-change", "transform");
         $("body").append(this.container);
-        this.interval = setInterval(() => this.gravity(), 10);
         this.direction = { x: this.getPositiveOrNegative() * Math.random(), y: 0 };
         Pixel.activePixels.push(this);
         if (Pixel.activePixels.length > Pixel.MAX_PIXELS) {
             const oldPixel = Pixel.activePixels.shift();
             oldPixel?.destroy();
         }
+        // Register with global animation manager
+        AnimationManager.register(this);
     }
-    gravity() {
+    update() {
         this.gravitySpeed += 0.2;
         this.y += this.gravitySpeed;
         this.x += this.direction.x;
@@ -29,17 +33,17 @@ export class Pixel {
             this.y = window.innerHeight - 10;
             this.gravitySpeed = 0;
             this.direction.x = 0;
-            clearInterval(this.interval);
             this.container.css("opacity", "0.8");
         }
-        this.container.css("left", this.x + "px");
-        this.container.css("top", this.y + "px");
+        this.container.css("transform", `translate(${this.x}px, ${this.y}px)`);
+    }
+    isAlive() {
+        return Date.now() - this.startTime < this.lifespan;
     }
     getPositiveOrNegative() {
         return Math.floor(Math.random() * 2) === 0 ? -1 : 1;
     }
     destroy() {
-        clearInterval(this.interval);
         this.container.remove();
     }
 }

package/dist/Spark.d.ts

@@ -5,9 +5,11 @@ export declare class Spark {
     private direction;
     private gravitySpeed;
     static activeSparks: Spark[];
-    private interval;
+    private lifespan;
+    private startTime;
     constructor(x: number, y: number);
-    private gravity;
+    update(): void;
+    isAlive(): boolean;
     destroy(): void;
 }
 //# sourceMappingURL=Spark.d.ts.map

package/dist/Spark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spark.d.ts","sourceRoot":"","sources":["../src/Spark.ts"],"names":[],"mappings":"AAGA,qBAAa,KAAK;IAChB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,CAAM;IAClC,OAAO,CAAC,QAAQ,CAAM;gBAEV,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAkChC,OAAO,CAAC,OAAO;IASR,OAAO;CAQf"}
+{"version":3,"file":"Spark.d.ts","sourceRoot":"","sources":["../src/Spark.ts"],"names":[],"mappings":"AAKA,qBAAa,KAAK;IAChB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,CAAC,CAAS;IAClB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,YAAY,CAAa;IACjC,MAAM,CAAC,YAAY,EAAE,KAAK,EAAE,CAAM;IAClC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAsB;gBAE3B,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAkChC,MAAM;IAQN,OAAO,IAAI,OAAO;IAIX,OAAO;CAOf"}

package/dist/Spark.js

@@ -1,25 +1,27 @@
+import { AnimationManager } from "./AnimationManager";
 // @ts-ignore - jQuery require
 const $ = require("jquery");
 export class Spark {
     constructor(x, y) {
         this.gravitySpeed = 0;
+        this.startTime = Date.now();
         this.x = x;
         this.y = y;
+        this.lifespan = 200 + Math.random() * 200;
         this.container = $(document.createElement("div"));
         this.container.addClass("pixel");
         const colors = ["#FFD700", "#FFA500", "#FF4500", "#FFFF00"];
         const color = colors[Math.floor(Math.random() * colors.length)];
         this.container.css({
             background: color,
-            left: x + "px",
-            top: y + "px",
             width: "3px",
             height: "3px",
             boxShadow: `0 0 4px ${color}`,
             zIndex: 100,
+            transform: `translate(${x}px, ${y}px)`,
+            "will-change": "transform",
         });
         $("body").append(this.container);
-        this.interval = setInterval(() => this.gravity(), 10);
         const angle = Math.random() * Math.PI * 2;
         const speed = 2 + Math.random() * 3;
         this.direction = {
@@ -27,17 +29,19 @@ export class Spark {
             y: Math.sin(angle) * speed,
         };
         Spark.activeSparks.push(this);
-        setTimeout(() => this.destroy(), 200 + Math.random() * 200);
+        // Register with global animation manager
+        AnimationManager.register(this);
     }
-    gravity() {
+    update() {
         this.gravitySpeed += 0.1;
         this.y += this.gravitySpeed + this.direction.y;
         this.x += this.direction.x;
-        this.container.css("left", this.x + "px");
-        this.container.css("top", this.y + "px");
+        this.container.css("transform", `translate(${this.x}px, ${this.y}px)`);
+    }
+    isAlive() {
+        return Date.now() - this.startTime < this.lifespan;
     }
     destroy() {
-        clearInterval(this.interval);
         this.container.remove();
         const index = Spark.activeSparks.indexOf(this);
         if (index > -1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "destroy-the-text",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Destroy any text of your website. Easy to use. And very useless",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",