From 101036f9c78649772013c66a3af356a15617e2da Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 29 Dec 2024 03:18:33 +0500
Subject: [PATCH] feat: add sticker pack stickers preview

---
 index.html             | 17 ++++++---
 static/pack_preview.js | 27 +++++++++++----
 static/tailwind.css    | 79 +++++++++++++++---------------------------
 tailwind.css           |  1 +
 4 files changed, 61 insertions(+), 63 deletions(-)
diff --git a/index.html b/index.html
index 258cb6b..03ed6ff 100644
--- a/index.html
+++ b/index.html
@@ -9,11 +9,11 @@
 </head>
 
 <body>
-    <div class="absolute inset-0 min-h-screen -z-10 tiledBackground"></div>
-    <div class="absolute inset-0 min-h-screen -z-20 bg-gradient-to-b from-gray-900 to-black"></div>
-    <div class="container flex flex-col items-center justify-center min-w-full min-h-screen gap-4 mx-auto">
+    <div class="fixed inset-0 min-h-screen -z-10 tiledBackground"></div>
+    <div class="fixed inset-0 min-h-screen -z-20 bg-gradient-to-b from-gray-900 to-black"></div>
+    <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 px-4 max-w-[600px]" id="preview_sticker_pack">
+        <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"
                 id="preview_sticker_pack">
                 <img src="static/images/cinny.png" class="object-contain w-64" alt="" id="preview_sticker_pack_image" />
@@ -83,6 +83,15 @@
             <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="p-4 rounded-lg shadow-lg bg-stone-800 text-slate-200 ">
+                <p class="text-2xl">Pack Preview</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" />
+                </div>
+            </div>
+        </div>
+
     </div>
     <script src="static/pack_preview.js"></script>
 </body>
diff --git a/static/pack_preview.js b/static/pack_preview.js
index b5be00d..4e8af01 100644
--- a/static/pack_preview.js
+++ b/static/pack_preview.js
@@ -3,6 +3,7 @@ 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 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");
@@ -64,6 +65,15 @@ async function loadPack(pack) {
   updatePackInfo(data);
 }
 
+function getStickerImage(stickerID) {
+  const _image_path = `${stickerID.slice(0, 2)}/${stickerID.slice(
+    2,
+    4
+  )}/${stickerID.slice(4)}`;
+
+  return `${index.homeserver_url}/__thumbnail/${_image_path}`;
+}
+
 function updatePackInfo(data) {
   packName.innerHTML = data.title;
 
@@ -77,13 +87,7 @@ function updatePackInfo(data) {
     }
   }
 
-  const _image_id = data.stickers[0].id;
-  const _image_path = `${_image_id.slice(0, 2)}/${_image_id.slice(
-    2,
-    4
-  )}/${_image_id.slice(4)}`;
-
-  packImage.src = `${index.homeserver_url}/__thumbnail/${_image_path}`;
+  packImage.src = getStickerImage(data.stickers[0].id);
 
   if (data.hasOwnProperty("rating") && data.rating) {
     switch (data.rating.toLowerCase()) {
@@ -119,6 +123,15 @@ function updatePackInfo(data) {
     packLinkCI.classList.remove("hidden");
     packLinkCI.classList.add("flex");
   }
+
+  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')
+    packStickers.appendChild(stickerImage);
+  }
 }
 
 function toggleElementInstruction() {
diff --git a/static/tailwind.css b/static/tailwind.css
index fbacf73..e24d958 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -588,16 +588,24 @@ video {
   }
 }
 
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
 
-.inset-0 {
-  inset: 0px;
+.sticky {
+  position: sticky;
 }
 
-.top-\[25\%\] {
-  top: 25%;
+.inset-0 {
+  inset: 0px;
 }
 
 .-z-10 {
@@ -621,9 +629,8 @@ video {
   margin-right: auto;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
+.mt-4 {
+  margin-top: 1rem;
 }
 
 .flex {
@@ -634,18 +641,10 @@ video {
   display: none;
 }
 
-.aspect-video {
-  aspect-ratio: 16 / 9;
-}
-
 .h-16 {
   height: 4rem;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
 .min-h-screen {
   min-height: 100vh;
 }
@@ -654,6 +653,10 @@ video {
   width: 2.5rem;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
 .w-64 {
   width: 16rem;
 }
@@ -662,34 +665,6 @@ video {
   width: 100%;
 }
 
-.min-w-full {
-  min-width: 100%;
-}
-
-.max-w-\[768px\] {
-  max-width: 768px;
-}
-
-.max-w-\[378px\] {
-  max-width: 378px;
-}
-
-.max-w-\[512px\] {
-  max-width: 512px;
-}
-
-.max-w-\[600px\] {
-  max-width: 600px;
-}
-
-.max-w-\[256px\] {
-  max-width: 256px;
-}
-
-.max-w-full {
-  max-width: 100%;
-}
-
 .max-w-\[90\%\] {
   max-width: 90%;
 }
@@ -698,6 +673,10 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-center {
   align-items: center;
 }
@@ -714,10 +693,6 @@ video {
   gap: 1rem;
 }
 
-.whitespace-pre {
-  white-space: pre;
-}
-
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -795,11 +770,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -864,6 +834,7 @@ video {
   background-image: url('images/background-white.png');
   background-repeat: repeat;
   background-size: contain;
+  background-attachment: fixed;
   background-size: 256px;
   opacity: .25;
   margin-top: -16px;
@@ -880,6 +851,10 @@ video {
     top: 25%;
   }
 
+  .md\:w-\[600px\] {
+    width: 600px;
+  }
+
   .md\:max-w-\[768px\] {
     max-width: 768px;
   }
diff --git a/tailwind.css b/tailwind.css
index 06eae24..4a21e53 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -6,6 +6,7 @@
     background-image: url('images/background-white.png');
     background-repeat: repeat;
     background-size: contain;
+    background-attachment: fixed;
     background-size: 256px;
     opacity: .25;
     margin-top: -16px;
