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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
<!DOCTYPE html>
<html style="height: 100%; overflow: hidden; overflow-x: hidden;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel='icon' type='image/gif' href='/favicon.gif'>
<title> Reduced System Layer </title>
</head>
<body style="margin: 0; height: 100%; overflow: hidden; overflow-x: hidden;">
<canvas style="margin: 0; width: 100%; height: 100%;" id="frame" oncontextmenu="event.preventDefault()"></canvas>
<script type="text/javascript">
function string_from_memory(bytes, offset) {
let len = 0;
while (bytes[offset + len] != 0)
++len;
return new TextDecoder("utf8").decode(bytes.subarray(offset, offset + len));
}
async function run(attrs) {
let wait_for_events = false;
let sleep_duration = 0;
let canvas;
let program;
let memory;
let pixels_address;
let context;
let animation_frame;
canvas = document.getElementById(attrs.id);
context = canvas.getContext("2d");
program = await WebAssembly.instantiateStreaming(
fetch("index.wasm"),
{
"wasi_snapshot_preview1" : {
clock_time_get : () => { return Date.now(); },
args_sizes_get : () => { throw new Error("Unexpected args_sizes_get call"); },
args_get : () => { throw new Error("Unexpected args_get call"); },
proc_exit : () => { throw new Error("Unexpected proc_exit call"); },
fd_close : () => { throw new Error("Unexpected fd_close call"); },
fd_write : () => { throw new Error("Unexpected fd_write call"); },
fd_seek : () => { throw new Error("Unexpected fd_seek call"); },
},
"env" : {
p_init : () => {
program.instance.exports.js_init();
memory = new Uint8Array(program.instance.exports.memory.buffer);
pixels_address = program.instance.exports.js_pixels();
document.title = string_from_memory(memory, program.instance.exports.js_title());
},
p_render_frame_impl : () => {
let data = new ImageData(
new Uint8ClampedArray(
memory.subarray(
pixels_address,
pixels_address + 4 * canvas.width * canvas.height
)
),
canvas.width,
canvas.height
);
context.putImageData(data, 0, 0);
},
p_clipboard_write : (size, text) => {
navigator.clipboard.writeText(
new TextDecoder().decode(memory.subarray(text, text + size))
).catch((e) => { console.error(e); });
},
p_cleanup : () => {},
p_wait_events_impl : () => { wait_for_events = true; },
p_sleep_for : (time) => { sleep_duration += time; },
p_time : Date.now,
sqrt : Math.sqrt,
floor : Math.floor,
ceil : Math.ceil,
memset : (dst, val, num) => {
program.instance.exports.js_memset(dst, val, num);
},
memcpy : (dst, src, num) => {
program.instance.exports.js_memcpy(dst, src, num);
},
},
}
);
program.instance.exports.js_main(document.location.href);
animation_frame = (time) => {
if (attrs.fit_window) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
wait_for_events = false;
program.instance.exports.js_frame(canvas.width, canvas.height);
if (!wait_for_events) {
if (sleep_duration > 0) {
sleep_duration = 0;
setTimeout(() => {
window.requestAnimationFrame(animation_frame);
}, sleep_duration);
} else
window.requestAnimationFrame(animation_frame);
}
};
window.addEventListener("resize", (ev) => {
window.requestAnimationFrame(animation_frame);
});
canvas.addEventListener("mousedown", (ev) => {
program.instance.exports.js_mousedown(ev.buttons);
window.requestAnimationFrame(animation_frame);
});
canvas.addEventListener("mouseup", (ev) => {
program.instance.exports.js_mouseup(ev.buttons);
window.requestAnimationFrame(animation_frame);
});
canvas.addEventListener("mousemove", (ev) => {
program.instance.exports.js_mousemove(ev.clientX, ev.clientY);
window.requestAnimationFrame(animation_frame);
});
canvas.addEventListener("mouseenter", (ev) => {
console.log(ev);
window.requestAnimationFrame(animation_frame);
});
canvas.addEventListener("mouseleave", (ev) => {
console.log(ev);
window.requestAnimationFrame(animation_frame);
});
window.addEventListener("keydown", (ev) => {
console.log(ev);
window.requestAnimationFrame(animation_frame);
});
window.addEventListener("keyup", (ev) => {
console.log(ev);
window.requestAnimationFrame(animation_frame);
});
window.requestAnimationFrame(animation_frame);
}
run({
id : "frame",
fit_window : true,
}).catch((e) => console.error(e));
</script>
</body>
</html>
|
