+
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
index dcf8a44..8225bc5 100644
--- a/main.js
+++ b/main.js
@@ -2,11 +2,16 @@ import './style.css'
import '@fontsource/coming-soon';
import '@fontsource/staatliches';
import '@fontsource/licorice';
+import Alpine from 'alpinejs'
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/nord.css';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
+window.Alpine = Alpine
+
+Alpine.start()
+
window.onload = function() {
const text = document.getElementById('text');
@@ -15,7 +20,8 @@ window.onload = function() {
const generateButton = document.getElementById('generate');
const resetButton = document.getElementById('reset');
const codeWrapper = document.getElementById('code-wrapper');
- const code = document.getElementById('code');
+ const vanillaCode = document.getElementById('vanilla-code');
+ const webComponentCode = document.getElementById('web-component-code');
const copyCodeButton = document.getElementById('copy-code');
const preview = document.getElementById('preview');
const humanIsTheNewBlack = document.getElementById('human-is-the-new-black');
@@ -155,9 +161,11 @@ window.onload = function() {
clearInterval(interval);
}
interval = null;
- code.textContent = '';
+ vanillaCode.textContent = '';
+ webComponentCode.textContent = '';
codeWrapper.classList.add('hidden');
- delete code.dataset.highlighted;
+ delete vanillaCode.dataset.highlighted;
+ delete webComponentCode.dataset.highlighted;
};
resetButton.addEventListener('click', (event) => {
@@ -165,7 +173,7 @@ window.onload = function() {
reset();
});
- const generateCode = () => {
+ const generateSimpleJSCode = () => {
return `/*
* This code was generated by Human Replay (https://einenlum.github.io/human-replay/)
*/
@@ -212,21 +220,81 @@ replayText(myElement, values);
`
};
+ const generateWebComponentCode = () => {
+ return `/*
+ * This code was generated by Human Replay (https://einenlum.github.io/human-replay/)
+ */
+class HumanReplay extends HTMLElement {
+ constructor() {
+ super();
+
+ this.values = ${JSON.stringify(compressData(values))};
+ this.interval = null;
+ }
+
+ connectedCallback() {
+ const printingStart = new Date();
+
+ this.interval = setInterval(() => {
+ const timePassed = new Date() - printingStart;
+
+ const value = this.values.shift();
+
+ if (!value) {
+ clearInterval(this.interval);
+
+ return;
+ }
+
+ if (value.t > timePassed) {
+ this.values.unshift(value);
+
+ return;
+ }
+
+
+ switch (value.op) {
+ case 'a':
+ this.textContent = this.textContent + value.v;
+ break;
+ case 'd':
+ this.textContent = this.textContent.slice(0, -1);
+ break;
+ default:
+ this.textContent = value.v;
+ }
+ }, 20);
+ }
+
+ disconnectedCallback() {
+ clearInterval(this.interval);
+ }
+}
+
+customElements.define('human-replay', HumanReplay);
+
+// in HTML, use it like this:
+//
+`
+ };
+
generateButton.addEventListener('click', (event) => {
event.preventDefault();
- delete code.dataset.highlighted;
+ delete vanillaCode.dataset.highlighted;
+ delete webComponentCode.dataset.highlighted;
generateButton.classList.add('hidden');
- code.textContent = generateCode();
+ vanillaCode.textContent = generateSimpleJSCode();
+ webComponentCode.textContent = generateWebComponentCode();
codeWrapper.classList.remove('hidden');
hljs.highlightAll();
});
- copyCodeButton.addEventListener('click', (event) => {
- event.preventDefault();
+ window.copyCode = (selector) => {
+ const code = document.querySelector(selector);
navigator.clipboard.writeText(code.textContent);
- });
+ }
const humanIsTheNewBlackValues = [{ "op": "a", "v": "H", "t": 0 }, { "op": "a", "v": "u", "t": 354 }, { "op": "a", "v": "m", "t": 464 }, { "op": "a", "v": "a", "t": 594 }, { "op": "a", "v": "n", "t": 711 }, { "op": "a", "v": " ", "t": 808 }, { "op": "a", "v": "i", "t": 1176 }, { "op": "a", "v": "s", "t": 1466 }, { "op": "d", "t": 1942 }, { "op": "a", "v": "s", "t": 2323 }, { "op": "a", "v": " ", "t": 2548 }, { "op": "a", "v": "t", "t": 2905 }, { "op": "a", "v": "h", "t": 2977 }, { "op": "a", "v": "e", "t": 3069 }, { "op": "a", "v": " ", "t": 3172 }, { "op": "a", "v": "n", "t": 3459 }, { "op": "a", "v": "e", "t": 3556 }, { "op": "a", "v": "w", "t": 3672 }, { "op": "a", "v": " ", "t": 3772 }, { "op": "a", "v": "B", "t": 4078 }, { "op": "d", "t": 4772 }, { "op": "a", "v": "b", "t": 5001 }, { "op": "a", "v": "l", "t": 5079 }, { "op": "a", "v": "a", "t": 5165 }, { "op": "a", "v": "c", "t": 5267 }, { "op": "a", "v": "k", "t": 5422 }, { "op": "a", "v": ".", "t": 5504 }];
diff --git a/package-lock.json b/package-lock.json
index 582be77..54fdd86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,19 @@
{
"name": "human-replay",
- "version": "0.0.0",
+ "version": "2.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "human-replay",
- "version": "0.0.0",
+ "version": "2.0.0",
"devDependencies": {
"@egoist/tailwindcss-icons": "^1.7.4",
"@fontsource/coming-soon": "^5.0.8",
"@fontsource/licorice": "^5.0.18",
"@fontsource/staatliches": "^5.0.18",
"@iconify-json/lucide": "^1.1.170",
+ "alpinejs": "^3.13.7",
"autoprefixer": "^10.4.17",
"highlight.js": "^11.9.0",
"postcss": "^8.4.35",
@@ -767,6 +768,21 @@
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true
},
+ "node_modules/@vue/reactivity": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+ "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+ "dev": true,
+ "dependencies": {
+ "@vue/shared": "3.1.5"
+ }
+ },
+ "node_modules/@vue/shared": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+ "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
+ "dev": true
+ },
"node_modules/acorn": {
"version": "8.11.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -779,6 +795,15 @@
"node": ">=0.4.0"
}
},
+ "node_modules/alpinejs": {
+ "version": "3.13.7",
+ "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.7.tgz",
+ "integrity": "sha512-rcTyjTANbsePq1hb7eSekt3qjI94HLGeO6JaRjCssCVbIIc+qBrc7pO5S/+2JB6oojIibjM6FA+xRI3zhGPZIg==",
+ "dev": true,
+ "dependencies": {
+ "@vue/reactivity": "~3.1.1"
+ }
+ },
"node_modules/ansi-regex": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
diff --git a/package.json b/package.json
index 11aa84f..45947d6 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"@fontsource/licorice": "^5.0.18",
"@fontsource/staatliches": "^5.0.18",
"@iconify-json/lucide": "^1.1.170",
+ "alpinejs": "^3.13.7",
"autoprefixer": "^10.4.17",
"highlight.js": "^11.9.0",
"postcss": "^8.4.35",