From c656844c01f2de5dedb0bed319e5d6b996fcf6ff Mon Sep 17 00:00:00 2001
From: Kenzi Connor <git@knz.ai>
Date: Mon, 5 Aug 2024 18:47:57 -0700
Subject: [PATCH] better width guess previews

---
 src/lib.rs          |   2 +-
 src/wasm/image.rs   |  27 ++++++++++-----------------
 src/wasm/main.rs    |   2 +-
 src/wasm/styles.css |  13 +++++++++++++
 test.cga            | Bin 3328 -> 3328 bytes
 5 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/lib.rs b/src/lib.rs
index 646edbc..eb790f3 100644
--- a/src/lib.rs
+++ b/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()
     }
 }
diff --git a/src/wasm/image.rs b/src/wasm/image.rs
index 654eb1d..50b7698 100644
--- a/src/wasm/image.rs
+++ b/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>
             </>
         }
     }
diff --git a/src/wasm/main.rs b/src/wasm/main.rs
index de656de..3b42fdb 100644
--- a/src/wasm/main.rs
+++ b/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>
         }
diff --git a/src/wasm/styles.css b/src/wasm/styles.css
index 599f0a1..7b836f6 100644
--- a/src/wasm/styles.css
+++ b/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;
diff --git a/test.cga b/test.cga
index 1b1c291e3726fb3ed8e5682d5b5455b7de519532..bb7b2088c7ed956e67688c3ff3702f0d3de70416 100644
GIT binary patch
literal 3328
zcmbVOL5S5x82*z<)-)YAkNO@3X)(xBUUN!oOQD7)BHpu-Ko9lqaSts$iGxMzaSw$;
zPf_-ejXii*Fm;7q78QEvrNw(ICG9Q<5=_5;lK1vm-BtTPzRb)&^ZjpT{(t_N69hT2
z_gScF<;&VM;$apgTp0Y(l4vzo`$}T<YX0hKuQtfeh$i_SxQ$jyl%qDoBz^HXB7vW*
zWgS9L$X-E`(58C37LaX8+h~QdCT<gLZxi~7FdXB70+<eUqG%^-7+%-aUJEqwGsyEi
z16C~?%hWvPvz;EV#Rr8%ts(G#|HZ6tu{82LnP3hTWWN6y_Vo;GC2&GQ<S|a~G;tTV
zaqG=-yY-${)eoDS;PO}VZTOG*;Jhw>|NSTIKla;B#rDXOVPb?*&yDBTqfQLoF(OwH
z1qGKOnG}kx&qEQP4aNPW6+1~o_b}#DjG1Cg0Y3p|5kUF8cu>VPQP&`>pH#Q#Np%~0
z+5xSs#r?3REe7Td=kG5qy1W`6@TmI(xP6O0`|A;z(kJt{PoxwkjR6o|#UX^O082y*
zKwInkF~Rjpx!0@0tg4b}bK#jRD<W9{2u&#{@<bhbTMdKjtYd#y(`!Xg!46zM7v^a`
zH2;S`H?&uYc>}PA9FI5$&6_uG-q`D1s2K^?_<-o0kBE-kB|5hIJT6=y`ucY=9zRSD
zJ%0G$*e-s*{JcvZ{=if{_z%|(6Gw>^$`NA}N^A7-7gij~){EPQA>y{C242<^T$snK
z`UdP(-@)c4+;b^`dVRo(k<-djm8=}Sw7wD0Mgjc`<UQ!Bgv?9exxjP<3XMhn(M3L=
zUtY_}NBz9GzH^^UQz^&s2XO`&n&_GT`2l>>@l|g^fe4c0vmM{`9X00@5~!UgG@c|n
zcN(iHlJN}4qlSi&pUQ0H4bB~mIp4<637YAIe3~RzuAWJbUpCS!dp6iswl7~`DntI{
z{EC>t8H}5dvoa7Pept`p`+WT3JZnB?gLCxyeDKVIygLO6lqM-MzyAs`xvMaJALrCZ
zKLhT>fAO|U9FmAL#UR`_1Nihd_}}iT55bq<!|uWSDeML%xl8Ls;1=c7Ev5m^xLZ{P
z>*wHcQ{;>?P$txKf!+<uV!E_Gb={)S02g^e&ADuc`6Y5+2^$nB=D+w}eD(YDV19?7
z;5ga;{^dDP2mGnakRl50JPkj|e+#2uqqS)4W#b%Sg%CAPC1jkgNo+NJZe=dZ9v^<;
zP)-H-68sSSdYs#shST$5Lu}QAw5X{E&;RA`hlBYSc3)}z?8_N^gjuEJ@yZWX>D2y6
zkdsM8*hS+EVDzv#Z_Z@K<<i%D0-sa~jJj53A<g&}_#+@)<ogcM`{#)cuN7pcDH%yh
zcq8yT!N%FP5e_b&@A0@tiE?&#@f-%edw7lXc-UqxY=E4O;eH^S&iP}GVI~eD;0u8{
zGH~hR&aB0~9~)2Hz$vRy?!aLf6T!KB?pi*39tI9_0AJK~L_1BS?^X{y=11W2{j?~<
z`IRVfW=T$RQ(n%lEaMD2c-Tm!Lk)XO(y}yYY?DL)NNlKl>nb_GG9Z=abDshSIUqrK
zR`Usb0$&4sEv|yodW0tKZ-m_klU3TVPr+A9Es|5e+z5NX@6OQ(4rCt;vcTu}4~|@D
zOjbj~PR>7t36r;qu^)eyyHHwKyM+g}bvaW@dhJSC<~6do5BbkR{<AQDYnVG$qWc{5
zFYy?xUGuSa3w+pnhOhG{_`G*o5L<{9oLT)QP4je;<)`f|_kPOq`0u{tHuSi2QXa?S
z^%I{B1O*|_;mlMDIkTvWpsc=e%gVb`R`EZ5$!+MlpU3fd{ayqeVG#4H`D7bETJE|V
l{8rKMn#N=B-Gg{M(sg&&y3TI9Zt`W^zMF^g;yI#o{{l3wn}7fS

literal 3328
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
NuTG=SiT@b?{{ic#n}7fS