Load confetti only when needed

midudev · Feb 27, 2024 · 89cae3c · 89cae3c
1 parent d1786f4
commit 89cae3c
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -15,22 +15,24 @@
     "format:check": "prettier --check src"
   },
   "dependencies": {
-    "astro": "4.4.5",
     "@fontsource-variable/jost": "5.0.17",
-    "@vercel/analytics": "1.2.2"
+    "@vercel/analytics": "1.2.2",
+    "astro": "4.4.5",
+    "canvas-confetti": "1.9.2"
   },
   "devDependencies": {
     "@antfu/eslint-config": "0.43.1",
-    "lightningcss": "1.24.0",
     "@astrojs/check": "0.5.6",
     "@astrojs/tailwind": "5.1.0",
     "@astrojs/vercel": "7.3.4",
     "@midudev/tailwind-animations": "0.0.7",
-    "js-confetti": "0.12.0",
+    "@types/canvas-confetti": "^1.6.4",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-astro": "0.31.4",
     "eslint-plugin-jsx-a11y": "6.8.0",
+    "js-confetti": "0.12.0",
+    "lightningcss": "1.24.0",
     "prettier": "3.2.5",
     "prettier-plugin-astro": "0.13.0",
     "prettier-plugin-tailwindcss": "0.5.11",

diff --git a/src/sections/Countdown.astro b/src/sections/Countdown.astro
@@ -4,97 +4,94 @@ import Date from "@/components/Date.astro"
 import { EVENT_TIMESTAMP } from "@/consts/event-date"
 ---
 
-<section class="my-0 lg:my-32 flex flex-col gap-y-10 place-items-center" aria-label="cuenta atrás">
-
-  <LaVeladaLogo class="text-primary" />
-  <p
-    class="uppercase text-lg font-medium text-primary opacity-80 text-center text-balance"
-  >
-    Para el Evento de Presentación faltan
-  </p>
-
-  <div
-    class="flex flex-row gap-x-1 text-primary uppercase font-semibold"
-    data-date={EVENT_TIMESTAMP} role="timer"
-  >
-    <Date time="00" dateType="Días" attribute={{ "data-days": "" }} />
+<section class="my-0 flex flex-col place-items-center gap-y-10 lg:my-32" aria-label="cuenta atrás">
+	<LaVeladaLogo class="text-primary" />
+	<p class="text-balance text-center text-lg font-medium uppercase text-primary opacity-80">
+		Para el Evento de Presentación faltan
+	</p>
 
-    <span aria-hidden="true" class="mt-1 text-xl">:</span>
+	<div
+		class="flex flex-row gap-x-1 font-semibold uppercase text-primary"
+		data-date={EVENT_TIMESTAMP}
+		role="timer"
+	>
+		<Date time="00" dateType="Días" attribute={{ "data-days": "" }} />
 
-    <Date time="00" dateType="Horas" attribute={{ "data-hours": "" }} />
+		<span aria-hidden="true" class="mt-1 text-xl">:</span>
 
-    <span aria-hidden="true" class="mt-1 text-xl">:</span>
+		<Date time="00" dateType="Horas" attribute={{ "data-hours": "" }} />
 
-    <Date time="00" dateType="Minutos" attribute={{ "data-minutes": "" }} />
+		<span aria-hidden="true" class="mt-1 text-xl">:</span>
 
-    <span aria-hidden="true" class="mt-1 text-xl">:</span>
+		<Date time="00" dateType="Minutos" attribute={{ "data-minutes": "" }} />
 
-    <Date time="00" dateType="Segundos" attribute={{ "data-seconds": "" }} />
-  </div>
+		<span aria-hidden="true" class="mt-1 text-xl">:</span>
+
+		<Date time="00" dateType="Segundos" attribute={{ "data-seconds": "" }} />
+	</div>
 </section>
 
 <script>
-import JSConfetti from 'js-confetti'
-
-  const SECOND = 1000
-  const MINUTE = SECOND * 60
-  const HOUR = MINUTE * 60
-  const DAY = HOUR * 24
-
-  function init() {
-    const $countdown = document.querySelector("[data-date]")
-    if (!$countdown) return
-
-    const $days = $countdown.querySelector("[data-days]")
-    const $hours = $countdown.querySelector("[data-hours]")
-    const $minutes = $countdown.querySelector("[data-minutes]")
-    const $seconds = $countdown.querySelector("[data-seconds]")
-
-    const timestamp = $countdown.getAttribute("data-date")
-    if (!timestamp) return
-
-    const date = new Date(+timestamp).getTime()
-
-    const formatTime = (time: number) => {
-      return Math.floor(time).toString().padStart(2, "0")
-    }
-
-    function updateCountdown() {
-      const now = Date.now()
-      const diff = date - now
-      const $countdown = document.querySelector("[data-date]")
-      if (!$countdown) return
-
-      if ($days instanceof HTMLElement) {
-        $days.innerText = formatTime(diff / DAY)
-      }
-
-      if ($hours instanceof HTMLElement) {
-        $hours.innerText = formatTime((diff % DAY) / HOUR)
-      }
-
-      if ($minutes instanceof HTMLElement) {
-        $minutes.innerText = formatTime((diff % HOUR) / MINUTE)
-      }
-
-      if ($seconds instanceof HTMLElement) {
-        $seconds.innerText = formatTime((diff % MINUTE) / SECOND)
-      }
-
-      if (diff < 1000) {
-        clearInterval(intervalId)
-
-        $countdown.innerHTML = "¡La velada ha comenzado! 🎉"
-        $countdown.className = "text-primary uppercase font-semibold animate-fade-in text-3xl"
-
-        const confetti = new JSConfetti()
-        confetti.addConfetti()
-      }
-    }
-
-    const intervalId = setInterval(updateCountdown, SECOND)
-    updateCountdown()
-  }
-
-  init()
+	const SECOND = 1000
+	const MINUTE = SECOND * 60
+	const HOUR = MINUTE * 60
+	const DAY = HOUR * 24
+
+	function init() {
+		const $countdown = document.querySelector("[data-date]")
+		if (!$countdown) return
+
+		let intervalId: number
+
+		const $days = $countdown.querySelector("[data-days]")
+		const $hours = $countdown.querySelector("[data-hours]")
+		const $minutes = $countdown.querySelector("[data-minutes]")
+		const $seconds = $countdown.querySelector("[data-seconds]")
+
+		const timestamp = $countdown.getAttribute("data-date")
+		if (!timestamp) return
+
+		const date = new Date(+timestamp).getTime()
+
+		const formatTime = (time: number) => {
+			return Math.floor(time).toString().padStart(2, "0")
+		}
+
+		function updateCountdown() {
+			const now = Date.now()
+			const diff = date - now
+			const $countdown = document.querySelector("[data-date]")
+			if (!$countdown) return
+
+			if ($days instanceof HTMLElement) {
+				$days.innerText = formatTime(diff / DAY)
+			}
+
+			if ($hours instanceof HTMLElement) {
+				$hours.innerText = formatTime((diff % DAY) / HOUR)
+			}
+
+			if ($minutes instanceof HTMLElement) {
+				$minutes.innerText = formatTime((diff % HOUR) / MINUTE)
+			}
+
+			if ($seconds instanceof HTMLElement) {
+				$seconds.innerText = formatTime((diff % MINUTE) / SECOND)
+			}
+
+			clearInterval(intervalId)
+
+			$countdown.innerHTML = "¡La velada ha comenzado! 🎉"
+			$countdown.className = "text-primary uppercase font-semibold animate-fade-in text-3xl"
+
+			import("canvas-confetti").then(({ default: confetti }) => {
+				confetti()
+			})
+		}
+
+		intervalId = setInterval(updateCountdown, SECOND)
+		updateCountdown()
+	}
+
+	init()
 </script>