Merge pull request #15 from webxdc/wasm-check

add check for wasm

Author: adbenitez

index.html

@@ -37,6 +37,9 @@
         <div class="card" id="races-output"></div>
         <script src="js/races.js"></script>
 
+        <div class="card" id="wasm-output"></div>
+        <script src="js/wasm.js"></script>
+
         <iframe id="iframe-regular" style="display: none"></iframe>
         <iframe id="iframe-allow-same-origin" sandbox="allow-same-origin" style="display: none"></iframe>
         <div class="card" id="webrtc-output"></div>

js/wasm.js

@@ -0,0 +1,34 @@
+window.addEventListener("load", () => {
+  let container = h("div", { class: "container" });
+  const supported = (() => {
+    // thanks to https://stackoverflow.com/a/47880734 for this check
+    try {
+      if (
+        typeof WebAssembly === "object" &&
+        typeof WebAssembly.instantiate === "function"
+      ) {
+        const module = new WebAssembly.Module(
+          Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00)
+        );
+        if (module instanceof WebAssembly.Module)
+          return (
+            new WebAssembly.Instance(module) instanceof WebAssembly.Instance
+          );
+      }
+    } catch (e) {}
+    return false;
+  })();
+
+  let result = h("div", {
+    class: "wasm-support-dot",
+    style: `background-color:${supported ? "green" : "grey"}`,
+  });
+
+  container.append(result);
+  container.append(
+    supported ? "WebAssembly is supported" : "WebAssembly is not supported"
+  );
+  document
+    .getElementById("wasm-output")
+    .append(createHeader("Wasm Support"), container);
+});

styles.css

@@ -34,3 +34,11 @@ button {
     padding: 0.5em;
     margin: 0.3em;
 }
+
+.wasm-support-dot {
+    width: 1em;
+    height: 1em;
+    border-radius: 100%;
+    display: inline-block;
+    margin-right: 4px;
+}