diff options
| author | Aymen Dirar | 2022-10-24 06:06:51 +0000 |
|---|---|---|
| committer | Aymen Dirar | 2022-10-24 06:08:17 +0000 |
| commit | 81fdbeb7fa4d8a80d028a988c353c3fa16d4953b (patch) | |
| tree | 743dde4e75d9c04ceb259d690f967d0a1f6b7907 | |
| parent | ca09b8229ba680d5e5400ed72b121e8302990dab (diff) | |
wasm lol
| -rw-r--r-- | entries/adirar111/wasm/fib.wasm | bin | 0 -> 144 bytes | |||
| -rw-r--r-- | entries/adirar111/wasm/fib.wat | 46 | ||||
| -rw-r--r-- | entries/adirar111/wasm/index.html | 21 | ||||
| -rw-r--r-- | entries/adirar111/wasm/index.js | 21 | ||||
| -rw-r--r-- | entries/adirar111/wasm/style.css | 27 |
5 files changed, 115 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..b9eba78 --- /dev/null +++ b/entries/adirar111/wasm/fib.wat @@ -0,0 +1,46 @@ +;; iterative fib(n) in web assembly text format (wat) +;; this gets compiled to 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..43ee9a6 --- /dev/null +++ b/entries/adirar111/wasm/index.js @@ -0,0 +1,21 @@ +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)) { + result.textContent = "that's not a number..." + return + } + 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 +} |