-
-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.html
113 lines (98 loc) · 3.69 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>uni WebAssembly demo</title>
<style>
.light, .light input { background-color: #fff; color: #252525; }
.dark, .dark input { background-color: #252525; color: #fff; }
.sepia, .sepia input { background-color: #f4ecd8;; color: #5b4636;; }
input { flex-grow: 1; }
input, button { font: 16px monospace; border: 1px solid #666; }
input:focus { box-shadow: 0px 0px .2em #6262fd;; }
p { font: 14px sans-serif; margin-top: 1em; }
div { display: flex; }
</style>
</head>
<body class="light">
<pre id="output"></pre>
<div><span>$ uni </span><input id="input" disabled placeholder="Loading WebAssembly binary..."></div>
<p>uni WebAssembly demo; <a href="https://github.com/arp242/uni">homepage</a>, <a href="https://www.arp242.net/wasm-cli.html">details</a>. Type <code>help</code> for usage; the <a href="https://github.com/arp242/uni/#usage">README</a> has more examples.</a></p>
<p>
<button class="light">Light</button>
<button class="dark">Dark</button>
<button class="sepia">Sepia</button>
· <button class="permalink">Permalink to last command</button>
· Up/down arrows to cycle history, ^L to clear the screen.</p>
<script src="wasm_exec.js"></script>
<script src="term.js"></script>
<script>
(function() {
if (!('WebAssembly' in window)) {
document.body.innerText = 'Sorry, you need a browser with WebAssembly support';
return;
}
set_output(window.output);
fetch('main.wasm').then(response => response.arrayBuffer()).then(function(bin) {
window.input.placeholder = 'Ready!';
window.input.disabled = false;
readline('uni', window.output, window.input, function(cmd) {
window.input.placeholder = '';
const go = new Go();
go.argv = cmd;
go.exit = (code) => {
if (code > 0)
output.innerText += 'Exit ' + code + '\n';
};
WebAssembly.instantiate(bin, go.importObject).then((result) => {
go.run(result.instance);
});
});
});
})();
</script>
<script>
if (location.hash !== '') {
location.hash.substr(1).split(',').forEach((i) => {
i = decodeURIComponent(i)
if (i.indexOf('color:') === 0)
return document.body.className = i.substr(6)
if (i.indexOf('run:') === 0) {
input.value = i.substr(4)
var event = document.createEvent('KeyboardEvent')
event.initKeyboardEvent('keydown', true, true, window, false, false, false, false, 13, 0)
// Keep trying until everything is loaded and the event is actually handled
var t = setInterval(function() {
if (!input.dispatchEvent(event)) // Returns false when handled, not an error (loljs)
clearInterval(t)
}, 10)
}
})
if (document.body.className !== '')
location.hash = 'color:' + document.body.className
}
document.querySelectorAll('button').forEach((elem) => {
elem.addEventListener('click', (e) => {
e.preventDefault()
if (elem.className == 'permalink') {
var event = document.createEvent('KeyboardEvent')
event.initKeyboardEvent('keydown', true, true, window, false, false, false, false, 38, 0)
input.dispatchEvent(event)
var cmd = input.value
var event = document.createEvent('KeyboardEvent')
event.initKeyboardEvent('keydown', true, true, window, false, false, false, false, 40, 0)
input.dispatchEvent(event)
if (cmd === '')
return alert('No command yet')
var loc = location + ''
alert(loc + (location.hash.length > 1 ? ',' : '#') + encodeURIComponent('run:' + cmd))
return input.focus()
}
document.body.className = elem.className
location.hash = 'color:' + elem.className
input.focus()
})
});
</script>
</body>
</html>