First commit of group-ironmen-master directory.

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

@@ -0,0 +1,35 @@
+item-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: optimizequality;
+}
+
+.item-box__container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  max-width: 100%;
+}
+
+.item-box__image {
+  z-index: 0;
+  pointer-events: none;
+  transform: translateX(2px);
+  height: 100%;
+}
+
+.item-box__quantity {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  color: yellow;
+  transform: translate(0, -20%);
+  font-size: 16px;
+  font-family: "rstiny";
+}

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

@@ -0,0 +1,14 @@
+<div class="item-box__container">
+  <img class="item-box__image" src="${Item.imageUrl(this.itemId, this.quantity)}" loading="lazy" />
+  ${this.quantity > 1 ? `
+  <span class="item-box__quantity">
+    ${this.veryShortQuantity ? Item.veryShortQuantity(this.quantity) : Item.shortQuantity(this.quantity)}
+  </span>
+  ` : ""}
+  ${this.item?.isRunePouch() ? `
+  <rune-pouch
+    player-name="${this.playerName}"
+    pouch-name="${this.item.name}">
+  </rune-pouch>
+  ` : ""}
+</div>

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

@@ -0,0 +1,48 @@
+import { BaseElement } from "../base-element/base-element";
+import { groupData } from "../data/group-data";
+import { Item } from "../data/item";
+
+export class ItemBox extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  html() {
+    return `{{item-box.html}}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.noTooltip = this.hasAttribute("no-tooltip");
+    this.playerName = this.getAttribute("player-name");
+    this.veryShortQuantity = this.hasAttribute("very-short-quantity");
+    this.quantity = this.item?.quantity || parseInt(this.getAttribute("item-quantity"));
+    this.itemId = this.item?.id || parseInt(this.getAttribute("item-id"));
+
+    if (!this.noTooltip) {
+      this.enableTooltip();
+      if (this.item) {
+        const inventoryType = this.getAttribute("inventory-type");
+        const totalInventoryQuantity = groupData.inventoryQuantityForItem(this.item.id, this.playerName, inventoryType);
+        const stackHighAlch = totalInventoryQuantity * this.item.highAlch;
+        const stackGePrice = totalInventoryQuantity * this.item.gePrice;
+
+        this.tooltipText = `
+${this.item.name} x ${totalInventoryQuantity}
+<br />
+HA: ${stackHighAlch.toLocaleString()}
+<br />
+GE: ${stackGePrice.toLocaleString()}`;
+      } else {
+        this.tooltipText = `${Item.itemName(this.itemId)} x ${this.quantity.toLocaleString()}`;
+      }
+    }
+
+    this.render();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+}
+customElements.define("item-box", ItemBox);