First commit of group-ironmen-master directory.

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

@@ -0,0 +1,90 @@
+collection-log {
+  display: block;
+  color: var(--orange);
+}
+
+collection-log h2 {
+  font-size: 20px;
+  text-shadow: 1.3px 1.3px var(--black);
+}
+
+.collection-log__container {
+  height: 95%;
+  padding: 0;
+  cursor: auto;
+}
+
+.collection-log__header {
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  align-items: center;
+  text-align: center;
+  padding: 8px;
+}
+
+.collection-log__close {
+  justify-self: end;
+}
+
+.collection-log__search {
+  justify-self: start;
+  min-width: unset;
+}
+
+.collection-log__title-border {
+  background: url("/ui/173-0.png") repeat;
+  width: 100%;
+  height: 6px;
+}
+
+collection-log .collection-log__title {
+}
+
+.collection-log__main {
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.collection-log__tab-buttons {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 4px;
+}
+
+.collection-log__tab-buttons button {
+  font-family: "rssmall", ui-sans-serif, Arial, sans-serif;
+  text-shadow: 1.3px 1.3px var(--black);
+  color: var(--orange);
+  font-size: 18px;
+  background: #28251e;
+  border: 1px solid hsl(40deg 15.79% 29.8%);
+  border-bottom: none;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  padding: 4px;
+}
+
+.collection-log__tab-buttons button.collection-log__tab-button-active {
+  background: #3e3529;
+}
+
+.collection-log__tab-container {
+  border: 1px solid hsl(40deg 15.79% 29.8%);
+  height: 100%;
+  overflow: hidden;
+}
+
+.collection-log__complete {
+  color: var(--green);
+}
+
+.collection-log__in-progress {
+  color: var(--yellow);
+}
+
+.collection-log__not-started {
+  color: var(--red);
+}

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

@@ -0,0 +1,25 @@
+<div class="collection-log dialog dialog__visible">
+  <div class="collection-log__container dialog__container metal-border rsbackground">
+    <div class="collection-log__header">
+      <div></div>
+      <!-- <search-element class="collection-log__search input-small" placeholder="Search"></search-element> -->
+      <h2 class="collection-log__title">
+        ${this.playerName}'s Collection Log - ${this.unlockedUniqueItems}/${this.totalUniqueItems}
+      </h2>
+      <button class="collection-log__close dialog__close">
+        <img src="/ui/1731-0.png" alt="Close dialog" title="Close dialog" />
+      </button>
+    </div>
+
+    <div class="collection-log__title-border"></div>
+
+    <div class="collection-log__main">
+      <div class="collection-log__tab-buttons">
+        ${collectionLog.info.map((tab) => `<button tab-id="${tab.tabId}">${collectionLog.tabName(tab.tabId)}</button>`).join('')}
+      </div>
+
+      <div class="collection-log__tab-container">
+      </div>
+    </div>
+  </div>
+</div>

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);