added ability text

This commit is contained in:
Steffen 2020-04-02 22:23:40 +02:00
parent 5b2fb9743b
commit 2806ee822d
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
4 changed files with 119 additions and 66 deletions

View File

@ -8,7 +8,9 @@
<span class="leaf-right" v-if="role.otherNight"></span>
<span v-if="role.reminders.length" v-bind:class="['leaf-top' + role.reminders.length]"></span>
<span class="leaf-orange" v-if="role.setup"></span>
<div>{{ role.name }}</div>
</div>
<div class="ability" v-if="role.ability">{{ role.ability }}</div>
<div class="name">{{ player.name }}</div>
</div>
<div class="reminder add"></div>
@ -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;

View File

@ -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 {

View File

@ -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,

View File

@ -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;
}