First commit of group-ironmen-master directory.

group-ironmen-master/site/src/total-level-box/total-level-box.css

@@ -0,0 +1,23 @@
+total-level-box {
+  display: flex;
+  font-size: 13px;
+  color: yellow;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+}
+
+.total-level-box__content,
+.total-level-box__image {
+  pointer-events: none;
+}
+
+.total-level-box__content {
+  position: absolute;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  line-height: 1em;
+}

group-ironmen-master/site/src/total-level-box/total-level-box.html

@@ -0,0 +1,6 @@
+<img class="total-level-box__image" src="/ui/183-0.png" />
+<img class="total-level-box__image" src="/ui/184-0.png" />
+<div class="total-level-box__content">
+  <span>Total level:</span>
+  <span class="total-level-box__level"></span>
+</div>

group-ironmen-master/site/src/total-level-box/total-level-box.js

@@ -0,0 +1,30 @@
+import { BaseElement } from "../base-element/base-element";
+
+export class TotalLevelBox extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  html() {
+    return `{{total-level-box.html}}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.enableTooltip();
+    this.playerName = this.getAttribute("player-name");
+    this.render();
+    this.totalLevel = this.querySelector(".total-level-box__level");
+    this.subscribe(`Overall:${this.playerName}`, this.handleUpdatedTotalXp.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  handleUpdatedTotalXp(skill) {
+    this.totalLevel.innerHTML = skill.level;
+    this.updateTooltip(`Total XP: ${skill.xp.toLocaleString()}`);
+  }
+}
+customElements.define("total-level-box", TotalLevelBox);