First commit of group-ironmen-master directory.

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

@@ -0,0 +1,50 @@
+collection-log-tab {
+  display: grid;
+  grid-template-columns: 2fr 4fr;
+  overflow: hidden;
+  height: 100%;
+}
+
+.collection-log__tab-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  padding: 2px;
+  min-width: 150px;
+  border-right: 1px solid hsl(40deg 15.79% 29.8%);
+  box-sizing: border-box;
+}
+
+.collection-log__tab-list button {
+  font-size: 18px;
+  color: var(--orange);
+  font-family: "rssmall", ui-sans-serif, Arial, sans-serif;
+  text-shadow: 1.3px 1.3px var(--black);
+  text-align: left;
+  padding: 2px 0;
+}
+
+.collection-log__tab-list button:nth-child(odd) {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.collection-log__tab-list button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.collection-log__tab-list button > * {
+  pointer-events: none;
+}
+
+.collection-log__tab-list button.collection-log__page-active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.collection-log__tab-list button.collection-log__complete {
+  color: var(--green);
+}
+
+.collection-log__page-container {
+  overflow: hidden;
+}

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

@@ -0,0 +1,7 @@
+<div class="collection-log__tab-list">
+  ${this.pages.map((page) => `
+  <button class="${collectionLog.isLogComplete(this.playerName, page.name) ? "collection-log__complete" : ""}" page-name="${page.name}">
+    ${page.name} <span class="${collectionLog.completionStateClass(this.playerName, page.name)}">${collectionLog.completionCountForPage(this.playerName, page.name) || 0}/${collectionLog.pageSize(page.name)}</span>
+  </button>`).join('')}
+</div>
+<div class="collection-log__page-container"></div>

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

@@ -0,0 +1,46 @@
+import { BaseElement } from "../base-element/base-element";
+import { collectionLog } from "../data/collection-log";
+
+export class CollectionLogTab extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  html() {
+    return `{{collection-log-tab.html}}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.playerName = this.getAttribute("player-name");
+    this.tabId = parseInt(this.getAttribute("tab-id"));
+    this.pages = collectionLog.info[this.tabId].pages;
+    this.render();
+
+    this.pageContainer = this.querySelector(".collection-log__page-container");
+    this.tabList = this.querySelector(".collection-log__tab-list");
+    this.showPage(this.pages[0].name);
+    this.eventListener(this.tabList, "click", this.handlePageClick.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  handlePageClick(event) {
+    const pageName = event.target.getAttribute("page-name");
+    if (pageName) {
+      this.showPage(pageName);
+    }
+  }
+
+  showPage(pageName) {
+    this.tabList.querySelectorAll("button[page-name]").forEach((button) => {
+      if (button.getAttribute("page-name") === `${pageName}`) button.classList.add("collection-log__page-active");
+      else button.classList.remove("collection-log__page-active");
+    });
+    this.pageContainer.innerHTML = `<collection-log-page player-name="${this.playerName}" page-name="${pageName}" tab-id="${this.tabId}"></collection-log-page>`;
+  }
+}
+
+customElements.define("collection-log-tab", CollectionLogTab);