First commit of group-ironmen-master directory.

group-ironmen-master/site/src/xp-dropper/xp-dropper.css

@@ -0,0 +1,36 @@
+xp-dropper {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+  pointer-events: none;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+.xp-dropper__drop {
+  position: absolute;
+  right: 4px;
+  top: 0;
+  height: max-content;
+  animation: scroll 4s linear;
+  animation-fill-mode: forwards;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.xp-droppper__skill-icon {
+  height: 1em;
+}

group-ironmen-master/site/src/xp-dropper/xp-dropper.js

@@ -0,0 +1,36 @@
+import { BaseElement } from "../base-element/base-element";
+
+export class XpDropper extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  html() {
+    return `{{xp-dropper.html}}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    const playerName = this.getAttribute("player-name");
+    this.render();
+    this.subscribe(`xp:${playerName}`, this.handleNewXpDrops.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  handleNewXpDrops(xpDrops) {
+    let dropsHtml = "";
+    for (const drop of xpDrops) {
+      dropsHtml += `<div><img class="xp-droppper__skill-icon" src="${drop.icon}" />+${drop.xp}</div>`;
+    }
+    const dropContainer = document.createElement("div");
+    dropContainer.classList.add("xp-dropper__drop");
+    dropContainer.innerHTML = dropsHtml;
+    dropContainer.style.paddingTop = this.offsetHeight + "px";
+    dropContainer.addEventListener("animationend", () => dropContainer.remove());
+    this.appendChild(dropContainer);
+  }
+}
+customElements.define("xp-dropper", XpDropper);