add sticker packs index

index.html

@@ -92,6 +92,16 @@
             </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>
+
     </div>
     <script src="static/pack_preview.js"></script>
 </body>

static/pack_preview.js

@@ -3,14 +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 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);
@@ -33,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`
@@ -126,14 +181,14 @@ function updatePackInfo(data) {
     packLinkCI.classList.add("flex");
   }
 
-  packStickersC.classList.remove('hidden')
+  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', 'md:w-20', "w-24")
+    stickerImage.classList.add("object-contain", "md:w-20", "w-24");
     packStickers.appendChild(stickerImage);
   }
 }

static/tailwind.css

@@ -665,10 +665,19 @@ video {
   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;
 }
@@ -693,6 +702,10 @@ video {
   justify-content: space-around;
 }
 
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -701,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));
@@ -788,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));