From 007ec1856fb4f335a2c78c50f44904aa5cebb88f Mon Sep 17 00:00:00 2001
From: ld3zian <42660576+ld3z@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:10:05 -0700
Subject: [PATCH] added timer to the comic card

---
 src/components/ComicCard.astro | 59 +++++++++++++++++++++++++++++-----
 1 file changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/components/ComicCard.astro b/src/components/ComicCard.astro
index 1c55285..deba8ea 100644
--- a/src/components/ComicCard.astro
+++ b/src/components/ComicCard.astro
@@ -97,14 +97,21 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
       </div>
       
       <div class="mt-auto pt-4 flex items-center justify-between text-sm text-primary/60 border-t border-hover/30">
-        <time datetime={comic.updated_at}>
-          {new Date(comic.updated_at).toLocaleString(undefined, { 
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-          })}
-        </time>
+        <div class="flex flex-col gap-1">
+          <time datetime={comic.updated_at}>
+            {new Date(comic.updated_at).toLocaleString(undefined, { 
+              month: 'short',
+              day: 'numeric',
+              hour: '2-digit',
+              minute: '2-digit'
+            })}
+          </time>
+          {comic.publish_at && (
+            <div class="countdown-timer text-xs" data-publish-at={comic.publish_at}>
+              Publishing in: <span class="font-medium text-accent">calculating...</span>
+            </div>
+          )}
+        </div>
         <span class="group-hover:text-accent transition-colors duration-300">Read Now →</span>
       </div>
     </div>
@@ -176,5 +183,41 @@ const isNSFW = comic.md_comics.content_rating === 'erotica';
         }
       });
     });
+
+    // Add countdown timer functionality
+    const countdownTimers = document.querySelectorAll('.countdown-timer');
+    
+    function updateTimer(element: Element) {
+      const publishAt = new Date(element.getAttribute('data-publish-at') || '').getTime();
+      const now = new Date().getTime();
+      const distance = publishAt - now;
+      
+      const timerSpan = element.querySelector('span');
+      if (!timerSpan) return;
+
+      if (distance < 0) {
+        timerSpan.textContent = 'Published';
+        return;
+      }
+
+      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+      let timeString = '';
+      if (days > 0) timeString += `${days}d `;
+      if (hours > 0 || days > 0) timeString += `${hours}h `;
+      if (minutes > 0 || hours > 0 || days > 0) timeString += `${minutes}m `;
+      timeString += `${seconds}s`;
+
+      timerSpan.textContent = timeString;
+    }
+
+    countdownTimers.forEach(timer => {
+      updateTimer(timer);
+      // Update every second
+      setInterval(() => updateTimer(timer), 1000);
+    });
   });
 </script>
\ No newline at end of file