Add component code and alpinejs

index.html

@@ -57,12 +57,28 @@ <h2 class="text-center text-6xl py-8 font-cursive min-h-32" id="human-is-the-new
             <button id="copy" class="block bg-button text-white p-2 hidden">Copy code</button>
         </div>
 
-        <pre id="code-wrapper" class="hidden relative max-w-xl mx-auto rounded">
-            <code id="code" class="whitespace-pre-wrap">
-            </code>
+        <div id="code-wrapper" class="hidden max-w-xl mx-auto" x-data="{vanilla: true}">
+            <nav class="flex justify-end">
+                <ul class="flex divide-x justify-end border border-black">
+                    <li>
+                            <button id="vanilla" class="p-2 pr-4" :class="{'bg-amber-100 text-black': vanilla, 'bg-slate-900 text-white hover:bg-button': !vanilla}" @click="vanilla = true">Good Old JS</button>
+                    </li>
+                    <li>
+                        <button id="web-component" class="p-2 pl-4" @click="vanilla = false" :class="{'bg-amber-100 text-black': !vanilla, 'bg-slate-900 text-white hover:bg-button': vanilla}">Web Component</button>
+                    </li>
+                </ul>
+            </nav>
 
-            <button id="copy-code" class="rounded block absolute top-8 right-4 bg-button text-white p-2 pb-1"><span class="i-lucide-files"></span></button>
-        </pre>
+            <pre class="w-full rounded whitespace-normal relative">
+                <code id="vanilla-code" class="whitespace-pre-wrap" x-show="vanilla">
+                </code>
+
+                <code id="web-component-code" class="whitespace-pre-wrap" x-show="!vanilla">
+                </code>
+
+                <button id="copy-code" class="rounded block absolute top-4 right-4 bg-button text-white p-2 pb-1" @click="copyCode(vanilla ? '#vanilla-code' : '#web-component-code')"><span class="i-lucide-files"></span></button>
+            </pre>
+        <div>
 
     </div>
 

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,17 +161,19 @@ 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) => {
         event.preventDefault();
         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:
+// <human-replay></human-replay>
+`
+    };
+
     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 }];
 

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",