First commit of group-ironmen-master directory.

group-ironmen-master/site/src/collection-log/collection-log.js

@@ -0,0 +1,70 @@
+import { BaseElement } from "../base-element/base-element";
+import { loadingScreenManager } from "../loading-screen/loading-screen-manager";
+import { collectionLog } from "../data/collection-log";
+
+export class CollectionLog extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  html() {
+    return `{{collection-log.html}}`;
+  }
+
+  async connectedCallback() {
+    super.connectedCallback();
+    loadingScreenManager.showLoadingScreen();
+    this.playerName = this.getAttribute("player-name");
+    await this.init();
+    this.totalUniqueItems = collectionLog.totalUniqueItems;
+    this.unlockedUniqueItems = collectionLog.totalUnlockedItems(this.playerName);
+    this.render();
+
+    this.tabContent = this.querySelector(".collection-log__tab-container");
+    this.tabButtons = this.querySelector(".collection-log__tab-buttons");
+    this.background = this.querySelector(".dialog__visible");
+    this.showTab(0);
+
+    this.eventListener(this.tabButtons, "click", this.handleTabClick.bind(this));
+    this.eventListener(this.background, "click", this.closeIfBackgroundClick.bind(this));
+    this.eventListener(this.querySelector(".dialog__close"), "click", this.close.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    loadingScreenManager.hideLoadingScreen();
+  }
+
+  closeIfBackgroundClick(evt) {
+    if (evt.target === this.background) {
+      this.close();
+    }
+  }
+
+  close() {
+    this.remove();
+  }
+
+  async init() {
+    await Promise.all([collectionLog.initLogInfo(), collectionLog.load()]);
+    collectionLog.loadPlayer(this.playerName);
+    loadingScreenManager.hideLoadingScreen();
+  }
+
+  handleTabClick(event) {
+    const tabId = event?.target?.getAttribute("tab-id");
+    if (tabId) {
+      this.showTab(tabId);
+    }
+  }
+
+  showTab(tabId) {
+    this.tabButtons.querySelectorAll("button[tab-id]").forEach((button) => {
+      if (button.getAttribute("tab-id") === `${tabId}`) button.classList.add("collection-log__tab-button-active");
+      else button.classList.remove("collection-log__tab-button-active");
+    });
+    this.tabContent.innerHTML = `<collection-log-tab player-name="${this.playerName}" tab-id="${tabId}"></collection-log-tab>`;
+  }
+}
+
+customElements.define("collection-log", CollectionLog);