replace old wasm with the new cleaner stuff

knzai · Aug 11, 2024 · 511b7ae · 511b7ae
1 parent 3980932
commit 511b7ae
Show file tree

Hide file tree

Showing 13 changed files with 126 additions and 522 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -21,23 +21,15 @@ name = 'cega-wasm'
 path = "src/wasm/main.rs"
 required-features = ["wasm"]
 
-[[bin]]
-name = 'cega-webc'
-path = "src/webc/main.rs"
-required-features = ["webc"]
-
 [features]
-default = ["terminal", "png", "webc"]
+default = ["terminal", "png", "wasm"]
 png = ["dep:image"]
 #terminal related features
 terminal = ["dep:clap"]
 #Preview window popup for the terminal
 gui = ["dep:sdl2"]
-#Web usage, may want to build with no-default-features to skip irrelevant terminal stuff
-wasm = ["png", "dep:base64", "dep:gloo", "dep:js-sys", "dep:web-sys", "dep:yew"]
-#Web component, may want to build with no-default-features to skip irrelevant terminal stuff
-webc = ["png", "dep:base64", "dep:gloo", "gloo-utils", "dep:js-sys", "dep:wasm-bindgen", "dep:web-sys"]
-
+#Web assembly components, may want to build with no-default-features to skip irrelevant terminal stuff
+wasm = ["png", "dep:base64", "dep:gloo", "gloo-utils", "dep:js-sys", "dep:wasm-bindgen", "dep:web-sys"]
 
 [dev-dependencies]
 rusty-hook = "^0.11.2"

diff --git a/Trunk.toml b/Trunk.toml
@@ -1,3 +1,3 @@
 [build]
-target = "src/webc/index.html"
+target = "src/wasm/index.html"
 dist = "target/dist"
diff --git a/src/lib.rs b/src/lib.rs
@@ -18,9 +18,6 @@ pub mod terminal;
 #[cfg(feature = "png")]
 pub mod png;
 
-#[cfg(feature = "wasm")]
-pub mod wasm;
-
 pub type RawGrid = Vec<Vec<u8>>;
 pub type Grid<T> = Vec<Vec<T>>;
 

diff --git a/src/webc/file-byte-reader.js → src/wasm/file-byte-reader.js b/src/webc/file-byte-reader.js → src/wasm/file-byte-reader.js
diff --git a/src/wasm/file_input.rs b/src/wasm/file_input.rs
diff --git a/src/wasm/image.rs b/src/wasm/image.rs
diff --git a/src/wasm/index.html b/src/wasm/index.html
@@ -1,17 +1,54 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <link data-trunk rel="css" href="./styles.css" />
-        <link rel="stylesheet"
-            href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
-        />
-        <link 
-            data-trunk 
-            rel="rust" href="../../Cargo.toml"
-            data-bin="cega-wasm" 
-            data-cargo-no-default-features 
-            data-cargo-features="wasm"
-        />
-    </head>
-    <body></body>
+<head>
+   <link data-trunk rel="css" href="./styles.css" />
+   <link 
+   data-trunk 
+   rel="rust" href="../../Cargo.toml"
+   data-bin="cega-wasm" 
+   data-cargo-no-default-features 
+   data-cargo-features="wasm"
+   />
+   <script data-trunk src="./file-byte-reader.js"></script>
+   <script>
+      let $ = (query) => document.querySelector(query);
+
+      function fileLoaded(array) {
+         let hash = new Map(Object.entries(window.wasmBindings.previews(array)));
+         hash.forEach((images, key) => {
+            const container = document.createElement("preview-area");
+            images.forEach(src => container.appendChild(new PreviewItem(src)));
+            $('preview-wrapper').appendChild(container);
+         })
+      }
+
+      document.addEventListener("DOMContentLoaded", () => {
+         $('#file-input').addEventListener("file-byte-reader:loaded", 
+            e => fileLoaded(e.detail)
+         );
+      });
+
+      class PreviewItem extends HTMLElement {
+         constructor(src) {
+            super();
+            const shadow = this.attachShadow({mode: "open"});
+            const fragment = document.createRange().createContextualFragment('<h3></h3><img/>');
+            const h3 = fragment.querySelector('h3');
+            this.img = fragment.querySelector("img");
+
+            this.img.onload = function () {
+               h3.innerText = this.width;
+            }
+            this.img.src = src
+            shadow.appendChild(fragment);
+         }
+      }
+      customElements.define("preview-item", PreviewItem);
+   </script>
+</head>
+<body>
+   <h1>Process your CGA/EGAs</h1>
+   <input is="file-byte-reader" id="file-input" multiple="true" accept=".bin,.cga,.ega,.cega" />
+   <preview-wrapper></preview-wrapper>
+</body>
 </html>