Merge pull request #2 from wah-su/main

#2

index.html

@@ -14,9 +14,9 @@
     <div class="container flex flex-col items-center justify-center min-h-screen gap-4 p-4 mx-auto">
 
         <div class="flex-col hidden gap-4 w-full md:w-[600px]" id="preview_sticker_pack">
-            <div class="flex flex-col items-center justify-center gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200"
+            <div class="flex flex-wrap items-center justify-around gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200"
                 id="preview_sticker_pack">
-                <img src="static/images/cinny.png" class="object-contain w-64" alt="" id="preview_sticker_pack_image" />
+                <img src="static/images/cinny.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" />
                 <div class="flex flex-col justify-center gap-2">
                     <p class="text-4xl text-bold" id="preview_sticker_pack_name">
                         {sticker_pack_name}
@@ -83,11 +83,21 @@
             <button class="flex items-center justify-center w-full py-2 text-2xl bg-red-600 rounded-lg" onclick="toggleElementInstruction()">Close</button>
         </div>
 
-        <div class="w-full md:w-[600px]">
+        <div class="w-full md:w-[600px] hidden" id="preview_sticker_pack_stickers_container">
             <div class="p-4 rounded-lg shadow-lg bg-stone-800 text-slate-200 ">
-                <p class="text-2xl">Pack Preview</p>
+                <p class="text-2xl">Pack Preview <span id="preview_sticker_pack_stickers_count"></span></p>
                 <div class="flex flex-wrap gap-4 mt-4 " id="preview_sticker_pack_stickers">
-                    <img src="static/images/cinny.png" alt="" class="hidden object-contain w-20" />
+                    <img src="static/images/cinny.png" alt="" class="hidden object-contain md:w-20 w-24" />
+                </div>
+            </div>
+        </div>
+
+        <div class="flex-wrap gap-1 flex-col md:flex-row rounded-lg shadow-lg hidden" id="stickerpacks_index">
+            <div class="hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg">
+                <img src="static/images/cinny.png" alt="" class="object-contain w-24"/>
+                <div>
+                    <p class="text-2xl">{pack_name}</p>
+                    <p class="text-xl">{artist_name}</p>
                 </div>
             </div>
         </div>

static/pack_preview.js

@@ -3,12 +3,25 @@ const packName = document.getElementById("preview_sticker_pack_name");
 const packAuthor_by = document.getElementById("preview_sticker_pack_author_by");
 const packAuthor = document.getElementById("preview_sticker_pack_author");
 const packImage = document.getElementById("preview_sticker_pack_image");
+const packStickersC = document.getElementById(
+  "preview_sticker_pack_stickers_container"
+);
+const packStickersCount = document.getElementById(
+  "preview_sticker_pack_stickers_count"
+);
 const packStickers = document.getElementById("preview_sticker_pack_stickers");
 const packLinkTG = document.getElementById("preview_sticker_pack_add_tg");
 const packLinkFC = document.getElementById("preview_sticker_pack_add_fc");
 const packLinkCI = document.getElementById("preview_sticker_pack_add_ci");
-const ElementInstructionOV = document.getElementById("preview_sticker_pack_add_to_element_overlay");
-const ElementInstruction = document.getElementById("preview_sticker_pack_add_to_element");
+const ElementInstructionOV = document.getElementById(
+  "preview_sticker_pack_add_to_element_overlay"
+);
+const ElementInstruction = document.getElementById(
+  "preview_sticker_pack_add_to_element"
+);
+
+const stickerpacksIndexContainer =
+  document.getElementById("stickerpacks_index");
 
 let index = null;
 const searchParams = new URLSearchParams(window.location.search);
@@ -31,14 +44,58 @@ async function loadIndex() {
     });
 
   if (!pack_id) {
-    packName.innerHTML = "no sticker pack provided";
+    loadStickerpacks();
   } else if (!index) {
-    packName.innerHTML = "no index.json found";
+    stickerpacksIndexContainer.classList.remove("hidden");
+    stickerpacksIndexContainer.innerHTML = "no index.json found";
   } else {
     loadPack(pack_id);
   }
 }
 
+async function loadStickerpacks() {
+  stickerpacksIndexContainer.classList.remove("hidden");
+  stickerpacksIndexContainer.classList.add("flex");
+  for (let i = 0; i < index.packs.length; i++) {
+    const data = await fetch(
+      `${window.location.origin}/stickerpacks/${index.packs[i]}`
+    )
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error("not found");
+        }
+        return res.json();
+      })
+      .then((json) => {
+        return json;
+      })
+      .catch((e) => {
+        console.error(e);
+        return null;
+      });
+    if (!data) {
+      continue;
+    }
+    stickerpacksIndexContainer.innerHTML += `
+    <a href="index.html?id=${index.packs[i].split('.json')[0]}" class="flex-grow">
+      <div class="flex gap-4 items-center bg-stone-800 text-slate-200 p-4 rounded-lg">
+            <img src="${getStickerImage(data.stickers[0].id)}" alt="${
+        data.stickers[0].body
+      }" class="object-contain w-24"/>
+            <div>
+              <p class="text-2xl">${data.title}</p>
+              ${
+                data.hasOwnProperty("author") && data.author.name
+                  ? `<p class="text-xl">${data.author.name}</p>`
+                  : ""
+              }
+            </div>
+        </div>
+    </a>
+      `;
+  }
+}
+
 async function loadPack(pack) {
   const data = await fetch(
     `${window.location.origin}/stickerpacks/${pack}.json`
@@ -124,12 +181,14 @@ function updatePackInfo(data) {
     packLinkCI.classList.add("flex");
   }
 
+  packStickersC.classList.remove("hidden");
+  packStickersCount.innerHTML = `(${data.stickers.length})`;
   for (let i = 0; i < data.stickers.length; i++) {
     const sticker = data.stickers[i];
     const stickerImage = document.createElement("img");
     stickerImage.src = getStickerImage(sticker.id);
     stickerImage.alt = sticker.body;
-    stickerImage.classList.add('object-contain', 'w-20')
+    stickerImage.classList.add("object-contain", "md:w-20", "w-24");
     packStickers.appendChild(stickerImage);
   }
 }

static/tailwind.css

@@ -588,10 +588,6 @@ video {
   }
 }
 
-.static {
-  position: static;
-}
-
 .fixed {
   position: fixed;
 }
@@ -600,10 +596,6 @@ video {
   position: absolute;
 }
 
-.sticky {
-  position: sticky;
-}
-
 .inset-0 {
   inset: 0px;
 }
@@ -665,10 +657,27 @@ video {
   width: 100%;
 }
 
+.w-24 {
+  width: 6rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .max-w-\[90\%\] {
   max-width: 90%;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -685,6 +694,18 @@ video {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -693,10 +714,27 @@ video {
   gap: 1rem;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
+}
+
 .bg-\[\#259d7b\] {
   --tw-bg-opacity: 1;
   background-color: rgb(37 157 123 / var(--tw-bg-opacity, 1));
@@ -780,6 +818,11 @@ video {
   line-height: 2.5rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-green-400 {
   --tw-text-opacity: 1;
   color: rgb(74 222 128 / var(--tw-text-opacity, 1));
@@ -855,6 +898,18 @@ video {
     width: 600px;
   }
 
+  .md\:w-24 {
+    width: 6rem;
+  }
+
+  .md\:w-20 {
+    width: 5rem;
+  }
+
+  .md\:w-64 {
+    width: 16rem;
+  }
+
   .md\:max-w-\[768px\] {
     max-width: 768px;
   }
@@ -863,6 +918,10 @@ video {
     flex-direction: row;
   }
 
+  .md\:items-center {
+    align-items: center;
+  }
+
   .md\:whitespace-pre {
     white-space: pre;
   }