glitched-writer - npm Package Compare versions

Comparing version 2.0.13 to 2.0.14

lib/char.d.ts

@@ -10,7 +10,7 @@ import GlitchedWriter from './index';
     stop: boolean;
-    instant: boolean;
-    isSpace: boolean;
+    isTag: boolean;
+    isWhitespace: boolean;
     afterGlitchChance: number;
-    els?: {
-        charEl: HTMLSpanElement;
+    letterize?: {
+        charEl?: HTMLSpanElement;
         ghostsBeforeEl: HTMLSpanElement;
@@ -20,10 +20,11 @@ letterEl: HTMLSpanElement;
     };
-    constructor(writer: GlitchedWriter, l: string, gl: string, initialGhosts?: string, instant?: boolean);
+    constructor(writer: GlitchedWriter, l: string, gl: string, initialGhosts?: string, isTag?: boolean);
     private setProps;
-    reset(l: string, gl: string, initialGhosts?: string, instant?: boolean): void;
+    reset(l: string, gl: string, initialGhosts?: string, isTag?: boolean): void;
     get string(): string;
     get finished(): boolean;
+    get interval(): number;
     private writeToElement;
-    appendChild(): void;
-    get interval(): number;
+    set spanElement(el: HTMLSpanElement);
+    private appendChildren;
     type(): Promise<boolean>;
@@ -30,0 +31,0 @@ step(): void;

lib/char.js

@@ -5,14 +5,13 @@ "use strict";
 class Char {
-    constructor(writer, l, gl, initialGhosts = '', instant = false) {
+    constructor(writer, l, gl, initialGhosts = '', isTag = false) {
         this.ghostsBefore = [];
         this.ghostsAfter = [];
         this.stop = false;
-        this.instant = false;
-        this.isSpace = false;
+        this.isTag = false;
+        this.isWhitespace = false;
         this.afterGlitchChance = 0;
         this.writer = writer;
-        this.setProps(l, gl, initialGhosts, instant);
+        this.setProps(l, gl, initialGhosts, isTag);
         if (writer.options.letterize) {
-            this.els = {
-                charEl: document.createElement('span'),
+            this.letterize = {
                 ghostsBeforeEl: document.createElement('span'),
@@ -22,30 +21,24 @@ letterEl: document.createElement('span'),
             };
-            this.els.charEl.className = 'gw-char';
-            this.els.ghostsBeforeEl.className = 'gw-ghosts';
-            this.els.ghostsAfterEl.className = 'gw-ghosts';
-            this.els.letterEl.className = 'gw-letter';
-            this.els.charEl.append(this.els.ghostsBeforeEl, this.els.letterEl, this.els.ghostsAfterEl);
-            this.writeToElement();
+            this.letterize.ghostsBeforeEl.className = 'gw-ghosts';
+            this.letterize.ghostsAfterEl.className = 'gw-ghosts';
+            this.letterize.letterEl.className = 'gw-letter';
         }
     }
-    setProps(l, gl, initialGhosts = '', instant = false) {
+    setProps(l, gl, initialGhosts = '', isTag = false) {
         const { options } = this.writer;
         this.l = l;
         this.gl = gl;
-        this.instant = instant;
+        this.isTag = isTag;
         this.ghostsBefore = [...initialGhosts];
         this.stepsLeft = options.stepsLeft;
-        if (instant)
+        if (isTag)
             this.stepsLeft = 0;
-        this.isSpace = [' ', ''].includes(l);
+        this.isWhitespace = utils_1.isSpecialChar(gl);
         this.afterGlitchChance =
-            (options.ghostChance + options.changeChance) / 3.5;
+            (options.ghostChance + options.changeChance) / 3.7;
     }
-    reset(l, gl, initialGhosts = '', instant = false) {
-        this.setProps(l, gl, initialGhosts, instant);
-        this.writeToElement();
-        if (this.els) {
-            this.els.charEl.className = 'gw-char';
-            this.els.letterEl.className = 'gw-letter';
-        }
+    reset(l, gl, initialGhosts = '', isTag = false) {
+        this.setProps(l, gl, initialGhosts, isTag);
+        if (this.letterize)
+            this.letterize.letterEl.className = 'gw-letter';
     }
@@ -60,6 +53,12 @@ get string() {
     }
+    get interval() {
+        let interval = this.writer.options.genInterval;
+        if (this.isWhitespace)
+            interval /= 2;
+        return interval;
+    }
     writeToElement() {
-        if (!this.els)
+        if (!this.letterize)
             return;
-        const { ghostsBeforeEl, ghostsAfterEl, letterEl } = this.els;
+        const { ghostsBeforeEl, ghostsAfterEl, letterEl } = this.letterize;
         letterEl.innerHTML = this.l;
@@ -69,17 +68,17 @@ ghostsBeforeEl.textContent = this.ghostsBefore.join('');
     }
-    appendChild() {
-        var _a;
-        if (this.els)
-            (_a = this.writer.htmlElement) === null || _a === void 0 ? void 0 : _a.appendChild(this.els.charEl);
+    set spanElement(el) {
+        if (!this.letterize)
+            return;
+        this.letterize.charEl = el;
+        this.appendChildren();
     }
-    get interval() {
-        let interval = this.writer.options.genInterval;
-        if (this.isSpace)
-            interval /= 2;
-        return interval;
+    appendChildren() {
+        var _a, _b;
+        (_b = (_a = this.letterize) === null || _a === void 0 ? void 0 : _a.charEl) === null || _b === void 0 ? void 0 : _b.append(this.letterize.ghostsBeforeEl, this.letterize.letterEl, this.letterize.ghostsAfterEl);
+        this.writeToElement();
     }
     async type() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const loop = async () => {
-            !this.instant && (await utils_1.wait(this.interval));
+            !this.isTag && (await utils_1.wait(this.interval));
             const lastString = this.string;
@@ -93,9 +92,7 @@ this.step();
         };
-        !this.instant && (await utils_1.wait(this.writer.options.genInitDelay));
-        (_a = this.els) === null || _a === void 0 ? void 0 : _a.charEl.classList.add('gw-typing');
+        !this.isTag && (await utils_1.wait(this.writer.options.genInitDelay));
         await utils_1.promiseWhile(() => !this.finished && !this.writer.state.isPaused && !this.stop, loop);
         if (this.finished) {
-            (_b = this.els) === null || _b === void 0 ? void 0 : _b.charEl.classList.add('gw-finished');
-            (_c = this.els) === null || _c === void 0 ? void 0 : _c.charEl.classList.remove('gw-typing');
-            (_d = this.els) === null || _d === void 0 ? void 0 : _d.letterEl.classList.remove('gw-glitched');
+            (_b = (_a = this.letterize) === null || _a === void 0 ? void 0 : _a.charEl) === null || _b === void 0 ? void 0 : _b.classList.add('gw-finished');
+            (_c = this.letterize) === null || _c === void 0 ? void 0 : _c.letterEl.classList.remove('gw-glitched');
         }
@@ -107,3 +104,3 @@ return this.finished;
         if ((this.stepsLeft > 0 && this.l !== this.gl) ||
-            (utils_1.coinFlip(this.afterGlitchChance) && !this.instant)) {
+            (utils_1.coinFlip(this.afterGlitchChance) && !this.isTag && !this.isWhitespace)) {
             /**
@@ -120,3 +117,3 @@ * IS GROWING
             if (utils_1.coinFlip(changeChance)) {
-                (_a = this.els) === null || _a === void 0 ? void 0 : _a.letterEl.classList.add('gw-glitched');
+                (_a = this.letterize) === null || _a === void 0 ? void 0 : _a.letterEl.classList.add('gw-glitched');
                 this.l = this.writer.options.genGhost;
@@ -129,3 +126,3 @@ }
              */
-            (_b = this.els) === null || _b === void 0 ? void 0 : _b.letterEl.classList.remove('gw-glitched');
+            (_b = this.letterize) === null || _b === void 0 ? void 0 : _b.letterEl.classList.remove('gw-glitched');
             this.l = this.gl;
@@ -132,0 +129,0 @@ this.removeGhost();

lib/index.d.ts

@@ -9,3 +9,3 @@ import Options from './options';
 export default class GlitchedWriter {
-    htmlElement?: HTMLElement | Element | null;
+    htmlElement?: HTMLElement | Element;
     options: Options;
@@ -25,3 +25,3 @@ state: State;
      */
-    constructor(htmlElement?: HTMLElement | Element | string, options?: ConstructorOptions | PresetName | null, onStepCallback?: Callback, onFinishCallback?: Callback);
+    constructor(htmlElement?: HTMLElement | Element | null | string, options?: ConstructorOptions | PresetName | null, onStepCallback?: Callback, onFinishCallback?: Callback);
     updateString(): void;
@@ -63,2 +63,3 @@ get previousString(): string;
     private createPreviousCharTable;
+    private letterize;
     private removeExtraChars;
@@ -70,3 +71,12 @@ private setChar;
 }
-export declare function glitchWrite(string: string, htmlElement?: HTMLElement | Element, options?: ConstructorOptions | PresetName, onStepCallback?: Callback, onFinishCallback?: Callback): Promise<WriterDataResponse>;
+/**
+ * One time use, standalone write function. Used to order a temporary Glitched Writer instance to animate content of html element to chosen text.
+ * @param string text, that will get written.
+ * @param htmlElement HTML Element OR a Selector string (eg. '.text')
+ * @param options Options object (eg. { html: true, ... }) OR preset name (eg. 'zalgo').
+ * @param onStepCallback Callback, that will be triggered on every step. Params passed: string & writer data.
+ * @param onFinishCallback Callback, that will be triggered when each writing finishes. Params passed: string & writer data.
+ * @returns Promise, with writer data result
+ */
+export declare function glitchWrite(string: string, htmlElement?: HTMLElement | Element | null | string, options?: ConstructorOptions | PresetName | null, onStepCallback?: Callback, onFinishCallback?: Callback): Promise<WriterDataResponse>;
 export { presets, glyphs, wait, ConstructorOptions, WriterDataResponse, Callback, };

lib/index.js

@@ -24,2 +24,3 @@ "use strict";
     constructor(htmlElement, options, onStepCallback, onFinishCallback) {
+        var _a;
         this.charTable = [];
@@ -30,6 +31,6 @@ this.goalString = '';
             if (typeof document !== 'undefined')
-                this.htmlElement = document.querySelector(htmlElement);
+                this.htmlElement = (_a = document.querySelector(htmlElement)) !== null && _a !== void 0 ? _a : undefined;
         }
         else
-            this.htmlElement = htmlElement;
+            this.htmlElement = htmlElement !== null && htmlElement !== void 0 ? htmlElement : undefined;
         this.options = new options_1.default(this, options);
@@ -51,15 +52,2 @@ this.state = new state_1.default(this);
     }
-    // get previousStringFromTable(): string {
-    // 	let prev = flattenDeep(
-    // 		this.charTable.map(({ ghostsBefore, l, ghostsAfter }) => [
-    // 			ghostsBefore,
-    // 			l,
-    // 			ghostsAfter,
-    // 		]),
-    // 	).join('')
-    // 	console.log(prev)
-    // 	if (this.options.html) prev = filterHtml(prev)
-    // 	prev = prev.trim()
-    // 	return prev
-    // }
     /**
@@ -94,7 +82,10 @@ * All the data, about current state of the writer instance.
         // this.logCharTable()
-        if (this.options.letterize) {
-            if (this.htmlElement)
-                this.htmlElement.innerHTML = '';
-            this.charTable.forEach(char => char.appendChild());
-        }
+        this.letterize();
+        // console.log(
+        // 	this.charTable.map(char => [
+        // 		char.gl,
+        // 		char.isTag,
+        // 		char.letterize?.charEl?.outerHTML,
+        // 	]),
+        // )
         this.pause();
@@ -126,9 +117,11 @@ return this.play({
     // 	console.table(
-    // 		this.charTable.map(({ ghostsBefore, ghostsAfter, l, gl, instant }) => [
-    // 			ghostsBefore.join(''),
-    // 			ghostsAfter.join(''),
-    // 			l,
-    // 			gl,
-    // 			instant && 'HTML',
-    // 		]),
+    // 		this.charTable.map(
+    // 			({ ghostsBefore, ghostsAfter, l, gl, isTag, isWhitespace }) => [
+    // 				ghostsBefore.join(''),
+    // 				ghostsAfter.join(''),
+    // 				l,
+    // 				gl,
+    // 				(isTag && 'TAG') || (isWhitespace && 'Whitespace'),
+    // 			],
+    // 		),
     // 	)
@@ -185,3 +178,3 @@ // }
                 pi--;
-                this.setChar(gi, '', gl.value, undefined, true);
+                this.setChar(gi, '', gl);
                 return;
@@ -192,3 +185,3 @@ }
                 const appendedText = previous.substring(pi, fi);
-                this.setChar(gi, gl.value, gl.value, appendedText, gl.type === 'whitespace');
+                this.setChar(gi, gl.value, gl, appendedText);
                 pi = fi;
@@ -198,3 +191,3 @@ this.state.nGhosts += appendedText.length;
             else
-                this.setChar(gi, pl || this.options.space, gl.value || this.options.space, undefined, gl.type === 'whitespace');
+                this.setChar(gi, pl || this.options.space, gl);
         });
@@ -211,37 +204,39 @@ this.removeExtraChars(goalStringArray.length);
                 pi--;
-                this.setChar(gi, '', gl.value, undefined, true);
+                this.setChar(gi, '', gl);
                 return;
             }
-            this.setChar(gi, pl, gl.value);
+            this.setChar(gi, pl, gl);
         });
         this.removeExtraChars(goalStringArray.length);
     }
+    letterize() {
+        if (!this.options.letterize || !this.htmlElement)
+            return;
+        const html = this.charTable
+            .map(({ isTag, gl }) => (isTag ? gl : '<span class="gw-char"></span>'))
+            .join('');
+        this.htmlElement.innerHTML = html;
+        const spans = this.htmlElement.querySelectorAll('span.gw-char');
+        let i = 0;
+        this.charTable.forEach(char => {
+            if (char.isTag)
+                return;
+            char.spanElement = spans[i];
+            i++;
+        });
+    }
     removeExtraChars(from) {
         const { charTable } = this;
-        // for (let i = charTable.length - 1; i >= from; i--) {
-        // 	charTable[i].destroy()
-        // }
         charTable.splice(from, charTable.length - from);
     }
-    // private removeSpecialChars() {
-    // 	let i: number = findLastIndex(this.charTable, 'special')
-    // 	while (i !== -1) {
-    // 		this.charTable.splice(i, 1)
-    // 		i = findLastIndex(this.charTable, 'special')
-    // 	}
-    // }
-    setChar(ci, pl, gl, appendedText, instant = false) {
+    setChar(ci, pl, gl, appendedText) {
         const { charTable } = this, char = charTable[ci];
-        // if (instant) {
-        // 	charTable.splice(ci, 0, new Char(this, pl, gl, appendedText, true))
-        // 	return
-        // }
         char
-            ? char.reset(pl, gl, appendedText, instant)
-            : charTable.push(new char_1.default(this, pl, gl, appendedText, instant));
+            ? char.reset(pl, gl.value || this.options.space, appendedText, gl.type === 'tag')
+            : charTable.push(new char_1.default(this, pl, gl.value || this.options.space, appendedText, gl.type === 'tag'));
     }
     get goalStringArray() {
-        const { goalString: goal, previousString: previous, options } = this, goalArray = options.html
+        const { goalString: goal, previousString, options } = this, goalArray = options.html
             ? utils_1.htmlToArray(goal)
-            : utils_1.stringToLetterItems(goal), prevGtGoal = Math.max(previous.length - goalArray.length, 0);
+            : utils_1.stringToLetterItems(goal), prevGtGoal = Math.max(previousString.length - goalArray.length, 0);
         goalArray.push(...utils_1.stringToLetterItems(utils_1.arrayOfTheSame('', prevGtGoal)));
@@ -274,2 +269,11 @@ return goalArray;
 exports.default = GlitchedWriter;
+/**
+ * One time use, standalone write function. Used to order a temporary Glitched Writer instance to animate content of html element to chosen text.
+ * @param string text, that will get written.
+ * @param htmlElement HTML Element OR a Selector string (eg. '.text')
+ * @param options Options object (eg. { html: true, ... }) OR preset name (eg. 'zalgo').
+ * @param onStepCallback Callback, that will be triggered on every step. Params passed: string & writer data.
+ * @param onFinishCallback Callback, that will be triggered when each writing finishes. Params passed: string & writer data.
+ * @returns Promise, with writer data result
+ */
 async function glitchWrite(string, htmlElement, options, onStepCallback, onFinishCallback) {
@@ -276,0 +280,0 @@ const writer = new GlitchedWriter(htmlElement, options, onStepCallback, onFinishCallback);

lib/index.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["glitched-writer"]=e():t["glitched-writer"]=e()}(self,(function(){return(()=>{"use strict";var t={772:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0});const i=s(988);function r(t,e){const{length:s}=t;t.splice(i.random(0,s,"floor"),0,e)}e.default=class{constructor(t,e,s,i="",r=!1){this.ghostsBefore=[],this.ghostsAfter=[],this.stop=!1,this.instant=!1,this.isSpace=!1,this.afterGlitchChance=0,this.writer=t,this.setProps(e,s,i,r),t.options.letterize&&(this.els={charEl:document.createElement("span"),ghostsBeforeEl:document.createElement("span"),letterEl:document.createElement("span"),ghostsAfterEl:document.createElement("span")},this.els.charEl.className="gw-char",this.els.ghostsBeforeEl.className="gw-ghosts",this.els.ghostsAfterEl.className="gw-ghosts",this.els.letterEl.className="gw-letter",this.els.charEl.append(this.els.ghostsBeforeEl,this.els.letterEl,this.els.ghostsAfterEl),this.writeToElement())}setProps(t,e,s="",i=!1){const{options:r}=this.writer;this.l=t,this.gl=e,this.instant=i,this.ghostsBefore=[...s],this.stepsLeft=r.stepsLeft,i&&(this.stepsLeft=0),this.isSpace=[" ",""].includes(t),this.afterGlitchChance=(r.ghostChance+r.changeChance)/3.5}reset(t,e,s="",i=!1){this.setProps(t,e,s,i),this.writeToElement(),this.els&&(this.els.charEl.className="gw-char",this.els.letterEl.className="gw-letter")}get string(){const{l:t,ghostsAfter:e,ghostsBefore:s}=this;return s.join("")+t+e.join("")}get finished(){const{l:t,gl:e,ghostsBefore:s,ghostsAfter:i}=this;return t===e&&0===s.length&&0===i.length}writeToElement(){if(!this.els)return;const{ghostsBeforeEl:t,ghostsAfterEl:e,letterEl:s}=this.els;s.innerHTML=this.l,t.textContent=this.ghostsBefore.join(""),e.textContent=this.ghostsAfter.join("")}appendChild(){var t;this.els&&(null===(t=this.writer.htmlElement)||void 0===t||t.appendChild(this.els.charEl))}get interval(){let t=this.writer.options.genInterval;return this.isSpace&&(t/=2),t}async type(){var t,e,s,r;return!this.instant&&await i.wait(this.writer.options.genInitDelay),null===(t=this.els)||void 0===t||t.charEl.classList.add("gw-typing"),await i.promiseWhile((()=>!this.finished&&!this.writer.state.isPaused&&!this.stop),(async()=>{!this.instant&&await i.wait(this.interval);const t=this.string;this.step(),t!==this.string&&(this.writer.emiter.call("step"),this.writeToElement()),this.stepsLeft--})),this.finished&&(null===(e=this.els)||void 0===e||e.charEl.classList.add("gw-finished"),null===(s=this.els)||void 0===s||s.charEl.classList.remove("gw-typing"),null===(r=this.els)||void 0===r||r.letterEl.classList.remove("gw-glitched")),this.finished}step(){var t,e;if(this.stepsLeft>0&&this.l!==this.gl||i.coinFlip(this.afterGlitchChance)&&!this.instant){const{ghostChance:e,changeChance:s}=this.writer.options;i.coinFlip(e)&&(this.writer.state.ghostsInLimit?this.addGhost():this.removeGhost()),i.coinFlip(s)&&(null===(t=this.els)||void 0===t||t.letterEl.classList.add("gw-glitched"),this.l=this.writer.options.genGhost)}else this.finished||(null===(e=this.els)||void 0===e||e.letterEl.classList.remove("gw-glitched"),this.l=this.gl,this.removeGhost())}addGhost(){const t=this.writer.options.genGhost;this.writer.state.nGhosts++,i.coinFlip()?r(this.ghostsBefore,t):r(this.ghostsAfter,t)}removeGhost(){this.writer.state.nGhosts--,i.coinFlip()&&this.ghostsBefore.length>0?i.deleteRandom(this.ghostsBefore):i.deleteRandom(this.ghostsAfter)}}},684:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0});const i=s(988);e.default=class{constructor(t,e,s){this.onStepCallback=e,this.onFinishCallback=s,this.writer=t}call(t){var e,s;this.writer.updateString();const{htmlElement:r,writerData:n}=this.writer,h="finish"===t?this.writer.goalString:this.writer.string;r&&!this.writer.options.letterize&&(this.writer.options.html?r.innerHTML=h:r.textContent=h),null==r||r.setAttribute("data-gw-string",this.writer.options.html?i.filterHtml(h):h),"finish"===t?(this.writer.state.finish(),null===(e=this.onFinishCallback)||void 0===e||e.call(this,h,n),this.emitEvent()):null===(s=this.onStepCallback)||void 0===s||s.call(this,h,n)}emitEvent(){const{htmlElement:t,writerData:e}=this.writer;t&&"undefined"!=typeof CustomEvent&&(null==t||t.dispatchEvent(new CustomEvent("gw-finished",{detail:e})))}}},275:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0});const i=s(988),r=s(702);e.default=class{constructor(t,e){var s,n,h,l,a,o,g,c,p,u,m,d,f;"string"==typeof e&&(e=r.presets[e]),e||(e={}),this.steps=null!==(s=e.steps)&&void 0!==s?s:r.presets.default.steps,this.interval=null!==(n=e.interval)&&void 0!==n?n:r.presets.default.interval,this.initialDelay=null!==(h=e.initialDelay)&&void 0!==h?h:r.presets.default.initialDelay,this.changeChance=null!==(l=e.changeChance)&&void 0!==l?l:r.presets.default.changeChance,this.ghostChance=null!==(a=e.ghostChance)&&void 0!==a?a:r.presets.default.ghostChance,this.maxGhosts=null!==(o=e.maxGhosts)&&void 0!==o?o:r.presets.default.maxGhosts,this.glyphs=null!==(g=i.parseCharset(e.glyphs))&&void 0!==g?g:r.presets.default.glyphs,this.glyphsFromString=null!==(c=e.glyphsFromString)&&void 0!==c?c:r.presets.default.glyphsFromString,this.ghostCharset=[...this.glyphs],this.oneAtATime=null!==(p=e.oneAtATime)&&void 0!==p?p:r.presets.default.oneAtATime,this.html=null!==(u=e.html)&&void 0!==u?u:r.presets.default.html,this.letterize=null!==(m=e.letterize)&&void 0!==m?m:r.presets.default.letterize,"undefined"==typeof document&&(this.letterize=!1),this.startFrom=null!==(d=e.startFrom)&&void 0!==d?d:r.presets.default.startFrom,this.writer=t,this.space=(null!==(f=e.fillSpace)&&void 0!==f?f:r.presets.default.fillSpace)?" ":""}get stepsLeft(){return i.getRandomFromRange(this.steps)}get genInterval(){return i.getRandomFromRange(this.interval)}get genInitDelay(){return i.getRandomFromRange(this.initialDelay)}get genMaxGhosts(){if(Number.isInteger(this.maxGhosts))return this.maxGhosts;let t;return t=this.writer.options.html?i.filterHtml(this.writer.goalString).length:this.writer.goalString.length,Math.round((t||20)*this.maxGhosts)}get genGhost(){var t;return null!==(t=i.getRandom(this.ghostCharset))&&void 0!==t?t:""}setCharset(){let t=this.glyphs;this.glyphsFromString&&(t+=i.filterDuplicates(this.writer.previousString+(this.writer.options.html?i.filterHtml(this.writer.goalString):this.writer.goalString))),this.ghostCharset=[...t].filter((t=>!["\t","\n","\r","\f","\v"].includes(t)))}}},702:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.presets=e.glyphs=void 0,e.glyphs={nier:"一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何",full:"ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何ĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/\\&<-+÷×=>$€£¥¢:;,.*•°·…±†‡æ«»¦¯—–~˜¨_øÞ¿▬▭▮▯┐└╛░▒▓○‼⁇⁈⁉‽ℴℵℶℷℸℲ℮ℯ⅁⅂⅃⅄₠₡₢₣₤₥₦₧₨₩₪₫€₭₮₯₰₱₲₳₴₵₶₷₸₹₺₻₼₽₾₿          ",letterlike:"ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơưĂÂÊÔƠƯăâêôơư1234567890",zalgo:"̴̵̶̷̸̡̢̧̨̛̖̗̘̙̜̝̞̟̠̣̤̥̦̩̪̫̬̭̮̯̰̱̲̳̹̺̻̼͇͈͉͍͎̀́̂̃̄̅̆̇̈̉̊̋̌̍̎̏̐̑̒̓̔̽̾̿̀́͂̓̈́͆͊͋͌̕̚ͅ ͓͔͕͖͙͚͐͑͒͗͛ͣͤͥͦͧͨͩͪͫͬͭͮͯ͘͜͟͢͝͞͠͡͏҉",neo:"!<>-_\\/[]{}—=+*^?#________"},e.presets={default:{steps:[1,8],interval:[60,170],initialDelay:[0,2e3],changeChance:.6,ghostChance:.2,maxGhosts:.2,glyphs:e.glyphs.full+e.glyphs.zalgo,glyphsFromString:!1,oneAtATime:!1,html:!1,fillSpace:!0,letterize:!1,startFrom:"matching"},nier:{interval:[10,20],initialDelay:[0,0],steps:[1,3],changeChance:1,maxGhosts:0,glyphs:e.glyphs.nier,oneAtATime:!0,startFrom:"erase",glyphsFromString:!0},typewriter:{interval:[40,100],initialDelay:[0,0],steps:[0,1],changeChance:1,maxGhosts:0,glyphs:"",glyphsFromString:!0,oneAtATime:!0,startFrom:"erase"},terminal:{interval:[25,35],initialDelay:[0,0],steps:0,changeChance:.5,maxGhosts:0,glyphs:"",oneAtATime:!0,fillSpace:!1,glyphsFromString:!1,startFrom:"erase"},zalgo:{initialDelay:[0,3e3],interval:[10,35],steps:[0,30],maxGhosts:4.6,changeChance:.5,ghostChance:.7,glyphs:e.glyphs.zalgo,glyphsFromString:!0,fillSpace:!1},neo:{glyphs:e.glyphs.neo,maxGhosts:0,ghostChance:0,changeChance:1,interval:[30,100],initialDelay:[0,1300],steps:[4,7],startFrom:"previous",letterize:!0}}},585:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0});const i=s(988);e.default=class{constructor(t){this.nGhosts=0,this.isTyping=!1,this.isPaused=!1,this.finished=!1,this.writer=t,this.maxGhosts=this.writer.options.genMaxGhosts}get ghostsInLimit(){return this.nGhosts<this.maxGhosts}play(){this.isTyping=!0,this.isPaused=!1,this.finished=!1,this.toggleClass(!0),this.maxGhosts=this.writer.options.genMaxGhosts}pause(){this.isTyping=!1,this.isPaused=!0,this.toggleClass(!1)}finish(){this.isTyping=!1,this.finished=!0,this.toggleClass(!1)}toggleClass(t){const e=this.writer.htmlElement,s="gw-writing";e&&(t?i.animateWithClass(e,s):e.classList.remove(s))}}},988:(t,e)=>{function s(t,e,s){const i=Math.random()*(e-t)+t;if(s)switch(s){case"floor":return Math.floor(i);case"round":return Math.round(i);case"ceil":return Math.ceil(i)}return i}Object.defineProperty(e,"__esModule",{value:!0}),e.filterHtml=e.htmlToArray=e.isSpecialChar=e.stringToLetterItems=e.letterToLetterItem=e.coinFlip=e.getRandomFromRange=e.animateWithClass=e.isInRange=e.arrayOfTheSame=e.promiseWhile=e.wait=e.parseCharset=e.filterDuplicates=e.getRandom=e.deleteRandom=e.random=void 0,e.random=s,e.deleteRandom=function(t){const{length:e}=t;t.splice(s(0,e,"floor"),1)},e.getRandom=function(t){return t[s(0,t.length,"floor")]},e.filterDuplicates=function(t){const e="string"==typeof t,s=[];return new Set(t).forEach((t=>s.push(t))),e?s.join(""):s},e.parseCharset=function(t){if(void 0===t)return;let e;return e="string"==typeof t?t:t.length?t.join(""):Array.from(t).join(""),e},e.wait=t=>new Promise((e=>setTimeout((()=>e(t)),t))),e.promiseWhile=function(t,e){const s=()=>t()?e().then(s):Promise.resolve();return s()},e.arrayOfTheSame=(t,e)=>new Array(e).fill(t),e.isInRange=(t,e,s)=>e>=t&&e<s,e.animateWithClass=(t,e)=>{t.classList.remove(e),t.offsetWidth,t.classList.add(e)},e.getRandomFromRange=function(t,e=!0){return"number"==typeof t?t:s(...t,e?"round":void 0)},e.coinFlip=(t=.5)=>Math.random()<t,e.letterToLetterItem=t=>({value:t}),e.stringToLetterItems=t=>[...t].map(e.letterToLetterItem),e.isSpecialChar=t=>["\t","\n","\r","\f","\v"," ",""].includes(t);const i="(&#?[0-9a-zA-Z]{2,6};)|(<style.+?>.+?</style>|<script.+?>.+?<\/script>|<(?:!|/?[a-zA-Z]+).*?/?>)";e.htmlToArray=function(t){const s=new RegExp(i,"g"),r=[];let n,h=0;for(;n=s.exec(t);){const i=n.index,l=s.lastIndex,a=t.slice(h,i);h=l,a&&r.push(...e.stringToLetterItems(a));const o={value:n[0],type:void 0!==n[1]?"html_entity":"tag"};r.push(o)}return t.length>h&&r.push(...e.stringToLetterItems(t.slice(h))),r},e.filterHtml=function(t){const e=new RegExp(i,"g");return t.replace(e,"")}}},e={};function s(i){var r=e[i];if(void 0!==r)return r.exports;var n=e[i]={exports:{}};return t[i](n,n.exports,s),n.exports}var i={};return(()=>{var t=i;Object.defineProperty(t,"__esModule",{value:!0}),t.wait=t.glyphs=t.presets=t.glitchWrite=void 0;const e=s(275),r=s(585),n=s(772),h=s(684),l=s(988);Object.defineProperty(t,"wait",{enumerable:!0,get:function(){return l.wait}});const a=s(702);Object.defineProperty(t,"presets",{enumerable:!0,get:function(){return a.presets}}),Object.defineProperty(t,"glyphs",{enumerable:!0,get:function(){return a.glyphs}});class o{constructor(t,s,i,n){this.charTable=[],this.goalString="",this.string="","string"==typeof t?"undefined"!=typeof document&&(this.htmlElement=document.querySelector(t)):this.htmlElement=t,this.options=new e.default(this,s),this.state=new r.default(this),this.emiter=new h.default(this,i,n),this.string=this.previousString}updateString(){this.string=this.charTable.map((t=>t.string)).join("")}get previousString(){var t;let e=null===(t=this.htmlElement)||void 0===t?void 0:t.textContent;return"string"!=typeof e&&(e=this.options.html?l.filterHtml(this.string):this.string),e=e.trim(),e}get writerData(){const{options:t,state:e,string:s}=this;return{string:s,writer:this,options:t,state:e}}async write(t,e){return"erase"!==this.options.startFrom||(null==e?void 0:e.erase)||await this.write(this.genGoalStringToErase(t),{erase:!0}),this.goalString=t,this.state.nGhosts=0,this.options.setCharset(),"matching"===this.options.startFrom?this.createMatchingCharTable():this.createPreviousCharTable(),this.options.letterize&&(this.htmlElement&&(this.htmlElement.innerHTML=""),this.charTable.forEach((t=>t.appendChild()))),this.pause(),this.play({reverse:this.options.oneAtATime&&(null==e?void 0:e.erase)})}async add(t){const{previousString:e}=this;return this.write(e+t)}async remove(t){const{previousString:e}=this,s=Array.from(e);return s.splice(-t),this.write(s.join(""),{erase:!0})}async play(t){var e;const s=[],{charTable:i}=this,{length:r}=i;if(this.state.isTyping)return this.getWriterData("ERROR",`The writer is already typing "${this.goalString}".`);if(this.state.play(),this.options.oneAtATime){const s=null!==(e=null==t?void 0:t.reverse)&&void 0!==e&&e;let n=s?r-1:0,h=!0;const a=async()=>{h=await i[n].type(),s?n--:n++};return await l.promiseWhile((()=>l.isInRange(0,n,r)&&h&&!this.state.isPaused),a),this.returnResult(h)}i.forEach((t=>s.push(t.type())));try{const t=(await Promise.all(s)).every((t=>t));return this.returnResult(t)}catch(t){return this.getWriterData("ERROR","Writer encountered an error.",t)}}pause(){this.state.pause()}returnResult(t){return t?this.emiter.call("finish"):this.emiter.call("step"),t?this.getWriterData("SUCCESS","The writer finished typing."):this.getWriterData("ERROR","Writer failed to finish typing.")}createMatchingCharTable(){const{goalStringArray:t,previousString:e}=this,s=Math.min(Math.ceil(this.options.genMaxGhosts/2),5);let i=-1;t.forEach(((t,r)=>{i++;const n=e[i];if("tag"===t.type)return i--,void this.setChar(r,"",t.value,void 0,!0);const h=""!==t.value?e.indexOf(t.value,i):-1;if(-1!==h&&h-i<=s){const s=e.substring(i,h);this.setChar(r,t.value,t.value,s,"whitespace"===t.type),i=h,this.state.nGhosts+=s.length}else this.setChar(r,n||this.options.space,t.value||this.options.space,void 0,"whitespace"===t.type)})),this.removeExtraChars(t.length)}createPreviousCharTable(){const{goalStringArray:t,previousString:e}=this;let s=-1;t.forEach(((t,i)=>{s++;const r=e[s]||this.options.space;if("tag"===t.type)return s--,void this.setChar(i,"",t.value,void 0,!0);this.setChar(i,r,t.value)})),this.removeExtraChars(t.length)}removeExtraChars(t){const{charTable:e}=this;e.splice(t,e.length-t)}setChar(t,e,s,i,r=!1){const{charTable:h}=this,l=h[t];l?l.reset(e,s,i,r):h.push(new n.default(this,e,s,i,r))}get goalStringArray(){const{goalString:t,previousString:e,options:s}=this,i=s.html?l.htmlToArray(t):l.stringToLetterItems(t),r=Math.max(e.length-i.length,0);return i.push(...l.stringToLetterItems(l.arrayOfTheSame("",r))),i}getWriterData(t,e,s){const{writerData:i}=this;return Object.assign(Object.assign({},i),{status:t,message:e,error:s})}genGoalStringToErase(t){var e;const{previousString:s}=this;let i="";for(let r=0;r<t.length;r++){const n=t[r],h=null!==(e=s[r])&&void 0!==e?e:"";if(n!==h)break;i+=h}const r=Math.max(t.length-i.length,0);return r>0&&" "===this.options.space&&(i=i.padEnd(r+i.length," ")),i}}t.default=o,t.glitchWrite=async function(t,e,s,i,r){return new o(e,s,i,r).write(t)}})(),i})()}));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["glitched-writer"]=e():t["glitched-writer"]=e()}(self,(function(){return(()=>{"use strict";var t={772:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0});const i=s(988);function r(t,e){const{length:s}=t;t.splice(i.random(0,s,"floor"),0,e)}e.default=class{constructor(t,e,s,i="",r=!1){this.ghostsBefore=[],this.ghostsAfter=[],this.stop=!1,this.isTag=!1,this.isWhitespace=!1,this.afterGlitchChance=0,this.writer=t,this.setProps(e,s,i,r),t.options.letterize&&(this.letterize={ghostsBeforeEl:document.createElement("span"),letterEl:document.createElement("span"),ghostsAfterEl:document.createElement("span")},this.letterize.ghostsBeforeEl.className="gw-ghosts",this.letterize.ghostsAfterEl.className="gw-ghosts",this.letterize.letterEl.className="gw-letter")}setProps(t,e,s="",r=!1){const{options:n}=this.writer;this.l=t,this.gl=e,this.isTag=r,this.ghostsBefore=[...s],this.stepsLeft=n.stepsLeft,r&&(this.stepsLeft=0),this.isWhitespace=i.isSpecialChar(e),this.afterGlitchChance=(n.ghostChance+n.changeChance)/3.7}reset(t,e,s="",i=!1){this.setProps(t,e,s,i),this.letterize&&(this.letterize.letterEl.className="gw-letter")}get string(){const{l:t,ghostsAfter:e,ghostsBefore:s}=this;return s.join("")+t+e.join("")}get finished(){const{l:t,gl:e,ghostsBefore:s,ghostsAfter:i}=this;return t===e&&0===s.length&&0===i.length}get interval(){let t=this.writer.options.genInterval;return this.isWhitespace&&(t/=2),t}writeToElement(){if(!this.letterize)return;const{ghostsBeforeEl:t,ghostsAfterEl:e,letterEl:s}=this.letterize;s.innerHTML=this.l,t.textContent=this.ghostsBefore.join(""),e.textContent=this.ghostsAfter.join("")}set spanElement(t){this.letterize&&(this.letterize.charEl=t,this.appendChildren())}appendChildren(){var t,e;null===(e=null===(t=this.letterize)||void 0===t?void 0:t.charEl)||void 0===e||e.append(this.letterize.ghostsBeforeEl,this.letterize.letterEl,this.letterize.ghostsAfterEl),this.writeToElement()}async type(){var t,e,s;return!this.isTag&&await i.wait(this.writer.options.genInitDelay),await i.promiseWhile((()=>!this.finished&&!this.writer.state.isPaused&&!this.stop),(async()=>{!this.isTag&&await i.wait(this.interval);const t=this.string;this.step(),t!==this.string&&(this.writer.emiter.call("step"),this.writeToElement()),this.stepsLeft--})),this.finished&&(null===(e=null===(t=this.letterize)||void 0===t?void 0:t.charEl)||void 0===e||e.classList.add("gw-finished"),null===(s=this.letterize)||void 0===s||s.letterEl.classList.remove("gw-glitched")),this.finished}step(){var t,e;if(this.stepsLeft>0&&this.l!==this.gl||i.coinFlip(this.afterGlitchChance)&&!this.isTag&&!this.isWhitespace){const{ghostChance:e,changeChance:s}=this.writer.options;i.coinFlip(e)&&(this.writer.state.ghostsInLimit?this.addGhost():this.removeGhost()),i.coinFlip(s)&&(null===(t=this.letterize)||void 0===t||t.letterEl.classList.add("gw-glitched"),this.l=this.writer.options.genGhost)}else this.finished||(null===(e=this.letterize)||void 0===e||e.letterEl.classList.remove("gw-glitched"),this.l=this.gl,this.removeGhost())}addGhost(){const t=this.writer.options.genGhost;this.writer.state.nGhosts++,i.coinFlip()?r(this.ghostsBefore,t):r(this.ghostsAfter,t)}removeGhost(){this.writer.state.nGhosts--,i.coinFlip()&&this.ghostsBefore.length>0?i.deleteRandom(this.ghostsBefore):i.deleteRandom(this.ghostsAfter)}}},684:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0});const i=s(988);e.default=class{constructor(t,e,s){this.onStepCallback=e,this.onFinishCallback=s,this.writer=t}call(t){var e,s;this.writer.updateString();const{htmlElement:r,writerData:n}=this.writer,h="finish"===t?this.writer.goalString:this.writer.string;r&&!this.writer.options.letterize&&(this.writer.options.html?r.innerHTML=h:r.textContent=h),null==r||r.setAttribute("data-gw-string",this.writer.options.html?i.filterHtml(h):h),"finish"===t?(this.writer.state.finish(),null===(e=this.onFinishCallback)||void 0===e||e.call(this,h,n),this.emitEvent()):null===(s=this.onStepCallback)||void 0===s||s.call(this,h,n)}emitEvent(){const{htmlElement:t,writerData:e}=this.writer;t&&"undefined"!=typeof CustomEvent&&(null==t||t.dispatchEvent(new CustomEvent("gw-finished",{detail:e})))}}},275:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0});const i=s(988),r=s(702);e.default=class{constructor(t,e){var s,n,h,l,a,o,g,c,p,u,m,d,f;"string"==typeof e&&(e=r.presets[e]),e||(e={}),this.steps=null!==(s=e.steps)&&void 0!==s?s:r.presets.default.steps,this.interval=null!==(n=e.interval)&&void 0!==n?n:r.presets.default.interval,this.initialDelay=null!==(h=e.initialDelay)&&void 0!==h?h:r.presets.default.initialDelay,this.changeChance=null!==(l=e.changeChance)&&void 0!==l?l:r.presets.default.changeChance,this.ghostChance=null!==(a=e.ghostChance)&&void 0!==a?a:r.presets.default.ghostChance,this.maxGhosts=null!==(o=e.maxGhosts)&&void 0!==o?o:r.presets.default.maxGhosts,this.glyphs=null!==(g=i.parseCharset(e.glyphs))&&void 0!==g?g:r.presets.default.glyphs,this.glyphsFromString=null!==(c=e.glyphsFromString)&&void 0!==c?c:r.presets.default.glyphsFromString,this.ghostCharset=[...this.glyphs],this.oneAtATime=null!==(p=e.oneAtATime)&&void 0!==p?p:r.presets.default.oneAtATime,this.html=null!==(u=e.html)&&void 0!==u?u:r.presets.default.html,this.letterize=null!==(m=e.letterize)&&void 0!==m?m:r.presets.default.letterize,"undefined"==typeof document&&(this.letterize=!1),this.startFrom=null!==(d=e.startFrom)&&void 0!==d?d:r.presets.default.startFrom,this.writer=t,this.space=(null!==(f=e.fillSpace)&&void 0!==f?f:r.presets.default.fillSpace)?" ":""}get stepsLeft(){return i.getRandomFromRange(this.steps)}get genInterval(){return i.getRandomFromRange(this.interval)}get genInitDelay(){return i.getRandomFromRange(this.initialDelay)}get genMaxGhosts(){if(Number.isInteger(this.maxGhosts))return this.maxGhosts;let t;return t=this.writer.options.html?i.filterHtml(this.writer.goalString).length:this.writer.goalString.length,Math.round((t||20)*this.maxGhosts)}get genGhost(){var t;return null!==(t=i.getRandom(this.ghostCharset))&&void 0!==t?t:""}setCharset(){let t=this.glyphs;this.glyphsFromString&&(t+=i.filterDuplicates(this.writer.previousString+(this.writer.options.html?i.filterHtml(this.writer.goalString):this.writer.goalString))),this.ghostCharset=[...t].filter((t=>!["\t","\n","\r","\f","\v"].includes(t)))}}},702:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.presets=e.glyphs=void 0,e.glyphs={nier:"一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何",full:"ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư一二三四五六七八九十百千上下左右中大小月日年早木林山川土空田天生花草虫犬人名女男子目耳口手足見音力気円入出立休先夕本文字学校村町森正水火玉王石竹糸貝車金雨赤青白数多少万半形太細広長点丸交光角計直線矢弱強高同親母父姉兄弟妹自友体毛頭顔首心時曜朝昼夜分週春夏秋冬今新古間方北南東西遠近前後内外場地国園谷野原里市京風雪雲池海岩星室戸家寺通門道話言答声聞語読書記紙画絵図工教晴思考知才理算作元食肉馬牛魚鳥羽鳴麦米茶色黄黒来行帰歩走止活店買売午汽弓回会組船明社切電毎合当台楽公引科歌刀番用何ĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/\\&<-+÷×=>$€£¥¢:;,.*•°·…±†‡æ«»¦¯—–~˜¨_øÞ¿▬▭▮▯┐└╛░▒▓○‼⁇⁈⁉‽ℴℵℶℷℸℲ℮ℯ⅁⅂⅃⅄₠₡₢₣₤₥₦₧₨₩₪₫€₭₮₯₰₱₲₳₴₵₶₷₸₹₺₻₼₽₾₿          ",letterlike:"ABCDĐEFGHIJKLMNOPQRSTUVWXYZabcdđefghijklmnopqrstuvwxyzĄąĆ毿ŹźŃńóŁłАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơưĂÂÊÔƠƯăâêôơư1234567890",zalgo:"̴̵̶̷̸̡̢̧̨̛̖̗̘̙̜̝̞̟̠̣̤̥̦̩̪̫̬̭̮̯̰̱̲̳̹̺̻̼͇͈͉͍͎̀́̂̃̄̅̆̇̈̉̊̋̌̍̎̏̐̑̒̓̔̽̾̿̀́͂̓̈́͆͊͋͌̕̚ͅ ͓͔͕͖͙͚͐͑͒͗͛ͣͤͥͦͧͨͩͪͫͬͭͮͯ͘͜͟͢͝͞͠͡͏҉",neo:"!<>-_\\/[]{}—=+*^?#________"},e.presets={default:{steps:[1,8],interval:[60,170],initialDelay:[0,2e3],changeChance:.6,ghostChance:.2,maxGhosts:.2,glyphs:e.glyphs.full+e.glyphs.zalgo,glyphsFromString:!1,oneAtATime:!1,html:!1,fillSpace:!0,letterize:!1,startFrom:"matching"},nier:{interval:[10,20],initialDelay:[0,0],steps:[1,3],changeChance:1,maxGhosts:0,glyphs:e.glyphs.nier,oneAtATime:!0,startFrom:"erase",glyphsFromString:!0},typewriter:{interval:[40,100],initialDelay:[0,0],steps:[0,1],changeChance:1,maxGhosts:0,glyphs:"",glyphsFromString:!0,oneAtATime:!0,startFrom:"erase"},terminal:{interval:[25,30],initialDelay:[0,0],steps:0,changeChance:.5,maxGhosts:0,glyphs:"",oneAtATime:!0,fillSpace:!1,glyphsFromString:!1,startFrom:"erase"},zalgo:{initialDelay:[0,3e3],interval:[10,35],steps:[0,30],maxGhosts:4.6,changeChance:.5,ghostChance:.7,glyphs:e.glyphs.zalgo,glyphsFromString:!0,fillSpace:!1},neo:{glyphs:e.glyphs.neo,maxGhosts:0,ghostChance:0,changeChance:1,interval:[30,100],initialDelay:[0,1300],steps:[4,7],startFrom:"previous",letterize:!0}}},585:(t,e,s)=>{Object.defineProperty(e,"__esModule",{value:!0});const i=s(988);e.default=class{constructor(t){this.nGhosts=0,this.isTyping=!1,this.isPaused=!1,this.finished=!1,this.writer=t,this.maxGhosts=this.writer.options.genMaxGhosts}get ghostsInLimit(){return this.nGhosts<this.maxGhosts}play(){this.isTyping=!0,this.isPaused=!1,this.finished=!1,this.toggleClass(!0),this.maxGhosts=this.writer.options.genMaxGhosts}pause(){this.isTyping=!1,this.isPaused=!0,this.toggleClass(!1)}finish(){this.isTyping=!1,this.finished=!0,this.toggleClass(!1)}toggleClass(t){const e=this.writer.htmlElement,s="gw-writing";e&&(t?i.animateWithClass(e,s):e.classList.remove(s))}}},988:(t,e)=>{function s(t,e,s){const i=Math.random()*(e-t)+t;if(s)switch(s){case"floor":return Math.floor(i);case"round":return Math.round(i);case"ceil":return Math.ceil(i)}return i}Object.defineProperty(e,"__esModule",{value:!0}),e.filterHtml=e.htmlToArray=e.isSpecialChar=e.stringToLetterItems=e.letterToLetterItem=e.coinFlip=e.getRandomFromRange=e.animateWithClass=e.isInRange=e.arrayOfTheSame=e.promiseWhile=e.wait=e.parseCharset=e.filterDuplicates=e.getRandom=e.deleteRandom=e.random=void 0,e.random=s,e.deleteRandom=function(t){const{length:e}=t;t.splice(s(0,e,"floor"),1)},e.getRandom=function(t){return t[s(0,t.length,"floor")]},e.filterDuplicates=function(t){const e="string"==typeof t,s=[];return new Set(t).forEach((t=>s.push(t))),e?s.join(""):s},e.parseCharset=function(t){if(void 0===t)return;let e;return e="string"==typeof t?t:t.length?t.join(""):Array.from(t).join(""),e},e.wait=t=>new Promise((e=>setTimeout((()=>e(t)),t))),e.promiseWhile=function(t,e){const s=()=>t()?e().then(s):Promise.resolve();return s()},e.arrayOfTheSame=(t,e)=>new Array(e).fill(t),e.isInRange=(t,e,s)=>e>=t&&e<s,e.animateWithClass=(t,e)=>{t.classList.remove(e),t.offsetWidth,t.classList.add(e)},e.getRandomFromRange=function(t,e=!0){return"number"==typeof t?t:s(...t,e?"round":void 0)},e.coinFlip=(t=.5)=>Math.random()<t,e.letterToLetterItem=t=>({value:t}),e.stringToLetterItems=t=>[...t].map(e.letterToLetterItem),e.isSpecialChar=t=>["\t","\n","\r","\f","\v",""," "].includes(t);const i="(&#?[0-9a-zA-Z]{2,6};)|(<style.+?>.+?</style>|<script.+?>.+?<\/script>|<(?:!|/?[a-zA-Z]+).*?/?>)";e.htmlToArray=function(t){const s=new RegExp(i,"g"),r=[];let n,h=0;for(;n=s.exec(t);){const i=n.index,l=s.lastIndex,a=t.slice(h,i);h=l,a&&r.push(...e.stringToLetterItems(a));const o={value:n[0],type:void 0!==n[1]?"html_entity":"tag"};r.push(o)}return t.length>h&&r.push(...e.stringToLetterItems(t.slice(h))),r},e.filterHtml=function(t){const e=new RegExp(i,"g");return t.replace(e,"")}}},e={};function s(i){var r=e[i];if(void 0!==r)return r.exports;var n=e[i]={exports:{}};return t[i](n,n.exports,s),n.exports}var i={};return(()=>{var t=i;Object.defineProperty(t,"__esModule",{value:!0}),t.wait=t.glyphs=t.presets=t.glitchWrite=void 0;const e=s(275),r=s(585),n=s(772),h=s(684),l=s(988);Object.defineProperty(t,"wait",{enumerable:!0,get:function(){return l.wait}});const a=s(702);Object.defineProperty(t,"presets",{enumerable:!0,get:function(){return a.presets}}),Object.defineProperty(t,"glyphs",{enumerable:!0,get:function(){return a.glyphs}});class o{constructor(t,s,i,n){var l;this.charTable=[],this.goalString="",this.string="","string"==typeof t?"undefined"!=typeof document&&(this.htmlElement=null!==(l=document.querySelector(t))&&void 0!==l?l:void 0):this.htmlElement=null!=t?t:void 0,this.options=new e.default(this,s),this.state=new r.default(this),this.emiter=new h.default(this,i,n),this.string=this.previousString}updateString(){this.string=this.charTable.map((t=>t.string)).join("")}get previousString(){var t;let e=null===(t=this.htmlElement)||void 0===t?void 0:t.textContent;return"string"!=typeof e&&(e=this.options.html?l.filterHtml(this.string):this.string),e=e.trim(),e}get writerData(){const{options:t,state:e,string:s}=this;return{string:s,writer:this,options:t,state:e}}async write(t,e){return"erase"!==this.options.startFrom||(null==e?void 0:e.erase)||await this.write(this.genGoalStringToErase(t),{erase:!0}),this.goalString=t,this.state.nGhosts=0,this.options.setCharset(),"matching"===this.options.startFrom?this.createMatchingCharTable():this.createPreviousCharTable(),this.letterize(),this.pause(),this.play({reverse:this.options.oneAtATime&&(null==e?void 0:e.erase)})}async add(t){const{previousString:e}=this;return this.write(e+t)}async remove(t){const{previousString:e}=this,s=Array.from(e);return s.splice(-t),this.write(s.join(""),{erase:!0})}async play(t){var e;const s=[],{charTable:i}=this,{length:r}=i;if(this.state.isTyping)return this.getWriterData("ERROR",`The writer is already typing "${this.goalString}".`);if(this.state.play(),this.options.oneAtATime){const s=null!==(e=null==t?void 0:t.reverse)&&void 0!==e&&e;let n=s?r-1:0,h=!0;const a=async()=>{h=await i[n].type(),s?n--:n++};return await l.promiseWhile((()=>l.isInRange(0,n,r)&&h&&!this.state.isPaused),a),this.returnResult(h)}i.forEach((t=>s.push(t.type())));try{const t=(await Promise.all(s)).every((t=>t));return this.returnResult(t)}catch(t){return this.getWriterData("ERROR","Writer encountered an error.",t)}}pause(){this.state.pause()}returnResult(t){return t?this.emiter.call("finish"):this.emiter.call("step"),t?this.getWriterData("SUCCESS","The writer finished typing."):this.getWriterData("ERROR","Writer failed to finish typing.")}createMatchingCharTable(){const{goalStringArray:t,previousString:e}=this,s=Math.min(Math.ceil(this.options.genMaxGhosts/2),5);let i=-1;t.forEach(((t,r)=>{i++;const n=e[i];if("tag"===t.type)return i--,void this.setChar(r,"",t);const h=""!==t.value?e.indexOf(t.value,i):-1;if(-1!==h&&h-i<=s){const s=e.substring(i,h);this.setChar(r,t.value,t,s),i=h,this.state.nGhosts+=s.length}else this.setChar(r,n||this.options.space,t)})),this.removeExtraChars(t.length)}createPreviousCharTable(){const{goalStringArray:t,previousString:e}=this;let s=-1;t.forEach(((t,i)=>{s++;const r=e[s]||this.options.space;if("tag"===t.type)return s--,void this.setChar(i,"",t);this.setChar(i,r,t)})),this.removeExtraChars(t.length)}letterize(){if(!this.options.letterize||!this.htmlElement)return;const t=this.charTable.map((({isTag:t,gl:e})=>t?e:'<span class="gw-char"></span>')).join("");this.htmlElement.innerHTML=t;const e=this.htmlElement.querySelectorAll("span.gw-char");let s=0;this.charTable.forEach((t=>{t.isTag||(t.spanElement=e[s],s++)}))}removeExtraChars(t){const{charTable:e}=this;e.splice(t,e.length-t)}setChar(t,e,s,i){const{charTable:r}=this,h=r[t];h?h.reset(e,s.value||this.options.space,i,"tag"===s.type):r.push(new n.default(this,e,s.value||this.options.space,i,"tag"===s.type))}get goalStringArray(){const{goalString:t,previousString:e,options:s}=this,i=s.html?l.htmlToArray(t):l.stringToLetterItems(t),r=Math.max(e.length-i.length,0);return i.push(...l.stringToLetterItems(l.arrayOfTheSame("",r))),i}getWriterData(t,e,s){const{writerData:i}=this;return Object.assign(Object.assign({},i),{status:t,message:e,error:s})}genGoalStringToErase(t){var e;const{previousString:s}=this;let i="";for(let r=0;r<t.length;r++){const n=t[r],h=null!==(e=s[r])&&void 0!==e?e:"";if(n!==h)break;i+=h}const r=Math.max(t.length-i.length,0);return r>0&&" "===this.options.space&&(i=i.padEnd(r+i.length," ")),i}}t.default=o,t.glitchWrite=async function(t,e,s,i,r){return new o(e,s,i,r).write(t)}})(),i})()}));
 //# sourceMappingURL=index.min.map

lib/presets.js

@@ -50,3 +50,3 @@ "use strict";
     terminal: {
-        interval: [25, 35],
+        interval: [25, 30],
         initialDelay: [0, 0],
@@ -53,0 +53,0 @@ steps: 0,

lib/utils.js

@@ -84,3 +84,3 @@ "use strict";
 exports.stringToLetterItems = stringToLetterItems;
-const isSpecialChar = (l) => ['\t', '\n', '\r', '\f', '\v', ' ', ''].includes(l);
+const isSpecialChar = (l) => ['\t', '\n', '\r', '\f', '\v', '', ' '].includes(l);
 exports.isSpecialChar = isSpecialChar;
@@ -87,0 +87,0 @@ const findHTMLPattern = '(&#?[0-9a-zA-Z]{2,6};)|(<style.+?>.+?</style>|<script.+?>.+?</script>|<(?:!|/?[a-zA-Z]+).*?/?>)';

package.json

 {
   "name": "glitched-writer",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "Glitched, text writing module. Highly customizable settings. Decoding, decrypting, scrambling, and simply spelling text.",
@@ -22,3 +22,4 @@ "author": "Damian Tarnawski @thetarnav <[e-mail]>",
     "dev": "parcel dev/index.html --dist-dir dev/dist",
-    "build": "tsc && grunt build"
+    "build": "tsc && grunt build",
+    "publish": "npm version patch && npm publish && git push && git push --tags"
   },
@@ -25,0 +26,0 @@ "devDependencies": {

README.md

@@ -10,9 +10,9 @@ # Glitched Writer
 
-> A lightweight, glitched, text writing module. Highly customizable settings. Decoding, decrypting, scrambling, and simply spelling text. For web and node.
+> **A lightweight, glitched, text writing module. Highly customizable settings. Decoding, decrypting, scrambling, and simply spelling text. For web and node.**
 
 ### Features:
 
--  Writes your text, by glitching or spelling it out.
+-  Manage text animation of **HTML Element**. Write, pause, play, add, remove and write more!
 
--  **Highly customizable** behavior. Set of options will help you achieve the effect you desire.
+-  **Highly customizable** behavior. Set of options let you animate the text the way is suits your design.
 
@@ -23,3 +23,3 @@ -  Can be attached to a **HTML Element** for automatic text-displaying.
 
--  Custom Event **gw-finished** are dispatched on the HTML Element.
+-  Custom Event **gw-finished** will be dispatched on the HTML Element.
 
@@ -30,6 +30,12 @@ -  For styling purposes writer attatches **gw-writing** class to the HTML Element and **data-gw-string attribute** with current string.
 
--  Written in **Typescript**.
+-  Written fully in **Typescript**.
 
 ---
 
+### SEE DEMOS:
+
+#### [Default (interactive)](https://codepen.io/thetarnav/pen/MWWyPzY) --- [Terminal](https://codepen.io/thetarnav/pen/mdRyqga) --- [Simple Scramble Effect](https://codepen.io/thetarnav/pen/vYgYWbb)
+
+---
+
 ## Table Of Contents
@@ -66,6 +72,6 @@
 
-Or use Skypack
+Or use [Skypack](https://www.skypack.dev/view/glitched-writer) to import without need to install the package.
 
 ```js
-import glitchedWriter from 'https://cdn.skypack.dev/glitched-writer'
+import GlitchedWriter from 'https://cdn.skypack.dev/glitched-writer'
 ```
@@ -76,3 +82,3 @@
 ```html
-<script src="https://cdn.jsdelivr.net/npm/glitched-writer@2.0.10/lib/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/glitched-writer@2.0.14/lib/index.min.js"></script>
 ```
@@ -89,6 +95,6 @@
 const Writer = new GlitchedWriter(
-	htmlElement, // Element or Selector string
-	options, // {...} or Preset name
-	onStepCallback, // (string, data) => {}
-	onFinishCallback, // (string, data) => {}
+	htmlElement, // Element / Selector string / undefined
+	options, // {...} / Preset name / undefined
+	onStepCallback, // (string, data) => {} / undefined
+	onFinishCallback, // (string, data) => {} / undefined
 )
@@ -194,4 +200,3 @@
 
-(**! experimental & potentially dangerous !**) Let's you write text with html tags in it.
-Can be enabled along with "letterize" option, but the "double tags", like <b> ... </b> won't show up.
+(**! Potentially dangerous !**) Let's you write text with html tags in it.
 
@@ -207,3 +212,3 @@ ```js
 
-(**Experimental!**) Splits written text into series of <span> elements. Then writing letters seperately into these child-elements.
+Splits written text into series of span elements. Then writing letters seperately into these child-elements. _Now can be used fully with HTML option!_
 
@@ -217,3 +222,3 @@ ```js
  * The shape of one character:
- * span.gw-char (state classes: .gw-typing or .gw-finished)
+ * span.gw-char (and .gw-finished when finish typing)
  * 	span.gw-ghosts
@@ -328,5 +333,5 @@ * 	span.gw-letter (also .gw-glitched when it is a "glitched" char.)
 
--  **html** - _Potentially dangerous option._ If true, written string will be injected as html, not text content. It provides advanced text formating with html tags and more. But be sure to not enable it on user-provided content.
+-  **html** - _Potentially dangerous option._ If true, written string will be injected as html, not text content. It provides advanced text formating with html tags and more. But be sure to NOT enable it on user-provided content.
 
--  **letterize** - _Experimental option._ Instead of injecting written text to "textContent" or "innerHTML", it appends every letter of that text as a child <span> element. Then changing textContent of that span to current letter. It gives a lot of styling possibilities, as you can style ghosts, letters, and whole chars seperately, depending on current writer and char state.
+-  **letterize** - Instead of injecting written text to "textContent" or "innerHTML", it appends every letter of that text as a child span element. Then changing textContent of that span to current letter. It gives a lot of styling possibilities, as you can style ghosts, letters, and whole chars seperately, depending on current writer and char state.
 
@@ -333,0 +338,0 @@ -  **fillSpace** - Normally if letter gets erased it actually gets replaced with space instead - to make words appear from and disappear into space, rather then sticking to the rest of the words. Set to false if you want to disable this.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

158271

increased by1.19%

Lines of code

1099

increased by1.1%

Number of lines in readme file

339

increased by1.5%

No dependency changes