-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
111 lines (110 loc) · 3.59 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
<html lang="en">
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
async function main(){
var output_buffer = []
var str_conv_buf = []
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext('2d')
var moonbit = null
const spectest = {
string: {
beginConversion: () => str_conv_buf = [],
pushChar: (i,x) => str_conv_buf.push(String.fromCharCode(x)),
endConversion: () => str_conv_buf.join(''),
debugString: (js_str) => console.log(js_str)
},
canvas: {
clearRect: (x,y,w,h) => ctx.clearRect(x,y,w,h),
fillRect: (x,y,w,h) => {
console.log("fillRect",x,y,w,h)
ctx.fillRect(x,y,w,h)
},
strokeRect: (x,y,w,h) => ctx.strokeRect(x,y,w,h),
fillEllipse: (x,y,w,h) => {
ctx.beginPath();
ctx.ellipse(x + w/2, y + h/2, w/2, h/2, Math.PI / 4, 0, 2 * Math.PI);
ctx.fill();
},
strokeEllipse: (x,y,w,h) => {
ctx.beginPath();
ctx.ellipse(x + w/2, y + h/2, w/2, h/2, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();
},
setColor: (c) => {
console.log("color:",c)
ctx.fillStyle = c
ctx.strokeStyle = c
},
fillText: (text,x,y) => ctx.fillText(text,x,y),
setFont: (font) => {
console.log("font:",font)
ctx.font = font
},
measureTextWidth: (text) => {
const metrics = ctx.measureText(text);
return metrics.width
},
measureTextHeight: (text) => {
const metrics = ctx.measureText(text);
const actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
return actualHeight
},
fillRoundRect: (x,y,w,h,r) => {
ctx.beginPath()
ctx.roundRect(x,y,w,h,r)
ctx.fill()
},
strokeRoundRect: (x,y,w,h,r) => {
ctx.beginPath()
ctx.roundRect(x,y,w,h,r)
ctx.stroke()
},
strokeLine: (x1,y1,x2,y2) => {
console.log("TODO DRAE LINE")
}
},
spectest: {
print_i32: (x) => console.log(String(x)),
print_f64: (x) => console.log(String(x)),
print_char: (x) => {
const str = String.fromCharCode(x)
if (str === "\n") {
console.log(output_buffer.join(''))
output_buffer = []
} else {
output_buffer.push(str);
}
}
},
};
const wasmUri = "target/wasm-gc/release/build/main/main.wasm"
const obj = await WebAssembly.instantiateStreaming(fetch(wasmUri), spectest)
obj.instance.exports._start()
// obj.instance.exports["MoonUI/UI::initialize"](canvas.width, canvas.height)
moonbit = obj.instance.exports
console.log(moonbit)
moonbit["initialize"](canvas.width, canvas.height)
canvas.addEventListener("mousemove", (e) => {
moonbit['on_mouse_move'](0, 0, e.offsetX,e.offsetY)
});
canvas.addEventListener("mousedown", (e) => {
moonbit['on_mouse_down'](0, 0, e.offsetX,e.offsetY)
})
canvas.addEventListener("mouseup", (e) => {
moonbit['on_mouse_up'](0, 0, e.offsetX,e.offsetY)
})
}
main()
</script>
<style>
.asdf{
background-color: #22a6b3f0;
}
body{
background-color: rgb(175, 175, 175);
}
</style>
</html>