work

tools/XylkJweJ/secret.html

@@ -4,55 +4,66 @@
     
     class TextScramble {
       constructor(el) {
-            this.el = el
+        this.el = el;
-            this.chars = '!<>-_\\/[]{}—=+*^?#________'
+        this.chars = '!<>-_\\/[]{}—=+*^?#________';
-            this.update = this.update.bind(this)
+        this.update = this.update.bind(this);
       }
       setText(newText) {
-            const oldText = this.el.innerText
+        const oldText = this.el.innerText;
-            const length = Math.max(oldText.length, newText.length)
+        const length = Math.max(oldText.length, newText.length);
-            const promise = new Promise((resolve) => this.resolve = resolve)
+        const promise = new Promise(resolve => this.resolve = resolve);
-            this.queue = []
+        this.queue = [];
         for (let i = 0; i < length; i++) {
-                const from = oldText[i] || ''
+          const from = oldText[i] || '';
-                const to = newText[i] || ''
+          const to = newText[i] || '';
-                const start = Math.floor(Math.random() * 40)
+          const start = Math.floor(Math.random() * 40);
-                const end = start + Math.floor(Math.random() * 40)
+          const end = start + Math.floor(Math.random() * 40);
-                this.queue.push({ from, to, start, end })
+          this.queue.push({
+            from,
+            to,
+            start,
+            end
+          });
         }
-            cancelAnimationFrame(this.frameRequest)
+        cancelAnimationFrame(this.frameRequest);
-            this.frame = 0
+        this.frame = 0;
-            this.update()
+        this.update();
-            return promise
+        return promise;
       }
       update() {
-            let output = ''
+        let output = '';
-            let complete = 0
+        let complete = 0;
         for (let i = 0, n = this.queue.length; i < n; i++) {
-                let { from, to, start, end, char } = this.queue[i]
+          let {
+            from,
+            to,
+            start,
+            end,
+            char
+          } = this.queue[i];
           if (this.frame >= end) {
-                    complete++
+            complete++;
-                    output += to
+            output += to;
           } else if (this.frame >= start) {
             if (!char || Math.random() < 0.28) {
-                        char = this.randomChar()
+              char = this.randomChar();
-                        this.queue[i].char = char
+              this.queue[i].char = char;
             }
-                    output += `<span class="dud">${char}</span>`
+            output += `<span class="dud">${char}</span>`;
           } else {
-                    output += from
+            output += from;
           }
         }
-            this.el.innerHTML = output
+        this.el.innerHTML = output;
         if (complete === this.queue.length) {
-                this.resolve()
+          this.resolve();
         } else {
-                this.frameRequest = requestAnimationFrame(this.update)
+          this.frameRequest = requestAnimationFrame(this.update);
-                this.frame++
+          this.frame++;
         }
       }
       randomChar() {
-            return this.chars[Math.floor(Math.random() * this.chars.length)]
+        return this.chars[Math.floor(Math.random() * this.chars.length)];
       }
     }
     
@@ -60,26 +71,17 @@
     // Example
     // ——————————————————————————————————————————————————
     
-    const phrases = [
+    const phrases = ['You think you are funny?', 'Do you think that the number 69 is funny?', 'You probably just see the number 69 and go "haha 69"', 'Its not funny', 'Please stop'];
-        'You think you are funny?',
+    const el = document.querySelector('.text');
-        'Do you think that the number 69 is funny?',
+    const fx = new TextScramble(el);
-        'You probably just see the number 69 and go "haha 69"',
+    let counter = 0;
-        'Its not funny',
-        'Please stop'
-    ]
-
-    const el = document.querySelector('.text')
-    const fx = new TextScramble(el)
-
-    let counter = 0
     const next = () => {
       fx.setText(phrases[counter]).then(() => {
-            setTimeout(next, 800)
+        setTimeout(next, 800);
-        })
+      });
-        counter = (counter + 1) % phrases.length
+      counter = (counter + 1) % phrases.length;
-    }
+    };
-
+    next();
-    next()
 </script>
 <style>
     @import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';