destroy-the-text 1.0.11 → 2.0.0

package/README.md

@@ -1,38 +1,78 @@
-## What is this?
-
-Destroy any text of your website. Easy to use. And very useless
-
-## Installation
-
-`npm i destroy-the-text --save`
-
-Simple example:
-
-```
-new InteractiveText({
-    textId: "example_1",
-    arma: Tool.gun
-});
-```
-
-
-## Options
-
-```
-new InteractiveText({
-    textId: "example_2",
-    text: ["Example with special hand", "Example with big gun"],
-    armas: [Tool.specialHand, Tool.bigGun]
-});
-
-```
-
-
-```
-new InteractiveText({
-    textId: "example_3",
-    arma: Tool.specialHand,
-    callbackEnd: () => location.href = "./"
-});
-
-```
+# destroy-the-text
+
+Destroy any text of your website. Easy to use. And very useless.
+
+## Installation
+
+```bash
+npm i destroy-the-text --save
+```
+
+## Basic Usage
+
+```javascript
+import { DestroyTheText, Tool } from "destroy-the-text";
+
+// Simple example
+new DestroyTheText({
+    textId: "example_1",
+    arma: Tool.gun
+});
+```
+
+## Options
+
+```javascript
+new DestroyTheText({
+    textId: "example_2",
+    text: ["Example with special hand", "Example with big gun"],
+    armas: [Tool.specialHand, Tool.bigGun]
+});
+```
+
+```javascript
+new DestroyTheText({
+    textId: "example_3",
+    arma: Tool.specialHand,
+    callbackEnd: () => location.href = "./"
+});
+```
+
+## Tools
+
+- **Gun** (`Tool.gun`) - Click to shoot letters with pixel effects
+- **BigGun** (`Tool.bigGun`) - Hover to destroy letters automatically
+- **Hand** (`Tool.hand`) - Click to grab letters and make them fall
+- **SpecialHand** (`Tool.specialHand`) - Hover to grab letters and make them fall
+
+## API
+
+### DestroyTheText
+
+```typescript
+new DestroyTheText(options: DestroyTheTextOptions)
+```
+
+### DestroyTheTextOptions
+
+```typescript
+{
+  textId: string;           // ID of the element to destroy
+  arma: Tool;               // Tool to use for destruction
+  text?: string[];          // Array of sequential texts
+  armas?: Tool[];           // Array of sequential tools
+  activate?: () => void;    // Callback when destruction starts
+  callbackEnd?: () => void; // Callback when destruction ends
+}
+```
+
+### DTTSounds
+
+```typescript
+DTTSounds.setGun(paths: string[])      // Set gun sound effects
+DTTSounds.setEffects(paths: string[])  // Set hand sound effects
+```
+
+## License
+
+MIT

package/dist/DTTSounds.d.ts

@@ -0,0 +1,9 @@
+export declare const DTTSounds: {
+    guns: string[];
+    effects: string[];
+    setGun(paths: string[]): void;
+    setEffects(paths: string[]): void;
+    playGun(): void;
+    playEffect(): void;
+};
+//# sourceMappingURL=DTTSounds.d.ts.map

package/dist/DTTSounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTTSounds.d.ts","sourceRoot":"","sources":["../src/DTTSounds.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;UACN,MAAM,EAAE;aACL,MAAM,EAAE;kBAET,MAAM,EAAE;sBAMJ,MAAM,EAAE;;;CA2B7B,CAAC"}

package/dist/DTTSounds.js

@@ -0,0 +1,38 @@
+export const DTTSounds = {
+    guns: [],
+    effects: [],
+    setGun(paths) {
+        paths.forEach(path => {
+            this.guns.push(path);
+        });
+    },
+    setEffects(paths) {
+        paths.forEach(path => {
+            this.effects.push(path);
+        });
+    },
+    playGun() {
+        if (this.guns.length === 0)
+            return;
+        const randomIndex = Math.floor(Math.random() * this.guns.length);
+        try {
+            new Audio(this.guns[randomIndex]).play();
+        }
+        catch (e) {
+            console.warn('Could not play gun sound:', e);
+        }
+    },
+    playEffect() {
+        if (this.effects.length === 0)
+            return;
+        const randomIndex = Math.floor(Math.random() * this.effects.length);
+        try {
+            const audio = new Audio(this.effects[randomIndex]);
+            audio.volume = 0.3;
+            audio.play();
+        }
+        catch (e) {
+            console.warn('Could not play effect sound:', e);
+        }
+    }
+};

package/dist/DestroyTheText.d.ts

@@ -0,0 +1,19 @@
+import { DestroyTheTextOptions } from "./types";
+export declare class DestroyTheText {
+    private container;
+    private callback;
+    private started;
+    private count;
+    private callbackEnd;
+    private listWords;
+    private text;
+    private arma;
+    private originalTagName;
+    private originalClass;
+    private armas;
+    constructor(params: DestroyTheTextOptions);
+    private buildLetters;
+    private attachEventListener;
+    private destrozar;
+}
+//# sourceMappingURL=DestroyTheText.d.ts.map

package/dist/DestroyTheText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DestroyTheText.d.ts","sourceRoot":"","sources":["../src/DestroyTheText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAQtD,qBAAa,cAAc;IACvB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,WAAW,CAA0C;IAC7D,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,IAAI,CAAqB;IACjC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,KAAK,CAA4B;gBAE7B,MAAM,EAAE,qBAAqB;IAuCzC,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,SAAS;CAiEpB"}

package/dist/DestroyTheText.js

@@ -0,0 +1,156 @@
+import { Tool } from "./types";
+import { Pixel } from "./Pixel";
+import { Letra } from "./Letra";
+import { DTTSounds } from "./DTTSounds";
+// @ts-ignore - jQuery require
+const $ = require("jquery");
+export class DestroyTheText {
+    constructor(params) {
+        this.started = false;
+        this.count = 0;
+        this.listWords = [];
+        this.originalTagName = "";
+        this.originalClass = "";
+        this.callback = params.activate;
+        this.callbackEnd = params.callbackEnd;
+        const elem = $("#" + params.textId)[0];
+        if (elem === undefined) {
+            console.log("Element " + params.textId + " does not exist");
+            return;
+        }
+        this.originalTagName = elem.tagName;
+        this.originalClass = elem.className;
+        this.container = $(document.createElement("div"));
+        this.container.attr("id", params.textId);
+        this.container.addClass(this.originalClass);
+        this.arma = params.arma;
+        this.armas = params.armas;
+        if (this.armas !== undefined) {
+            this.arma = this.armas[0];
+            this.armas.shift();
+        }
+        let text = $("#" + params.textId).html();
+        if (params.text !== undefined && params.text.length !== 0) {
+            this.text = params.text;
+            text = params.text[0];
+            params.text.shift();
+        }
+        this.container.css("text-align", $(elem).css("text-align"));
+        this.container.css("margin", $(elem).css("margin"));
+        this.buildLetters(text, elem);
+        $("#" + params.textId).replaceWith(this.container);
+    }
+    buildLetters(text, elem) {
+        let countWords = 0;
+        let lastWord = $(document.createElement("div"));
+        lastWord.css("display", "inline-block");
+        lastWord.attr("id", "word" + countWords);
+        for (let i = 0; i < text.length; i++) {
+            const letter = $(document.createElement(this.originalTagName));
+            this.listWords.push({ id: i, letter });
+            letter.html(text[i]);
+            letter.css("color", elem.style.color);
+            const fontSize = $(elem).css("font-size");
+            letter.css("font-size", fontSize);
+            lastWord.append(letter);
+            if (!$(lastWord.attr("id")).length) {
+                this.container.append(lastWord);
+            }
+            letter.addClass("letterEffect");
+            if (text[i] === " ") {
+                letter.html("&nbsp;");
+                countWords++;
+                lastWord = $(document.createElement("div"));
+                lastWord.attr("id", "word" + countWords);
+                lastWord.css("display", "inline-block");
+                continue;
+            }
+            this.count++;
+            this.attachEventListener(letter);
+        }
+    }
+    attachEventListener(letter) {
+        switch (this.arma) {
+            case Tool.gun:
+                letter.click((e) => {
+                    this.destrozar(letter, e);
+                });
+                break;
+            case Tool.bigGun:
+                $(letter).mouseenter((e) => {
+                    this.destrozar(letter, e);
+                });
+                break;
+            case Tool.hand:
+                letter.click((e) => {
+                    this.destrozar(letter, e, Tool.hand);
+                });
+                break;
+            case Tool.all:
+            case Tool.specialHand:
+                $(letter).mouseenter((e) => {
+                    this.destrozar(letter, e, Tool.hand);
+                });
+                break;
+        }
+    }
+    destrozar(letter, e, arma) {
+        if (!this.started) {
+            this.started = true;
+            if (this.callback) {
+                this.callback();
+            }
+        }
+        if (letter.hasClass("oculto")) {
+            return;
+        }
+        $("#mouse").addClass("mouseOver");
+        setTimeout(() => {
+            $("#mouse").removeClass("mouseOver");
+        }, 100);
+        const puntos = $("#puntos");
+        if (puntos.length) {
+            puntos.html(+puntos.html() + 1);
+        }
+        if (this.count === 1) {
+            if (this.callbackEnd) {
+                if (arma === Tool.hand) {
+                    setTimeout(() => {
+                        this.callbackEnd(this.container);
+                    }, 1500);
+                }
+                else {
+                    this.callbackEnd(this.container);
+                }
+            }
+            if (this.text !== undefined && this.text.length !== 0) {
+                const newContainer = $(document.createElement(this.originalTagName));
+                let newText = "";
+                newContainer.html(newText);
+                newContainer.addClass(this.originalClass);
+                newContainer.html(this.text[0]);
+                newContainer.attr("id", this.container.attr("id"));
+                this.container.replaceWith(newContainer);
+                new DestroyTheText({
+                    textId: this.container.attr("id"),
+                    text: this.text,
+                    arma: this.arma,
+                    armas: this.armas,
+                });
+            }
+        }
+        this.count--;
+        letter.addClass("oculto");
+        if (arma === Tool.hand) {
+            new Letra(e.pageX, e.pageY, letter);
+            DTTSounds.playEffect();
+        }
+        else {
+            const n = 3;
+            for (let j = 0; j < n; j++) {
+                new Pixel(e.pageX, e.pageY, letter.parent().css("color"));
+            }
+            DTTSounds.playGun();
+        }
+    }
+}

package/dist/Letra.d.ts

@@ -0,0 +1,11 @@
+export declare class Letra {
+    private x;
+    private y;
+    private container;
+    private direction;
+    private gravitySpeed;
+    constructor(x: number, y: number, container: any);
+    private gravity;
+    private getPositiveOrNegative;
+}
+//# sourceMappingURL=Letra.d.ts.map

package/dist/Letra.d.ts.map

@@ -0,0 +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;IAiChD,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,qBAAqB;CAGhC"}

package/dist/Letra.js

@@ -0,0 +1,40 @@
+export class Letra {
+    constructor(x, y, container) {
+        this.gravitySpeed = 0;
+        // @ts-ignore - jQuery require
+        const $ = require("jquery");
+        this.container = container.clone();
+        this.container.removeClass("oculto");
+        this.container.addClass("absolute");
+        this.x = x;
+        this.y = y;
+        this.container.css("color", container.parent().css("color"));
+        this.container.css("left", this.x + "px");
+        this.container.css("top", this.y + "px");
+        let fontSize = container.css("font-size");
+        if (fontSize === undefined) {
+            fontSize = container.parent().css("font-size");
+        }
+        if (fontSize !== undefined) {
+            this.container.css("font-size", fontSize);
+            this.container.css("margin-top", "-" + fontSize);
+        }
+        $("body").append(this.container);
+        const interval = setInterval(() => this.gravity(), 1);
+        setTimeout(() => {
+            clearInterval(interval);
+            this.container.remove();
+        }, 3000);
+        this.direction = { x: this.getPositiveOrNegative() * Math.random(), y: 0 };
+    }
+    gravity() {
+        this.container.css("left", this.x + "px");
+        this.container.css("top", this.y + "px");
+        this.gravitySpeed += 0.01;
+        this.y += this.gravitySpeed;
+        this.x += this.direction.x;
+    }
+    getPositiveOrNegative() {
+        return Math.floor(Math.random() * 2) === 0 ? -1 : 1;
+    }
+}

package/dist/Pixel.d.ts

@@ -0,0 +1,11 @@
+export declare class Pixel {
+    private x;
+    private y;
+    private container;
+    private direction;
+    private gravitySpeed;
+    constructor(x: number, y: number, color: string);
+    private gravity;
+    private getPositiveOrNegative;
+}
+//# sourceMappingURL=Pixel.d.ts.map

package/dist/Pixel.d.ts.map

@@ -0,0 +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;gBAErB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAuB/C,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,qBAAqB;CAGhC"}

package/dist/Pixel.js

@@ -0,0 +1,32 @@
+export class Pixel {
+    constructor(x, y, color) {
+        this.gravitySpeed = 0;
+        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");
+        $("body").append(this.container);
+        const interval = setInterval(() => this.gravity(), 1);
+        setTimeout(() => {
+            clearInterval(interval);
+            this.container.remove();
+        }, 3000);
+        this.direction = { x: this.getPositiveOrNegative() * Math.random(), y: 0 };
+    }
+    gravity() {
+        this.container.css("left", this.x + "px");
+        this.container.css("top", this.y + "px");
+        this.gravitySpeed += 0.01;
+        this.y += this.gravitySpeed;
+        this.x += this.direction.x;
+    }
+    getPositiveOrNegative() {
+        return Math.floor(Math.random() * 2) === 0 ? -1 : 1;
+    }
+}

package/dist/index.d.ts

@@ -1,22 +1,6 @@
-export declare enum Tool {
-    gun = 0,
-    bigGun = 1,
-    hand = 2,
-    specialHand = 3,
-    all = 4
-}
-export declare class DestroyTheText {
-    private container;
-    private callback;
-    private started;
-    private count;
-    private callbackEnd;
-    private listWords;
-    private text;
-    private arma;
-    private originalTagName;
-    private originalClass;
-    private armas;
-    constructor(params: any);
-    private destrozar;
-}
+export { DestroyTheText } from "./DestroyTheText";
+export { Tool } from "./types";
+export type { DestroyTheTextOptions } from "./types";
+export { DTTSounds } from "./DTTSounds";
+export { addStyles } from "./styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC"}