Merge pull request #142 from bra1n/updated-reference-sheets

Updated reference sheets

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Release Notes
 
+### Version 2.11.0
+- new design for character reference sheet
+- automatically switch to grimoire view when joining a session through a link
+- fixed demon bluffs showing on public town square
+- fixed a bug that prevented connecting to a session when previously being connected and joining through a link
+
+---
+
 ### Version 2.10.0
 - added [nomination log indicator](https://fontawesome.com/icons/book-dead).  When a nomination log [v] is available, the number of currently visible entries is displayed. Clicking the indicator can reveal/hide the nomination log.
 - fix issue where a player and storyteller updating the same players pronouns at around the same time causes an infinite loop disconnecting the session.

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "townsquare",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "2.10.0",
+      "version": "2.11.0",
       "license": "GPL-3.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.32",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "townsquare",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Blood on the Clocktower Town Square",
   "author": "Steffen Baumgart",
   "scripts": {

src/components/TownSquare.vue

@@ -365,10 +365,6 @@ export default {
   transition: all 200ms ease-in-out;
   z-index: 50;
 
-  #townsquare.public &.bluffs {
-    opacity: 0;
-    transform: scale(0.1);
-  }
   > svg {
     position: absolute;
     top: 10px;
@@ -439,6 +435,11 @@ export default {
   }
 }
 
+#townsquare.public > .bluffs {
+  opacity: 0;
+  transform: scale(0.1);
+}
+
 .fabled ul li .token:before {
   content: " ";
   opacity: 0;

src/components/modals/Modal.vue

@@ -74,7 +74,8 @@ export default {
     overflow-y: auto;
   }
 
-  .roles & {
+  .roles &,
+  .characters & {
     max-height: 100%;
     max-width: 60%;
   }
@@ -121,6 +122,11 @@ export default {
   display: flex;
   align-content: center;
   justify-content: center;
+  .roles &,
+  .characters & {
+    max-width: 100%;
+    padding: 10px;
+  }
 }
 
 .modal-fade-enter,

src/components/modals/ReferenceModal.vue

@@ -15,21 +15,16 @@
       <font-awesome-icon icon="address-card" />
       {{ edition.name || "Custom Script" }}
     </h3>
-    <ul class="legend">
-      <li>
-        <span class="name">Name</span>
-        <span class="icon">Icon</span>
-        <span class="ability">Ability</span>
-        <span class="player" v-if="Object.keys(playersByRole).length">
-          Player
-        </span>
-      </li>
-    </ul>
-    <div v-for="(teamRoles, team) in rolesGrouped" :key="team" :class="[team]">
-      <h4>{{ team }}</h4>
+    <div
+      v-for="(teamRoles, team) in rolesGrouped"
+      :key="team"
+      :class="['team', team]"
+    >
+      <aside>
+        <h4>{{ team }}</h4>
+      </aside>
       <ul>
         <li v-for="role in teamRoles" :class="[team]" :key="role.id">
-          <span class="name">{{ role.name }}</span>
           <span
             class="icon"
             v-if="role.id"
@@ -43,11 +38,16 @@
               })`
             }"
           ></span>
-          <span class="ability">{{ role.ability }}</span>
-          <span class="player" v-if="Object.keys(playersByRole).length">{{
-            playersByRole[role.id] ? playersByRole[role.id].join(", ") : ""
-          }}</span>
+          <div class="role">
+            <span class="player" v-if="Object.keys(playersByRole).length">{{
+              playersByRole[role.id] ? playersByRole[role.id].join(", ") : ""
+            }}</span>
+            <span class="name">{{ role.name }}</span>
+            <span class="ability">{{ role.ability }}</span>
+          </div>
         </li>
+        <li :class="[team]"></li>
+        <li :class="[team]"></li>
       </ul>
     </div>
   </Modal>
@@ -114,124 +114,128 @@ h3 {
   }
 }
 
-h4 {
-  text-transform: capitalize;
-  display: flex;
-  align-items: center;
-  height: 20px;
-  &:before,
-  &:after {
-    content: " ";
-    width: 100%;
-    height: 1px;
-    border-radius: 2px;
-  }
-  &:before {
-    margin-right: 15px;
-  }
-  &:after {
-    margin-left: 15px;
-  }
-}
-
 .townsfolk {
-  .name,
-  h4 {
+  .name {
     color: $townsfolk;
-    &:before,
-    &:after {
-      background-color: $townsfolk;
-    }
+  }
+  aside {
+    background: linear-gradient(-90deg, $townsfolk, transparent);
   }
 }
 .outsider {
-  .name,
-  h4 {
+  .name {
     color: $outsider;
-    &:before,
-    &:after {
-      background-color: $outsider;
-    }
+  }
+  aside {
+    background: linear-gradient(-90deg, $outsider, transparent);
   }
 }
 .minion {
-  .name,
-  h4 {
+  .name {
     color: $minion;
-    &:before,
-    &:after {
-      background-color: $minion;
-    }
+  }
+  aside {
+    background: linear-gradient(-90deg, $minion, transparent);
   }
 }
 .demon {
-  .name,
-  h4 {
+  .name {
     color: $demon;
-    &:before,
-    &:after {
-      background-color: $demon;
-    }
+  }
+  aside {
+    background: linear-gradient(-90deg, $demon, transparent);
   }
 }
+
+.team {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  &:not(:last-child):after {
+    content: " ";
+    display: block;
+    width: 25%;
+    height: 1px;
+    background: linear-gradient(90deg, #ffffffaa, transparent);
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+  aside {
+    width: 30px;
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+    overflow: hidden;
+    text-shadow: 0 0 4px black;
+  }
+
+  h4 {
+    text-transform: uppercase;
+    text-align: center;
+    transform: rotate(90deg);
+    transform-origin: center;
+    font-size: 80%;
+  }
+}
+
 ul {
+  flex-grow: 1;
+  display: flex;
+  padding: 5px 0;
+
   li {
     display: flex;
-    width: 100%;
     align-items: center;
-    align-content: center;
-    /*background: linear-gradient(0deg, #ffffff0f, transparent);*/
-    border-radius: 10px;
+    flex-grow: 1;
+    width: 420px;
     .icon {
-      width: 6vh;
+      width: 8vh;
       background-size: cover;
       background-position: 0 -5px;
-      flex-grow: 0;
       flex-shrink: 0;
-      margin: 0 10px;
-      text-align: center;
-      border-left: 1px solid #ffffff1f;
-      border-right: 1px solid #ffffff1f;
+      flex-grow: 0;
       &:after {
         content: " ";
         display: block;
-        padding-top: 65%;
+        padding-top: 75%;
       }
     }
-    .name {
-      flex-grow: 0;
-      flex-shrink: 0;
-      width: 15%;
-      font-weight: bold;
-      text-align: right;
-      font-size: 110%;
-    }
-    .player {
-      flex-grow: 0;
-      flex-shrink: 1;
-      text-align: right;
-      margin: 0 10px;
-      color: #888;
-      font-size: smaller;
-    }
-    .ability {
+    .role {
+      line-height: 80%;
       flex-grow: 1;
     }
-  }
-  &.legend {
-    width: 100%;
-    font-weight: bold;
-    height: 20px;
-    margin-top: 10px;
-    li span {
-      background: none;
-      height: auto;
-      font-family: inherit;
-      font-size: inherit;
-      color: #fff;
+    .name {
+      font-weight: bold;
+      font-size: 75%;
+      display: block;
     }
-    .icon:after {
-      padding-top: 0;
+    .player {
+      color: #888;
+      float: right;
+      font-size: 60%;
+    }
+    .ability {
+      font-size: 70%;
+    }
+  }
+}
+
+/** break into 1 column below 1200px **/
+@media screen and (max-width: 1199.98px) {
+  .modal {
+    max-width: 60%;
+  }
+  ul {
+    li {
+      .icon { width: 6vh; }
+      .role { line-height: 100%; }
+      .name { font-size: 100%; }
+      .player { font-size: 100%; }
+      .ability { font-size: 90%; }
     }
   }
 }

src/store/persistence.js

@@ -60,7 +60,7 @@ module.exports = store => {
   if (localStorage.getItem("playerId")) {
     store.commit("session/setPlayerId", localStorage.getItem("playerId"));
   }
-  if (localStorage.getItem("session")) {
+  if (localStorage.getItem("session") && !window.location.hash.substr(1)) {
     const [spectator, sessionId] = JSON.parse(localStorage.getItem("session"));
     store.commit("session/setSpectator", spectator);
     store.commit("session/setSessionId", sessionId);

src/store/socket.js

@@ -878,5 +878,6 @@ export default store => {
   if (sessionId) {
     store.commit("session/setSpectator", true);
     store.commit("session/setSessionId", sessionId);
+    store.commit("toggleGrimoire", false);
   }
 };