styling finished

css/main.css

@@ -18,10 +18,12 @@
 html, body {
   font-size: 1.2em;
   line-height: 1.4;
-  background: #333;
+  background: url("../img/background.jpg") center center;
+  background-size: cover;
   color: white;
   height: 100%;
   font-family: "Roboto Condensed", sans-serif;
+  -webkit-font-smoothing: subpixel-antialiased;
 }
 
 /*
@@ -103,21 +105,45 @@ textarea {
   height: 100%;
   position: relative;
   border-radius: 50%;
-  border: 2px solid red;
   box-sizing: border-box;
+  padding: 20px;
+}
+.square .circle {
+  background: url("../img/demon-head2.png") center center no-repeat;
+  background-size: 10%;
+}
+.square.public .circle {
+  background-image: url("../img/demon-head.png");
 }
 .square .player {
   margin-bottom: 10px;
 }
-.square .player.dead:after {
+.square .player .shroud {
   content: " ";
   background: url("../img/shroud.png") center -10px no-repeat;
   background-size: auto 100%;
   position: absolute;
-  width: 100%;
+  margin-left: -50px;
+  width: 100px;
   height: 100px;
-  left: 0;
+  left: 50%;
   top: 0;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 200ms;
+  z-index: 2;
+}
+.square .player .shroud:hover {
+  opacity: 1;
+}
+.square .player.dead .shroud {
+  opacity: 1;
+}
+.square .player.dead .name {
+  color: #999;
+}
+.square.public .player.dead .shroud {
+  display: none;
 }
 .square.public .player.dead:after {
   background: url("../img/vote.png") center center no-repeat;
@@ -147,6 +173,7 @@ textarea {
   font-family: "Papyrus", serif;
   border: 3px solid black;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  cursor: pointer;
 }
 .square .token:before {
   content: " ";
@@ -157,13 +184,43 @@ textarea {
   left: 0;
   top: 0;
 }
+.square .token span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-size: 100%;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+.square .token span.leaf-left {
+  background-image: url("../img/leaf-left.png");
+}
+.square .token span.leaf-orange {
+  background-image: url("../img/leaf-orange.png");
+}
+.square .token span.leaf-right {
+  background-image: url("../img/leaf-right.png");
+}
+.square .token span.leaf-top1 {
+  background-image: url("../img/leaf-top1.png");
+}
+.square .token span.leaf-top2 {
+  background-image: url("../img/leaf-top2.png");
+}
+.square .token span.leaf-top3 {
+  background-image: url("../img/leaf-top3.png");
+}
+.square .token span.leaf-top4 {
+  background-image: url("../img/leaf-top4.png");
+}
+.square .token span.leaf-top5 {
+  background-image: url("../img/leaf-top5.png");
+}
 .square.public .token {
   background-image: url("../img/life.png");
 }
-.square.public .token:before {
+.square.public .token:before, .square.public .token:after, .square.public .token span {
-  display: none;
-}
-.square.public .token:after {
   display: none;
 }
 .square.public .player.dead .token {
@@ -194,8 +251,10 @@ textarea {
   border-radius: 50%;
   border: 3px solid black;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  transition: opacity 200ms;
+  cursor: pointer;
 }
-.square .reminder:before {
+.square .reminder:before, .square .reminder:after {
   content: " ";
   position: absolute;
   left: 0;
@@ -205,6 +264,30 @@ textarea {
   background-size: 100%;
   background-position: center 0;
   background-repeat: no-repeat;
+  background-image: url("../img/icon-plus.png");
+  transition: opacity 200ms;
+}
+.square .reminder:after {
+  background-image: url("../img/icon-x.png");
+  opacity: 0;
+}
+.square .reminder.add {
+  opacity: 0;
+}
+.square .reminder.add:after {
+  display: none;
+}
+.square .reminder:hover:before {
+  opacity: 0;
+}
+.square .reminder:hover:after {
+  opacity: 1;
+}
+.square .circle li:hover .reminder.add {
+  opacity: 1;
+}
+.square .circle li:hover .reminder.add:before {
+  opacity: 1;
 }
 .square.public .reminder {
   display: none;

css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAIA;EAAY;EACR;AAAkC;EAClC;AAIsD;;AAG1D;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAMA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aACQ;EAKR;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AACA;EAAW;;AACX;EAAU;;AAGd;EACI;;AAGJ;EACI;;AAIJ;EACI;EACA;EACA,aACI;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EAAqB;;AAGrB;EACI;EACA;EACA;;;AAIR;AAAA;AAAA;AAIA;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;EAEI;AACA;EACA;AACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AACI;;AAGJ;AAII;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;AAAA;AAAA;IAGI;IACA;AACA;IACA;IACA;;;EAEJ;AAAA;IAEI;;;EAEJ;IACI;;;EAEJ;IACI;;;AAEJ;AAAA;AAAA;AAAA;EAIA;AAAA;IAEI;;;EAEJ;IACI;;;EAEJ;AAAA;IAEI;IACA;;;AAEJ;AAAA;AAAA;AAAA;EAIA;IACI;;;EAEJ;AAAA;IAEI;;;EAEJ;AAAA;AAAA;IAGI;IACA;;;EAEJ;AAAA;IAEI","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAIA;EAAY;EACR;AAAkC;EAClC;AAIsD;;AAG1D;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAMA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;;AAIJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAU;;AAGd;EAAiB;;AACjB;EAAe;;AAIf;EAAU;;AACV;EACI;EACA;EACA;;AAEJ;EAAoB;;AACpB;EAAkB;;AAItB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aACQ;EAKR;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAc;;AACd;EAAgB;;AAChB;EAAe;;AACf;EAAc;;AACd;EAAc;;AACd;EAAc;;AACd;EAAc;;AACd;EAAc;;AAItB;EACI;;AACA;EAA0B;;AAG9B;EACI;;AAGJ;EACI;;AAIJ;EACI;EACA;EACA,aACI;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AACA;EAAU;;AAGd;EAAiB;;AACjB;EAAgB;;AAEpB;EAAkC;;AAClC;EAAwC;;AAExC;EAAqB;;AAGrB;EACI;EACA;EACA;;;AAIR;AAAA;AAAA;AAIA;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;EAEI;AACA;EACA;AACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AACI;;AAGJ;AAII;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;AAAA;AAAA;IAGI;IACA;AACA;IACA;IACA;;;EAEJ;AAAA;IAEI;;;EAEJ;IACI;;;EAEJ;IACI;;;AAEJ;AAAA;AAAA;AAAA;EAIA;AAAA;IAEI;;;EAEJ;IACI;;;EAEJ;AAAA;IAEI;IACA;;;AAEJ;AAAA;AAAA;AAAA;EAIA;IACI;;;EAEJ;AAAA;IAEI;;;EAEJ;AAAA;AAAA;IAGI;IACA;;;EAEJ;AAAA;IAEI","file":"main.css"}

css/main.scss

@@ -23,10 +23,12 @@
 html, body {
     font-size: 1.2em;
     line-height: 1.4;
-    background: #333;
+    background: url('../img/background.jpg') center center;
+    background-size: cover;
     color: white;
     height: 100%;
     font-family: 'Roboto Condensed', sans-serif;
+    -webkit-font-smoothing: subpixel-antialiased;
 }
 
 /*
@@ -117,40 +119,55 @@ $token: 150px;
     height: 100%;
     position: relative;
     border-radius: 50%;
-    border: 2px solid red;
     box-sizing: border-box;
+    padding: 20px;
 
-    // Player circle
+    // player circle
+    .circle {
+        background: url('../img/demon-head2.png') center center no-repeat;
+        background-size: 10%;
+    }
+
+    &.public .circle {
+        background-image: url('../img/demon-head.png');
+    }
+
+    // Player token
     .player {
         margin-bottom: 10px;
 
-        &.dead:after {
+        .shroud {
             content: " ";
             background: url('../img/shroud.png') center -10px no-repeat;
             background-size: auto 100%;
             position: absolute;
-            width: 100%;
+            margin-left: -2/6 * $token;
+            width: 2/3 * $token;
             height: 2/3 * $token;
-            left: 0;
+            left: 50%;
             top: 0;
-        }
+            cursor: pointer;
+            opacity: 0;
+            transition: opacity 200ms;
+            z-index: 2;
+            &:hover { opacity: 1; }
         }
 
-    &.public .player.dead:after {
+        &.dead .shroud { opacity: 1; }
+        &.dead .name { color: #999; }
+    }
+
+    &.public .player.dead {
+        .shroud { display: none; }
+        &:after {
             background: url('../img/vote.png') center center no-repeat;
             background-size: 40%;
             height: $token + 3px;
         }
-
+        &.traveller:after { filter: grayscale(100%); }
-    &.public .player.dead.traveller:after {
+        &.no-vote:after { display: none; }
-        filter: grayscale(100%);
     }
 
-    &.public .player.dead.no-vote:after {
-        display: none;
-    }
-
-
     // Role token
     .token {
         border-radius: 50%;
@@ -174,6 +191,7 @@ $token: 150px;
         font-family: 'Papyrus', serif;
         border: 3px solid black;
         box-shadow: 0 0 10px rgba(0,0,0,0.5);
+        cursor: pointer;
 
         &:before {
             content: " ";
@@ -184,12 +202,29 @@ $token: 150px;
             left: 0;
             top: 0;
         }
+
+        span {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-size: 100%;
+            left: 0;
+            top: 0;
+            pointer-events: none;
+            &.leaf-left { background-image: url('../img/leaf-left.png'); }
+            &.leaf-orange { background-image: url('../img/leaf-orange.png'); }
+            &.leaf-right { background-image: url('../img/leaf-right.png'); }
+            &.leaf-top1 { background-image: url('../img/leaf-top1.png'); }
+            &.leaf-top2 { background-image: url('../img/leaf-top2.png'); }
+            &.leaf-top3 { background-image: url('../img/leaf-top3.png'); }
+            &.leaf-top4 { background-image: url('../img/leaf-top4.png'); }
+            &.leaf-top5 { background-image: url('../img/leaf-top5.png'); }
+        }
     }
 
     &.public .token {
         background-image: url('../img/life.png');
-        &:before { display: none; }
+        &:before, &:after, span { display: none; }
-        &:after { display: none; }
     }
 
     &.public .player.dead .token {
@@ -230,8 +265,10 @@ $token: 150px;
         border-radius: 50%;
         border: 3px solid black;
         box-shadow: 0 0 10px rgba(0,0,0,0.5);
+        transition: opacity 200ms;
+        cursor: pointer;
 
-        &:before {
+        &:before, &:after {
             content: " ";
             position: absolute;
             left: 0;
@@ -241,9 +278,26 @@ $token: 150px;
             background-size: 100%;
             background-position: center 0;
             background-repeat: no-repeat;
+            background-image: url('../img/icon-plus.png');
+            transition: opacity 200ms;
         }
+
+        &:after {
+            background-image: url('../img/icon-x.png');
+            opacity: 0;
         }
 
+        &.add {
+            opacity: 0;
+            &:after { display: none; }
+        }
+
+        &:hover:before { opacity: 0; }
+        &:hover:after { opacity: 1; }
+    }
+    .circle li:hover .reminder.add, { opacity: 1; }
+    .circle li:hover .reminder.add:before { opacity: 1; }
+
     &.public .reminder { display: none; }
 
     // Controls

css/roles.css

@@ -218,7 +218,6 @@
 }
 .square .token.undertaker:after {
   content: "Undertaker";
-  line-height: 100%;
 }
 
 .square .reminder.undertaker:before {
@@ -240,8 +239,7 @@
   font-size: 75%;
 }
 .square .token.washerwoman:before {
-  background: url("../img/leaf-top2.png") top center no-repeat, url("../img/leaf-left.png") left center no-repeat, url("../img/icon-washerwoman.png");
+  background-image: url("../img/icon-washerwoman.png");
-  background-size: 25px, 25px, 100%;
 }
 .square .token.washerwoman:after {
   content: "Washerwoman";

index.html

@@ -29,20 +29,29 @@
   <ul class="circle size-12">
     <li>
       <div class="player">
-        <div class="token spy"></div>
+        <div class="shroud"></div>
+        <div class="token spy">
+          <span class="leaf-left"></span>
+          <span class="leaf-right"></span>
+          <span class="leaf-top1"></span>
+          <span class="leaf-orange"></span>
+        </div>
         <div class="name">Steffen</div>
       </div>
       <div class="reminder drunk">Drunk</div>
+      <div class="reminder add"></div>
     </li>
     <li>
       <div class="player">
+        <div class="shroud"></div>
         <div class="token baron"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminder drunk">Drunk</div>
+      <div class="reminder add"></div>
     </li>
     <li>
       <div class="player">
+        <div class="shroud"></div>
         <div class="token chef"></div>
         <div class="name">Steffen</div>
       </div>
@@ -50,6 +59,7 @@
     </li>
     <li>
       <div class="player dead">
+        <div class="shroud"></div>
         <div class="token empath"></div>
         <div class="name">Tot</div>
       </div>
@@ -57,6 +67,7 @@
     </li>
     <li>
       <div class="player">
+        <div class="shroud"></div>
         <div class="token imp"></div>
         <div class="name">Steffen</div>
       </div>
@@ -64,6 +75,7 @@
     </li>
     <li>
       <div class="player traveller">
+        <div class="shroud"></div>
         <div class="token mayor"></div>
         <div class="name">Traveller</div>
       </div>
@@ -71,6 +83,7 @@
     </li>
     <li>
       <div class="player traveller dead">
+        <div class="shroud"></div>
         <div class="token recluse"></div>
         <div class="name">Toter Traveller</div>
       </div>
@@ -78,6 +91,7 @@
     </li>
     <li>
       <div class="player">
+        <div class="shroud"></div>
         <div class="token butler"></div>
         <div class="name">Steffen</div>
       </div>
@@ -85,6 +99,7 @@
     </li>
     <li>
       <div class="player dead no-vote">
+        <div class="shroud"></div>
         <div class="token virgin"></div>
         <div class="name">Keine Stimme</div>
       </div>
@@ -92,6 +107,7 @@
     </li>
     <li>
       <div class="player">
+        <div class="shroud"></div>
         <div class="token ravenkeeper"></div>
         <div class="name">Steffen</div>
       </div>
@@ -99,6 +115,7 @@
     </li>
     <li>
       <div class="player">
+        <div class="shroud"></div>
         <div class="token washerwoman"></div>
         <div class="name">Steffen</div>
       </div>
@@ -106,6 +123,7 @@
     </li>
     <li>
       <div class="player">
+        <div class="shroud"></div>
         <div class="token undertaker"></div>
         <div class="name">Steffen</div>
       </div>

roles.json

@@ -0,0 +1,222 @@
+[
+  {
+    "name": "washerwoman",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": true,
+    "other-night": false,
+    "reminders": ["Townsfolk", "Decoy"],
+    "setup": false,
+    "ability": "You start knowing 1 of 2 players is a particular Townsfolk."
+  },
+  {
+    "name": "librarian",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": true,
+    "other-night": false,
+    "reminders": ["Outsider", "Decoy"],
+    "setup": false,
+    "ability": "You start knowing that 1 of 2 players is a particular Outsider. (Or that zero are in play)"
+  },
+  {
+    "name": "investigator",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": true,
+    "other-night": false,
+    "reminders": ["Minion", "Decoy"],
+    "setup": false,
+    "ability": "You start knowing 1 of 2 players is a particular Minion."
+  },
+  {
+    "name": "chef",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": true,
+    "other-night": false,
+    "reminders": [],
+    "setup": false,
+    "ability": "You start knowing how many pairs of evil players there are."
+  },
+  {
+    "name": "empath",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": true,
+    "other-night": true,
+    "reminders": [],
+    "setup": false,
+    "ability": "Each night, you learn how many of your 2 alive neighbours are evil."
+  },
+  {
+    "name": "fortuneteller",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": true,
+    "other-night": true,
+    "reminders": ["Decoy"],
+    "setup": false,
+    "ability": "Each night, choose 2 players: you learn if either is a Demon. There is 1 good player that registers falsely to you."
+  },
+  {
+    "name": "undertaker",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": false,
+    "other-night": true,
+    "reminders": ["Executed"],
+    "setup": false,
+    "ability": "Each night*, you learn which character died by execution today."
+  },
+  {
+    "name": "monk",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": false,
+    "other-night": true,
+    "reminders": ["Protected"],
+    "setup": false,
+    "ability": "Each night*, choose a player (not yourself): they are safe from the Demon tonight."
+  },
+  {
+    "name": "ravenkeeper",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": false,
+    "other-night": true,
+    "reminders": [],
+    "setup": false,
+    "ability": "If you die at night, you are woken to choose a player: you learn their character."
+  },
+  {
+    "name": "mayor",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": false,
+    "other-night": false,
+    "reminders": [],
+    "setup": false,
+    "ability": "If only 3 players live & no execution occurs, your team wins. If you die at night, another player might die instead."
+  },
+  {
+    "name": "slayer",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": false,
+    "other-night": false,
+    "reminders": ["Used"],
+    "setup": false,
+    "ability": "Once per game, during the day, publicly choose a player: if they are the Demon, they die."
+  },
+  {
+    "name": "soldier",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": false,
+    "other-night": false,
+    "reminders": [],
+    "setup": false,
+    "ability": "You are safe from the Demon."
+  },
+  {
+    "name": "virgin",
+    "set": "TB",
+    "team": "townsfolk",
+    "first-night": false,
+    "other-night": false,
+    "reminders": ["Used"],
+    "setup": false,
+    "ability": "The first time you are nominated, if the nominator is a Townsfolk, they are executed immediately."
+  },
+  {
+    "name": "butler",
+    "set": "TB",
+    "team": "outsider",
+    "first-night": true,
+    "other-night": true,
+    "reminders": ["Master"],
+    "setup": false,
+    "ability": "Each night, choose a player (not yourself): tomorrow, you may only vote if they are voting too."
+  },
+  {
+    "name": "drunk",
+    "set": "TB",
+    "team": "outsider",
+    "first-night": false,
+    "other-night": false,
+    "reminders": ["Drunk"],
+    "setup": true,
+    "ability": "You do not know you are the Drunk. You think you are a Townsfolk, but your ability malfunctions."
+  },
+  {
+    "name": "recluse",
+    "set": "TB",
+    "team": "outsider",
+    "first-night": false,
+    "other-night": false,
+    "reminders": [],
+    "setup": false,
+    "ability": "You might register as evil and as a Minion or Demon, even if dead."
+  },
+  {
+    "name": "saint",
+    "set": "TB",
+    "team": "outsider",
+    "first-night": false,
+    "other-night": false,
+    "reminders": [],
+    "setup": false,
+    "ability": "If you die by execution, your team loses."
+  },
+  {
+    "name": "baron",
+    "set": "TB",
+    "team": "minion",
+    "first-night": false,
+    "other-night": false,
+    "reminders": [],
+    "setup": true,
+    "ability": "There are extra Outsiders in play. [+2 Outsiders]"
+  },
+  {
+    "name": "poisoner",
+    "set": "TB",
+    "team": "minion",
+    "first-night": true,
+    "other-night": true,
+    "reminders": ["Poisoned"],
+    "setup": false,
+    "ability": "Each night, choose a player: their ability malfunctions tonight and tomorrow day."
+  },
+  {
+    "name": "spy",
+    "set": "TB",
+    "team": "minion",
+    "first-night": true,
+    "other-night": true,
+    "reminders": [],
+    "setup": false,
+    "ability": "Each night, you see the Grimoire. You might register as good and as a Townsfolk or Outsider, even if dead."
+  },
+  {
+    "name": "scarletwoman",
+    "set": "TB",
+    "team": "minion",
+    "first-night": false,
+    "other-night": true,
+    "reminders": ["Demon"],
+    "setup": false,
+    "ability": "If there are 5 or more players alive (Travellers don't count) and the Demon dies, you become the Demon."
+  },
+  {
+    "name": "imp",
+    "set": "TB",
+    "team": "demon",
+    "first-night": false,
+    "other-night": true,
+    "reminders": ["Die"],
+    "setup": false,
+    "ability": "Each night*, choose a player: they die. If you kill yourself this way, a Minion becomes the Imp."
+  }
+]