starting passing in other params

src/wasm/image.rs

@@ -1,73 +1,120 @@
 use base64::{engine::general_purpose::STANDARD, Engine};
 
-use yew::{html, Component, Context, Html, Properties};
+use web_sys::HtmlInputElement;
+use yew::{html, Callback, Component, Context, Event, Html, Properties, SubmitEvent, TargetCast};
 
 use crate::color::palette::palette_from_abbr;
+use crate::image::tile;
 use crate::image::Image;
 use crate::parser::ParserType;
 use crate::png;
 
 use crate::wasm::FileUpload;
 
-pub struct ImageFile<'a>(pub &'a FileUpload);
+pub struct ImageFile<'a> {
+    file_input: &'a FileUpload,
+    width: usize,
+    height: usize
+}
 
 impl ImageFile<'_> {
     pub fn name(&self) -> String {
-        if self.0.mime_type.contains("image") {
-            self.0.name.to_string()
+        if self.file_input.mime_type.contains("image") {
+            self.file_input.name.to_string()
         } else {
-            format!("{}{}", self.0.name, ".png")
+            format!("{}{}", self.file_input.name, ".png")
         }
     }
 
     pub fn mime_type(&self) -> String {
-        if self.0.mime_type.contains("image") {
-            self.0.mime_type.to_string()
+        if self.file_input.mime_type.contains("image") {
+            self.file_input.mime_type.to_string()
         } else {
             "image/png".to_string()
         }
     }
 
     pub fn data(&self) -> Vec<u8> {
-        if self.0.mime_type.contains("image") {
-            self.0.data.clone()
+        if self.file_input.mime_type.contains("image") {
+            self.file_input.data.clone()
         } else {
-            let image = Image::new(&self.0.data, 320, ParserType::CGA);
+            let image = Image::new(&self.file_input.data, self.width, ParserType::CGA);
             let palette = palette_from_abbr("cga0");
             let mut bytes: Vec<u8> = Vec::new();
-            let _ = png::write_to(&mut bytes, image.data(), palette.clone());
+
+            let data = if self.width == 320 {
+                image.data()
+            } else {
+                tile(image.data(), self.height, Some(320))
+            };
+
+            let _ = png::write_to(&mut bytes, data, palette.clone());
             bytes
         }
     }
 }
 
 #[derive(Clone, PartialEq, Properties)]
-pub struct ICProps {
+pub struct Props {
     pub file: FileUpload,
 }
 
-pub struct ImageComponent;
+pub struct ImageComponent {
+    width: usize,
+    height: usize,
+}
+
+pub enum Msg {
+    Width(Event),
+    Height(Event),
+}
 
 impl Component for ImageComponent {
-    type Message = ();
-    type Properties = ICProps;
+    type Message = Msg;
+    type Properties = Props;
 
     fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
+        Self { width: 320, height: 200 }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::Width(e) => {
+                let input: HtmlInputElement = e.target_unchecked_into();
+                self.width = input.value().parse().expect("fail to parse width");
+            }
+            Msg::Height(e) => {
+                let input: HtmlInputElement = e.target_unchecked_into();
+                self.height = input.value().parse().expect("fail to parse width");
+            }
+        }
+        true
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let image = ImageFile(&ctx.props().file);
+        let image = ImageFile {
+            file_input: &ctx.props().file,
+            width: self.width,
+            height: self.height,
+        };
 
         let output = format!(
             "data:{};base64,{}",
             image.mime_type(),
             STANDARD.encode(image.data())
         );
 
+        let noop = Callback::from(|e: SubmitEvent| {
+            e.prevent_default();
+        });
+
         html! {
-            <form>
+            <form onsubmit={noop}>
                 { &image.name() }
+                <label for="width">{"[Tile] Width"}</label>
+                <input name="width" type="number" value={image.width.to_string()} onchange={ctx.link().callback(Msg::Width)} />
+                <label for="height">{"[Tile] Height"}</label>
+                <input name="height" type="number" value={image.height.to_string()} onchange={ctx.link().callback(Msg::Height)} />
                 <img src={output} />
             </form>
         }

src/wasm/index.html

@@ -1,11 +1,17 @@
 <!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><link 
-    	data-trunk 
-    	rel="rust" href="../../Cargo.toml"
-    	data-bin="cega-wasm" 
-    	data-cargo-no-default-features 
-    	data-cargo-features="wasm" /></body>
+    <body></body>
 </html>