First commit of group-ironmen-master directory.

group-ironmen-master/site/src/inventory-item/inventory-item.css

@@ -0,0 +1,71 @@
+inventory-item {
+  display: flex;
+  box-sizing: border-box;
+  overflow: hidden;
+  flex-direction: column;
+  position: relative;
+  transform: translate3d(0, 0, 1px);
+  color: var(--primary-text);
+  min-height: 250px;
+
+  visibility: hidden;
+}
+
+inventory-item.rendered {
+  min-height: unset;
+  visibility: visible;
+}
+
+.inventory-item__top {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  align-items: center;
+  transform: translateZ(1px);
+  padding: 8px;
+
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.inventory-item__details {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-gap: 0 0.5em;
+  word-break: keep-all;
+  white-space: nowrap;
+}
+
+.inventory-item__picture {
+  width: 63px;
+  min-height: 56px;
+  min-width: 63px;
+  border: none;
+  image-rendering: optimizequality;
+}
+
+.inventory-item__bottom {
+  display: grid;
+  grid-template-columns: 1fr 1fr 2fr;
+  align-items: center;
+  white-space: nowrap;
+  grid-gap: 0 8px;
+  padding: 8px;
+}
+
+.inventory-item__quantity-bar {
+  height: 8px;
+  width: 100%;
+  transform-origin: left;
+}
+
+.inventory-item__picture-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 45px;
+  height: 45px;
+  min-width: 50px;
+}
+
+.inventory-item__name {
+  font-size: 20px;
+}

group-ironmen-master/site/src/inventory-item/inventory-item.html

@@ -0,0 +1,18 @@
+<div class="inventory-item__top rsborder-tiny">
+  <div class="inventory-item__top-right">
+    <div class="inventory-item__name"><a class="rstext" href="${item.wikiLink}" target="_blank">${item.name}</a></div>
+    <div class="inventory-item__details">
+      <span>Quantity</span>
+      <span>${this.quantity.toLocaleString()}</span>
+      <span>High Alch</span>
+      <span>${this.highAlch}</span>
+      <span>GE Price</span>
+      <span>${this.gePrice}</span>
+    </div>
+  </div>
+
+  <div class="inventory-item__picture-container">
+    <img class="inventory-item__picture" src="${item.imageUrl}" width="63" height="56"/>
+  </div>
+</div>
+<div class="inventory-item__bottom">${playerHtml}</div>

group-ironmen-master/site/src/inventory-item/inventory-item.js

@@ -0,0 +1,107 @@
+import { BaseElement } from "../base-element/base-element";
+
+export class InventoryItem extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    const itemId = this.getAttribute("item-id");
+    this.showIndividualItemPrices = this.hasAttribute("individual-prices");
+    this.playerFilter = this.getAttribute("player-filter");
+
+    const top = this.offsetTop;
+    const bottomOfPage = document.body.clientHeight;
+    if (top < bottomOfPage) {
+      this.subscribe(`item-update:${itemId}`, this.handleUpdatedItem.bind(this));
+    } else {
+      this.intersectionObserver = new IntersectionObserver((entries) => {
+        for (const x of entries) {
+          if (x.isIntersecting && x.target === this) {
+            this.intersectionObserver.disconnect();
+            this.subscribe(`item-update:${itemId}`, this.handleUpdatedItem.bind(this));
+            return;
+          }
+        }
+      }, {});
+      this.intersectionObserver.observe(this);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
+  }
+
+  /* eslint-disable no-unused-vars */
+  html() {
+    const item = this.item;
+    let playerHtml = "";
+    const totalQuantity = this.quantity;
+
+    if (this.playerFilter) {
+      playerHtml = this.playerHtml(this.playerFilter);
+    } else {
+      for (const [playerName, quantity] of Object.entries(item.quantities)) {
+        if (quantity === 0) continue;
+        playerHtml += this.playerHtml(playerName);
+      }
+    }
+
+    return `{{inventory-item.html}}`;
+  }
+  /* eslint-enable no-unused-vars */
+
+  playerHtml(playerName) {
+    const quantity = this.item.quantities[playerName];
+    const totalQuantity = this.quantity;
+    const quantityPercent = Math.round((quantity / totalQuantity) * 100);
+    return `
+<span class="${quantity === 0 ? "inventory-item__no-quantity" : ""}">${playerName}</span>
+<span>${quantity.toLocaleString()}</span>
+<div class="inventory-item__quantity-bar"
+     style="transform: scaleX(${quantityPercent}%); background: hsl(${quantityPercent}, 100%, 40%);">
+</div>
+`;
+  }
+
+  handleUpdatedItem(item) {
+    this.item = item;
+    this.render();
+    this.classList.add("rendered");
+  }
+
+  get quantity() {
+    if (this.playerFilter) {
+      return this.item.quantities[this.playerFilter];
+    }
+
+    return this.item.quantity;
+  }
+
+  get highAlch() {
+    const highAlch = this.item.highAlch;
+    if (highAlch === 0) return "N/A";
+
+    if (this.showIndividualItemPrices) {
+      return highAlch.toLocaleString() + "gp";
+    }
+
+    return (this.quantity * highAlch).toLocaleString() + "gp";
+  }
+
+  get gePrice() {
+    const gePrice = this.item.gePrice;
+    if (gePrice === 0) return "N/A";
+
+    if (this.showIndividualItemPrices) {
+      return gePrice.toLocaleString() + "gp";
+    }
+
+    return (this.quantity * gePrice).toLocaleString() + "gp";
+  }
+}
+customElements.define("inventory-item", InventoryItem);