work

tools/XylkJweJ/secret.html

@@ -1,85 +1,87 @@
 <script>// ——————————————————————————————————————————————————
     // TextScramble
     // ——————————————————————————————————————————————————
-
+    
     class TextScramble {
-        constructor(el) {
+      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 length = Math.max(oldText.length, newText.length);
+        const promise = new Promise(resolve => this.resolve = resolve);
+        this.queue = [];
+        for (let i = 0; i < length; i++) {
+          const from = oldText[i] || '';
+          const to = newText[i] || '';
+          const start = Math.floor(Math.random() * 40);
+          const end = start + Math.floor(Math.random() * 40);
+          this.queue.push({
+            from,
+            to,
+            start,
+            end
+          });
         }
-        setText(newText) {
+        cancelAnimationFrame(this.frameRequest);
-            const oldText = this.el.innerText
+        this.frame = 0;
-            const length = Math.max(oldText.length, newText.length)
+        this.update();
-            const promise = new Promise((resolve) => this.resolve = resolve)
+        return promise;
-            this.queue = []
+      }
-            for (let i = 0; i < length; i++) {
+      update() {
-                const from = oldText[i] || ''
+        let output = '';
-                const to = newText[i] || ''
+        let complete = 0;
-                const start = Math.floor(Math.random() * 40)
+        for (let i = 0, n = this.queue.length; i < n; i++) {
-                const end = start + Math.floor(Math.random() * 40)
+          let {
-                this.queue.push({ from, to, start, end })
+            from,
+            to,
+            start,
+            end,
+            char
+          } = this.queue[i];
+          if (this.frame >= end) {
+            complete++;
+            output += to;
+          } else if (this.frame >= start) {
+            if (!char || Math.random() < 0.28) {
+              char = this.randomChar();
+              this.queue[i].char = char;
             }
-            cancelAnimationFrame(this.frameRequest)
+            output += `<span class="dud">${char}</span>`;
-            this.frame = 0
+          } else {
-            this.update()
+            output += from;
-            return promise
+          }
         }
-        update() {
+        this.el.innerHTML = output;
-            let output = ''
+        if (complete === this.queue.length) {
-            let complete = 0
+          this.resolve();
-            for (let i = 0, n = this.queue.length; i < n; i++) {
+        } else {
-                let { from, to, start, end, char } = this.queue[i]
+          this.frameRequest = requestAnimationFrame(this.update);
-                if (this.frame >= end) {
+          this.frame++;
-                    complete++
-                    output += to
-                } else if (this.frame >= start) {
-                    if (!char || Math.random() < 0.28) {
-                        char = this.randomChar()
-                        this.queue[i].char = char
-                    }
-                    output += `<span class="dud">${char}</span>`
-                } else {
-                    output += from
-                }
-            }
-            this.el.innerHTML = output
-            if (complete === this.queue.length) {
-                this.resolve()
-            } else {
-                this.frameRequest = requestAnimationFrame(this.update)
-                this.frame++
-            }
-        }
-        randomChar() {
-            return this.chars[Math.floor(Math.random() * this.chars.length)]
         }
+      }
+      randomChar() {
+        return this.chars[Math.floor(Math.random() * this.chars.length)];
+      }
     }
-
+    
     // ——————————————————————————————————————————————————
     // 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(() => {
+      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';