1093 lines
47 KiB
JavaScript
1093 lines
47 KiB
JavaScript
// Shared app state for legacy script files (account.js, booking.js, cart.js, checkout.js)
|
||
var prices = { normal: 11.0, imax: 15.0, vip: 12.0, dbox: 16.0 };
|
||
var seatLayouts = {
|
||
"Kino 1": { rows: 6, left: 3, right: 7, vipRows: [5], dbox: [] },
|
||
"Kino 2": { rows: 7, left: 5, right: 5, vipRows: [6], dbox: [] },
|
||
"Deluxe 1": { rows: 10, left: 7, right: 8, vipRows: [9], dbox: [{ r: 4, c: 5, w: 4 }] },
|
||
IMAX: { rows: 15, left: 10, right: 10, vipRows: [], dbox: [], isImax: true }
|
||
};
|
||
var cart = JSON.parse(localStorage.getItem("eagleCart")) || [];
|
||
var occupiedSeatsData = JSON.parse(localStorage.getItem("eagleOccupied")) || {};
|
||
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const views = {
|
||
hero: document.querySelector(".hero"),
|
||
moviesGrid: document.getElementById("movies-grid-section"),
|
||
list: document.getElementById("movie-list-view"),
|
||
halls: document.getElementById("halls-view"),
|
||
dbox: document.getElementById("dbox-view"),
|
||
collectors: document.getElementById("collectors-view"),
|
||
about: document.getElementById("about-view"),
|
||
snacks: document.getElementById("snacks-view"),
|
||
cart: document.getElementById("cart-view"),
|
||
checkout: document.getElementById("checkout-view"),
|
||
account: document.getElementById("account-view")
|
||
};
|
||
|
||
const ui = {
|
||
logo: document.getElementById("logo-home"),
|
||
linkFilme: document.getElementById("link-filme"),
|
||
linkSnacks: document.getElementById("link-snacks"),
|
||
linkAbout: document.getElementById("link-about"),
|
||
linkCart: document.getElementById("link-cart"),
|
||
linkAccount: document.getElementById("link-account"),
|
||
themeToggle: document.getElementById("theme-toggle"),
|
||
heroBookingBtn: document.getElementById("hero-booking-btn"),
|
||
heroSlider: document.getElementById("hero-slider"),
|
||
heroDots: document.getElementById("hero-dots"),
|
||
heroTitle: document.getElementById("hero-title"),
|
||
heroText: document.getElementById("hero-text"),
|
||
nowRunningRow: document.getElementById("now-running-row"),
|
||
movieProgramList: document.getElementById("movie-program-list"),
|
||
checkoutBtn: document.getElementById("btn-checkout-final"),
|
||
backHomeBtn: document.getElementById("btn-back-home"),
|
||
snacksView: document.getElementById("snacks-view"),
|
||
snackOverlay: document.getElementById("snack-prompt-overlay"),
|
||
btnYesSnacks: document.getElementById("btn-yes-snacks"),
|
||
btnNoCart: document.getElementById("btn-no-cart"),
|
||
bookingModal: document.getElementById("booking-modal"),
|
||
closeBookingModalBtn: document.querySelector(".close-btn")
|
||
};
|
||
|
||
const checkoutSteps = {
|
||
one: document.getElementById("checkout-step-1"),
|
||
two: document.getElementById("checkout-step-2"),
|
||
three: document.getElementById("checkout-step-3")
|
||
};
|
||
|
||
const movieCatalog = [
|
||
{
|
||
title: "Zoomania 2",
|
||
genre: "Animation",
|
||
duration: 148,
|
||
fsk: "6",
|
||
description: "In Walt Disney Animation Studios’ \"Zoomania 2\" geraten die tierischen Detektive Judy Hopps und Nick Wilde auf die rätselhafte Spur eines geheimnisvollen Reptils, das in Zoomania auftaucht und die Metropole völlig auf den Kopf stellt: Gary De’Snake! ",
|
||
poster: "img/zoomania-2.jpg",
|
||
backdrop: "img/zoomania-2.jpg"
|
||
},
|
||
{
|
||
title: "Shelter",
|
||
genre: "Action, Abenteuer",
|
||
duration: 147,
|
||
fsk: "16",
|
||
description: "Michael Mason, ein untergetauchter Elite-Agent, lebt auf einer abgelegenen Insel in Schottland. Als er in einem schweren Sturm ein Mädchen vor dem Ertrinken rettet, setzt er damit eine Kette von Ereignissen in Gang, die sein Versteck enttarnen und ihn zurück in die Welt zwingen. Dort muss er nicht nur um das Überleben der Teenagerin kämpfen, sondern sich auch den Dämonen seiner Vergangenheit stellen…",
|
||
poster: "img/shelter.jpg",
|
||
backdrop: "img/shelter.jpg"
|
||
},
|
||
{
|
||
title: "Mutiny",
|
||
genre: "Action, Abenteuer",
|
||
duration: "tba",
|
||
fsk: "?",
|
||
description: "Als sein milliardenschwerer Boss vor seinen Augen einem Mordkomplott zum Opfer fällt, wird Cole Reed (Jason Statham) für das Verbrechen verantwortlich gemacht. Im Bestreben dessen Tod zu rächen und die Täter zu überführen, gelangt Reed an Bord eines Frachters und stößt dabei auf eine internationale Verschwörung. Im Alleingang startet Cole eine gnadenlose Racheaktion auf hoher See…",
|
||
poster: "img/mutiny.jpg",
|
||
backdrop: "img/mutiny.jpg"
|
||
},
|
||
{
|
||
title: "Der Austronaut - Project Hail Mary",
|
||
genre: "Sci-Fi",
|
||
duration: 156,
|
||
fsk: "12",
|
||
description: "Der Naturwissenschaftslehrer Ryland Grace wacht eines Tages auf einem Raumschiff auf - Lichtjahre von zu Hause entfernt und ohne Erinnerung daran, wer er ist oder wie er dorthin gekommen ist.",
|
||
poster: "img/derAustronaut.jpg",
|
||
backdrop: "img/derAustronaut.jpg"
|
||
},
|
||
{
|
||
title: "Der Super Mario Galaxy Film",
|
||
genre: "Animation",
|
||
duration: 98,
|
||
fsk: "6",
|
||
description: "''Der Super Mario Galaxy Film'' ist der neue Animationsfilm, basierend auf der Welt von „Super Mario Bros.“!",
|
||
poster: "img/mariogalaxy.jpg",
|
||
backdrop: "img/mariogalaxy.jpg"
|
||
},
|
||
{
|
||
title: "Hoppers",
|
||
genre: "Animation",
|
||
duration: 105,
|
||
fsk: "6",
|
||
description: "In Disney Pixars ''Hoppers'' hoppt Tierfreundin Mabel mithilfe neuester Technologie in einen Roboterbiber und macht die Tierwelt (un)sicher! ",
|
||
poster: "img/hoppers.jpg",
|
||
backdrop: "img/hoppers.jpg"
|
||
},
|
||
{
|
||
title: "Solo Mio",
|
||
genre: "Lovestory, Komödie",
|
||
duration: 96,
|
||
fsk: "12",
|
||
description: "Nachdem er in Rom am Altar stehen gelassen wurde, beschließt ein Mann, allein in die Flitterwochen zu fahren.",
|
||
poster: "img/solomio.png",
|
||
backdrop: "img/solomio.png"
|
||
},
|
||
{
|
||
title: "The Mandalorian and Grogu",
|
||
genre: "Action, Abenteuer",
|
||
duration: 'tba',
|
||
fsk: "?",
|
||
description: "Während die Neue Republik daran arbeitet, alles zu schützen, wofür die Rebellion gekämpft hat, sichern sie sich die Unterstützung des legendären mandalorianischen Kopfgeldjägers Din Djarin und seines jungen Lehrlings Grogu. ",
|
||
poster: "img/mandalorian.jpeg",
|
||
backdrop: "img/mandalorian.jpeg"
|
||
},
|
||
{
|
||
title: "Glennkill - Ein Schafskrimi",
|
||
genre: "Krimi, Komödie",
|
||
duration: 'tba',
|
||
fsk: "?",
|
||
description: "Schäfer George liest seinen geliebten Schafen jeden Abend Krimis vor und nimmt an, dass sie kein Wort davon verstehen. Doch als ein mysteriöser Vorfall das friedliche Leben auf der Farm durchbricht, wird den Schafen bewusst, dass sie selbst nun die Ermittlungen übernehmen müssen. Also folgen sie der Spur der Beweise und machen menschliche Verdächtige ausfindig.",
|
||
poster: "img/glennkill.jpg",
|
||
backdrop: "img/glennkill.jpg"
|
||
},
|
||
{
|
||
title: "Masters of the Universe",
|
||
genre: "Action, Science-Fiction",
|
||
duration: 'tba',
|
||
fsk: "?",
|
||
description: "Nach 15 Jahren der Trennung führt das Schwert der Macht Prinz Adam zurück nach Eternia und er entdeckt, dass seine Heimat unter der Herrschaft von Skeletor in Trümmern liegt.",
|
||
poster: "img/masteruniverse.jpg",
|
||
backdrop: "img/masteruniverse.jpg"
|
||
},
|
||
{
|
||
title: "Minions and Monsters",
|
||
genre: "Animation, Familie",
|
||
duration: 'tba',
|
||
fsk: "?",
|
||
description: "MINIONS & MONSTER erzählt die abgefahrene, aberwitzige und natürlich absolut wahre Geschichte von den Minions und wie sie Hollywood erobern, Filmstars werden, alles verlieren, Monster auf die Welt loslassen und sich dann heldenhaft daranmachen, den Planeten vor genau dem Chaos zu retten, das sie selbst angerichtet haben. ",
|
||
poster: "img/minionsmonsters.jpg",
|
||
backdrop: "img/minionsmonsters.jpg"
|
||
},
|
||
{
|
||
title: "Spider Man - Brand New Day",
|
||
genre: "Action",
|
||
duration: 'tba',
|
||
fsk: "?",
|
||
description: "Spider-Man: Brand New Day erzählt die Geschichte von Peter Parker, der sich mit den Herausforderungen eines neuen Lebens auseinandersetzt.",
|
||
poster: "img/spidermannewday.jpg",
|
||
backdrop: "img/spidermannewday.jpg"
|
||
},
|
||
{
|
||
title: "Scream VII",
|
||
genre: "Horror",
|
||
duration: 'tba',
|
||
fsk: "18",
|
||
description: "Als in der ruhigen Stadt, in der Sidney Prescott sich ein neues Leben aufgebaut hat, ein neuer Ghostface-Killer auftaucht, werden ihre schlimmsten Befürchtungen wahr, denn ihre Tochter ist sein nächstes Ziel.",
|
||
poster: "img/screamvii.jpg",
|
||
backdrop: "img/screamvii.jpg"
|
||
},
|
||
{
|
||
title: "Blade Runner 2049",
|
||
genre: "Science-Fiction, Action",
|
||
duration: "163",
|
||
fsk: "16",
|
||
description: "30 Jahre nach den Ereignissen des ersten Films fördert ein neuer Blade Runner, der LAPD Polizeibeamte K (Ryan Gosling), ein lange unter Verschluss gehaltenes Geheimnis zu Tage, welches das Potential hat, die noch vorhandenen gesellschaftlichen Strukturen in Chaos zu stürzen. Die Entdeckungen von K führen ihn auf die Suche nach Rick Deckard (Harrison Ford), einem seit 30 Jahren verschwundenen, ehemaligen LAPD Blade Runner.",
|
||
poster: "img/bladerunner2049.jpg",
|
||
backdrop: "img/bladerunner2049.jpg"
|
||
},
|
||
{
|
||
title: "THE FALL GUY",
|
||
genre: "Action, Thriller",
|
||
duration: 126,
|
||
fsk: "16",
|
||
description: "Ein angeschlagener Stuntman, der seine besten Zeiten hinter sich hat, findet sich in einem Film mit dem Star wieder, für den er vor langer Zeit gedoubelt hat und der ihn ersetzt hat. Der Haken an der Sache ist jedoch, dass der Star verschwunden ist.",
|
||
poster: "img/fallguy.jpg",
|
||
backdrop: "img/fallguy.jpg"
|
||
},
|
||
{
|
||
title: "THE MEG",
|
||
genre: "Action, Science-Fiction",
|
||
duration: 113,
|
||
fsk: "12",
|
||
description: "Jonas Taylor ist Tiefseetaucher im geheimen Auftrag der US Navy. Als er mit seiner Crew auf Erkundungstour im Marianengraben unterwegs ist, treffen sie auf einen urzeitlichen, überdimensionierten Hai, einen sogenannten Megalodon. Jonas überlebt die Begegnung als einziger und widmet sich von nun an dem Studium der Paläobiologie. Ein Freund aus der Vergangenheit, Masao Tanaka, bittet Jonas darum mit seiner Hilfe ein U-Boot im Marianengraben zu bergen. Jonas willigt ein, obwohl er noch immer um seine verstorbenen Teammitglieder trauert. Als sich Jonas und Masao dort befinden, sichten sie erneut den Megalodon.",
|
||
poster: "img/meg.jpg",
|
||
backdrop: "img/meg.jpg"
|
||
},
|
||
{
|
||
title: "THE MEG 2: Die Tiefe",
|
||
genre: "Action, Science-Fiction",
|
||
duration: 116,
|
||
fsk: "12",
|
||
description: "Was ist besser als ein Riesenhai? Ganz einfach: viele Riesenhaie! In diesem spannenden Abenteuer tauchen die Zuschauer gemeinsam mit den weltbekannten Action-Ikonen Jason Statham und Wu Jing in unerforschte Gewässer ein. Als Leiter eines Forschungsteams machen sich die beiden Helden auf einen waghalsigen Erkundungstauchgang in die tiefsten Tiefen des Ozeans. Doch ihre Reise wird jäh unterbrochen, als ein skrupelloser Minenkonzern ihre Mission durchkreuzt und sie sich plötzlich in einem Kampf ums Überleben wiederfinden.",
|
||
poster: "img/meg2.jpg",
|
||
backdrop: "img/meg2.jpg"
|
||
},
|
||
{
|
||
title: "Homefront",
|
||
genre: "Action, Thriller",
|
||
duration: 100,
|
||
fsk: "16",
|
||
description: "Ex-Drogencop Phil Broker will mit seiner Tochter Maddy in Louisiana ein neues Leben beginnen. Aber dann gerät Maddy auf dem Schulhof in eine Prügelei mit einem Jungen. Dessen Onkel ist ausgerechnet der Crystal-Meth-Dealer Gator Bodine. Als sich Broker nicht einschüchtern lässt und Bodine Hinweise auf seine wahre Identität entdeckt, zögert er nicht, die Feinde aus Brokers Vergangenheit auf seine Spur zu bringen.",
|
||
poster: "img/homefront.jpg",
|
||
backdrop: "img/homefront.jpg"
|
||
},
|
||
{
|
||
title: "Cash Truck",
|
||
genre: "Action",
|
||
duration: 118,
|
||
fsk: "16",
|
||
description: ""
|
||
},
|
||
{
|
||
title: "Die Gangster Gang",
|
||
genre: "Animation, Komödie",
|
||
duration: 100,
|
||
fsk: "6",
|
||
description: "Mastermind Mr. Wolf, Safeknacker Mr. Snake, Mr. Shark, der Meister der Verwandlung, Mr. Piranha, der Mann fürs Grobe, und die geniale Hackerin Ms. Tarantula sind die „Gangster Gang“, die meistgesuchten Verbrecher von allen. Als die fünf Bösewichte nach einem spektakulären Raub gefasst werden, geloben sie inständig Besserung, um dem Gefängnis zu entgehen, und merken bald, dass Gutes tun gar nicht so schlecht ist. Doch dann bedroht ein neuer Schurke die Stadt ...",
|
||
poster: "img/gangstergang.jpg",
|
||
backdrop: "img/gangstergang.jpg"
|
||
},
|
||
{
|
||
title: "Die Gangster Gang 2",
|
||
genre: "Animation, Komödie",
|
||
duration: 104,
|
||
fsk: "6",
|
||
description: "Unsere Lieblings-Gangster sind zurück: Im brandneuen, actiongeladenen Abenteuer der gefeierten Antihelden von DreamWorks Animation steht die chaotische, nun geläuterte Gangster Gang endlich auf der guten Seite – wirklich, sie versuchen es! ",
|
||
poster: "img/gangstergang2.png",
|
||
backdrop: "img/gangstergang2.png"
|
||
},
|
||
{
|
||
title: "GOAT - Bock auf große Sprünge",
|
||
genre: "Animation",
|
||
duration: 100,
|
||
fsk: "6",
|
||
description: "Will, eine kleine Ziege mit großen Träumen, bekommt die einmalige Chance, bei den Profis mitzumachen und Rarball zu spielen - ein hochintensiver, gemischter Vollkontaktsport, der von den schnellsten und wildesten Tieren der Welt dominiert wird. Wills neue Teamkollegen sind nicht begeistert, eine kleine Ziege in ihrem Team zu haben, aber Will ist entschlossen, den Sport zu revolutionieren und ein für alle Mal zu beweisen, dass \"Smalls can ball!\"",
|
||
poster: "img/goat.jpg",
|
||
backdrop: "img/goat.jpg"
|
||
},
|
||
{
|
||
title: "TOY STORY",
|
||
genre: "Animation",
|
||
duration: 81,
|
||
fsk: "6",
|
||
description: "Als Andys Lieblingspuppe hat Woody im Kinderzimmer das Sagen. Kaum ist der Junge nicht da, erwacht die Cowboy-Figur zum Leben, und mit ihm auch all das andere Spielzeug um ihn herum. Aufgeregt debattiert man über Andys bevorstehenden Geburtstag. Es wird befürchtet, daß ihr Besitzer ein neues Geschenk bevorzugen wird. Und tatsächlich: Der Neuankömmling Buzz Lightyear, ein stolzer Space Ranger, avanciert zu Andys Favoriten. Diese Herabstufung will Woody nicht hinnehmen.",
|
||
poster: "img/toystory1.jpg",
|
||
backdrop: "img/toystory1.jpg"
|
||
},
|
||
{
|
||
title: "TOY STORY 2",
|
||
genre: "Animation",
|
||
duration: 92,
|
||
fsk: "6",
|
||
description: "Als Woody von einem fiesen Sammler entführt wird macht sich die Puppen-Clique auf, ihren Freund zu befreien - aber schon auf die andere Straßenseite zu gelangen, gestaltet sich schwierig, ganz zu schweigen von den lauernden Gefahren im Spielzeugladen gegenüber: Doppelgänger stellen sich Buzz Lightyear in den Weg, durchgeknallte Barbie-Sirenen drohen die edlen Ritter vom rechten Weg abzubringen, und obendrein entkommt Zurg, der böse Imperator, aus seiner Plastikbox",
|
||
poster: "img/toystory2.jpg",
|
||
backdrop: "img/toystory2.jpg"
|
||
},
|
||
{
|
||
title: "TOY STORY 3",
|
||
genre: "Animation",
|
||
duration: 103,
|
||
fsk: "6",
|
||
description: "Der Moment des Abschieds ist gekommen: Andy ist den Kinderschuhen entwachsen und macht sich bereit, aufs College zu gehen. Für sein stets getreues Spielzeug hat er keine Verwendung mehr. Andys Mutter spendet die Spielsachen der Kindertagesstätte Sunnyside. Doch dieses angebliche Paradies entpuppt sich nach zuerst freundlicher Aufnahme durch die alteingesessenen Spielzeuge bald zum Gefängnis für die Freunde. Ein ausgeklügelter Ausbruchsplan wird ausgearbeitet - die Zeit drängt, denn hier geht nicht alles mit rechten Dingen zu.",
|
||
poster: "img/toystory3.jpg",
|
||
backdrop: "img/toystory3.jpg"
|
||
},
|
||
{
|
||
title: "TOY STORY 4 - Alles hört auf kein Kommando",
|
||
genre: "Animation",
|
||
duration: 99,
|
||
fsk: "6",
|
||
description: "Woody wusste immer um seinen Platz im (Spielzeug-)Universum, seine Priorität war es, sich um „sein“ Kind zu kümmern, sei es sein alter Kindheits-Freund Andy oder die süße Bonnie. Aber als Bonnie ein äußerst widerspenstiges neues Spielzeug in ihre Sammlung aufnimmt, hat Woodys ruhiger gewordenes Kinderzimmerleben ein Ende. Denn Forky hat eine schwere Identitätskrise und ist davon überzeugt, kein Spielzeug zu sein. Zusammen mit alten und neuen Freunden erleben Forky und Woody den Roadtrip ihres Lebens und lernen dabei, dass die Welt für ein Spielzeug viel größer ist als jemals gedacht.",
|
||
poster: "img/toystory4.jpg",
|
||
backdrop: "img/toystory4.jpg"
|
||
|
||
},
|
||
{
|
||
title: "TOY STORY 5",
|
||
genre: "Animation",
|
||
duration: 'tba',
|
||
fsk: "6",
|
||
description: "Die Spielzeuge sind zurück und dieses Mal werden die Aufgaben von Buzz Lightyear, Woody, Jessie und dem Rest der Bande herausgefordert, als sie mit Lilypad (Stimme von Greta Lee) konfrontiert werden, einem brandneuen Tablet-Gerät, das mit seinen eigenen störenden Ideen darüber kommt, was das Beste für ihr Kind Bonnie ist. Wird die Spielzeit jemals wieder dieselbe sein?",
|
||
poster: "img/toystory5.png",
|
||
backdrop: "img/toystory5.png"
|
||
},
|
||
{
|
||
title: "Die Monster AG - Monsters Inc.",
|
||
genre: "Animation, Familie",
|
||
duration: 92,
|
||
fsk: "6",
|
||
description: "In der Monster-AG-Fabrik gehen die Bösewichte eifrig ihrer Arbeit nach: Über Schranktüren schleichen sie sich in Kinderzimmer ein und sammeln die Angstschreie ihrer Bewohner, die den Strom für Monstropolis liefern. Ungekrönter Star unter den einfallsreichen \"Schreckeinjagern\" ist Sully. Dem passiert eines Tages ein folgenschweres Missgeschick: Das kleine Mädchen Boo, dem er wie gewohnt einen kräftigen Schock versetzen will, verkrallt sich in sein Fell. Als er dann mit dem Kind in die Fabrik zurückkehrt, bricht das totale Chaos aus...",
|
||
poster: "img/monsterag.png",
|
||
backdrop: "img/monsterag.png"
|
||
},
|
||
{
|
||
title: "Die Monster Uni - Monsters University",
|
||
genre: "Animation, Familie",
|
||
duration: 104,
|
||
fsk: "6",
|
||
description: "Auch Monster müssen lernen, wie man andere wirkungsvoll erschreckt. Genau hierfür gibt es die Monster-Universität, einen Ort an dem aus harmlosen kleinen Monstern die ganz großen Schrecken gemacht werden. Exakt davon träumt Mike schon die ganze Zeit, deshalb schreibt er sich direkt für die Scheckwissenschaften ein. Nun ist er ein Student und lernt viele neue Monster kennen, die wie er den Studiengang schaffen wollen. Doch das ist nicht so einfach wie anfangs erst gedacht, denn neben guten Noten geht es auch um das Ansehen an der Uni. So bricht zwischen Mike und seinem neuen Bekannten Sulley ein wahrer Kampf um die besseren Schrecker aus.",
|
||
poster: "img/monsteruni.jpg",
|
||
backdrop: "img/monsteruni.jpg"
|
||
}
|
||
];
|
||
|
||
const hallRotation = ["IMAX", "Deluxe 1", "Kino 1", "Kino 2"];
|
||
const timePatterns = [
|
||
["13:00", "15:20", "17:40", "20:00", "22:20"],
|
||
["13:00", "14:50", "17:10", "19:30", "21:50"],
|
||
["13:00", "15:10", "17:30", "19:50", "22:10"],
|
||
["13:00", "16:00", "18:20", "20:40"]
|
||
];
|
||
|
||
let movieProgram = [];
|
||
let heroItems = [];
|
||
let heroIndex = 0;
|
||
let heroTimer = null;
|
||
|
||
const weekdayShort = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
|
||
|
||
const hideAllViews = () => {
|
||
Object.values(views).forEach((view) => view?.classList.add("hidden"));
|
||
document.getElementById("about-tech-modal")?.classList.add("hidden");
|
||
document.body.style.overflow = "auto";
|
||
};
|
||
|
||
const showHome = () => {
|
||
hideAllViews();
|
||
views.hero?.classList.remove("hidden");
|
||
views.moviesGrid?.classList.remove("hidden");
|
||
document.getElementById("about-tech-modal")?.classList.add("hidden");
|
||
document.body.style.overflow = "auto";
|
||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||
};
|
||
|
||
const showMovieList = (programIndexToFocus = null) => {
|
||
hideAllViews();
|
||
views.list?.classList.remove("hidden");
|
||
|
||
if (programIndexToFocus === null) {
|
||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||
return;
|
||
}
|
||
|
||
const target = views.list?.querySelector(`[data-program-index="${programIndexToFocus}"]`);
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
target.classList.add("flash-focus");
|
||
setTimeout(() => target.classList.remove("flash-focus"), 1200);
|
||
}
|
||
};
|
||
|
||
const showStaticView = (viewElement) => {
|
||
if (!viewElement) {
|
||
return;
|
||
}
|
||
|
||
hideAllViews();
|
||
viewElement.classList.remove("hidden");
|
||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||
};
|
||
|
||
const showCheckoutStart = () => {
|
||
if (!cart.length) {
|
||
alert("Dein Warenkorb ist leer.");
|
||
return;
|
||
}
|
||
|
||
hideAllViews();
|
||
views.checkout?.classList.remove("hidden");
|
||
checkoutSteps.one?.classList.remove("hidden");
|
||
checkoutSteps.two?.classList.add("hidden");
|
||
checkoutSteps.three?.classList.add("hidden");
|
||
renderCheckout?.();
|
||
window.scrollTo(0, 0);
|
||
};
|
||
|
||
const closeBookingModal = () => {
|
||
ui.bookingModal?.classList.add("hidden");
|
||
};
|
||
|
||
const escapeHtml = (value) => String(value || "")
|
||
.replaceAll("&", "&")
|
||
.replaceAll("<", "<")
|
||
.replaceAll(">", ">")
|
||
.replaceAll('"', """)
|
||
.replaceAll("'", "'");
|
||
|
||
const formatDateShort = (dateObj) => {
|
||
const day = String(dateObj.getDate()).padStart(2, "0");
|
||
const month = String(dateObj.getMonth() + 1).padStart(2, "0");
|
||
return `${day}.${month}.`;
|
||
};
|
||
|
||
const buildDayMeta = (offset) => {
|
||
const date = new Date();
|
||
date.setHours(0, 0, 0, 0);
|
||
date.setDate(date.getDate() + offset);
|
||
|
||
const weekday = weekdayShort[date.getDay()];
|
||
const formattedDate = formatDateShort(date);
|
||
|
||
if (offset === 0) {
|
||
return {
|
||
offset,
|
||
date,
|
||
short: "Heute",
|
||
long: `Heute, ${formattedDate}`
|
||
};
|
||
}
|
||
|
||
if (offset === 1) {
|
||
return {
|
||
offset,
|
||
date,
|
||
short: "Morgen",
|
||
long: `Morgen, ${formattedDate}`
|
||
};
|
||
}
|
||
|
||
return {
|
||
offset,
|
||
date,
|
||
short: weekday,
|
||
long: `${weekday}, ${formattedDate}`
|
||
};
|
||
};
|
||
|
||
const buildScheduleForMovie = (movieIndex) => {
|
||
return Array.from({ length: 7 }, (_, dayOffset) => {
|
||
const dayMeta = buildDayMeta(dayOffset);
|
||
const pattern = timePatterns[(movieIndex + dayOffset) % timePatterns.length];
|
||
const desiredCount = 4 + ((movieIndex + dayOffset) % 2);
|
||
const showCount = Math.min(pattern.length, desiredCount);
|
||
|
||
const showings = pattern.slice(0, showCount).map((time, slotIndex) => {
|
||
const hall = hallRotation[(movieIndex + dayOffset + slotIndex) % hallRotation.length];
|
||
return { time, hall };
|
||
});
|
||
|
||
return {
|
||
...dayMeta,
|
||
showings
|
||
};
|
||
});
|
||
};
|
||
|
||
const buildMovieProgram = () => {
|
||
movieProgram = movieCatalog.map((movie, movieIndex) => ({
|
||
...movie,
|
||
schedule: buildScheduleForMovie(movieIndex)
|
||
}));
|
||
heroItems = movieProgram.slice(0, 5);
|
||
};
|
||
|
||
const setHeroSlide = (index) => {
|
||
if (!heroItems.length || !ui.heroSlider) {
|
||
return;
|
||
}
|
||
|
||
heroIndex = (index + heroItems.length) % heroItems.length;
|
||
|
||
ui.heroSlider.querySelectorAll(".hero-slide").forEach((slide, slideIndex) => {
|
||
slide.classList.toggle("active", slideIndex === heroIndex);
|
||
});
|
||
|
||
ui.heroDots?.querySelectorAll(".hero-dot").forEach((dot, dotIndex) => {
|
||
dot.classList.toggle("active", dotIndex === heroIndex);
|
||
});
|
||
|
||
const activeMovie = heroItems[heroIndex];
|
||
if (ui.heroTitle) {
|
||
ui.heroTitle.textContent = activeMovie.title;
|
||
}
|
||
if (ui.heroText) {
|
||
ui.heroText.textContent = `${activeMovie.genre} • ${activeMovie.duration} Min. • Heute erste Vorstellung um 13:00 Uhr.`;
|
||
}
|
||
};
|
||
|
||
const renderHero = () => {
|
||
if (!ui.heroSlider || !heroItems.length) {
|
||
return;
|
||
}
|
||
|
||
ui.heroSlider.innerHTML = heroItems.map((movie, index) => `
|
||
<div class="hero-slide ${index === 0 ? "active" : ""}" style="background-image: linear-gradient(118deg, rgba(0,0,0,0.34), rgba(0,0,0,0.04)), url('${escapeHtml(movie.backdrop || movie.poster)}');"></div>
|
||
`).join("");
|
||
|
||
if (ui.heroDots) {
|
||
ui.heroDots.innerHTML = heroItems.map((_, index) => `
|
||
<button type="button" class="hero-dot ${index === 0 ? "active" : ""}" data-hero-index="${index}"></button>
|
||
`).join("");
|
||
|
||
ui.heroDots.addEventListener("click", (event) => {
|
||
const dot = event.target.closest(".hero-dot");
|
||
if (!dot) {
|
||
return;
|
||
}
|
||
|
||
const nextIndex = Number(dot.dataset.heroIndex || 0);
|
||
setHeroSlide(nextIndex);
|
||
|
||
if (heroTimer) {
|
||
clearInterval(heroTimer);
|
||
heroTimer = setInterval(() => setHeroSlide(heroIndex + 1), 6500);
|
||
}
|
||
});
|
||
}
|
||
|
||
setHeroSlide(0);
|
||
|
||
if (heroTimer) {
|
||
clearInterval(heroTimer);
|
||
}
|
||
|
||
heroTimer = setInterval(() => {
|
||
setHeroSlide(heroIndex + 1);
|
||
}, 6500);
|
||
};
|
||
|
||
const renderNowRunningRow = () => {
|
||
if (!ui.nowRunningRow) {
|
||
return;
|
||
}
|
||
|
||
ui.nowRunningRow.innerHTML = movieProgram.map((movie, index) => `
|
||
<article class="running-poster">
|
||
<img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
|
||
<div class="running-meta">
|
||
<h4>${escapeHtml(movie.title)}</h4>
|
||
<p>${escapeHtml(movie.genre)}</p>
|
||
<button type="button" class="open-program-btn" data-program-index="${index}">Spielzeiten ansehen</button>
|
||
</div>
|
||
</article>
|
||
`).join("");
|
||
};
|
||
|
||
const renderScheduleRows = (programIndex, dayIndex) => {
|
||
const movie = movieProgram[programIndex];
|
||
if (!movie) {
|
||
return;
|
||
}
|
||
|
||
const day = movie.schedule[dayIndex];
|
||
const body = document.getElementById(`schedule-body-${programIndex}`);
|
||
if (!body || !day) {
|
||
return;
|
||
}
|
||
|
||
body.innerHTML = day.showings.map((showing) => `
|
||
<button class="schedule-row time-chip program-time-row" data-movie="${escapeHtml(movie.title)}" data-hall="${escapeHtml(showing.hall)}" data-time="${escapeHtml(showing.time)}">
|
||
<span>${escapeHtml(day.long)}</span>
|
||
<span class="hall-pill">${escapeHtml(showing.hall)}</span>
|
||
<span class="time-btn">${escapeHtml(showing.time)}</span>
|
||
</button>
|
||
`).join("");
|
||
};
|
||
|
||
const renderMovieProgramList = () => {
|
||
if (!ui.movieProgramList) {
|
||
return;
|
||
}
|
||
|
||
ui.movieProgramList.innerHTML = movieProgram.map((movie, programIndex) => {
|
||
const dayTabs = movie.schedule.map((day, dayIndex) => `
|
||
<button type="button" class="program-day-tab ${dayIndex === 0 ? "active" : ""}" data-program-index="${programIndex}" data-day-index="${dayIndex}">
|
||
<span>${escapeHtml(day.short)}</span>
|
||
<small>${escapeHtml(formatDateShort(day.date))}</small>
|
||
</button>
|
||
`).join("");
|
||
|
||
return `
|
||
<article class="detailed-card program-card reveal-on-scroll" data-program-index="${programIndex}">
|
||
<div class="card-left">
|
||
<img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
|
||
<span class="fsk fsk-${escapeHtml(movie.fsk)}">${escapeHtml(movie.fsk)}</span>
|
||
</div>
|
||
<div class="card-right">
|
||
<div class="card-header">
|
||
<h2>${escapeHtml(movie.title)}</h2>
|
||
<span class="duration">${movie.duration} Min. | ${escapeHtml(movie.genre)} | FSK: ${escapeHtml(movie.fsk)}</span>
|
||
</div>
|
||
<p class="description">${escapeHtml(movie.description)}</p>
|
||
|
||
<div class="program-day-tabs">${dayTabs}</div>
|
||
|
||
<div class="schedule-container program-schedule-shell">
|
||
<div class="schedule-header">
|
||
<span>Tag</span><span>Kinosaal</span><span>Uhrzeit</span>
|
||
</div>
|
||
<div id="schedule-body-${programIndex}" class="program-schedule-body"></div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
`;
|
||
}).join("");
|
||
|
||
movieProgram.forEach((_, programIndex) => {
|
||
renderScheduleRows(programIndex, 0);
|
||
});
|
||
};
|
||
|
||
const initRevealAnimations = () => {
|
||
const revealElements = Array.from(document.querySelectorAll(".reveal-on-scroll"));
|
||
if (!revealElements.length) {
|
||
return;
|
||
}
|
||
|
||
if (!("IntersectionObserver" in window)) {
|
||
revealElements.forEach((element) => element.classList.add("is-visible"));
|
||
return;
|
||
}
|
||
|
||
const observer = new IntersectionObserver((entries, obs) => {
|
||
entries.forEach((entry) => {
|
||
if (!entry.isIntersecting) {
|
||
return;
|
||
}
|
||
|
||
entry.target.classList.add("is-visible");
|
||
obs.unobserve(entry.target);
|
||
});
|
||
}, { threshold: 0.2 });
|
||
|
||
revealElements.forEach((element) => observer.observe(element));
|
||
};
|
||
|
||
const renderMovieExperience = () => {
|
||
buildMovieProgram();
|
||
renderHero();
|
||
renderNowRunningRow();
|
||
renderMovieProgramList();
|
||
initRevealAnimations();
|
||
};
|
||
|
||
const bindNavigation = () => {
|
||
ui.logo?.addEventListener("click", showHome);
|
||
|
||
ui.linkFilme?.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
showMovieList();
|
||
});
|
||
|
||
ui.linkSnacks?.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
showStaticView(views.snacks);
|
||
});
|
||
|
||
ui.linkAbout?.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
showStaticView(views.about);
|
||
});
|
||
|
||
ui.linkCart?.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
hideAllViews();
|
||
views.cart?.classList.remove("hidden");
|
||
renderCart?.();
|
||
});
|
||
|
||
ui.linkAccount?.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
hideAllViews();
|
||
views.account?.classList.remove("hidden");
|
||
|
||
const isUserLoggedIn = typeof currentUser !== "undefined" && currentUser;
|
||
if (isUserLoggedIn && typeof openAccountDashboard === "function") {
|
||
openAccountDashboard();
|
||
}
|
||
});
|
||
|
||
ui.heroBookingBtn?.addEventListener("click", () => {
|
||
showMovieList();
|
||
});
|
||
|
||
ui.checkoutBtn?.addEventListener("click", showCheckoutStart);
|
||
ui.backHomeBtn?.addEventListener("click", showHome);
|
||
};
|
||
|
||
const bindProgramActions = () => {
|
||
views.moviesGrid?.addEventListener("click", (event) => {
|
||
const trigger = event.target.closest(".open-program-btn");
|
||
if (!trigger) {
|
||
return;
|
||
}
|
||
|
||
const programIndex = Number(trigger.dataset.programIndex || 0);
|
||
showMovieList(programIndex);
|
||
});
|
||
|
||
ui.movieProgramList?.addEventListener("click", (event) => {
|
||
const dayButton = event.target.closest(".program-day-tab");
|
||
if (!dayButton) {
|
||
return;
|
||
}
|
||
|
||
const programIndex = Number(dayButton.dataset.programIndex || 0);
|
||
const dayIndex = Number(dayButton.dataset.dayIndex || 0);
|
||
|
||
const tabRow = dayButton.closest(".program-day-tabs");
|
||
tabRow?.querySelectorAll(".program-day-tab").forEach((tab) => tab.classList.remove("active"));
|
||
dayButton.classList.add("active");
|
||
|
||
renderScheduleRows(programIndex, dayIndex);
|
||
});
|
||
};
|
||
|
||
const bindHomeInfoNavigation = () => {
|
||
const openButtons = Array.from(document.querySelectorAll("[data-home-view-open]"));
|
||
const backButtons = Array.from(document.querySelectorAll("[data-go-home]"));
|
||
const aboutOpenButtons = Array.from(document.querySelectorAll("[data-about-modal-open]"));
|
||
const aboutCloseButtons = Array.from(document.querySelectorAll("[data-about-modal-close]"));
|
||
const aboutModal = document.getElementById("about-tech-modal");
|
||
|
||
if (!openButtons.length) {
|
||
return;
|
||
}
|
||
|
||
const targetMap = {
|
||
"halls-view": views.halls,
|
||
"dbox-view": views.dbox,
|
||
"collectors-view": views.collectors
|
||
};
|
||
|
||
openButtons.forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
const targetId = button.getAttribute("data-home-view-open");
|
||
const target = targetId ? targetMap[targetId] : null;
|
||
if (target) {
|
||
showStaticView(target);
|
||
}
|
||
});
|
||
});
|
||
|
||
backButtons.forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
showHome();
|
||
});
|
||
});
|
||
|
||
aboutOpenButtons.forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
const targetId = button.getAttribute("data-about-modal-open");
|
||
if (targetId === "about-tech-modal" && aboutModal) {
|
||
aboutModal.classList.remove("hidden");
|
||
document.body.style.overflow = "hidden";
|
||
}
|
||
});
|
||
});
|
||
|
||
aboutCloseButtons.forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
aboutModal?.classList.add("hidden");
|
||
document.body.style.overflow = "auto";
|
||
});
|
||
});
|
||
|
||
aboutModal?.addEventListener("click", (event) => {
|
||
if (event.target === aboutModal) {
|
||
aboutModal.classList.add("hidden");
|
||
document.body.style.overflow = "auto";
|
||
}
|
||
});
|
||
|
||
document.addEventListener("keydown", (event) => {
|
||
if (event.key === "Escape" && aboutModal && !aboutModal.classList.contains("hidden")) {
|
||
aboutModal.classList.add("hidden");
|
||
document.body.style.overflow = "auto";
|
||
}
|
||
});
|
||
};
|
||
|
||
const initThemeToggle = () => {
|
||
if (!ui.themeToggle) {
|
||
return;
|
||
}
|
||
|
||
const THEME_KEY = "eagleTheme";
|
||
|
||
const applyTheme = (theme) => {
|
||
const isLight = theme === "light";
|
||
document.body.classList.toggle("theme-light", isLight);
|
||
document.body.classList.toggle("theme-dark", !isLight);
|
||
ui.themeToggle.classList.toggle("is-light", isLight);
|
||
localStorage.setItem(THEME_KEY, isLight ? "light" : "dark");
|
||
};
|
||
|
||
const storedTheme = localStorage.getItem(THEME_KEY);
|
||
applyTheme(storedTheme === "light" ? "light" : "dark");
|
||
|
||
ui.themeToggle.addEventListener("click", () => {
|
||
const nextTheme = document.body.classList.contains("theme-light") ? "dark" : "light";
|
||
applyTheme(nextTheme);
|
||
});
|
||
};
|
||
|
||
const bindAccountActions = () => {
|
||
const registerModal = document.getElementById("register-modal");
|
||
const forgotModal = document.getElementById("forgot-modal");
|
||
const forgotEmailInput = document.getElementById("forgot-email");
|
||
const resetMessage = document.getElementById("reset-message");
|
||
const loginError = document.getElementById("login-error");
|
||
const loginEmailInput = document.getElementById("login-email");
|
||
const loginPasswordInput = document.getElementById("login-password");
|
||
|
||
const openModal = (modal) => modal?.classList.remove("hidden");
|
||
const closeModal = (modal) => modal?.classList.add("hidden");
|
||
const triggerLogin = () => {
|
||
loginError?.classList.add("hidden");
|
||
if (typeof loginUser === "function") {
|
||
loginUser();
|
||
}
|
||
};
|
||
|
||
document.getElementById("btn-open-register")?.addEventListener("click", () => {
|
||
openModal(registerModal);
|
||
});
|
||
|
||
document.getElementById("btn-close-register")?.addEventListener("click", () => {
|
||
closeModal(registerModal);
|
||
});
|
||
|
||
document.getElementById("btn-register-save")?.addEventListener("click", () => {
|
||
if (typeof registerUser === "function") {
|
||
registerUser();
|
||
}
|
||
});
|
||
|
||
document.getElementById("btn-login-account")?.addEventListener("click", triggerLogin);
|
||
|
||
[loginEmailInput, loginPasswordInput].forEach((input) => {
|
||
input?.addEventListener("keydown", (event) => {
|
||
if (event.key !== "Enter") {
|
||
return;
|
||
}
|
||
|
||
event.preventDefault();
|
||
triggerLogin();
|
||
});
|
||
});
|
||
|
||
document.getElementById("btn-forgot-password")?.addEventListener("click", () => {
|
||
if (forgotEmailInput) {
|
||
forgotEmailInput.value = "";
|
||
}
|
||
resetMessage?.classList.add("hidden");
|
||
openModal(forgotModal);
|
||
});
|
||
|
||
document.getElementById("btn-close-forgot")?.addEventListener("click", () => {
|
||
closeModal(forgotModal);
|
||
});
|
||
|
||
document.getElementById("btn-send-reset")?.addEventListener("click", () => {
|
||
const email = forgotEmailInput?.value.trim() || "";
|
||
if (!email || !email.includes("@")) {
|
||
alert("Bitte gib eine gueltige E-Mail-Adresse ein.");
|
||
return;
|
||
}
|
||
|
||
if (resetMessage) {
|
||
resetMessage.textContent = "Wenn ein Konto existiert, wurde ein Reset-Code simuliert versendet.";
|
||
resetMessage.classList.remove("hidden");
|
||
}
|
||
});
|
||
|
||
registerModal?.addEventListener("click", (event) => {
|
||
if (event.target === registerModal) {
|
||
closeModal(registerModal);
|
||
}
|
||
});
|
||
|
||
forgotModal?.addEventListener("click", (event) => {
|
||
if (event.target === forgotModal) {
|
||
closeModal(forgotModal);
|
||
}
|
||
});
|
||
|
||
document.addEventListener("keydown", (event) => {
|
||
if (event.key === "Escape") {
|
||
closeModal(registerModal);
|
||
closeModal(forgotModal);
|
||
}
|
||
});
|
||
};
|
||
|
||
const bindGlobalDocumentClicks = () => {
|
||
document.addEventListener("click", (event) => {
|
||
if (event.target.classList.contains("opt-btn")) {
|
||
const optionGroup = event.target.parentElement;
|
||
optionGroup?.querySelectorAll(".opt-btn").forEach((button) => button.classList.remove("active"));
|
||
event.target.classList.add("active");
|
||
}
|
||
|
||
const deleteBtn = event.target.closest(".btn-delete-item");
|
||
if (deleteBtn?.dataset.key) {
|
||
const row = deleteBtn.closest(".cart-item-row");
|
||
if (row) {
|
||
row.classList.add("slide-out-left");
|
||
row.querySelectorAll("button").forEach((button) => {
|
||
button.disabled = true;
|
||
});
|
||
|
||
setTimeout(() => {
|
||
removeFromCartByKey(deleteBtn.dataset.key);
|
||
}, 380);
|
||
} else {
|
||
removeFromCartByKey(deleteBtn.dataset.key);
|
||
}
|
||
return;
|
||
}
|
||
|
||
const chip = event.target.closest(".time-chip");
|
||
if (chip) {
|
||
const movieFromData = chip.getAttribute("data-movie");
|
||
const movieCard = chip.closest(".movie-card, .detailed-card, .program-card");
|
||
const movie = movieFromData || movieCard?.querySelector("h2, h3")?.innerText || "Film";
|
||
const hall = chip.getAttribute("data-hall");
|
||
const time = chip.getAttribute("data-time");
|
||
|
||
if (hall && time && typeof openBooking === "function") {
|
||
openBooking(movie, hall, time);
|
||
}
|
||
}
|
||
|
||
const qtyBtn = event.target.closest(".btn-qty");
|
||
if (!qtyBtn) {
|
||
return;
|
||
}
|
||
|
||
const action = qtyBtn.dataset.action;
|
||
const key = qtyBtn.dataset.key;
|
||
if (!action || !key) {
|
||
return;
|
||
}
|
||
|
||
const relatedItem = cart.find((item) => {
|
||
const infoText = item.category === "movie"
|
||
? `Sitz: ${item.seatId} (${item.hall})`
|
||
: item.time;
|
||
return `${item.title}-${item.hall}-${infoText}` === key;
|
||
});
|
||
|
||
if (!relatedItem || relatedItem.category === "movie") {
|
||
return;
|
||
}
|
||
|
||
if (action === "plus") {
|
||
cart.push({ ...relatedItem, id: Date.now() + Math.random() });
|
||
} else {
|
||
const keyList = cart.map((item) => {
|
||
const infoText = item.category === "movie"
|
||
? `Sitz: ${item.seatId} (${item.hall})`
|
||
: item.time;
|
||
return `${item.title}-${item.hall}-${infoText}`;
|
||
});
|
||
const lastMatch = keyList.lastIndexOf(key);
|
||
|
||
if (lastMatch !== -1) {
|
||
cart.splice(lastMatch, 1);
|
||
}
|
||
}
|
||
|
||
saveCart?.();
|
||
renderCart?.();
|
||
});
|
||
};
|
||
|
||
const bindSnacksActions = () => {
|
||
ui.snacksView?.addEventListener("click", (event) => {
|
||
const sizeChip = event.target.closest(".size-chip");
|
||
if (!sizeChip) {
|
||
return;
|
||
}
|
||
|
||
const snackCard = sizeChip.closest(".snack-card");
|
||
if (!snackCard) {
|
||
return;
|
||
}
|
||
|
||
const snackTitle = snackCard.querySelector("h3, h2")?.innerText || "Snack";
|
||
const snackImg = snackCard.querySelector("img")?.src || "";
|
||
const priceSpan = sizeChip.querySelector("span");
|
||
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");
|
||
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
|
||
});
|
||
|
||
saveCart?.();
|
||
|
||
const originalHtml = sizeChip.innerHTML;
|
||
sizeChip.innerHTML = "Hinzugefügt!";
|
||
setTimeout(() => {
|
||
sizeChip.innerHTML = originalHtml;
|
||
}, 800);
|
||
});
|
||
|
||
document.querySelectorAll(".tab-btn").forEach((button) => {
|
||
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"));
|
||
document.getElementById(button.dataset.target)?.classList.remove("hidden");
|
||
});
|
||
});
|
||
};
|
||
|
||
const bindOverlayActions = () => {
|
||
ui.btnYesSnacks?.addEventListener("click", () => {
|
||
ui.snackOverlay?.classList.add("hidden");
|
||
hideAllViews();
|
||
views.snacks?.classList.remove("hidden");
|
||
document.body.style.overflow = "auto";
|
||
});
|
||
|
||
ui.btnNoCart?.addEventListener("click", () => {
|
||
ui.snackOverlay?.classList.add("hidden");
|
||
hideAllViews();
|
||
views.cart?.classList.remove("hidden");
|
||
renderCart?.();
|
||
document.body.style.overflow = "auto";
|
||
});
|
||
};
|
||
|
||
const bindBookingModalClose = () => {
|
||
ui.closeBookingModalBtn?.addEventListener("click", closeBookingModal);
|
||
|
||
ui.bookingModal?.addEventListener("click", (event) => {
|
||
if (event.target === ui.bookingModal) {
|
||
closeBookingModal();
|
||
}
|
||
});
|
||
};
|
||
|
||
window.removeFromCartByKey = function removeFromCartByKey(key) {
|
||
cart = cart.filter((item) => {
|
||
const infoText = item.category === "movie"
|
||
? `Sitz: ${item.seatId} (${item.hall})`
|
||
: item.time;
|
||
return `${item.title}-${item.hall}-${infoText}` !== key;
|
||
});
|
||
|
||
saveCart?.();
|
||
renderCart?.();
|
||
};
|
||
|
||
renderMovieExperience();
|
||
initThemeToggle();
|
||
bindNavigation();
|
||
bindProgramActions();
|
||
bindHomeInfoNavigation();
|
||
bindAccountActions();
|
||
bindGlobalDocumentClicks();
|
||
bindSnacksActions();
|
||
bindOverlayActions();
|
||
bindBookingModalClose();
|
||
|
||
updateCartBadge?.();
|
||
renderCheckout?.();
|
||
});
|