better width guess previews

Author: knzai

src/lib.rs

@@ -72,7 +72,7 @@ impl ImageType {
     pub fn factors(num: usize, upper: usize) -> Vec<i64> {
         factor(num.try_into().unwrap())
             .into_iter()
-            .filter(|&x| x >= 4 && x <= upper.try_into().unwrap())
+            .filter(|&x| x > 4 && x <= upper.try_into().unwrap())
             .collect()
     }
 }

src/wasm/image.rs

@@ -17,12 +17,10 @@ pub struct Props {
 
 pub struct ImageComponent {
     width: usize,
-    height: usize,
 }
 
 pub enum Msg {
     Width(Event),
-    Height(Event),
 }
 
 impl ImageComponent {
@@ -36,7 +34,7 @@ impl ImageComponent {
             let palette = palette_from_abbr("cga0");
             let mut bytes: Vec<u8> = Vec::new();
 
-            let _ = png::write_to(&mut bytes, tile(image.data(), self.height), palette.clone());
+            let _ = png::write_to(&mut bytes, image.data(), palette.clone());
             bytes
         };
         format!("data:application/png;base64,{}", STANDARD.encode(data))
@@ -54,13 +52,13 @@ impl ImageComponent {
                     let palette = palette_from_abbr("cga0");
                     let mut bytes: Vec<u8> = Vec::new();
 
-                    let _ = png::write_to(&mut bytes, tile(p.data(), self.height), palette.clone());
+                    let _ = png::write_to(&mut bytes, p.data(), palette.clone());
                     let src = format!("data:application/png;base64,{}", STANDARD.encode(bytes));
                     html! {
-                        <span>
-                            {p.width()}
+                        <div class="preview-tile">
+                            <h3>{p.width()}</h3>
                             <img src={ src } />
-                        </span>
+                        </div>
                     }
                 })
                 .collect()
@@ -75,7 +73,6 @@ impl Component for ImageComponent {
     fn create(_ctx: &Context<Self>) -> Self {
         Self {
             width: 320,
-            height: 200,
         }
     }
 
@@ -85,10 +82,6 @@ impl Component for ImageComponent {
                 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
     }
@@ -101,19 +94,19 @@ impl Component for ImageComponent {
 
         html! {
             <>
-                <div class="preview-tile ">
+                <div class="preview-tile">
                     <div class=".preview-media">
                         <p class="preview-name">{ file.name.to_string() }</p>
                         <img src={ self.src(file) } />
                     </div>
                     <form onsubmit={noop}>
-                            <label for="width">{"[Tile] Width"}</label>
+                            <label for="width">{"Width"}</label>
                             <input name="width" type="number" value={self.width.to_string()} onchange={ctx.link().callback(Msg::Width)} />
-                            <label for="height">{"[Tile] Height"}</label>
-                            <input name="height" type="number" value={self.height.to_string()} onchange={ctx.link().callback(Msg::Height)} />
                     </form>
                 </div>
-                {self.previews(file)}
+                <div class="preview-row">
+                    {self.previews(file)}
+                </div>
             </>
         }
     }

src/wasm/main.rs

@@ -40,7 +40,7 @@ impl Component for App {
         html! {
             <div id="wrapper">
                 <h1>{ "Process your CGA/EGAs" }</h1>
-                <FileInput accept="image/png,.bin,.cga,.ega" onload={ctx.link().callback( Msg::Loaded )} children={None}/>
+                <FileInput accept=".bin,.cga,.ega,.cega" onload={ctx.link().callback( Msg::Loaded )} children={None}/>
                 <div id="preview-area">{{ images }}</div>
             </div>
         }

src/wasm/styles.css

@@ -60,6 +60,19 @@ label {
   background: #313737;
   border-radius: 1rem;
 }
+.preview-row {
+  display: flex;
+  flex-direction: row;
+  padding: 2rem;
+  margin: 1rem;
+  background: #313737;
+  border-radius: 1rem;
+}
+.preview-row .preview-tile  {
+  background: #111717;
+  border-radius: 1rem;
+}
+
 
 .preview-media {
   flex: 1;