First commit of group-ironmen-master directory.

group-ironmen-master/site/src/items-page/items-page.css

@@ -0,0 +1,70 @@
+.items-page__list {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-gap: 10px 10px;
+  margin-top: 16px;
+  align-items: flex-start;
+}
+
+@media only screen and (max-width: 2200px) {
+  .items-page__list {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+@media only screen and (max-width: 1900px) {
+  .items-page__list {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+@media only screen and (max-width: 1500px) {
+  .items-page__list {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media only screen and (max-width: 1300px) {
+  .items-page__list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.items-page__head {
+  display: flex;
+  align-items: flex-end;
+  column-gap: 8px;
+  row-gap: 6px;
+}
+
+@media only screen and (max-width: 850px) {
+  .items-page__list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .items-page__head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .items-page__head search-element {
+    margin-right: 0;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .items-page__list {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.items-page__utility {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+}
+
+.items-page__info-box input {
+  margin: 0 0.5em 0 0;
+}

group-ironmen-master/site/src/items-page/items-page.html

@@ -0,0 +1,31 @@
+<div class="items-page__head">
+  <search-element class="items-page__search" placeholder="Search" auto-focus></search-element>
+  <inventory-pager></inventory-pager>
+</div>
+<div class="items-page__utility">
+  <div class="men-control-container rsborder-tiny rsbackground rsbackground-hover">
+    <select class="items-page__sort">
+      <option value="totalquantity">Sort: Total Quantity</option>
+      <option value="highalch">Sort: High Alch</option>
+      <option value="geprice">Sort: GE Price</option>
+      <option value="alphabetical">Sort: Alphabetical</option>
+    </select>
+  </div>
+  <div class="men-control-container rsborder-tiny rsbackground rsbackground-hover">
+    <select class="items-page__player-filter"></select>
+  </div>
+  <div class="men-control-container rsborder-tiny rsbackground rsbackground-hover">
+    <input type="checkbox" id="items-page__individual-items" />
+    <label for="items-page__individual-items">Individual item price</label>
+  </div>
+  <span class="men-control-container rsborder-tiny rsbackground rsbackground-hover">
+    <span class="items-page__item-count">0</span>&nbsp;<span>items</span>
+  </span>
+  <span class="men-control-container rsborder-tiny rsbackground rsbackground-hover">
+    HA:&nbsp;<span class="items-page__total-ha-price">0</span><span>gp</span>
+  </span>
+  <span class="men-control-container rsborder-tiny rsbackground rsbackground-hover">
+    GE:&nbsp;<span class="items-page__total-ge-price">0</span><span>gp</span>
+  </span>
+</div>
+<section class="items-page__list"></section>

group-ironmen-master/site/src/items-page/items-page.js

@@ -0,0 +1,37 @@
+import { BaseElement } from "../base-element/base-element";
+
+export class ItemsPage extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  html() {
+    return `{{items-page.html}}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.render();
+
+    this.subscribe("members-updated", this.handleUpdatedMembers.bind(this));
+  }
+
+  handleUpdatedMembers(members) {
+    const playerFilter = this.querySelector(".items-page__player-filter");
+    const selected = playerFilter.value;
+
+    let playerOptions = `<option value="@ALL">All Players</option>`;
+    for (const member of members) {
+      playerOptions += `<option value="${member.name}" ${member.name === selected ? "selected" : ""}>${
+        member.name
+      }</option>`;
+    }
+
+    playerFilter.innerHTML = playerOptions;
+
+    if (playerFilter.value !== selected) {
+      playerFilter.dispatchEvent(new CustomEvent("change"));
+    }
+  }
+}
+customElements.define("items-page", ItemsPage);