EventMapper/assets/scripts/KaplayMap/ui.js

export class UIManager {
  ui;
  map;
  floormanager;
  eventmanager;

  uiElements = {};
  floorsEmpty = true;
  eventsEmpty = true;

  constructor(ui, map) {
    this.ui = ui;
    this.map = map;

    // Zoom
    this.uiElements.zoomButtons = this.ui.querySelector("#zoom");
    this.uiElements.zoomIn =
      this.uiElements.zoomButtons.querySelector("#zoom-in");
    this.uiElements.zoomOut =
      this.uiElements.zoomButtons.querySelector("#zoom-out");

    // Floors
    this.uiElements.floors = this.ui.querySelector("#floors");
    this.uiElements.floorButtons =
      this.uiElements.floors.querySelector("#floor-buttons");

    // Events
    this.uiElements.eventsContainer =
      this.ui.querySelector("#events-container");
    this.uiElements.events =
      this.uiElements.eventsContainer.querySelector("#events");
    this.uiElements.eventList =
      this.uiElements.events.querySelector("#event-list");
    this.uiElements.eventsMinimized =
      this.uiElements.eventsContainer.querySelector("#events-minimized");

    // Loading
    this.uiElements.loading = this.ui.querySelector("#loading");

    // Zoom buttons
    this.__initZoom();

    this.__initEvents();
  }

  __initZoom() {
    this.uiElements.zoomIn.addEventListener("click", () => {
      this.map.zoomLevel += 1;
    });
    this.uiElements.zoomOut.addEventListener("click", () => {
      this.map.zoomLevel -= 1;
    });
    this.map.kp.onUpdate(() => {
      if (this.map.zoomLevelLimit > 0) {
        this.uiElements.zoomIn.disabled = true;
        this.uiElements.zoomOut.disabled = false;
      } else if (this.map.zoomLevelLimit < 0) {
        this.uiElements.zoomIn.disabled = false;
        this.uiElements.zoomOut.disabled = true;
      } else {
        this.uiElements.zoomIn.disabled = false;
        this.uiElements.zoomOut.disabled = false;
      }
    });
  }

  __initEvents() {
    const minimizeButton = this.uiElements.events.querySelector(
      "#footer #footer-buttons #minimize"
    );
    minimizeButton.addEventListener("click", () => {
      this.uiElements.eventsContainer.classList.add("minimized");
    });
    const maximizeButton =
      this.uiElements.eventsMinimized.querySelector("#maximize");
    maximizeButton.addEventListener("click", () => {
      this.uiElements.eventsContainer.classList.remove("minimized");
    });
  }

  __updateEvents() {
    // Remove all children
    this.uiElements.eventList.replaceChildren();

    console.log(this.eventmanager.events);
    // Put them back
    this.eventmanager.events.forEach((event, id) => {
      const eventListContainer = document.createElement("details");
      eventListContainer.classList.add("event-list-container");
      eventListContainer.id = "event-" + id;

      const eventListContainerSummary = document.createElement("summary");
      eventListContainerSummary.textContent = event.name;

      eventListContainer.appendChild(eventListContainerSummary);

      const eventListContainerDescription = document.createElement("p");
      eventListContainerDescription.textContent = event.description;

      eventListContainer.appendChild(eventListContainerDescription);

      this.uiElements.eventList.appendChild(eventListContainer);
    });

    if (this.eventmanager.events.size < 1) {
      this.uiElements.eventList.classList.add("empty");
      this.eventsEmpty = true;
    } else {
      this.uiElements.eventList.classList.remove("empty");
      this.eventsEmpty = false;
    }
  }

  setLoading(state) {
    if (state) {
      this.ui.classList.add("loading");
    } else {
      this.ui.classList.remove("loading");
    }
  }

  __updateFloorsHard() {
    // Remove all children
    this.uiElements.floorButtons.replaceChildren();

    // Put them back
    this.floormanager.floors.forEach(({ name }, id) => {
      const floorButton = document.createElement("button");
      floorButton.textContent = name;
      floorButton.classList.add("floor-button");
      floorButton.id = "floor-" + id;
      if (id === this.floormanager.currentFloor)
        floorButton.classList.add("selected");
      floorButton.addEventListener("click", () =>
        this.floormanager.changeFloor(id)
      );

      this.uiElements.floorButtons.appendChild(floorButton);
    });

    if (this.floormanager.floors.size < 1) {
      this.uiElements.floors.classList.add("empty");
      this.floorsEmpty = true;
    } else {
      this.uiElements.floors.classList.remove("empty");
      this.floorsEmpty = false;
    }
  }

  __updateFloorsSoft() {
    this.floormanager.floors.forEach(({ name }, id) => {
      const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
      if (id === this.floormanager.currentFloor)
        child.classList.add("selected");
      else child.classList.remove("selected");
    });
  }
}