-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (115 loc) · 5.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<meta charset=ibm437>
<meta name=theme-color content=black>
<meta name=viewport content=width=device-width,initial-scale=1.0>
<style>
@font-face {
font-family: "IBM VGA 9x14";
src: url("./WebPlus_IBM_VGA_9x14.woff");
}
:root, body, .screen {
cursor: none;
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-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 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.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);
setTimeout(() => self.NR(), timer);
}
const x = setTimeout(() => self.NR(), timer);
function NextRandom(len) {
const A = new Uint8Array(len);
crypto.getRandomValues(A);
const x = Array.from(B);
let i = A.length;
while(i--) {
x.shift();
}
B.set(x, 0);
B.set(A, B.length - A.length);
view.innerText = Array.from(B).map(bval => String.fromCodePoint(M[bval])).join('');
}
function Random(len) {
crypto.getRandomValues(B);
return Array.from(B).map(bval => String.fromCodePoint(M[bval])).join('');
}
</script>