Нужна помощь с архитектурой мини-проекта

Question

Пишем с корешем мини-проект для курсов и перед нами возникло непреодолимое препятствие..

В 2ух словах о проекте:

Нужно реализовать сайт кинотеатра(одностраничник). Все должно быть сделано на классах. Никаких библиотек. В качестве бэка можно юзать mockAPI.

А теперь к сути. Так как наше приложение разбито на классы, у нас присутствует что-то вроде чейнинга. В экземпляре одного класса вызывается экземпляр другого(который не сохраняется никуда). Нам необходимо, чтоб при нажатии на кнопку сеанса, появлялось модальное окно, в котором бы отрисовывалась схема зала. Схема отрисовывается, но возникает проблема.. Экземпляр новосозданного класса нигде не сохраняется и к нему мы не можем получить доступ, после закрытия модального окна, также как и к содержимому внутри него.. Нам посоветовали использовать шаблон проектирования singleton, но нам не нужен один ЕДИНСТВЕННЫЙ экземпляр класса, ведь они создаются динамически(как только пользователь нажмет на кнопку сеанса).

Вкратце про логику:

У нас есть класс Session, в котором хранятся обработчики на кнопочки сеансов и при нажатии на одну из них мы создаем новый экземпляр класса Hall, а в нем отправляется запрос на mockAPI и оттуда стягивается инфа про зал(кол-во рядов и сидений) и соответственно отрисовывается

Скрин модального окна:

Как же сделать так, чтобы при нажатии на кнопку сеанса создавался новый экземпляр класса Hall и мы могли сохранять к нему доступ, также как и к другим?

Скрин главной страницы:

class Session {
    constructor() {
        this.createSession();
        this.listener();
    }

    createSession() {
        const posterWrap = document.querySelectorAll('.poster__wrapper');

        for (let i = 0; i < posterWrap.length; i++) {
            const posterSession = document.createElement('div');
            posterSession.className = 'poster__session';

            for (let j = 0; j < filmsTime.length; j++) {
                const posterTime = document.createElement('div');
                posterTime.className = 'poster__time';
                posterTime.textContent = `${filmsTime[j]}`;
                posterTime.setAttribute('data-film', `${i + 1}`);
                posterTime.setAttribute('data-session', `${j + 1}`);
                posterSession.append(posterTime);

            }

            posterWrap[i].append(posterSession);
        }
    }

    listener() {
        document.addEventListener('click', (e) => {
            const overlay = document.querySelector('.overlay');
            const posterTime = e.target;

            if (posterTime.className === 'poster__time') {
                overlay.hidden = false;
                new Hall(posterTime.dataset.film);
            }

            return;
        })
    }

}

class Hall {
    static counter = 0;
    static sum = 0;

    constructor(id) {
        this.id = id;
        this.createHallScheme();
        this.listener();
    }

    async getHall() {
        const response = await fetch(`https://5f5360f7e5de110016d5184d.mockapi.io/cinema/halls/${this.id}`);
        const data = await response.json();
        return data;
    }

    async createHallScheme() {

        const hallPlace = document.querySelector('.hall__place');
        hallPlace.innerHTML = '';

        const sheme = await this.getHall();
        const width = 30 * sheme.numberOfSeats + (sheme.numberOfSeats - 1) * (180 / (sheme.numberOfSeats - 1));
        hallPlace.style.width = `${width}px`;
        for (let i = 0; i < sheme.numberOfRows; i++) {
            const row = document.createElement('div');
            row.className = 'hall__row';
            for (let j = 0; j < sheme.numberOfSeats; j++) {
                const seats = document.createElement('div');
                seats.className = 'hall__seats';
                seats.textContent = j + 1;
                seats.setAttribute('data-row', i);
                seats.setAttribute('data-seat', j);
                row.append(seats);
            }
            hallPlace.append(row);
        }
    }

    listener() {
        const overlay = document.querySelector('.overlay');
        const closeButton = document.querySelector('.modal__button');
        const tickets = document.getElementById('tickets');
        const headerPrice = document.querySelector('.header #price');
        const price = document.getElementById('price');
        const buyButton = document.querySelector('.modal__buy');
        const hallPlace = document.querySelector('.hall__place');

        closeButton.addEventListener('click', () => {
            overlay.hidden = true;
        })

        buyButton.addEventListener('click', () => {
            overlay.hidden = true;
            headerPrice.textContent = `${this.sum} $`;
        })
    }
}

БЛОГ НА HUSL

Нужна помощь с архитектурой мини-проекта

Ответы (0 шт):