Perfect

o0101 · Aug 28, 2022 · 5f30def · 5f30def
1 parent a6bf7fb
commit 5f30def
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 19 deletions.
diff --git a/WebPlus_IBM_VGA_9x14.woff b/WebPlus_IBM_VGA_9x14.woff
diff --git a/index.html b/index.html
@@ -4,50 +4,106 @@
   <meta name=viewport content=width=device-width,initial-scale=1.0>
   <style>
     @font-face {
-      font-family: "ascii";
-      unicode-range: U+0000-U+00FF;
-      src: url("/px437/Px437_IBM_BIOS.ttf");
-      src: url("/px437/Px437_ATI_8x16.ttf");
-      src: url("/px437/Px437_TandyOld_225.ttf");
-      src: url("/px437/Px437_IBM_3270pc.ttf");
+      font-family: "IBM VGA 9x14";
+      src: url("./WebPlus_IBM_VGA_9x14.woff");
     }
 
     :root, body, .screen {
-      font-family: ascii, monospace;
+      font-family: "IBM VGA 9x14", monospace;
       margin: 0;
       padding: 0;
       width: 100vw;
       height: 100vh;
       overflow: hidden;
       position: absolute;
+      box-sizing: border-box;
       top: 0; right: 0; bottom: 0; left: 0;
       font-size: 23px;
       word-break: break-all;
-      background: black;
-      color: aqua;
+      background-color: black;
+      white-space: pre-wrap;
+      color: rgba(0, 222, 222, 0.8);
     }
 
     .screen {
       pointer-events: none;
       user-select: none;
+      height: 133vh;
+      width: calc(100vw + 40px);
+      margin-top: -33vh;
+      background-color: transparent;
+    }
+
+    body {
+      transition: background-color 1s ease;
+    }
+
+    body.flash {
+      background-color: rgba(0, 222, 222, 0.5);
+    }
+
+    @media screen and (min-width: 1600px) and (min-height: 800px) {
+      :root, body, .screen {
+        font-size: 37px;
+      }
     }
   </style>
   <main id=view class=screen></main>
   <script>
-    const s = Math.ceil((innerWidth/23)*(innerHeight/23)*1.618);
+    const StopKeys = new Set([
+      ' ',
+    ]);
+    // ASCII extended (classic DOS ascii with box characters) CP437 -> Unicode map
+    const T = JSON.parse("[\"0000\",\"0001\",\"0002\",\"0003\",\"0004\",\"0005\",\"0006\",\"0007\",\"0008\",\"0009\",\"000A\",\"000B\",\"000C\",\"000D\",\"000E\",\"000F\",\"0010\",\"0011\",\"0012\",\"0013\",\"0014\",\"0015\",\"0016\",\"0017\",\"0018\",\"0019\",\"001A\",\"001B\",\"001C\",\"001D\",\"001E\",\"001F\",\"0020\",\"0021\",\"0022\",\"0023\",\"0024\",\"0025\",\"0026\",\"0027\",\"0028\",\"0029\",\"002A\",\"002B\",\"002C\",\"002D\",\"002E\",\"002F\",\"0030\",\"0031\",\"0032\",\"0033\",\"0034\",\"0035\",\"0036\",\"0037\",\"0038\",\"0039\",\"003A\",\"003B\",\"003C\",\"003D\",\"003E\",\"003F\",\"0040\",\"0041\",\"0042\",\"0043\",\"0044\",\"0045\",\"0046\",\"0047\",\"0048\",\"0049\",\"004A\",\"004B\",\"004C\",\"004D\",\"004E\",\"004F\",\"0050\",\"0051\",\"0052\",\"0053\",\"0054\",\"0055\",\"0056\",\"0057\",\"0058\",\"0059\",\"005A\",\"005B\",\"005C\",\"005D\",\"005E\",\"005F\",\"0060\",\"0061\",\"0062\",\"0063\",\"0064\",\"0065\",\"0066\",\"0067\",\"0068\",\"0069\",\"006A\",\"006B\",\"006C\",\"006D\",\"006E\",\"006F\",\"0070\",\"0071\",\"0072\",\"0073\",\"0074\",\"0075\",\"0076\",\"0077\",\"0078\",\"0079\",\"007A\",\"007B\",\"007C\",\"007D\",\"007E\",\"007F\",\"00C7\",\"00FC\",\"00E9\",\"00E2\",\"00E4\",\"00E0\",\"00E5\",\"00E7\",\"00EA\",\"00EB\",\"00E8\",\"00EF\",\"00EE\",\"00EC\",\"00C4\",\"00C5\",\"00C9\",\"00E6\",\"00C6\",\"00F4\",\"00F6\",\"00F2\",\"00FB\",\"00F9\",\"00FF\",\"00D6\",\"00DC\",\"00A2\",\"00A3\",\"00A5\",\"20A7\",\"0192\",\"00E1\",\"00ED\",\"00F3\",\"00FA\",\"00F1\",\"00D1\",\"00AA\",\"00BA\",\"00BF\",\"2310\",\"00AC\",\"00BD\",\"00BC\",\"00A1\",\"00AB\",\"00BB\",\"2591\",\"2592\",\"2593\",\"2502\",\"2524\",\"2561\",\"2562\",\"2556\",\"2555\",\"2563\",\"2551\",\"2557\",\"255D\",\"255C\",\"255B\",\"2510\",\"2514\",\"2534\",\"252C\",\"251C\",\"2500\",\"253C\",\"255E\",\"255F\",\"255A\",\"2554\",\"2569\",\"2566\",\"2560\",\"2550\",\"256C\",\"2567\",\"2568\",\"2564\",\"2565\",\"2559\",\"2558\",\"2552\",\"2553\",\"256B\",\"256A\",\"2518\",\"250C\",\"2588\",\"2584\",\"258C\",\"2590\",\"2580\",\"03B1\",\"00DF\",\"0393\",\"03C0\",\"03A3\",\"03C3\",\"00B5\",\"03C4\",\"03A6\",\"0398\",\"03A9\",\"03B4\",\"221E\",\"03C6\",\"03B5\",\"2229\",\"2261\",\"00B1\",\"2265\",\"2264\",\"2320\",\"2321\",\"00F7\",\"2248\",\"00B0\",\"2219\",\"00B7\",\"221A\",\"207F\",\"00B2\",\"25A0\",\"00A0\"]")
+    const SZ = innerWidth >= 1600 && innerHeight >= 800 ? 37 : 23;
+    const M = T.map(x => parseInt(x, 16));
+    const s = Math.ceil((innerWidth/SZ)*(innerHeight*1.33/SZ)*1.618);
     const add = Math.ceil(Math.log(s))**2;
     const B = new Uint8Array(s);
+    const toggle = () => self.down ^= true;
+    let timer = 7;
+    let lastSign;
+    let reset;
 
     view.innerText = Random(s);
 
-    self.onmousedown = () => self.down = true;
-    self.ontouchstart = () => self.down = true;
-    self.onmouseup = () => self.down = false;
-    self.ontouchend = () => self.down = false;
+    self.addEventListener('click', toggle, {passive:true});
+    self.addEventListener('keydown', pressed => StopKeys.has(pressed.key) && toggle(), {passive:true});
+    self.addEventListener('keypress', pressed => {
+      switch(pressed.key) {
+        case "+":
+          timer = Math.max(0, timer - 2);
+          if ( timer === 0 ) {
+            document.body.classList.add('flash');
+            setTimeout(() => document.body.classList.remove('flash'), 1000);
+          }
+          break;
+        case "-":
+          timer += 2;
+          console.log({timer});
+          break;
+        default: break;
+      }
+    });
+    self.addEventListener('wheel', wheel => {
+      if ( reset ) {
+        clearTimeout(reset);
+        reset = null;
+      }
+      const sign = Math.sign(wheel.deltaY);
+      if ( sign !== lastSign ) {
+        toggle();
+        lastSign = sign;
+      }
+      reset=setTimeout(() => lastSign = 0, 100);
+    }, {passive:true});
 
-    self.NR = () => !self.down && NextRandom(add);
+    self.NR = () => {
+      !self.down && NextRandom(add);
+      setTimeout(() => self.NR(), timer);
+    }
 
-    setInterval(() => self.NR(), 7);
+    const x = setTimeout(() => self.NR(), timer);
 
     function NextRandom(len) {
       const A = new Uint8Array(len);
@@ -59,11 +115,11 @@
       }
       B.set(x, 0);
       B.set(A, B.length - A.length);
-      view.innerText = String.fromCharCode(...B);
+      view.innerText = Array.from(B).map(bval => String.fromCodePoint(M[bval])).join('');
     }
 
     function Random(len) {
       crypto.getRandomValues(B); 
-      return String.fromCharCode(...B);
+      return Array.from(B).map(bval => String.fromCodePoint(M[bval])).join('');
     }
   </script>
diff --git a/package-lock.json b/package-lock.json
diff --git a/start.sh b/start.sh
@@ -1,4 +1,4 @@
 #!/bin/bash
 
-voli -p 8080 --ssl-cert=./sslcerts/fullchain.pem --ssl-key=./sslcerts/privkey.pem
+serve -p 8080