This repository has been archived by the owner on Apr 13, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
105 lines (91 loc) · 2.83 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Monotone Crescendo in WebAssembly</title>
<style>
:root {
--bg-color: #0f1419;
--text-color: #c5c5c5;
--answer-color: #ffb44c;
}
body,
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--bg-color);
color: var(--text-color);
font: 16px/1.4 "Source Serif 4", "Noto Sans KR", serif;
font-feature-settings: "kern", "liga";
}
h3 {
color: var(--answer-color);
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
<script>
mc = {};
const createInstance = async () => {
const path = 'monotone_crescendo.wasm';
const response = await fetch(path);
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes, {});
return instance;
};
mc.write = (string, buffer, pointer) => {
string = `${string}\0`;
const view = new Uint8Array(buffer, pointer, 1024);
const encoder = new TextEncoder();
view.set(encoder.encode(string));
}
mc.read = (buffer, pointer) => {
const view = new Uint8Array(buffer, pointer, 1024);
const length = view.findIndex(byte => byte === 0);
const decoder = new TextDecoder();
return decoder.decode(new Uint8Array(buffer, pointer, length));
};
mc.setup = async () => {
const instance = mc.instance = await createInstance();
mc.memory = instance.exports.memory;
mc.alloc = instance.exports.alloc;
mc.dealloc = instance.exports.dealloc;
mc.callSolutionWithInput = instance.exports.call_solution_with_input;
mc.pointer = mc.alloc();
};
document.addEventListener('DOMContentLoaded', async () => {
await mc.setup();
document.querySelector('#num').addEventListener('change', (e) => {
mc.write(`${document.querySelector('#solution-name').value}\0${e.target.value}`, mc.memory.buffer, mc.pointer);
mc.callSolutionWithInput(mc.pointer);
document.querySelector('h3').innerText = mc.read(mc.memory.buffer, mc.pointer);
});
});
</script>
</head>
<body>
<h2>Monotone Crescendo</h2>
<div>
<label for="solution-name">Pick the solution you want to use:</label>
<input id="solution-name" list="solution-names" />
</div>
<div>
<label for="num">Please enter a binary number (press enter to get an answer):</label>
<input id="num" type="text" />
<h3>Answer will appear here....</h3>
</div>
<datalist id="solution-names">
<option value="Cumulative">
<option value="Prefix Sums">
<option value="Prefix Sums w/o Redundant Zero">
</datalist>
</body>