Mirai's Miscellaneous Misadventures
M24 / index.html
1<!-- copyright 2022 zamfofex -->
2<!-- license: AGPLv3 or later -->
3<!doctype html>
5<html lang="en">
6<meta charset="utf-8">
7<title>Mirai’s Miscellaneous Misadventures Test</title>
9<style>
11html, body
13{
14 width: 100%;
15 height: 100%;
16 display: flex;
17}
18body
20{
21 margin: 0;
22 background: #000;
23 touch-action: manipulation;
24}
25canvas
27{
28 width: 100%;
29 height: 100%;
30 image-rendering: crisp-edges;
31 image-rendering: pixelated;
32 object-fit: contain;
33}
34</style>
36<script type="module">
38let canvas = document.querySelector("canvas")
40let context = canvas.getContext("2d")
41let global = v =>
43{
44 if (typeof v === "number") return v
45 return v.value
46}
47let main = async () =>
49{
50 let stamp = (data, x, y, asset) =>
51 {
52 let image = toImage(asset)
53 if (!image) return
54 context.drawImage(image, x, y)
55 }
56
57 let memcpy = (a, b, n) =>
58 {
59 new Uint8Array(memory.buffer, a, n).set(new Uint8Array(memory.buffer, b, n))
60 return a
61 }
62
63 let memmove = (a, b, n) =>
64 {
65 new Uint8Array(memory.buffer, a, n).set(new Uint8Array(memory.buffer, b, n).slice())
66 return a
67 }
68
69 let memset = (a, b, n) =>
70 {
71 new Uint8Array(memory.buffer, a, n).set(Array(n).fill(b))
72 return a
73 }
74
75 let memcmp = (a, b, n) =>
76 {
77 a = new Uint8Array(memory.buffer, a, n)
78 b = new Uint8Array(memory.buffer, b, n)
79 for (let i = 0 ; i < n ; i++)
80 if (a[i] !== b[i]) return a[i] - b[i]
81 return 0
82 }
83
84 let imports = {env: {mimimi_wasm_javascript_stamp: stamp, memcpy, memmove, memset, memcmp, log: console.log}}
85 let module
86 try { module = await WebAssembly.instantiateStreaming(fetch("mimimi.wasm"), imports) }
87 catch (e) { module = await WebAssembly.instantiate(await (await fetch("mimimi.wasm")).arrayBuffer(), imports) }
88
89 let {instance: {exports}} = module
90
91 let {memory, __indirect_function_table: table} = exports
92 let {mimimi_wasm_allocator} = exports
93 let {mimimi_wasm_allocate} = exports
94 let {mimimi_wasm_stamp} = exports
95 let {mimimi_test} = exports
96
97 let getView = () => new DataView(memory.buffer)
98 let allocator = getView().getUint32(global(mimimi_wasm_allocator), true)
99
100 let chapter = mimimi_test(allocator)
101 let behavior = getView().getUint32(chapter, true)
102 let engine = getView().getUint32(chapter + 4, true)
103 let keys = chapter + 8
104
105 let size = mimimi_wasm_allocate(8)
106 getView().setUint32(size + 0, canvas.width, true)
107 getView().setUint32(size + 4, canvas.height, true)
108
109 let f = table.grow(1)
110 table.set(f, mimimi_wasm_stamp)
111
112 getView().setUint32(engine + 4, f, true)
113 getView().setUint32(engine + 8, 0, true)
114 getView().setUint32(engine + 12, size, true)
115
116 let inputs = {ArrowLeft: 1, ArrowRight: 2}
117 let down = 0
118
119 addEventListener("keydown", ({code}) =>
120 {
121 let v = inputs[code]
122 if (v) down = down | v
123 })
124
125 addEventListener("keyup", ({code}) =>
126 {
127 let v = inputs[code]
128 if (v) down = down & ~v
129 down %= 0x100
130 })
131
132 let tap = 0
133 addEventListener("pointerdown", ({x, y, button}) =>
134 {
135 if (button !== 0) return
136
137 if (x < innerWidth / 2)
138 tap = tap | 1
139 else
140 tap = tap | 2
141 })
142 addEventListener("pointerup", () => tap = 0)
143
144 let cache = new Map()
145
146 let rch = [0x11, 0x44, 0x77, 0x99, 0xCC, 0xFF]
147 let gch = [0x11, 0x33, 0x55, 0x77, 0x99, 0xBB, 0xDD, 0xFF]
148 let bch = [0x22, 0x55, 0x88, 0xBB, 0xEE]
149 let toImage = asset =>
150 {
151 let view = getView()
152
153 let cached = cache.get(asset)
154 if (cached !== undefined) return cached
155
156 let width = view.getUint32(asset, true)
157 let height = view.getUint32(asset + 4, true)
158 let colors = view.getUint32(asset + 8, true)
159
160 if (width === 0 || height === 0)
161 {
162 cache.set(asset, null)
163 return null
164 }
165
166 let image = new ImageData(width, height)
167 let {data} = image
168
169 for (let x = 0 ; x < width ; x++)
170 for (let y = 0 ; y < height ; y++)
171 {
172 let o = x + y * width
173 let color = view.getUint8(colors + o)
174
175 if (color === 0) continue
176
177 if (color < 0x10)
178 {
179 let ch = color * 0x11
180 data[o * 4 + 0] = ch
181 data[o * 4 + 1] = ch
182 data[o * 4 + 2] = ch
183 data[o * 4 + 3] = 0xFF
184 }
185 else
186 {
187 color -= 0x10
188 let r = rch[Math.floor(color / 40) % 6]
189 let g = gch[Math.floor(color / 5) % 8]
190 let b = bch[Math.floor(color / 1) % 5]
191
192 data[o * 4 + 0] = r
193 data[o * 4 + 1] = g
194 data[o * 4 + 2] = b
195 data[o * 4 + 3] = 0xFF
196 }
197 }
198
199 let canvas = document.createElement("canvas")
200 let ctx = canvas.getContext("2d")
201 canvas.width = image.width
202 canvas.height = image.height
203 ctx.putImageData(image, 0, 0)
204
205 cache.set(asset, canvas)
206 return canvas
207 }
208
209 let past = performance.now()
210 let step = () =>
211 {
212 let view = getView()
213
214 view.setUint8(keys, down|tap)
215 table.get(view.getUint32(behavior, true))(view.getUint32(behavior + 8, true))
216
217 let now = performance.now()
218 setTimeout(step, (100/3) + past - now)
219 past = now
220 }
221 step()
222}
223main()
225</script>
227<canvas width="512" height="256"></canvas>