diff options
Diffstat (limited to 'entries/adirar111/wasm')
-rw-r--r-- | entries/adirar111/wasm/fib.wasm | bin | 0 -> 144 bytes | |||
-rw-r--r-- | entries/adirar111/wasm/fib.wat | 27 | ||||
-rw-r--r-- | entries/adirar111/wasm/index.html | 21 | ||||
-rw-r--r-- | entries/adirar111/wasm/index.js | 23 | ||||
-rw-r--r-- | entries/adirar111/wasm/style.css | 27 |
5 files changed, 98 insertions, 0 deletions
diff --git a/entries/adirar111/wasm/fib.wasm b/entries/adirar111/wasm/fib.wasm Binary files differnew file mode 100644 index 0000000..6a93250 --- /dev/null +++ b/entries/adirar111/wasm/fib.wasm diff --git a/entries/adirar111/wasm/fib.wat b/entries/adirar111/wasm/fib.wat new file mode 100644 index 0000000..6ec9b69 --- /dev/null +++ b/entries/adirar111/wasm/fib.wat @@ -0,0 +1,27 @@ +;; iterative fib(n) in web assembly text format (wat) +;; this gets compiled to the fib.wasm binary +;; and gets fetched via a data URL in index.js +(module + (export "fib" (func $fib)) + (func $fib (param $n i32) (result i32) + (local $last i32) + (local $sum i32) + (local $i i32) + (local $tmp i32) + (if (i32.lt_s (local.get $n) (i32.const 2)) + (return (local.get $n)) + ) + (local.set $last (i32.const 0)) + (local.set $sum (i32.const 1)) + (local.set $i (i32.const 2)) + (local.set $n (i32.add (local.get $n) (i32.const 1))) + (loop $loop + (local.set $tmp (local.get $sum)) + (local.set $sum (i32.add (local.get $sum) (local.get $last))) + (local.set $last (local.get $tmp)) + (local.set $i (i32.add (local.get $i) (i32.const 1))) + (br_if $loop (i32.lt_s (local.get $i) (local.get $n))) + ) + (return (local.get $sum)) + ) +) diff --git a/entries/adirar111/wasm/index.html b/entries/adirar111/wasm/index.html new file mode 100644 index 0000000..8357a55 --- /dev/null +++ b/entries/adirar111/wasm/index.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>wasm fib</title> + <link + href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600;700&display=swap" + rel="stylesheet" + /> + <link rel="stylesheet" href="style.css" /> + </head> + <body> + <p>go ahead, type a number</p> + <div id="input-area"> + <input id="input" type="text" autocomplete="off" /> + <button id="compute">compute!</button> + </div> + <p>fib.wasm says:</p> + <span id="result"></span> + <script src="index.js"></script> + </body> +</html> diff --git a/entries/adirar111/wasm/index.js b/entries/adirar111/wasm/index.js new file mode 100644 index 0000000..667ff82 --- /dev/null +++ b/entries/adirar111/wasm/index.js @@ -0,0 +1,23 @@ +const wasmBinaryBase64 = "AGFzbQEAAAABBgFgAX8BfwMCAQAHBwEDZmliAAAKRwFFAQR/IABBAkgEQCAADwtBACEBQQEhAkECIQMgAEEBaiEAA0AgAiEEIAIgAWohAiAEIQEgA0EBaiEDIAMgAEgNAAsgAg8LACgEbmFtZQEGAQADZmliAhkBAAUAAW4BBGxhc3QCA3N1bQMBaQQDdG1w" +const wasmBinaryDataURL = `data:application/wasm;base64,${wasmBinaryBase64}`; + +WebAssembly.instantiateStreaming(fetch(wasmBinaryDataURL)).then( + (wasmObj) => { + const {fib: fibWasm} = wasmObj.instance.exports + const fib = (event) => { + event.preventDefault() + const input = document.getElementById("input") + const result = document.getElementById("result") + const n = parseInt(input.value) + if (isNaN(n)) { + return result.textContent = "that wasn't very wasm of you" + } + if (n < 0) { + return result.textContent = "why are you being so negative" + } + result.textContent = fibWasm(n) + } + const button = document.getElementById("compute") + button.onclick = fib + } +); diff --git a/entries/adirar111/wasm/style.css b/entries/adirar111/wasm/style.css new file mode 100644 index 0000000..8ab403f --- /dev/null +++ b/entries/adirar111/wasm/style.css @@ -0,0 +1,27 @@ +html { + background: #5a46ee; + color: #fff; + font-family: "Source Code Pro" +} + +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#input-area { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +#input { + height: 40px; + font-size: 30px +} + +#result { + font-size: 50px +} |