updated readme, added role selection warning for orange leaf roles

README.md

@@ -7,4 +7,12 @@ It is supposed to aid storytellers and allow them to quickly set up and capture
 
 [You can try it online!](https://bra1n.github.io/townsquare)
 
+**Todo:**
+- add night sheet data to roles.json
+- add night sheet view to Grimoire
+- add global reminder space
+- add LICENSE and finish README (shortcuts)
+- (maybe) switch to vectorized SVG token icons
+- allow using custom scripts
+
 WORK IN PROGRESS

src/App.vue

@@ -247,7 +247,11 @@ body {
   position: relative;
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
   margin: 0;
   text-align: center;
 }

src/components/Player.vue

@@ -227,10 +227,14 @@ export default {
   span {
     display: none;
   }
-  &:hover span {
-    display: inline-block;
   &:hover {
     color: red;
+    span {
+      display: inline-block;
+      color: white;
+      &:hover {
+        color: red;
+      }
     }
   }
 }

src/components/RoleSelectionModal.vue

@@ -19,6 +19,10 @@
         <Token :role="role" />
       </li>
     </ul>
+    <div class="warning" v-if="hasSelectedSetupRoles">
+      Warning: there are roles selected that modify the game setup! The
+      randomizer does not account for these roles.
+    </div>
     <div class="button-group">
       <div
         class="button"
@@ -80,6 +84,11 @@ export default {
       return Object.values(this.roleSelection)
         .map(roles => roles.filter(role => role.selected).length)
         .reduce((a, b) => a + b, 0);
+    },
+    hasSelectedSetupRoles: function() {
+      return Object.values(this.roleSelection).some(roles =>
+        roles.some(role => role.selected && role.setup)
+      );
     }
   },
   methods: {
@@ -177,4 +186,10 @@ export default {
     }
   }
 }
+
+.roles .modal .warning {
+  color: red;
+  text-align: center;
+  margin: auto;
+}
 </style>

src/components/TownSquare.vue

@@ -99,7 +99,9 @@ export default {
       selectedPlayer: false,
       availableReminders: [],
       availableRoles: [],
-      bluffs: Array(3).fill({}).map(() => ({ role: {} }))
+      bluffs: Array(3)
+        .fill({})
+        .map(() => ({ role: {} }))
     };
   },
   methods: {