From bcb91edef24e55e10f437905c652c0bc3792eaac Mon Sep 17 00:00:00 2001 From: Steffen Date: Sat, 25 Apr 2020 22:19:47 +0200 Subject: [PATCH] added night reminders --- src/App.vue | 4 +- src/components/Player.vue | 103 ++++++++++++++++++++++++++++------ src/components/TownSquare.vue | 3 +- src/roles.json | 38 ++++++------- 4 files changed, 109 insertions(+), 39 deletions(-) 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" ],