wrap up and changelog

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Release Notes
 
+## Version 2.7.0
+- added support for assigning duplicate characters to more than one player (like Legion)
+- further live session bandwidth optimizations
+- sessions can now be joined by pasting the whole link into the popup (thanks @davotronic5000)
+- fabled night order bug fixed
+- added Legion to list of available characters (thanks @eddgabriel)
+- added support for mp4/webm video backgrounds
+- added tooltips to night order popup
+
+---
+
 ## Version 2.6.0
 - night mode can be toggeled with [S] now (thanks @davotronic5000)
 - night order shows which players are dead

src/components/modals/RolesModal.vue

@@ -17,7 +17,7 @@
         @click="role.selected = role.selected ? 0 : 1"
       >
         <Token :role="role" />
-        <div class="buttons">
+        <div class="buttons" v-if="allowMultiple">
           <font-awesome-icon
             icon="minus-circle"
             @click.stop="role.selected--"
@@ -28,9 +28,17 @@
       </li>
     </ul>
     <div class="warning" v-if="hasSelectedSetupRoles">
+      <font-awesome-icon icon="exclamation-triangle" />
+      <span>
         Warning: there are characters selected that modify the game setup! The
         randomizer does not account for these characters.
+      </span>
     </div>
+    <label class="multiple" :class="{ checked: allowMultiple }">
+      <font-awesome-icon :icon="allowMultiple ? 'check-square' : 'square'" />
+      <input type="checkbox" name="allow-multiple" v-model="allowMultiple" />
+      Allow duplicate characters
+    </label>
     <div class="button-group">
       <div
         class="button"
@@ -66,7 +74,8 @@ export default {
   data: function() {
     return {
       roleSelection: {},
-      game: gameJSON
+      game: gameJSON,
+      allowMultiple: false
     };
   },
   computed: {
@@ -240,9 +249,51 @@ ul.tokens {
   }
 }
 
-.roles .modal .warning {
+.roles .modal {
-  color: red;
+  .multiple {
+    display: block;
     text-align: center;
-  margin: auto;
+    cursor: pointer;
+    &.checked,
+    &:hover {
+      color: red;
+    }
+    &.checked {
+      margin-top: 10px;
+    }
+    svg {
+      margin-right: 5px;
+    }
+    input {
+      display: none;
+    }
+  }
+
+  .warning {
+    color: red;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    z-index: 10;
+    svg {
+      font-size: 150%;
+      vertical-align: middle;
+    }
+    span {
+      display: none;
+      text-align: center;
+      position: absolute;
+      right: -20px;
+      bottom: 30px;
+      width: 420px;
+      background: rgba(0, 0, 0, 0.75);
+      padding: 5px;
+      border-radius: 10px;
+      border: 2px solid black;
+    }
+    &:hover span {
+      display: block;
+    }
+  }
 }
 </style>

src/main.js

@@ -18,6 +18,7 @@ const faIcons = [
   "Dice",
   "Dragon",
   "ExchangeAlt",
+  "ExclamationTriangle",
   "FileCode",
   "FileUpload",
   "HandPaper",