forked from Aaron/Kino-Website
06606131ef
Introduces BaseCartItem, MovieCartItem, SnackCartItem, and the CartItem discriminated union in bigConstants.ts. Replaces all any-typed cart references across CartView, CheckoutView, SnacksView, and BookingModal with the new typed interfaces. Also types users/currentUser with the existing User interface and removes the unused JSONType import. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
520 lines
26 KiB
Plaintext
520 lines
26 KiB
Plaintext
<section id="snacks-view">
|
||
<div class="container" style="padding: 120px 8% 50px 8%;">
|
||
<h1 class="list-title">Snacks & Getränke</h1>
|
||
|
||
<div class="category-tabs">
|
||
<button class="tab-btn active" data-target="cat-getraenke">Getränke</button>
|
||
<button class="tab-btn" data-target="cat-popcorn">Popcorn</button>
|
||
<button class="tab-btn" data-target="cat-nachos">Nachos</button>
|
||
<button class="tab-btn" data-target="cat-snacks">Snacks</button>
|
||
<button class="tab-btn" data-target="cat-kombi">Kombi</button>
|
||
<button class="tab-btn" data-target="cat-eis">Eis</button>
|
||
</div>
|
||
|
||
<div id="cat-getraenke" class="snack-category active">
|
||
<div class="snack-grid">
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/cola.png" alt="Cola"></div>
|
||
<div class="snack-info">
|
||
<h3>Coca Cola</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||
<button class="size-chip">1L <span>5,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/cola-zero.png" alt="Cola Zero"></div>
|
||
<div class="snack-info">
|
||
<h3>Coca Cola Zero</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||
<button class="size-chip">1L <span>5,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/cola-light.png" alt="Cola Light"></div>
|
||
<div class="snack-info">
|
||
<h3>Coca Cola Light</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||
<button class="size-chip">1L <span>5,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/sprite.png" alt="Sprite"></div>
|
||
<div class="snack-info">
|
||
<h3>Sprite</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||
<button class="size-chip">1L <span>5,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/fanta.png" alt="Fanta"></div>
|
||
<div class="snack-info">
|
||
<h3>Fanta</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||
<button class="size-chip">1L <span>5,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/spezi.png" alt="Spezi"></div>
|
||
<div class="snack-info">
|
||
<h3>Mezzo Mix</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||
<button class="size-chip">0,75L <span>4,50€</span></button>
|
||
<button class="size-chip">1L <span>5,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/wasser.png" alt="Wasser"></div>
|
||
<div class="snack-info">
|
||
<h3>Wasser</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">0,33L <span>2,00€</span></button>
|
||
<button class="size-chip">0,50L <span>3,00€</span></button>
|
||
<button class="size-chip">0,75L <span>3,50€</span></button>
|
||
<button class="size-chip">1L <span>4,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/Apfelschorle.png" alt="Apfelschorle"></div>
|
||
<div class="snack-info">
|
||
<h3>Apfelschorle</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">0,33L <span>2,00€</span></button>
|
||
<button class="size-chip">0,50L <span>3,00€</span></button>
|
||
<button class="size-chip">0,75L <span>3,50€</span></button>
|
||
<button class="size-chip">1L <span>4,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/fuze-tea.png" alt="Fuze Tea"></div>
|
||
<div class="snack-info">
|
||
<h3>Fuze Tea</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">0,33L <span>2,50€</span></button>
|
||
<button class="size-chip">0,50L <span>3,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="cat-popcorn" class="snack-category hidden">
|
||
<div class="snack-grid">
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/popcorn-klein.png" alt="Popcorn klein"></div>
|
||
<div class="snack-info">
|
||
<h3>Popcorn klein</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Süß</button>
|
||
<button class="opt-btn">Salzig</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">3,50€</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/popcorn-mittel.png" alt="Popcorn mittel"></div>
|
||
<div class="snack-info">
|
||
<h3>Popcorn Mittel</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Süß</button>
|
||
<button class="opt-btn">Salzig</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">4,50€</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/popcorn-big.png" alt="Popcorn groß"></div>
|
||
<div class="snack-info">
|
||
<h3>Popcorn Groß</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Süß</button>
|
||
<button class="opt-btn">Salzig</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">6,00€</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/zoomania-popcorn.jpg" alt="Popcorn limited - Zoomania 2"></div>
|
||
<div class="snack-info">
|
||
<h3>Limitierter Metallbecher - Zoomania 2</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Süß</button>
|
||
<button class="opt-btn">Salzig</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">12,00€</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/screamdoorpopcorn.jpg" alt="Popcorn limited - Scream VII"></div>
|
||
<div class="snack-info">
|
||
<h3>Limitierter Sammelbecher - Scream VII</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Süß</button>
|
||
<button class="opt-btn">Salzig</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">29,00€</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/astronautpopcorn.jpg" alt="Popcorn limited - Der Austronaut"></div>
|
||
<div class="snack-info">
|
||
<h3>Limitierter Sammelbecher - Der Austronaut</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Süß</button>
|
||
<button class="opt-btn">Salzig</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">34,00€</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/hopperspopcornmetall.jpg" alt="Popcorn limited - Hoppers"></div>
|
||
<div class="snack-info">
|
||
<h3>Limitierter Metallbecher - Hoppers</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Süß</button>
|
||
<button class="opt-btn">Salzig</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">12,00€</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/hopperspopcornwood.png" alt="Popcorn limited - Hoppers Wood"></div>
|
||
<div class="snack-info">
|
||
<h3>Limitierter Sammelbecher - Hoppers</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Süß</button>
|
||
<button class="opt-btn">Salzig</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">21,00€</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/marioyoshipopcorn.png" alt="Popcorn limited - Yoshi"></div>
|
||
<div class="snack-info">
|
||
<h3>Limitierter Sammelbecher - Yoshi Becher</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Süß</button>
|
||
<button class="opt-btn">Salzig</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">35,90€</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="cat-nachos" class="snack-category hidden">
|
||
<div class="snack-grid">
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/nachosnormal.png" alt="Nachos"></div>
|
||
<div class="snack-info">
|
||
<h3>Nachos Klein</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Käse-Dip</button>
|
||
<button class="opt-btn">Salsa-Dip</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Klein <span>5,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/nachosnormal.png" alt="Nachos"></div>
|
||
<div class="snack-info">
|
||
<h3>Nachos Normal</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Käse-Dip</button>
|
||
<button class="opt-btn">Salsa-Dip</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Mittel <span>6,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/nachos.jpg" alt="Nachos groß"></div>
|
||
<div class="snack-info">
|
||
<h3>Nachos Groß</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Käse-Dip</button>
|
||
<button class="opt-btn">Sourcreme-Dip</button>
|
||
<button class="opt-btn">Salsa-Dip</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Groß <span>8,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2 class="list-title">Dips</h2>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/käsedip.png" alt="Käse-Dip"></div>
|
||
<div class="snack-info">
|
||
<h3>Käse-Dip (warm)</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Normal</button>
|
||
<button class="opt-btn">Scharf</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Schale <span>2,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/sourdip.png" alt="Sourcreme-Dip"></div>
|
||
<div class="snack-info">
|
||
<h3>Sourcreme-Dip</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Normal</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Schale <span>2,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/salsadip.png" alt="Salsa-Dip"></div>
|
||
<div class="snack-info">
|
||
<h3>Salsa-Dip</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Normal</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Schale <span>2,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h2 class="list-title">Nacho Kombi-Menüs</h2>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/nachokombiklein.png" alt="Nacho Kombi Klein"></div>
|
||
<div class="snack-info">
|
||
<h3>Nacho Menü Klein – Nachos klein + 1 Dip + 1 0,33L Getränk</h3>
|
||
<div class="option-group">
|
||
<button class="opt-btn active">Klein</button>
|
||
</div>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Kombi <span>6,90€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="cat-snacks" class="snack-category hidden">
|
||
<div class="snack-grid">
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/mms.png" alt="M&Ms"></div>
|
||
<div class="snack-info">
|
||
<h3>M&M's (verschiedene Sorten)</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Packung <span>4,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/haribo.png" alt="Haribo"></div>
|
||
<div class="snack-info">
|
||
<h3>Haribo Goldbären (verschiedene Sorten)</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Tüte <span>3,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card">
|
||
<div class="snack-img"><img src="/img/riegel.png" alt="Riegel"></div>
|
||
<div class="snack-info">
|
||
<h3>Schokoriegel (verschiedene Sorten)</h3>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Tüte <span>2,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="cat-kombi" class="snack-category hidden">
|
||
<div class="snack-grid">
|
||
<div class="snack-card highlight">
|
||
<div class="snack-info">
|
||
<h3>Kleines Menü</h3>
|
||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,33L Getränk + Popcorn Klein</p>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Menü-Preis <span>5,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card highlight">
|
||
<div class="snack-info">
|
||
<h3>Mittleres Menü</h3>
|
||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk + Popcorn Mittel</p>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Menü-Preis <span>6,50€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card highlight">
|
||
<div class="snack-info">
|
||
<span class="badge">Bestseller</span>
|
||
<h3>Großes Menü</h3>
|
||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">1L Getränk + Popcorn Groß</p>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Menü-Preis <span>8,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card highlight">
|
||
<div class="snack-info">
|
||
<div class="snack-img"><img src="/img/hopperskidsmenu.jpg" alt="Hoppers Kids Menu"></div>
|
||
<span class="badge">SPECIAL</span>
|
||
<h3>Limitiertes Menü</h3>
|
||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk im HOPPERS Becher + HOPPERS Popcorn Schale + HOPPERS Figur</p>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Menü-Preis <span>10,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card highlight">
|
||
<div class="snack-info">
|
||
<div class="snack-img"><img src="/img/mariokidsmenu.png" alt="Mario Kids Menu"></div>
|
||
<span class="badge">SPECIAL</span>
|
||
<h3>Limitiertes Menü</h3>
|
||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk im MARIO GALAXY Becher + MARIO GALAXY Popcorn Schale</p>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Menü-Preis <span>10,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="snack-card highlight">
|
||
<div class="snack-info">
|
||
<div class="snack-img"><img src="/img/zoomaniakidsmenu.jpg" alt="Zoomania Kids Menu"></div>
|
||
<span class="badge">SPECIAL</span>
|
||
<h3>Limitiertes Menü</h3>
|
||
<p style="font-size: 0.8rem; color: #86868b; margin-bottom: 10px;">0,5L Getränk im ZOOMANIA Becher + ZOOMANIA Popcorn Schale + Figur zum aussuchen</p>
|
||
<div class="size-selector">
|
||
<button class="size-chip">Menü-Preis <span>10,00€</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="cat-eis" class="snack-category hidden">
|
||
<div class="coming-soon-banner">
|
||
<h2>Eiscreme & Shakes</h2>
|
||
<p>Coming Soon...</p>
|
||
<span>Wir bereiten etwas ganz Besonderes für dich vor! Coming this summer!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
import { cart, updateCart } from "../scripts/bigConstants";
|
||
import type { SnackCartItem } 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";
|
||
|
||
const snackItem: SnackCartItem = {
|
||
id: Date.now() + Math.random(),
|
||
category: "snack",
|
||
title: snackTitle,
|
||
hall: sizeVal,
|
||
time: variantVal,
|
||
type: "SNACK",
|
||
price: priceVal,
|
||
img: snackImg
|
||
};
|
||
cart.push(snackItem);
|
||
|
||
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>
|