First commit of group-ironmen-master directory.

group-ironmen-master/site/src/player-diaries/player-diaries.css

@@ -0,0 +1,20 @@
+player-diaries {
+  display: block;
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.player-diaries__title {
+  margin: 0;
+  text-align: center;
+  color: var(--orange);
+}
+
+.player-diaries__completions {
+  padding: 0 4px;
+}
+
+diary-completion + diary-completion {
+  margin-top: 2px;
+}

group-ironmen-master/site/src/player-diaries/player-diaries.html

@@ -0,0 +1,2 @@
+<h2 class="player-diaries__title">Achievement Diaries</h2>
+<div class="player-diaries__completions"></div>

group-ironmen-master/site/src/player-diaries/player-diaries.js

@@ -0,0 +1,40 @@
+import { BaseElement } from "../base-element/base-element";
+
+export class PlayerDiaries extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  html() {
+    return `{{player-diaries.html}}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.render();
+    this.playerName = this.getAttribute("player-name");
+    this.completionsEl = this.querySelector(".player-diaries__completions");
+    this.subscribe(`diaries:${this.playerName}`, this.handleDiaries.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  handleDiaries(playerDiaries) {
+    const completionEls = document.createDocumentFragment();
+
+    for (const [diaryName, diaryCompletion] of Object.entries(playerDiaries.completion)) {
+      const el = document.createElement("diary-completion");
+      el.setAttribute("diary-name", diaryName);
+      el.setAttribute("player-name", this.playerName);
+      el.diaryCompletion = diaryCompletion;
+      completionEls.appendChild(el);
+    }
+
+    this.completionsEl.innerHTML = "";
+    this.completionsEl.appendChild(completionEls);
+  }
+}
+
+customElements.define("player-diaries", PlayerDiaries);