martyn
/
townsquare
mirror of https://github.com/bra1n/townsquare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/Player.vue
View File

@ -8,7 +8,9 @@
<span class="leaf-right" v-if="role.otherNight"></span> <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 v-if="role.reminders.length" v-bind:class="['leaf-top' + role.reminders.length]"></span>
<span class="leaf-orange" v-if="role.setup"></span> <span class="leaf-orange" v-if="role.setup"></span>
<div>{{ role.name }}</div>
</div> </div>
<div class="ability" v-if="role.ability">{{ role.ability }}</div>
<div class="name">{{ player.name }}</div> <div class="name">{{ player.name }}</div>
</div> </div>
<div class="reminder add"></div> <div class="reminder add"></div>
@ -163,6 +165,7 @@
#townsquare.public .token { #townsquare.public .token {
background-image: url('../img/life.png'); background-image: url('../img/life.png');
div { display: none; }
&:before, &:after, span { display: none; } &:before, &:after, span { display: none; }
} }
@ -186,6 +189,36 @@
0 0 10px rgba(0,0,0,0.75); 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 *****/ /***** Reminder token *****/
.circle .reminder { .circle .reminder {
background: url('../img/reminder.png') center center; background: url('../img/reminder.png') center center;

37
components/TownSquare.vue
View File

@ -33,7 +33,7 @@
{ name: "Sean", role: "recluse" }, { name: "Sean", role: "recluse" },
{ name: "Petra", role: "undertaker" }, { 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); transform: rotate($rot * 1deg);
@if $i - 1 <= $item-count / 2 { @if $i - 1 <= $item-count / 2 {
z-index: $item-count - $i + 1; 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 { } @else {
z-index: $i - 1; z-index: $i - 1;
} }
@ -78,6 +87,10 @@
transform-origin: 0 100%; transform-origin: 0 100%;
text-align: center; text-align: center;
&:hover {
z-index: 25 !important;
}
> * { > * {
margin-left: -100px; margin-left: -100px;
width: 200px; width: 200px;
@ -85,23 +98,11 @@
} }
} }
.circle.size-5 li { @include on-circle($item-count: 5); } @for $i from 5 through 20 {
.circle.size-6 li { @include on-circle($item-count: 6); } .circle.size-#{$i} li {
.circle.size-7 li { @include on-circle($item-count: 7); } @include on-circle($item-count: $i);
.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); }
// player circle // player circle
.circle { .circle {

66
roles.json
View File

@ -1,6 +1,7 @@
[ [
{ {
"name": "washerwoman", "id": "washerwoman",
"name": "Washerwoman",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": true, "firstNight": true,
@ -10,7 +11,8 @@
"ability": "You start knowing 1 of 2 players is a particular Townsfolk." "ability": "You start knowing 1 of 2 players is a particular Townsfolk."
}, },
{ {
"name": "librarian", "id": "librarian",
"name": "Librarian",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": true, "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)" "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", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": true, "firstNight": true,
@ -30,7 +33,8 @@
"ability": "You start knowing 1 of 2 players is a particular Minion." "ability": "You start knowing 1 of 2 players is a particular Minion."
}, },
{ {
"name": "chef", "id": "chef",
"name": "Chef",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": true, "firstNight": true,
@ -40,7 +44,8 @@
"ability": "You start knowing how many pairs of evil players there are." "ability": "You start knowing how many pairs of evil players there are."
}, },
{ {
"name": "empath", "id": "empath",
"name": "Empath",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": true, "firstNight": true,
@ -50,7 +55,8 @@
"ability": "Each night, you learn how many of your 2 alive neighbours are evil." "ability": "Each night, you learn how many of your 2 alive neighbours are evil."
}, },
{ {
"name": "fortuneteller", "id": "fortuneteller",
"name": "Fortune Teller",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": true, "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." "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", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": false, "firstNight": false,
@ -70,7 +77,8 @@
"ability": "Each night*, you learn which character died by execution today." "ability": "Each night*, you learn which character died by execution today."
}, },
{ {
"name": "monk", "id": "monk",
"name": "Monk",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": false, "firstNight": false,
@ -80,7 +88,8 @@
"ability": "Each night*, choose a player (not yourself): they are safe from the Demon tonight." "ability": "Each night*, choose a player (not yourself): they are safe from the Demon tonight."
}, },
{ {
"name": "ravenkeeper", "id": "ravenkeeper",
"name": "Ravenkeeper",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": false, "firstNight": false,
@ -90,7 +99,8 @@
"ability": "If you die at night, you are woken to choose a player: you learn their character." "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", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": false, "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." "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", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": false, "firstNight": false,
@ -110,7 +121,8 @@
"ability": "Once per game, during the day, publicly choose a player: if they are the Demon, they die." "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", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": false, "firstNight": false,
@ -120,7 +132,8 @@
"ability": "You are safe from the Demon." "ability": "You are safe from the Demon."
}, },
{ {
"name": "virgin", "id": "virgin",
"name": "Virgin",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"firstNight": false, "firstNight": false,
@ -130,7 +143,8 @@
"ability": "The first time you are nominated, if the nominator is a Townsfolk, they are executed immediately." "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", "set": "TB",
"team": "outsider", "team": "outsider",
"firstNight": true, "firstNight": true,
@ -140,7 +154,8 @@
"ability": "Each night, choose a player (not yourself): tomorrow, you may only vote if they are voting too." "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", "set": "TB",
"team": "outsider", "team": "outsider",
"firstNight": false, "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." "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", "set": "TB",
"team": "outsider", "team": "outsider",
"firstNight": false, "firstNight": false,
@ -160,7 +176,8 @@
"ability": "You might register as evil and as a Minion or Demon, even if dead." "ability": "You might register as evil and as a Minion or Demon, even if dead."
}, },
{ {
"name": "saint", "id": "saint",
"name": "Saint",
"set": "TB", "set": "TB",
"team": "outsider", "team": "outsider",
"firstNight": false, "firstNight": false,
@ -170,7 +187,8 @@
"ability": "If you die by execution, your team loses." "ability": "If you die by execution, your team loses."
}, },
{ {
"name": "baron", "id": "baron",
"name": "Baron",
"set": "TB", "set": "TB",
"team": "minion", "team": "minion",
"firstNight": false, "firstNight": false,
@ -180,7 +198,8 @@
"ability": "There are extra Outsiders in play. [+2 Outsiders]" "ability": "There are extra Outsiders in play. [+2 Outsiders]"
}, },
{ {
"name": "poisoner", "id": "poisoner",
"name": "Poisoner",
"set": "TB", "set": "TB",
"team": "minion", "team": "minion",
"firstNight": true, "firstNight": true,
@ -190,7 +209,8 @@
"ability": "Each night, choose a player: their ability malfunctions tonight and tomorrow day." "ability": "Each night, choose a player: their ability malfunctions tonight and tomorrow day."
}, },
{ {
"name": "spy", "id": "spy",
"name": "Spy",
"set": "TB", "set": "TB",
"team": "minion", "team": "minion",
"firstNight": true, "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." "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", "set": "TB",
"team": "minion", "team": "minion",
"firstNight": false, "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." "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", "set": "TB",
"team": "demon", "team": "demon",
"firstNight": false, "firstNight": false,

49
roles.scss
View File

@ -1,35 +1,32 @@
$roles: $roles:
'baron' 'Baron', 'baron',
'butler' 'Butler', 'butler',
'chef' 'Chef', 'chef',
'drunk' 'Drunk', 'drunk',
'empath' 'Empath', 'empath',
'fortuneteller' 'Fortune Teller', 'fortuneteller',
'imp' 'Imp', 'imp',
'investigator' 'Investigator', 'investigator',
'librarian' 'Librarian', 'librarian',
'mayor' 'Mayor', 'mayor',
'monk' 'Monk', 'monk',
'poisoner' 'Poisoner', 'poisoner',
'recluse' 'Recluse', 'recluse',
'ravenkeeper' 'Ravenkeeper' 80%, 'ravenkeeper' 80%,
'saint' 'Saint', 'saint',
'slayer' 'Slayer', 'slayer',
'soldier' 'Soldier', 'soldier',
'spy' 'Spy', 'spy',
'scarletwoman' 'Scarlet Woman' 80%, 'scarletwoman' 80%,
'undertaker' 'Undertaker' 85%, 'undertaker' 85%,
'virgin' 'Virgin', 'virgin',
'washerwoman' 'Washerwoman' 75%; 'washerwoman' 75%;
@each $img, $name, $fontsize in $roles { @each $img, $fontsize in $roles {
.token.#{$img} { .token.#{$img} {
&:before { &:before {
background-image: url('../img/icon-#{$img}.png'); background-image: url('../img/icon-#{$img}.png');
} }
&:after {
content: '#{$name}';
}
font-size: $fontsize; font-size: $fontsize;
} }