diff --git a/src/App.vue b/src/App.vue
index 674fc0b..c76295a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -233,8 +233,8 @@ export default {
otherNight.push(role.otherNight);
}
});
- firstNight.sort();
- otherNight.sort();
+ firstNight.sort((a, b) => a - b);
+ otherNight.sort((a, b) => a - b);
newPlayers.forEach(player => {
player.firstNight = Math.max(
firstNight.indexOf(player.role.firstNight),
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 5edcb6d..5f56f94 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -14,11 +14,11 @@
{{ player.firstNight }}.
- {{ player.role.firstNightReminder }}
+ {{ player.role.firstNightReminder | handleEmojis }}
{{ player.otherNight }}.
- {{ player.role.otherNightReminder }}
+ {{ player.role.otherNightReminder | handleEmojis }}
@@ -74,6 +74,9 @@ export default {
data() {
return {};
},
+ filters: {
+ handleEmojis: text => text.replace(/:([^: ]+?):/g, "").replace(/ •/g, "\n•")
+ },
methods: {
takeScreenshot() {
const { width, height, x, y } = this.$refs.player.getBoundingClientRect();
@@ -161,6 +164,7 @@ export default {
/****** Life token *******/
.player {
+ z-index: 2;
.life {
border-radius: 50%;
height: $token + 6px;
@@ -287,12 +291,16 @@ export default {
/**** Night reminders ****/
.player .night {
position: absolute;
- top: 40%;
+ height: 100%;
width: 100%;
z-index: 2;
cursor: pointer;
opacity: 1;
transition: opacity 200ms;
+ display: flex;
+ top: -16px;
+ align-items: center;
+ pointer-events: none;
#townsquare.public & {
opacity: 0;
@@ -303,22 +311,71 @@ export default {
opacity: 0;
}
- &.first em {
- left: -15px;
- background: linear-gradient(
- 180deg,
- rgba(0, 0, 0, 1) 0%,
- rgba(147, 0, 0, 1) 100%
- );
+ span {
+ display: flex;
+ position: absolute;
+ padding: 5px 10px 5px 30px;
+ width: 350px;
+ z-index: 25;
+ font-size: 70%;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ border: 3px solid black;
+ filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
+ text-align: left;
+ align-items: center;
+ opacity: 0;
+ transition: opacity 200ms ease-in-out;
+
+ &:before {
+ transform: rotate(-90deg);
+ transform-origin: center top;
+ left: -98px;
+ top: 50%;
+ font-size: 100%;
+ position: absolute;
+ font-weight: bold;
+ text-align: center;
+ width: 200px;
+ }
+
+ &:after {
+ content: " ";
+ border: 10px solid transparent;
+ width: 0;
+ height: 0;
+ position: absolute;
+ }
}
- &.other em {
- right: -15px;
+ &.first span {
+ right: 120%;
background: linear-gradient(
- 180deg,
- rgba(0, 0, 0, 1) 0%,
- rgba(7, 0, 147, 1) 100%
+ to right,
+ $townsfolk 0%,
+ rgba(0, 0, 0, 0.5) 20%
);
+ &:before {
+ content: "First Night";
+ }
+ &:after {
+ border-left-color: $townsfolk;
+ margin-left: 3px;
+ left: 100%;
+ }
+ }
+
+ &.other span {
+ left: 120%;
+ background: linear-gradient(to right, $demon 0%, rgba(0, 0, 0, 0.5) 20%);
+ &:before {
+ content: "Other Nights";
+ }
+ &:after {
+ right: 100%;
+ margin-right: 3px;
+ border-right-color: $demon;
+ }
}
em {
@@ -328,15 +385,29 @@ export default {
height: 40px;
text-align: center;
line-height: 37px;
- top: -20px;
border-radius: 50%;
border: 3px solid black;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
font-weight: bold;
opacity: 1;
+ pointer-events: all;
transition: opacity 200ms;
}
+ &.first em {
+ left: -15px;
+ background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, $townsfolk 100%);
+ }
+
+ &.other em {
+ right: -15px;
+ background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, $demon 100%);
+ }
+
+ em:hover + span {
+ opacity: 1;
+ }
+
#app.screenshot & {
display: none;
}
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index d971112..3a4c1d7 100644
--- a/src/components/TownSquare.vue
+++ b/src/components/TownSquare.vue
@@ -212,8 +212,7 @@ export default {
z-index: $item-count - $i + 1;
} @else {
z-index: $i - 1;
- .ability,
- .night span {
+ .ability {
right: 120%;
left: auto;
&:before {
diff --git a/src/roles.json b/src/roles.json
index 18f2c5e..800936a 100644
--- a/src/roles.json
+++ b/src/roles.json
@@ -5,7 +5,7 @@
"edition": "tb",
"team": "townsfolk",
"firstNight": 15,
- "firstNightReminder": "",
+ "firstNightReminder": ":eye: Show the character token of a Townsfolk in play. Point to two players, one of which is that character. :eye-slash:",
"otherNight": 0,
"otherNightReminder": "",
"reminders": [
@@ -21,7 +21,7 @@
"edition": "tb",
"team": "townsfolk",
"firstNight": 16,
- "firstNightReminder": "",
+ "firstNightReminder": ":eye: Show the character token of a Outsider in play. Point to two players, one of which is that character. :eye-slash:",
"otherNight": 0,
"otherNightReminder": "",
"reminders": [
@@ -37,7 +37,7 @@
"edition": "tb",
"team": "townsfolk",
"firstNight": 17,
- "firstNightReminder": "",
+ "firstNightReminder": ":eye: Show the character token of a Minion in play. Point to two players, one of which is that character. :eye-slash:",
"otherNight": 0,
"otherNightReminder": "",
"reminders": [
@@ -53,7 +53,7 @@
"edition": "tb",
"team": "townsfolk",
"firstNight": 18,
- "firstNightReminder": "",
+ "firstNightReminder": ":eye: Show the finger signal (0, 1, 2, …) for the number of pairs of neighbouring evil players. :eye-slash:",
"otherNight": 0,
"otherNightReminder": "",
"reminders": [],
@@ -66,9 +66,9 @@
"edition": "tb",
"team": "townsfolk",
"firstNight": 19,
- "firstNightReminder": "",
+ "firstNightReminder": ":eye: Show the finger signal (0, 1, 2) for the number of evil alive neighbours of the Empath. :eye-slash:",
"otherNight": 37,
- "otherNightReminder": "",
+ "otherNightReminder": ":eye: Show the finger signal (0, 1, 2) for the number of evil neighbours. :eye-slash:",
"reminders": [],
"setup": false,
"ability": "Each night, you learn how many of your 2 alive neighbours are evil."
@@ -79,9 +79,9 @@
"edition": "tb",
"team": "townsfolk",
"firstNight": 20,
- "firstNightReminder": "",
+ "firstNightReminder": ":eye: The Fortune Teller points to two players. Give the head signal (nod yes, shake no) for whether one of those players is the Demon. :eye-slash:",
"otherNight": 38,
- "otherNightReminder": "",
+ "otherNightReminder": ":eye: The Fortune Teller points to two players. Show the head signal (nod “yes”, shake “no”) for whether one of those players is the Demon. :eye-slash:",
"reminders": [
"Decoy"
],
@@ -96,7 +96,7 @@
"firstNight": 0,
"firstNightReminder": "",
"otherNight": 40,
- "otherNightReminder": "",
+ "otherNightReminder": ":question-circle: If a player was executed today: :eye: Show that player’s character token. :eye-slash:",
"reminders": [
"Executed"
],
@@ -111,7 +111,7 @@
"firstNight": 0,
"firstNightReminder": "",
"otherNight": 8,
- "otherNightReminder": "",
+ "otherNightReminder": "The previously protected player is no longer protected. :plus-circle: :eye: The Monk points to a player not themself. :eye-slash: Mark that player “Protected”. :plus-circle:",
"reminders": [
"Protected"
],
@@ -126,7 +126,7 @@
"firstNight": 0,
"firstNightReminder": "",
"otherNight": 35,
- "otherNightReminder": "",
+ "otherNightReminder": ":question-circle: If the Ravenkeeper died tonight: :eye: The Ravenkeeper points to a player. Show that player’s character token. :eye-slash:",
"reminders": [],
"setup": false,
"ability": "If you die at night, you are woken to choose a player: you learn their character."
@@ -193,9 +193,9 @@
"edition": "tb",
"team": "outsider",
"firstNight": 21,
- "firstNightReminder": "",
+ "firstNightReminder": ":eye: The Butler points to a player. :eye-slash: Mark that player as “Master”. :plus-circle:",
"otherNight": 39,
- "otherNightReminder": "",
+ "otherNightReminder": ":eye: The Butler points to a player. :eye-slash: Mark that player as “Master”. :plus-circle:",
"reminders": [
"Master"
],
@@ -262,9 +262,9 @@
"edition": "tb",
"team": "minion",
"firstNight": 4,
- "firstNightReminder": "",
+ "firstNightReminder": ":eye: The Poisoner points to a player. :eye-slash: That player is poisoned. :plus-circle:",
"otherNight": 3,
- "otherNightReminder": "",
+ "otherNightReminder": "The previously poisoned player is no longer poisoned. :plus-circle: :eye: The Poisoner points to a player. :eye-slash: That player is poisoned. :plus-circle:",
"reminders": [
"Poisoned"
],
@@ -277,9 +277,9 @@
"edition": "tb",
"team": "minion",
"firstNight": 26,
- "firstNightReminder": "",
+ "firstNightReminder": ":eye: Show the Grimoire to the Spy for as long as they need. :eye-slash:",
"otherNight": 47,
- "otherNightReminder": "",
+ "otherNightReminder": ":eye: Show the Grimoire to the Spy for as long as they need. :eye-slash:",
"reminders": [],
"setup": false,
"ability": "Each night, you see the Grimoire. You might register as good and as a Townsfolk or Outsider, even if dead."
@@ -292,7 +292,7 @@
"firstNight": 0,
"firstNightReminder": "",
"otherNight": 13,
- "otherNightReminder": "",
+ "otherNightReminder": ":question-circle: If the Scarlet Woman became the Demon today: :eye: Show the “You are” card, then the demon token. :eye-slash:",
"reminders": [
"Demon"
],
@@ -307,7 +307,7 @@
"firstNight": 0,
"firstNightReminder": "",
"otherNight": 18,
- "otherNightReminder": "",
+ "otherNightReminder": ":eye: The Imp points to a player. :eye-slash: That player dies. :plus-circle: If the Imp chose themself: • Replace the character of 1 alive minion with a spare Imp token. :plus-circle: • :eye: Wake the new Imp. Show the “You are” card, then the Imp token. :eye-slash:",
"reminders": [
"Die"
],