First commit of group-ironmen-master directory.

group-ironmen-master/site/src/setup-instructions/setup-instructions.css

@@ -0,0 +1,58 @@
+setup-instructions {
+  display: flex;
+  justify-content: center;
+  padding: 64px 12px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.setup__container {
+  max-width: 500px;
+  padding: 8px 24px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.setup__block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.setup__block {
+  margin-bottom: 1em;
+}
+
+.setup__config img {
+  max-width: 250px;
+}
+
+.setup__go-to-group {
+  display: flex;
+  justify-content: center;
+  margin-top: 2em;
+}
+
+.setup__credential {
+  padding: 0.25em 0.5em;
+  position: relative;
+}
+
+.setup__credential-hide {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #222;
+  color: white;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.setup__credential-hide:hover {
+  background: #444;
+}

group-ironmen-master/site/src/setup-instructions/setup-instructions.html

@@ -0,0 +1,42 @@
+<div class="setup__container rsbackground rsborder">
+  <div class="setup__block">
+    <h3>The group's login</h3>
+    <p>Only share these with your group. You can't recover it so keep it safe!</p>
+    <div class="setup__block">
+      <h4>Group Name</h4>
+      <div class="setup__credential rsborder-tiny rsbackground">
+        ${group.groupName}
+      </div>
+    </div>
+
+    <div class="setup__block">
+      <h4>Group Token</h4>
+      <div class="setup__credential rsborder-tiny rsbackground">
+        <div class="setup__credential-hide" onclick="this.remove()">Click to show</div>
+        ${group.groupToken}
+      </div>
+    </div>
+  </div>
+
+  <div class="setup__block">
+    <h3>Setup</h3>
+    <p>
+      This app requires each group member to install a runelite plugin from the Plugin Hub in order to track player
+      information. Find it by searching "<span class="emphasize">Group Ironmen Tracker</span>" in the Runelite client.
+    </p>
+  </div>
+
+  <div class="setup__config">
+    <p>
+      Use the provided credentials to fill in the <span class="emphasize">Group Config</span> section in the plugin's
+      configuration.
+    </p>
+    <img src="/images/config_panel.png" />
+  </div>
+
+  <div class="setup__go-to-group">
+    <men-link link-href="/group">
+      <button class="men-button">Go to group</button>
+    </men-link>
+  </div>
+</div>

group-ironmen-master/site/src/setup-instructions/setup-instructions.js

@@ -0,0 +1,26 @@
+import { BaseElement } from "../base-element/base-element";
+import { storage } from "../data/storage";
+
+export class SetupInstructions extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  /* eslint-disable no-unused-vars */
+  html() {
+    const group = storage.getGroup();
+    return `{{setup-instructions.html}}`;
+  }
+  /* eslint-enable no-unused-vars */
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.render();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+}
+
+customElements.define("setup-instructions", SetupInstructions);