From 2806ee822d5df01dd3553341561d3ecaf2514220 Mon Sep 17 00:00:00 2001 From: Steffen Date: Thu, 2 Apr 2020 22:23:40 +0200 Subject: [PATCH] added ability text --- components/Player.vue | 33 ++++++++++++++++++++ components/TownSquare.vue | 37 +++++++++++----------- roles.json | 66 ++++++++++++++++++++++++++------------- roles.scss | 49 ++++++++++++++--------------- 4 files changed, 119 insertions(+), 66 deletions(-) diff --git a/components/Player.vue b/components/Player.vue index 070337b..55f552e 100644 --- a/components/Player.vue +++ b/components/Player.vue @@ -8,7 +8,9 @@ +
{{ role.name }}
+
{{ role.ability }}
{{ player.name }}
@@ -163,6 +165,7 @@ #townsquare.public .token { background-image: url('../img/life.png'); + div { display: none; } &:before, &:after, span { display: none; } } @@ -186,6 +189,36 @@ 0 0 10px rgba(0,0,0,0.75); } + /***** Ability text *****/ + #townsquare.public .ability { display: none; } + .circle .ability { + position: absolute; + padding: 5px 10px; + top: 20px; + right: 100%; + width: 200px; + z-index: 25; + font-size: 80%; + background: rgba(0,0,0,0.7); + border-radius: 10px; + border: 3px solid black; + text-align: left; + display: none; + &:after { + content: " "; + border: 10px solid transparent; + position: absolute; + left: 100%; + width: 0; + height: 0; + border-left-color: black; + top: 20px; + margin: 0 2px; + } + } + + .player:hover .ability { display: block; } + /***** Reminder token *****/ .circle .reminder { background: url('../img/reminder.png') center center; diff --git a/components/TownSquare.vue b/components/TownSquare.vue index 65c2f6c..7fa89a9 100644 --- a/components/TownSquare.vue +++ b/components/TownSquare.vue @@ -33,7 +33,7 @@ { name: "Sean", role: "recluse" }, { name: "Petra", role: "undertaker" }, ], - roles: new Map(roles.map(role => [role.name, role])), + roles: new Map(roles.map(role => [role.id, role])), } } } @@ -49,6 +49,15 @@ transform: rotate($rot * 1deg); @if $i - 1 <= $item-count / 2 { z-index: $item-count - $i + 1; + .ability { + left: 100%; right: auto; + &:after { + border-left-color: transparent; + border-right-color: black; + left: auto; + right: 100%; + } + } } @else { z-index: $i - 1; } @@ -78,6 +87,10 @@ transform-origin: 0 100%; text-align: center; + &:hover { + z-index: 25 !important; + } + > * { margin-left: -100px; width: 200px; @@ -85,23 +98,11 @@ } } - .circle.size-5 li { @include on-circle($item-count: 5); } - .circle.size-6 li { @include on-circle($item-count: 6); } - .circle.size-7 li { @include on-circle($item-count: 7); } - .circle.size-8 li { @include on-circle($item-count: 8); } - .circle.size-9 li { @include on-circle($item-count: 9); } - .circle.size-10 li { @include on-circle($item-count: 10); } - .circle.size-11 li { @include on-circle($item-count: 11); } - .circle.size-12 li { @include on-circle($item-count: 12); } - .circle.size-13 li { @include on-circle($item-count: 13); } - .circle.size-14 li { @include on-circle($item-count: 14); } - .circle.size-15 li { @include on-circle($item-count: 15); } - .circle.size-16 li { @include on-circle($item-count: 16); } - .circle.size-17 li { @include on-circle($item-count: 17); } - .circle.size-18 li { @include on-circle($item-count: 18); } - .circle.size-19 li { @include on-circle($item-count: 19); } - .circle.size-20 li { @include on-circle($item-count: 20); } - + @for $i from 5 through 20 { + .circle.size-#{$i} li { + @include on-circle($item-count: $i); + } + } // player circle .circle { diff --git a/roles.json b/roles.json index 59e46bb..267bb16 100644 --- a/roles.json +++ b/roles.json @@ -1,6 +1,7 @@ [ { - "name": "washerwoman", + "id": "washerwoman", + "name": "Washerwoman", "set": "TB", "team": "townsfolk", "firstNight": true, @@ -10,7 +11,8 @@ "ability": "You start knowing 1 of 2 players is a particular Townsfolk." }, { - "name": "librarian", + "id": "librarian", + "name": "Librarian", "set": "TB", "team": "townsfolk", "firstNight": true, @@ -20,7 +22,8 @@ "ability": "You start knowing that 1 of 2 players is a particular Outsider. (Or that zero are in play)" }, { - "name": "investigator", + "id": "investigator", + "name": "Investigator", "set": "TB", "team": "townsfolk", "firstNight": true, @@ -30,7 +33,8 @@ "ability": "You start knowing 1 of 2 players is a particular Minion." }, { - "name": "chef", + "id": "chef", + "name": "Chef", "set": "TB", "team": "townsfolk", "firstNight": true, @@ -40,7 +44,8 @@ "ability": "You start knowing how many pairs of evil players there are." }, { - "name": "empath", + "id": "empath", + "name": "Empath", "set": "TB", "team": "townsfolk", "firstNight": true, @@ -50,7 +55,8 @@ "ability": "Each night, you learn how many of your 2 alive neighbours are evil." }, { - "name": "fortuneteller", + "id": "fortuneteller", + "name": "Fortune Teller", "set": "TB", "team": "townsfolk", "firstNight": true, @@ -60,7 +66,8 @@ "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", + "id": "undertaker", + "name": "Undertaker", "set": "TB", "team": "townsfolk", "firstNight": false, @@ -70,7 +77,8 @@ "ability": "Each night*, you learn which character died by execution today." }, { - "name": "monk", + "id": "monk", + "name": "Monk", "set": "TB", "team": "townsfolk", "firstNight": false, @@ -80,7 +88,8 @@ "ability": "Each night*, choose a player (not yourself): they are safe from the Demon tonight." }, { - "name": "ravenkeeper", + "id": "ravenkeeper", + "name": "Ravenkeeper", "set": "TB", "team": "townsfolk", "firstNight": false, @@ -90,7 +99,8 @@ "ability": "If you die at night, you are woken to choose a player: you learn their character." }, { - "name": "mayor", + "id": "mayor", + "name": "Mayor", "set": "TB", "team": "townsfolk", "firstNight": false, @@ -100,7 +110,8 @@ "ability": "If only 3 players live & no execution occurs, your team wins. If you die at night, another player might die instead." }, { - "name": "slayer", + "id": "slayer", + "name": "Slayer", "set": "TB", "team": "townsfolk", "firstNight": false, @@ -110,7 +121,8 @@ "ability": "Once per game, during the day, publicly choose a player: if they are the Demon, they die." }, { - "name": "soldier", + "id": "soldier", + "name": "Soldier", "set": "TB", "team": "townsfolk", "firstNight": false, @@ -120,7 +132,8 @@ "ability": "You are safe from the Demon." }, { - "name": "virgin", + "id": "virgin", + "name": "Virgin", "set": "TB", "team": "townsfolk", "firstNight": false, @@ -130,7 +143,8 @@ "ability": "The first time you are nominated, if the nominator is a Townsfolk, they are executed immediately." }, { - "name": "butler", + "id": "butler", + "name": "Butler", "set": "TB", "team": "outsider", "firstNight": true, @@ -140,7 +154,8 @@ "ability": "Each night, choose a player (not yourself): tomorrow, you may only vote if they are voting too." }, { - "name": "drunk", + "id": "drunk", + "name": "Drunk", "set": "TB", "team": "outsider", "firstNight": false, @@ -150,7 +165,8 @@ "ability": "You do not know you are the Drunk. You think you are a Townsfolk, but your ability malfunctions." }, { - "name": "recluse", + "id": "recluse", + "name": "Recluse", "set": "TB", "team": "outsider", "firstNight": false, @@ -160,7 +176,8 @@ "ability": "You might register as evil and as a Minion or Demon, even if dead." }, { - "name": "saint", + "id": "saint", + "name": "Saint", "set": "TB", "team": "outsider", "firstNight": false, @@ -170,7 +187,8 @@ "ability": "If you die by execution, your team loses." }, { - "name": "baron", + "id": "baron", + "name": "Baron", "set": "TB", "team": "minion", "firstNight": false, @@ -180,7 +198,8 @@ "ability": "There are extra Outsiders in play. [+2 Outsiders]" }, { - "name": "poisoner", + "id": "poisoner", + "name": "Poisoner", "set": "TB", "team": "minion", "firstNight": true, @@ -190,7 +209,8 @@ "ability": "Each night, choose a player: their ability malfunctions tonight and tomorrow day." }, { - "name": "spy", + "id": "spy", + "name": "Spy", "set": "TB", "team": "minion", "firstNight": true, @@ -200,7 +220,8 @@ "ability": "Each night, you see the Grimoire. You might register as good and as a Townsfolk or Outsider, even if dead." }, { - "name": "scarletwoman", + "id": "scarletwoman", + "name": "Scarlet Woman", "set": "TB", "team": "minion", "firstNight": false, @@ -210,7 +231,8 @@ "ability": "If there are 5 or more players alive (Travellers don't count) and the Demon dies, you become the Demon." }, { - "name": "imp", + "id": "imp", + "name": "Imp", "set": "TB", "team": "demon", "firstNight": false, diff --git a/roles.scss b/roles.scss index 8d0d61e..31197b7 100644 --- a/roles.scss +++ b/roles.scss @@ -1,35 +1,32 @@ $roles: - 'baron' 'Baron', - 'butler' 'Butler', - 'chef' 'Chef', - 'drunk' 'Drunk', - 'empath' 'Empath', - 'fortuneteller' 'Fortune Teller', - 'imp' 'Imp', - 'investigator' 'Investigator', - 'librarian' 'Librarian', - 'mayor' 'Mayor', - 'monk' 'Monk', - 'poisoner' 'Poisoner', - 'recluse' 'Recluse', - 'ravenkeeper' 'Ravenkeeper' 80%, - 'saint' 'Saint', - 'slayer' 'Slayer', - 'soldier' 'Soldier', - 'spy' 'Spy', - 'scarletwoman' 'Scarlet Woman' 80%, - 'undertaker' 'Undertaker' 85%, - 'virgin' 'Virgin', - 'washerwoman' 'Washerwoman' 75%; + 'baron', + 'butler', + 'chef', + 'drunk', + 'empath', + 'fortuneteller', + 'imp', + 'investigator', + 'librarian', + 'mayor', + 'monk', + 'poisoner', + 'recluse', + 'ravenkeeper' 80%, + 'saint', + 'slayer', + 'soldier', + 'spy', + 'scarletwoman' 80%, + 'undertaker' 85%, + 'virgin', + 'washerwoman' 75%; -@each $img, $name, $fontsize in $roles { +@each $img, $fontsize in $roles { .token.#{$img} { &:before { background-image: url('../img/icon-#{$img}.png'); } - &:after { - content: '#{$name}'; - } font-size: $fontsize; }