First commit of group-ironmen-master directory.

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

@@ -0,0 +1,76 @@
+skill-box {
+  display: flex;
+  position: relative;
+  transform: translateZ(1px);
+  width: 62px;
+  height: 32px;
+
+  font-family: "rstiny";
+}
+
+.skill-box__left {
+  background-image: url(/ui/174-0.png);
+}
+
+.dark-mode .skill-box__left {
+  background-image: url(/ui/174-0-dark.png);
+}
+
+.skill-box__right {
+  position: relative;
+  background-image: url(/ui/175-0.png);
+}
+
+.dark-mode .skill-box__right {
+  background-image: url(/ui/175-0-dark.png);
+}
+
+.skill-box__left,
+.skill-box__right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 31px;
+  height: 32px;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.skill-box__left,
+.skill-box__right,
+.skill-box__progress {
+  pointer-events: none;
+}
+
+.skill-box__current-level,
+.skill-box__baseline-level {
+  position: absolute;
+  font-size: 16px;
+  color: yellow;
+  text-shadow: 1px 1px var(--black);
+  min-width: 10px;
+}
+
+.skill-box__baseline-level {
+  transform: translate(calc(50% - 1px), 5px);
+  text-align: right;
+}
+
+.skill-box__current-level {
+  transform: translate(calc(-50% - 2px), -5px);
+  text-align: left;
+}
+
+.skill-box__progress {
+  width: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 1px;
+}
+
+.skill-box__progress-bar {
+  height: 2px;
+  width: 100%;
+  transform-origin: left;
+}

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

@@ -0,0 +1,12 @@
+<div class="skill-box__left">
+  <img class="skill-box__icon" src="${Skill.getIcon(this.skillName)}" />
+</div>
+
+<div class="skill-box__right">
+  <div class="skill-box__current-level"></div>
+  <div class="skill-box__baseline-level"></div>
+</div>
+
+<div class="skill-box__progress">
+  <div class="skill-box__progress-bar"></div>
+</div>

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

@@ -0,0 +1,42 @@
+import { BaseElement } from "../base-element/base-element";
+// eslint-disable-next-line no-unused-vars
+import { Skill } from "../data/skill";
+
+export class SkillBox extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  html() {
+    return `{{skill-box.html}}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.enableTooltip();
+    this.skillName = this.getAttribute("skill-name");
+    this.playerName = this.getAttribute("player-name");
+    this.render();
+    this.currentLevel = this.querySelector(".skill-box__current-level");
+    this.baseLevel = this.querySelector(".skill-box__baseline-level");
+    this.progressBar = this.querySelector(".skill-box__progress-bar");
+    this.subscribe(`${this.skillName}:${this.playerName}`, this.handleUpdatedSkill.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  handleUpdatedSkill(skill) {
+    this.currentLevel.innerHTML = Math.min(99, skill.level);
+    this.baseLevel.innerHTML = skill.level;
+    const levelProgress = skill.levelProgress;
+    this.progressBar.style.transform = `scaleX(${levelProgress})`;
+    this.progressBar.style.background = `hsl(${levelProgress * 100}, 100%, 50%)`;
+
+    this.updateTooltip(
+      `Total XP: ${skill.xp.toLocaleString()}<br />XP until next level: ${skill.xpUntilNextLevel.toLocaleString()}`
+    );
+  }
+}
+customElements.define("skill-box", SkillBox);