grouped menu items

added some external links
2020-06-04 21:44:47 +02:00 · 2020-06-04 21:44:47 +02:00 · e9745a6b51
parent 087f504a83
commit e9745a6b51
4 changed files with 162 additions and 65 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -40,6 +40,14 @@
        "@fortawesome/fontawesome-common-types": "^0.2.28"
      }
    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
    "@fortawesome/free-solid-svg-icons": {
      "version": "5.13.0",
      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
  "main": "App.vue",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "@vue/cli-service": "^4.3.1",
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@ -24,80 +24,96 @@
    <div class="menu" v-bind:class="{ open: grimoire.isMenuOpen }">
      <font-awesome-icon icon="cog" @click="toggleMenu" />
      <ul>
-        <!-- Grimoire -->
-        <li class="headline">
-          <font-awesome-icon icon="book-open" />
-          Grimoire
-        </li>
-        <li @click="toggleGrimoire" v-if="players.length">
-          <em>[G]</em>
-          <template v-if="!grimoire.isPublic">Hide</template>
-          <template v-if="grimoire.isPublic">Show</template>
-        </li>
-        <li @click="toggleNightOrder" v-if="players.length">
-          <em
-            ><font-awesome-icon
-              :icon="['fas', grimoire.isNightOrder ? 'check-square' : 'square']"
-          /></em>
-          Night order
-        </li>
-        <li v-if="players.length">
-          <em>
-            <font-awesome-icon @click="updateZoom(-0.1)" icon="search-minus" />
-            {{ Math.round(grimoire.zoom * 100) }}%
-            <font-awesome-icon @click="updateZoom(0.1)" icon="search-plus" />
-          </em>
-          Zoom
-        </li>
-        <li @click="setBackground">
-          Background image
-        </li>
-        <li @click="hostSession" v-if="!session.sessionId">
-          Host Live Session
-        </li>
-        <li @click="joinSession" v-if="!session.sessionId">
-          Join Live Session
-        </li>
-        <li class="headline" v-if="session.sessionId">
-          <font-awesome-icon icon="broadcast-tower" />
-          {{ session.isSpectator ? "Playing" : "Hosting" }}
-        </li>
-        <li v-if="session.sessionId" @click="copySessionUrl">
-          <em><font-awesome-icon icon="copy"/></em>
-          Copy player link
-        </li>
-        <li @click="leaveSession" v-if="session.sessionId">
-          <em>{{ session.sessionId }}</em>
-          Leave Session
+        <li class="tabs" :class="tab">
+          <font-awesome-icon icon="book-open" @click="tab = 'grimoire'" />
+          <font-awesome-icon icon="broadcast-tower" @click="tab = 'session'" />
+          <font-awesome-icon
+            icon="users"
+            v-if="!session.isSpectator"
+            @click="tab = 'players'"
+          />
+          <font-awesome-icon
+            icon="theater-masks"
+            v-if="!session.isSpectator"
+            @click="tab = 'characters'"
+          />
+          <font-awesome-icon icon="question" @click="tab = 'help'" />
        </li>

-        <template v-if="!session.isSpectator">
-          <!-- Users -->
-          <li class="headline">
-            <font-awesome-icon icon="users" />
-            Players
+        <template v-if="tab === 'grimoire'">
+          <!-- Grimoire -->
+          <li class="headline">Grimoire</li>
+          <li @click="toggleGrimoire" v-if="players.length">
+            <em>[G]</em>
+            <template v-if="!grimoire.isPublic">Hide</template>
+            <template v-if="grimoire.isPublic">Show</template>
          </li>
+          <li @click="toggleNightOrder" v-if="players.length">
+            <em
+              ><font-awesome-icon
+                :icon="[
+                  'fas',
+                  grimoire.isNightOrder ? 'check-square' : 'square'
+                ]"
+            /></em>
+            Night order
+          </li>
+          <li v-if="players.length">
+            <em>
+              <font-awesome-icon
+                @click="updateZoom(-0.1)"
+                icon="search-minus"
+              />
+              {{ Math.round(grimoire.zoom * 100) }}%
+              <font-awesome-icon @click="updateZoom(0.1)" icon="search-plus" />
+            </em>
+            Zoom
+          </li>
+          <li @click="setBackground">
+            Background image
+          </li>
+        </template>
+
+        <template v-if="tab === 'session'">
+          <li class="headline" v-if="session.sessionId">
+            {{ session.isSpectator ? "Playing" : "Hosting" }}
+          </li>
+          <li class="headline" v-else>
+            Live Session
+          </li>
+          <li @click="hostSession" v-if="!session.sessionId">
+            Host a session
+          </li>
+          <li @click="joinSession" v-if="!session.sessionId">
+            Join a session
+          </li>
+          <li v-if="session.sessionId" @click="copySessionUrl">
+            <em><font-awesome-icon icon="copy"/></em>
+            Copy player link
+          </li>
+          <li @click="leaveSession" v-if="session.sessionId">
+            <em>{{ session.sessionId }}</em>
+            Leave Session
+          </li>
+        </template>
+
+        <template v-if="tab === 'players' && !session.isSpectator">
+          <!-- Users -->
+          <li class="headline">Players</li>
          <li @click="addPlayer" v-if="players.length < 20">
            <em>[A]</em> Add
          </li>
          <li @click="randomizeSeatings" v-if="players.length > 2">
-            <em>[R]</em> Randomize
+            Randomize
          </li>
          <li @click="clearPlayers" v-if="players.length">
            Remove all
          </li>
        </template>

-        <!-- Characters -->
-        <li class="headline">
-          <font-awesome-icon icon="theater-masks" />
-          Characters
-        </li>
-        <li @click="toggleModal('reference')">
-          <em>[R]</em>
-          Reference Sheet
-        </li>
-        <template v-if="!session.isSpectator">
+        <template v-if="tab === 'characters' && !session.isSpectator">
+          <!-- Characters -->
+          <li class="headline">Characters</li>
          <li @click="toggleModal('edition')">
            <em>[E]</em>
            Select Edition
@ -110,6 +126,27 @@
            Remove all
          </li>
        </template>
+
+        <template v-if="tab === 'help'">
+          <!-- Help -->
+          <li class="headline">Help</li>
+          <li @click="toggleModal('reference')">
+            <em>[R]</em>
+            Reference Sheet
+          </li>
+          <li>
+            <a href="https://discord.gg/tkWDny6" target="_blank">
+              <em><font-awesome-icon :icon="['fab', 'discord']"/></em>
+              Join Discord
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/bra1n/townsquare" target="_blank">
+              <em><font-awesome-icon :icon="['fab', 'github']"/></em>
+              Source code
+            </a>
+          </li>
+        </template>
      </ul>
    </div>
  </div>
@ -127,6 +164,11 @@ export default {
    ...mapState(["grimoire", "session"]),
    ...mapState("players", ["players"])
  },
+  data() {
+    return {
+      tab: "grimoire"
+    };
+  },
  methods: {
    takeScreenshot(dimensions = {}) {
      this.$store.commit("updateScreenshot");
@ -262,7 +304,7 @@ export default {
    margin-left: 10px;
  }

-  .session {
+  span.session {
    color: $demon;
    &.spectator {
      color: $townsfolk;
@ -295,6 +337,14 @@ export default {
    padding: 5px 5px 15px;
  }

+  a {
+    color: white;
+    text-decoration: none;
+    &:hover {
+      color: red;
+    }
+  }
+
  ul {
    display: flex;
    list-style-type: none;
@ -312,11 +362,43 @@ export default {
      text-align: left;
      background: rgba(0, 0, 0, 0.7);

+      &.tabs {
+        display: flex;
+        padding: 0;
+        svg {
+          flex-grow: 1;
+          flex-shrink: 0;
+          height: 35px;
+          border-bottom: 3px solid black;
+          border-right: 3px solid black;
+          padding: 5px 0;
+          cursor: pointer;
+          transition: color 250ms;
+          &:hover {
+            color: red;
+          }
+          &:last-child {
+            border-right: 0;
+          }
+        }
+        &.grimoire .fa-book-open,
+        &.players .fa-users,
+        &.characters .fa-theater-masks,
+        &.session .fa-broadcast-tower,
+        &.help .fa-question {
+          background: linear-gradient(
+            to bottom,
+            $townsfolk 0%,
+            rgba(0, 0, 0, 0.5) 100%
+          );
+        }
+      }
+
      &:last-child {
        margin-bottom: 0;
      }

-      &:not(.headline):hover {
+      &:not(.headline):not(.tabs):hover {
        cursor: pointer;
        color: red;
      }
@ -333,7 +415,7 @@ export default {
    .headline {
      font-family: PiratesBay, sans-serif;
      letter-spacing: 1px;
-      padding: 5px 10px;
+      padding: 0 10px;
      text-align: center;
      background: linear-gradient(
        to right,
--- a/src/main.js
+++ b/src/main.js
@ -3,6 +3,7 @@ import App from "./App";
 import store from "./store";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

 const faIcons = [
@ -18,6 +19,7 @@ const faIcons = [
  "Heartbeat",
  "Link",
  "PeopleArrows",
+  "Question",
  "Random",
  "RedoAlt",
  "SearchMinus",
@ -32,7 +34,11 @@ const faIcons = [
  "Users",
  "VoteYea"
 ];
-library.add(...faIcons.map(i => fas["fa" + i]));
+const fabIcons = ["Github", "Discord"];
+library.add(
+  ...faIcons.map(i => fas["fa" + i]),
+  ...fabIcons.map(i => fab["fa" + i])
+);
 Vue.component("font-awesome-icon", FontAwesomeIcon);
 Vue.config.productionTip = false;