First commit of group-ironmen-master directory.

group-ironmen-master/site/src/map-page/map-page.css

@@ -0,0 +1,17 @@
+map-page {
+  display: block;
+}
+
+.map-page__container {
+  display: flex;
+  overflow-x: auto;
+  padding: 0 4px;
+}
+
+.map-page__focus-player-buttons {
+  display: flex;
+}
+
+.map-page__focus-player-buttons > button + button {
+  margin-left: 6px;
+}

group-ironmen-master/site/src/map-page/map-page.html

@@ -0,0 +1,11 @@
+<div class="map-page__container">
+  <div class="map-page__focus-player-buttons"></div>
+  <div class="men-control-container rsborder-tiny rsbackground rsbackground-hover">
+    <select class="map-page__plane-select">
+      <option value="1">Plane: 1</option>
+      <option value="2">Plane: 2</option>
+      <option value="3">Plane: 3</option>
+      <option value="4">Plane: 4</option>
+    </select>
+  </div>
+</div>

group-ironmen-master/site/src/map-page/map-page.js

@@ -0,0 +1,69 @@
+import { BaseElement } from "../base-element/base-element";
+
+export class MapPage extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  html() {
+    return `{{map-page.html}}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.render();
+    this.worldMap = document.querySelector("#background-worldmap");
+    document.querySelector(".authed-section").classList.add("no-pointer-events");
+    this.worldMap.classList.add("interactable");
+    this.playerButtons = this.querySelector(".map-page__focus-player-buttons");
+    this.planeSelect = this.querySelector(".map-page__plane-select");
+
+    this.planeSelect.value = this.worldMap.plane || 1;
+
+    this.subscribe("members-updated", this.handleUpdatedMembers.bind(this));
+    this.eventListener(this.playerButtons, "click", this.handleFocusPlayer.bind(this));
+    this.eventListener(this.planeSelect, "change", this.handlePlaneSelect.bind(this));
+    this.eventListener(this.worldMap, "plane-changed", this.handlePlaneChange.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.worldMap.classList.remove("interactable");
+    document.querySelector(".authed-section").classList.remove("no-pointer-events");
+  }
+
+  getSelectedPlane() {
+    return parseInt(this.planeSelect.value, 10);
+  }
+
+  handlePlaneChange(evt) {
+    const plane = evt.detail.plane;
+    if (this.getSelectedPlane() !== plane) {
+      this.planeSelect.value = plane;
+    }
+  }
+
+  handlePlaneSelect() {
+    this.worldMap.stopFollowingPlayer();
+    this.worldMap.showPlane(this.getSelectedPlane());
+  }
+
+  handleUpdatedMembers(members) {
+    let playerButtons = "";
+    for (const member of members) {
+      if (member.name === "@SHARED") continue;
+      playerButtons += `<button type="button" class="men-button" player-name="${member.name}">${member.name}</button>`;
+    }
+
+    if (this.playerButtons) {
+      this.playerButtons.innerHTML = playerButtons;
+    }
+  }
+
+  handleFocusPlayer(event) {
+    const target = event.target;
+    const playerName = target.getAttribute("player-name");
+    this.worldMap.followPlayer(playerName);
+  }
+}
+customElements.define("map-page", MapPage);