-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
129 lines (116 loc) · 5.05 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
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<style>
textarea {
font-family: 'Inconsolata', monospace;
}
</style>
<title>bf2wasm</title>
</head>
<body>
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title">bf2wasm</h1>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<div class="control is-expanded">
<label class="label" for="brainfuck-input">Brainfuck</label>
<textarea class="textarea" id="brainfuck-input" style="min-height: 400px">
++++++++ Set Cell #0 to 8
[
>++++ Add 4 to Cell #1; this will always set Cell #1 to 4
[ as the cell will be cleared by the loop
>++ Add 2 to Cell #2
>+++ Add 3 to Cell #3
>+++ Add 3 to Cell #4
>+ Add 1 to Cell #5
<<<<- Decrement the loop counter in Cell #1
] Loop till Cell #1 is zero; number of iterations is 4
>+ Add 1 to Cell #2
>+ Add 1 to Cell #3
>- Subtract 1 from Cell #4
>>+ Add 1 to Cell #6
[<] Move back to the first zero cell you find; this will
be Cell #1 which was cleared by the previous loop
<- Decrement the loop Counter in Cell #0
] Loop till Cell #0 is zero; number of iterations is 8
The result of this is:
Cell No : 0 1 2 3 4 5 6
Contents: 0 0 72 104 88 32 8
Pointer : ^
>>. Cell #2 has value 72 which is 'H'
>---. Subtract 3 from Cell #3 to get 101 which is 'e'
+++++++..+++. Likewise for 'llo' from Cell #3
>>. Cell #5 is 32 for the space
<-. Subtract 1 from Cell #4 for 87 to give a 'W'
<. Cell #3 was set to 'o' from the end of 'Hello'
+++.------.--------. Cell #3 for 'rl' and 'd'
>>+. Add 1 to Cell #5 gives us an exclamation point
>++. And finally a newline from Cell #6
</textarea>
</div>
</div>
<div class="field">
<p class="control">
<button class="button is-success" id="run" onclick="run()"><i class="fa fa-play" aria-hidden="true"></i></button>
</p>
</div>
</div>
<div class="column">
<div class="field">
<div class="control is-expanded">
<label class="label" for="brainfuck-string-output">String Output</label>
<textarea readonly class="textarea" id="brainfuck-string-output"></textarea>
</div>
</div>
<div class="field">
<div class="control is-expanded">
<label class="label" for="brainfuck-int-output">Int32 Output</label>
<textarea readonly class="textarea" id="brainfuck-int-output"></textarea>
</div>
</div>
</div>
</div>
<div class="level">
<div class="level-item">
<a href="https://github.com/verdie-g/brainfuck2wasm"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</div>
<script>
const bfInput = document.getElementById('brainfuck-input');
const bfStrOutput = document.getElementById('brainfuck-string-output');
const bfIntOutput = document.getElementById('brainfuck-int-output');
const runButton = document.getElementById('run');
const loadingClass = 'is-loading';
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
const intView = e.data;
bfStrOutput.value = intView.reduce((str, i) => str += String.fromCharCode(i), '');
bfIntOutput.value = intView.toString().replace(/,/g, ' ');
runButton.classList.remove(loadingClass);
}
function toHexString(byteArray) {
return Array.from(byteArray, function (byte) {
return ('0' + (byte & 0xFF).toString(16)).slice(-2);
}).join(' ')
}
function run() {
runButton.classList.add(loadingClass);
const bf = bfInput.value;
worker.postMessage(bf);
}
</script>
</body>
</html>