From 3aa96dcef3c83c2c07e11d0cef53d549b84a7549 Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Fri, 11 Aug 2023 17:17:38 +0200
Subject: [PATCH] feat: use input type number for counter

---
 islands/Counter.tsx  |  1 +
 static/thumbnails.js | 37 +++++++++++++++++--------------------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/islands/Counter.tsx b/islands/Counter.tsx
index bdc0dbf..647a537 100644
--- a/islands/Counter.tsx
+++ b/islands/Counter.tsx
@@ -18,6 +18,7 @@ export default function Counter(props: CounterProps) {
       </Button>
       <input
         class="text-3xl bg-transparent inline text-center -mx-4"
+        type="number"
         size={props.count.toString().length}
         value={props.count}
         onInput={(ev) => props.count.value = ev.target?.value}
diff --git a/static/thumbnails.js b/static/thumbnails.js
index 0540225..0345724 100644
--- a/static/thumbnails.js
+++ b/static/thumbnails.js
@@ -41,16 +41,16 @@ function thumbHashToRGBA(hash) {
     }
     return ac;
   };
-  let l_ac = decodeChannel(lx, ly, l_scale);
-  let p_ac = decodeChannel(3, 3, p_scale * 1.25);
-  let q_ac = decodeChannel(3, 3, q_scale * 1.25);
-  let a_ac = hasAlpha && decodeChannel(5, 5, a_scale);
+  const l_ac = decodeChannel(lx, ly, l_scale);
+  const p_ac = decodeChannel(3, 3, p_scale * 1.25);
+  const q_ac = decodeChannel(3, 3, q_scale * 1.25);
+  const a_ac = hasAlpha && decodeChannel(5, 5, a_scale);
 
   // Decode using the DCT into RGB
-  let ratio = thumbHashToApproximateAspectRatio(hash);
-  let w = round(ratio > 1 ? 32 : 32 * ratio);
-  let h = round(ratio > 1 ? 32 / ratio : 32);
-  let rgba = new Uint8Array(w * h * 4), fx = [], fy = [];
+  const ratio = thumbHashToApproximateAspectRatio(hash);
+  const w = round(ratio > 1 ? 32 : 32 * ratio);
+  const h = round(ratio > 1 ? 32 / ratio : 32);
+  const rgba = new Uint8Array(w * h * 4), fx = [], fy = [];
   for (let y = 0, i = 0; y < h; y++) {
     for (let x = 0; x < w; x++, i += 4) {
       let l = l_dc, p = p_dc, q = q_dc, a = a_dc;
@@ -77,7 +77,7 @@ function thumbHashToRGBA(hash) {
       // Decode P and Q
       for (let cy = 0, j = 0; cy < 3; cy++) {
         for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 3 - cy; cx++, j++) {
-          let f = fx[cx] * fy2;
+          const f = fx[cx] * fy2;
           p += p_ac[j] * f;
           q += q_ac[j] * f;
         }
@@ -93,9 +93,9 @@ function thumbHashToRGBA(hash) {
       }
 
       // Convert to RGB
-      let b = l - 2 / 3 * p;
-      let r = (3 * l - b + q) / 2;
-      let g = r - q;
+      const b = l - 2 / 3 * p;
+      const r = (3 * l - b + q) / 2;
+      const g = r - q;
       rgba[i] = max(0, 255 * min(1, r));
       rgba[i + 1] = max(0, 255 * min(1, g));
       rgba[i + 2] = max(0, 255 * min(1, b));
@@ -106,9 +106,9 @@ function thumbHashToRGBA(hash) {
 }
 
 function rgbaToDataURL(w, h, rgba) {
-  let row = w * 4 + 1;
-  let idat = 6 + h * (5 + row);
-  let bytes = [
+  const row = w * 4 + 1;
+  const idat = 6 + h * (5 + row);
+  const bytes = [
     137,
     80,
     78,
@@ -153,7 +153,7 @@ function rgbaToDataURL(w, h, rgba) {
     120,
     1,
   ];
-  let table = [
+  const table = [
     0,
     498536548,
     997073096,
@@ -226,9 +226,6 @@ function rgbaToDataURL(w, h, rgba) {
   return "data:image/png;base64," + btoa(String.fromCharCode(...bytes));
 }
 
-function thumbHashToDataURL(hash) {
-}
-
 document.querySelectorAll("[data-thumb]").forEach((entry) => {
   const hash = entry.getAttribute("data-thumb");
 
@@ -251,8 +248,8 @@ document.querySelectorAll("[data-thumb]").forEach((entry) => {
   const child = entry.querySelector("img[data-thumb-img]");
   if (child && !child.complete) {
     child.style.opacity = 0;
-    child.style.transition = "opacity 0.3s ease";
     child.addEventListener("load", () => {
+      child.style.transition = "opacity 0.3s ease";
       child.style.opacity = 1;
     });
   }