refactor: redistribute main.ts logic into Astro components

src/components/SnacksView.astro

@@ -1,4 +1,4 @@
-<section id="snacks-view" class="hidden">
+<section id="snacks-view">
     <div class="container" style="padding: 120px 8% 50px 8%;">
         <h1 class="list-title">Snacks & Getränke</h1>
 
@@ -447,3 +447,71 @@
         </div>
     </div>
 </section>
+
+<script>
+    import { cart, updateCart } from "../scripts/bigConstants";
+
+    const snacksView = document.getElementById("snacks-view");
+
+    snacksView?.addEventListener("click", (event: any) => {
+        const target = event.target as HTMLElement;
+        const sizeChip = target.closest(".size-chip") as HTMLElement;
+        if (!sizeChip) return;
+
+        const snackCard = sizeChip.closest(".snack-card");
+        if (!snackCard) return;
+
+        const snackTitle = (snackCard.querySelector("h3, h2") as HTMLElement)?.innerText || "Snack";
+        const snackImg = (snackCard.querySelector("img") as HTMLImageElement)?.src || "";
+        const priceSpan = sizeChip.querySelector("span") as HTMLElement;
+        const rawPriceText = (priceSpan ? priceSpan.innerText : sizeChip.innerText)
+            .replace("EUR", "").replace("€", "").replace(",", ".").trim();
+        const priceVal = parseFloat(rawPriceText) || 0;
+        const sizeVal = sizeChip.innerText.replace(priceSpan?.innerText || "", "").trim() || "Standard";
+        const activeOption = snackCard.querySelector(".opt-btn.active") as HTMLElement;
+        const variantVal = activeOption ? activeOption.innerText : "Normal";
+
+        cart.push({
+            id: Date.now() + Math.random(),
+            category: "snack",
+            title: snackTitle,
+            hall: sizeVal,
+            time: variantVal,
+            type: "SNACK",
+            price: priceVal,
+            img: snackImg
+        });
+
+        updateCart(cart);
+        window.dispatchEvent(new CustomEvent("cart-updated"));
+
+        const originalHtml = sizeChip.innerHTML;
+        sizeChip.innerHTML = "Hinzugefügt!";
+        setTimeout(() => {
+            sizeChip.innerHTML = originalHtml;
+        }, 800);
+    });
+
+    document.querySelectorAll(".tab-btn").forEach((button: any) => {
+        button.addEventListener("click", () => {
+            document.querySelectorAll(".tab-btn").forEach((tab) => tab.classList.remove("active"));
+            button.classList.add("active");
+
+            document.querySelectorAll(".snack-category").forEach((category) => category.classList.add("hidden"));
+            const targetId = button.dataset.target;
+            if (targetId) {
+                document.getElementById(targetId)?.classList.remove("hidden");
+            }
+        });
+    });
+
+    // Option button handling
+    snacksView?.addEventListener("click", (event: any) => {
+        const target = event.target as HTMLElement;
+        if (target.classList.contains("opt-btn")) {
+            const optionGroup = target.parentElement;
+            optionGroup?.querySelectorAll(".opt-btn").forEach((button: any) => button.classList.remove("active"));
+            target.classList.add("active");
+        }
+    });
+</script>