destroy-the-text 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,6 +14,8 @@ export declare class DestroyTheText {
14
14
  constructor(params: DestroyTheTextOptions);
15
15
  private buildLetters;
16
16
  private attachEventListener;
17
+ private shakeScreen;
18
+ private triggerFlash;
17
19
  private destrozar;
18
20
  }
19
21
  //# sourceMappingURL=DestroyTheText.d.ts.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"DestroyTheText.d.ts","sourceRoot":"","sources":["../src/DestroyTheText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAStD,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,WAAW;IAcnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,SAAS;CAgFpB"}
@@ -1,6 +1,7 @@
1
1
  import { Tool } from "./types";
2
2
  import { Pixel } from "./Pixel";
3
3
  import { Letra } from "./Letra";
4
+ import { Spark } from "./Spark";
4
5
  import { DTTSounds } from "./DTTSounds";
5
6
  // @ts-ignore - jQuery require
6
7
  const $ = require("jquery");
@@ -94,9 +95,39 @@ export class DestroyTheText {
94
95
  break;
95
96
  }
96
97
  }
98
+ shakeScreen(intensity) {
99
+ const target = $("section[class*='hero']").first();
100
+ const elementToShake = target.length ? target : $("body");
101
+ const x = (Math.random() - 0.5) * intensity;
102
+ const y = (Math.random() - 0.5) * intensity;
103
+ elementToShake.css("transform", `translate(${x}px, ${y}px)`);
104
+ setTimeout(() => {
105
+ elementToShake.css("transform", "translate(0, 0)");
106
+ }, 50);
107
+ }
108
+ triggerFlash() {
109
+ const flash = $(document.createElement("div"));
110
+ flash.css({
111
+ position: "fixed",
112
+ top: 0,
113
+ left: 0,
114
+ width: "100vw",
115
+ height: "100vh",
116
+ backgroundColor: "white",
117
+ opacity: 0.05,
118
+ zIndex: 9999,
119
+ pointerEvents: "none",
120
+ });
121
+ $("body").append(flash);
122
+ setTimeout(() => {
123
+ flash.remove();
124
+ }, 50);
125
+ }
97
126
  destrozar(letter, e, arma) {
127
+ let isFirstShot = false;
98
128
  if (!this.started) {
99
129
  this.started = true;
130
+ isFirstShot = true;
100
131
  if (this.callback) {
101
132
  this.callback();
102
133
  }
@@ -104,6 +135,12 @@ export class DestroyTheText {
104
135
  if (letter.hasClass("oculto")) {
105
136
  return;
106
137
  }
138
+ // Game Juice: Screen Shake
139
+ // Don't shake on first shot (avoids layout shift) and don't shake for Hand weapons
140
+ if (!isFirstShot && arma !== Tool.hand && arma !== Tool.specialHand) {
141
+ this.shakeScreen(arma === Tool.bigGun ? 5 : 10);
142
+ this.triggerFlash();
143
+ }
107
144
  $("#mouse").addClass("mouseOver");
108
145
  setTimeout(() => {
109
146
  $("#mouse").removeClass("mouseOver");
@@ -150,6 +187,10 @@ export class DestroyTheText {
150
187
  for (let j = 0; j < n; j++) {
151
188
  new Pixel(e.pageX, e.pageY, letter.parent().css("color"));
152
189
  }
190
+ // Sparks
191
+ for (let k = 0; k < 5; k++) {
192
+ new Spark(e.pageX, e.pageY);
193
+ }
153
194
  DTTSounds.playGun();
154
195
  }
155
196
  }
@@ -1 +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;IAiChD,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,qBAAqB;CAGhC"}
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"}
package/dist/Letra.js CHANGED
@@ -7,20 +7,15 @@ export class Letra {
7
7
  this.container.removeClass("oculto");
8
8
  this.container.addClass("absolute");
9
9
  this.x = x;
10
- this.y = y;
10
+ this.y = y - 20;
11
11
  this.container.css("color", container.parent().css("color"));
12
- this.container.css("left", this.x + "px");
13
- this.container.css("top", this.y + "px");
14
- let fontSize = container.css("font-size");
15
- if (fontSize === undefined) {
16
- fontSize = container.parent().css("font-size");
17
- }
18
- if (fontSize !== undefined) {
19
- this.container.css("font-size", fontSize);
20
- this.container.css("margin-top", "-" + fontSize);
21
- }
12
+ this.container.css("font-size", container.parent().css("font-size"));
13
+ this.container.css("font-weight", container.parent().css("font-weight"));
14
+ this.container.css("font-family", container.parent().css("font-family"));
15
+ this.container.css("left", x + "px");
16
+ this.container.css("top", y + "px");
22
17
  $("body").append(this.container);
23
- const interval = setInterval(() => this.gravity(), 1);
18
+ const interval = setInterval(() => this.gravity(), 10);
24
19
  setTimeout(() => {
25
20
  clearInterval(interval);
26
21
  this.container.remove();
@@ -30,7 +25,7 @@ export class Letra {
30
25
  gravity() {
31
26
  this.container.css("left", this.x + "px");
32
27
  this.container.css("top", this.y + "px");
33
- this.gravitySpeed += 0.01;
28
+ this.gravitySpeed += 0.2;
34
29
  this.y += this.gravitySpeed;
35
30
  this.x += this.direction.x;
36
31
  }
package/dist/Pixel.d.ts CHANGED
@@ -4,8 +4,12 @@ export declare class Pixel {
4
4
  private container;
5
5
  private direction;
6
6
  private gravitySpeed;
7
+ static activePixels: Pixel[];
8
+ static MAX_PIXELS: number;
9
+ private interval;
7
10
  constructor(x: number, y: number, color: string);
8
11
  private gravity;
9
12
  private getPositiveOrNegative;
13
+ destroy(): void;
10
14
  }
11
15
  //# sourceMappingURL=Pixel.d.ts.map
@@ -1 +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;gBAErB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAuB/C,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,qBAAqB;CAGhC"}
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"}
package/dist/Pixel.js CHANGED
@@ -12,21 +12,36 @@ export class Pixel {
12
12
  this.container.css("left", this.x + "px");
13
13
  this.container.css("top", this.y + "px");
14
14
  $("body").append(this.container);
15
- const interval = setInterval(() => this.gravity(), 1);
16
- setTimeout(() => {
17
- clearInterval(interval);
18
- this.container.remove();
19
- }, 3000);
15
+ this.interval = setInterval(() => this.gravity(), 10);
20
16
  this.direction = { x: this.getPositiveOrNegative() * Math.random(), y: 0 };
17
+ Pixel.activePixels.push(this);
18
+ if (Pixel.activePixels.length > Pixel.MAX_PIXELS) {
19
+ const oldPixel = Pixel.activePixels.shift();
20
+ oldPixel?.destroy();
21
+ }
21
22
  }
22
23
  gravity() {
23
- this.container.css("left", this.x + "px");
24
- this.container.css("top", this.y + "px");
25
- this.gravitySpeed += 0.01;
24
+ this.gravitySpeed += 0.2;
26
25
  this.y += this.gravitySpeed;
27
26
  this.x += this.direction.x;
27
+ // Floor collision
28
+ if (this.y >= window.innerHeight - 10) {
29
+ this.y = window.innerHeight - 10;
30
+ this.gravitySpeed = 0;
31
+ this.direction.x = 0;
32
+ clearInterval(this.interval);
33
+ this.container.css("opacity", "0.8");
34
+ }
35
+ this.container.css("left", this.x + "px");
36
+ this.container.css("top", this.y + "px");
28
37
  }
29
38
  getPositiveOrNegative() {
30
39
  return Math.floor(Math.random() * 2) === 0 ? -1 : 1;
31
40
  }
41
+ destroy() {
42
+ clearInterval(this.interval);
43
+ this.container.remove();
44
+ }
32
45
  }
46
+ Pixel.activePixels = [];
47
+ Pixel.MAX_PIXELS = 300;
@@ -0,0 +1,13 @@
1
+ export declare class Spark {
2
+ private x;
3
+ private y;
4
+ private container;
5
+ private direction;
6
+ private gravitySpeed;
7
+ static activeSparks: Spark[];
8
+ private interval;
9
+ constructor(x: number, y: number);
10
+ private gravity;
11
+ destroy(): void;
12
+ }
13
+ //# sourceMappingURL=Spark.d.ts.map
@@ -0,0 +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"}
package/dist/Spark.js ADDED
@@ -0,0 +1,48 @@
1
+ // @ts-ignore - jQuery require
2
+ const $ = require("jquery");
3
+ export class Spark {
4
+ constructor(x, y) {
5
+ this.gravitySpeed = 0;
6
+ this.x = x;
7
+ this.y = y;
8
+ this.container = $(document.createElement("div"));
9
+ this.container.addClass("pixel");
10
+ const colors = ["#FFD700", "#FFA500", "#FF4500", "#FFFF00"];
11
+ const color = colors[Math.floor(Math.random() * colors.length)];
12
+ this.container.css({
13
+ background: color,
14
+ left: x + "px",
15
+ top: y + "px",
16
+ width: "3px",
17
+ height: "3px",
18
+ boxShadow: `0 0 4px ${color}`,
19
+ zIndex: 100,
20
+ });
21
+ $("body").append(this.container);
22
+ this.interval = setInterval(() => this.gravity(), 10);
23
+ const angle = Math.random() * Math.PI * 2;
24
+ const speed = 2 + Math.random() * 3;
25
+ this.direction = {
26
+ x: Math.cos(angle) * speed,
27
+ y: Math.sin(angle) * speed,
28
+ };
29
+ Spark.activeSparks.push(this);
30
+ setTimeout(() => this.destroy(), 200 + Math.random() * 200);
31
+ }
32
+ gravity() {
33
+ this.gravitySpeed += 0.1;
34
+ this.y += this.gravitySpeed + this.direction.y;
35
+ this.x += this.direction.x;
36
+ this.container.css("left", this.x + "px");
37
+ this.container.css("top", this.y + "px");
38
+ }
39
+ destroy() {
40
+ clearInterval(this.interval);
41
+ this.container.remove();
42
+ const index = Spark.activeSparks.indexOf(this);
43
+ if (index > -1) {
44
+ Spark.activeSparks.splice(index, 1);
45
+ }
46
+ }
47
+ }
48
+ Spark.activeSparks = [];
package/dist/index.d.ts CHANGED
@@ -3,4 +3,7 @@ export { Tool } from "./types";
3
3
  export type { DestroyTheTextOptions } from "./types";
4
4
  export { DTTSounds } from "./DTTSounds";
5
5
  export { addStyles } from "./styles";
6
+ export { Spark } from "./Spark";
7
+ export { Pixel } from "./Pixel";
8
+ export { Letra } from "./Letra";
6
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
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"}
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;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
package/dist/index.js CHANGED
@@ -3,6 +3,9 @@ export { DestroyTheText } from "./DestroyTheText";
3
3
  export { Tool } from "./types";
4
4
  export { DTTSounds } from "./DTTSounds";
5
5
  export { addStyles } from "./styles";
6
+ export { Spark } from "./Spark";
7
+ export { Pixel } from "./Pixel";
8
+ export { Letra } from "./Letra";
6
9
  // Initialize styles on import
7
10
  import { addStyles } from "./styles";
8
11
  addStyles();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "destroy-the-text",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "description": "Destroy any text of your website. Easy to use. And very useless",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",