mirror of https://github.com/bra1n/townsquare.git
added icons and info
This commit is contained in:
Steffen
parent
5bcec74076
commit
7974e2f131
|
|
@ -27,6 +27,32 @@
|
|||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.28",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
|
||||
"integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "1.2.28",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
|
||||
"integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.28"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.13.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
|
||||
"integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.28"
|
||||
}
|
||||
},
|
||||
"@fortawesome/vue-fontawesome": {
|
||||
"version": "0.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.9.tgz",
|
||||
"integrity": "sha512-h/emhmZz+DfB2zOGLWawNwXq82UYhn9waTfUjLLmeaIqtnIyNt6kYlpQT/vzJjLZRDRvY2IEJAh1di5qKpKVpA=="
|
||||
},
|
||||
"@hapi/address": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
},
|
||||
"main": "App.vue",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.28",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.13.0",
|
||||
"@fortawesome/vue-fontawesome": "^0.1.9",
|
||||
"@vue/cli-service": "^4.2.3",
|
||||
"sass": "^1.26.3",
|
||||
"sass-loader": "^8.0.2",
|
||||
|
|
|
|||
153
src/App.vue
153
src/App.vue
|
|
@ -1,31 +1,123 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<TownSquare :is-public="isPublic"></TownSquare>
|
||||
<ul class="info">
|
||||
<li>
|
||||
{{ players.length }} <font-awesome-icon icon="users" />
|
||||
{{ teams.alive }} <font-awesome-icon icon="heartbeat" />
|
||||
{{ teams.votes }} <font-awesome-icon icon="vote-yea" />
|
||||
</li>
|
||||
<li>
|
||||
{{ teams.townsfolk }}
|
||||
<span class="townsfolk"><font-awesome-icon icon="user-friends"/></span>
|
||||
{{ teams.outsiders }}
|
||||
<span class="outsider"><font-awesome-icon v-bind:icon="teams.outsiders > 1 ? 'user-friends' : 'user'"/></span>
|
||||
{{ teams.minions }}
|
||||
<span class="minion"><font-awesome-icon v-bind:icon="teams.minions > 1 ? 'user-friends' : 'user'"/></span>
|
||||
{{ teams.demons }}
|
||||
<span class="demon"><font-awesome-icon v-bind:icon="teams.demons > 1 ? 'user-friends' : 'user'"/></span>
|
||||
<template v-if="teams.travellers">
|
||||
{{ teams.travellers }}
|
||||
<span class="traveller"
|
||||
><font-awesome-icon v-bind:icon="teams.travellers > 1 ? 'user-friends' : 'user'"/></span>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<TownSquare
|
||||
v-if="players.length >= 5"
|
||||
:is-public="isPublic"
|
||||
:players="players"
|
||||
:roles="roles"
|
||||
></TownSquare>
|
||||
<div class="controls">
|
||||
<button v-on:click="togglePublic">Toggle</button>
|
||||
<button v-on:click="addPlayer" v-bind:disabled="players.length >= 20">
|
||||
Add Player
|
||||
</button>
|
||||
<button v-on:click="togglePublic" v-bind:disabled="players.length <= 0">
|
||||
Remove Player
|
||||
</button>
|
||||
<button v-on:click="togglePublic">Select Roles</button>
|
||||
<button v-on:click="togglePublic">Randomize Roles</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TownSquare from "./components/TownSquare.vue";
|
||||
import rolesJSON from "./roles";
|
||||
import gameJSON from "./game";
|
||||
|
||||
const roles = new Map(
|
||||
rolesJSON
|
||||
.sort((a, b) => b.team.localeCompare(a.team))
|
||||
.map(role => [role.id, role])
|
||||
);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TownSquare
|
||||
},
|
||||
computed: {
|
||||
teams: function() {
|
||||
const nontravellers = this.players.filter(
|
||||
player => player.role.team !== "traveller"
|
||||
).length;
|
||||
const alive = this.players.filter(player => player.hasDied !== true)
|
||||
.length;
|
||||
return {
|
||||
...gameJSON[nontravellers - 5],
|
||||
travellers: this.players.length - nontravellers,
|
||||
alive,
|
||||
votes:
|
||||
alive +
|
||||
this.players.filter(
|
||||
player => player.hasDied === true && player.hasVoted !== true
|
||||
).length
|
||||
};
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
isPublic: false
|
||||
isPublic: true,
|
||||
players: [
|
||||
{
|
||||
name: "Steffen",
|
||||
role: roles.get("baron"),
|
||||
reminders: [{ role: "imp", name: "Die" }]
|
||||
},
|
||||
{ name: "Tino", role: roles.get("harlot"), reminders: [] },
|
||||
{ name: "Basti", role: roles.get("chef"), reminders: [] },
|
||||
{ name: "Bernd", role: roles.get("ravenkeeper"), reminders: [] },
|
||||
{ name: "Tim", role: roles.get("drunk"), reminders: [] },
|
||||
{ name: "Yann", role: roles.get("librarian"), reminders: [] },
|
||||
{ name: "Marie", role: roles.get("empath"), reminders: [] },
|
||||
{ name: "Bogdan", role: roles.get("scarletwoman"), reminders: [] },
|
||||
{ name: "Sean", role: roles.get("recluse"), reminders: [] },
|
||||
{ name: "Petra", role: roles.get("undertaker"), reminders: [] }
|
||||
],
|
||||
roles,
|
||||
set: "TB"
|
||||
}),
|
||||
methods: {
|
||||
togglePublic() {
|
||||
this.isPublic = !this.isPublic;
|
||||
},
|
||||
addPlayer() {
|
||||
const name = prompt("Player name");
|
||||
if (name) {
|
||||
this.players.push({
|
||||
name,
|
||||
role: {},
|
||||
reminders: []
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "vars.scss";
|
||||
|
||||
@font-face {
|
||||
font-family: "Papyrus";
|
||||
src: url("assets/fonts/papyrus.eot"); /* IE9*/
|
||||
|
|
@ -52,6 +144,11 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -62,4 +159,56 @@ body {
|
|||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
margin-left: -10%;
|
||||
margin-top: -5%;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
background: url("assets/demon-head.png") center center no-repeat;
|
||||
background-size: auto 100%;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 2px black;
|
||||
text-align: center;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.townsfolk {
|
||||
color: $townsfolk;
|
||||
}
|
||||
.outsider {
|
||||
color: $outsider;
|
||||
}
|
||||
.minion {
|
||||
color: $minion;
|
||||
}
|
||||
.demon {
|
||||
color: $demon;
|
||||
}
|
||||
.traveller {
|
||||
color: $traveller;
|
||||
}
|
||||
.alive,
|
||||
.votes {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,18 @@
|
|||
<li>
|
||||
<div
|
||||
class="player"
|
||||
:class="{ dead: player.hasDied, 'no-vote': player.hasVoted }"
|
||||
:class="{
|
||||
dead: player.hasDied,
|
||||
'no-vote': player.hasVoted,
|
||||
traveller: player.role.team === 'traveller'
|
||||
}"
|
||||
>
|
||||
<div class="shroud" @click="toggleStatus()"></div>
|
||||
<div class="token" @click="changeRole()" :class="[player.role.id]">
|
||||
<span class="leaf-left" v-if="player.role.firstNight"></span>
|
||||
<span class="leaf-right" v-if="player.role.otherNight"></span>
|
||||
<span
|
||||
v-if="player.role.reminders.length"
|
||||
v-if="player.role.reminders && player.role.reminders.length"
|
||||
v-bind:class="['leaf-top' + player.role.reminders.length]"
|
||||
></span>
|
||||
<span class="leaf-orange" v-if="player.role.setup"></span>
|
||||
|
|
@ -18,7 +22,7 @@
|
|||
<div class="ability" v-if="player.role.ability">
|
||||
{{ player.role.ability }}
|
||||
</div>
|
||||
<div class="name">{{ player.name }}</div>
|
||||
<div class="name" @click="changeName">{{ player.name }}</div>
|
||||
</div>
|
||||
<template v-if="player.reminders">
|
||||
<div
|
||||
|
|
@ -72,6 +76,10 @@ export default {
|
|||
this.toggleStatus();
|
||||
}
|
||||
},
|
||||
changeName() {
|
||||
const name = prompt("Player name", this.player.name);
|
||||
this.player.name = name || this.player.name;
|
||||
},
|
||||
removeReminder(reminder) {
|
||||
this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
|
||||
}
|
||||
|
|
@ -80,8 +88,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// token size
|
||||
$token: 150px;
|
||||
@import "../vars.scss";
|
||||
|
||||
/***** Player token *****/
|
||||
.circle .player {
|
||||
|
|
@ -115,7 +122,7 @@ $token: 150px;
|
|||
transform: scale(1);
|
||||
}
|
||||
&.dead .name {
|
||||
color: #999;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -151,14 +158,12 @@ $token: 150px;
|
|||
background: url("../assets/token.png") center center;
|
||||
background-size: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: black;
|
||||
margin: auto;
|
||||
font-weight: 600;
|
||||
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
|
||||
1px 1px 0 #fff, 0 0 5px rgba(0, 0, 0, 0.75);
|
||||
padding-top: $token * 0.7;
|
||||
box-sizing: border-box;
|
||||
font-family: "Papyrus", serif;
|
||||
border: 3px solid black;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
|
|
@ -235,6 +240,7 @@ $token: 150px;
|
|||
line-height: 120%;
|
||||
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
|
||||
2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.75);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/***** Ability text *****/
|
||||
|
|
@ -283,8 +289,6 @@ $token: 150px;
|
|||
display: block;
|
||||
margin: 5px ($token / -4) 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-top: $token * 0.3;
|
||||
border-radius: 50%;
|
||||
border: 3px solid black;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div id="townsquare" class="square" v-bind:class="{ public: isPublic }">
|
||||
<ul class="circle" v-bind:class="['size-' + players.length]">
|
||||
<Player
|
||||
v-for="player in players"
|
||||
:key="player.name"
|
||||
v-for="(player, index) in players"
|
||||
:key="index"
|
||||
:player="player"
|
||||
:roles="roles"
|
||||
:is-public="isPublic"
|
||||
|
|
@ -43,41 +43,17 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import rolesJSON from "../roles.json";
|
||||
import Player from "./Player";
|
||||
import Modal from "./Modal";
|
||||
|
||||
const roles = new Map(
|
||||
rolesJSON
|
||||
.sort((a, b) => b.team.localeCompare(a.team))
|
||||
.map(role => [role.id, role])
|
||||
);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
Player
|
||||
},
|
||||
props: ["isPublic"],
|
||||
props: ["isPublic", "players", "roles"],
|
||||
data() {
|
||||
return {
|
||||
players: [
|
||||
{
|
||||
name: "Steffen",
|
||||
role: roles.get("baron"),
|
||||
reminders: [{ role: "imp", name: "Die" }]
|
||||
},
|
||||
{ name: "Tino", role: roles.get("imp") },
|
||||
{ name: "Basti", role: roles.get("chef"), reminders: [] },
|
||||
{ name: "Bernd", role: roles.get("ravenkeeper"), reminders: [] },
|
||||
{ name: "Tim", role: roles.get("drunk"), reminders: [] },
|
||||
{ name: "Yann", role: roles.get("librarian"), reminders: [] },
|
||||
{ name: "Marie", role: roles.get("empath"), reminders: [] },
|
||||
{ name: "Bogdan", role: roles.get("scarletwoman"), reminders: [] },
|
||||
{ name: "Sean", role: roles.get("recluse"), reminders: [] },
|
||||
{ name: "Petra", role: roles.get("undertaker"), reminders: [] }
|
||||
],
|
||||
roles,
|
||||
selectedPlayer: false,
|
||||
availableReminders: [],
|
||||
availableRoles: []
|
||||
|
|
@ -95,6 +71,8 @@ export default {
|
|||
];
|
||||
}
|
||||
});
|
||||
this.availableReminders.push({ role: "good", name: "Good" });
|
||||
this.availableReminders.push({ role: "evil", name: "Evil" });
|
||||
},
|
||||
openRoleModal(player) {
|
||||
this.selectedPlayer = player;
|
||||
|
|
@ -104,6 +82,7 @@ export default {
|
|||
this.availableRoles.push(role);
|
||||
}
|
||||
});
|
||||
this.availableRoles.push({});
|
||||
},
|
||||
addReminder(reminder) {
|
||||
this.selectedPlayer.reminders.push(reminder);
|
||||
|
|
@ -123,7 +102,47 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../roles.scss";
|
||||
@import "../vars.scss";
|
||||
|
||||
@each $img, $fontsize in $roles {
|
||||
.token.#{$img} {
|
||||
&:before {
|
||||
background-image: url("../assets/icons/#{$img}.png");
|
||||
}
|
||||
font-size: $fontsize;
|
||||
}
|
||||
|
||||
.reminder.#{$img}:before {
|
||||
background-image: url("../assets/icons/#{$img}.png");
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
transform-origin: 0 100%;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
z-index: 25 !important;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-left: -100px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin on-circle($item-count) {
|
||||
$angle: (360 / $item-count);
|
||||
|
|
@ -155,35 +174,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
li {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
transform-origin: 0 100%;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
z-index: 25 !important;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-left: -100px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 5 through 20 {
|
||||
.circle.size-#{$i} li {
|
||||
@include on-circle($item-count: $i);
|
||||
|
|
@ -193,22 +183,10 @@ export default {
|
|||
#townsquare {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
// player circle
|
||||
.circle {
|
||||
background: url("../assets/demon-head2.png") center center no-repeat;
|
||||
background-size: 10%;
|
||||
}
|
||||
|
||||
#townsquare.public .circle {
|
||||
background-image: url("../assets/demon-head.png");
|
||||
}
|
||||
|
||||
/***** Role token modal ******/
|
||||
ul.tokens {
|
||||
list-style-type: none;
|
||||
|
|
@ -230,14 +208,12 @@ ul.tokens {
|
|||
background: url("../assets/token.png") center center;
|
||||
background-size: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: black;
|
||||
margin: 5px;
|
||||
font-weight: 600;
|
||||
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
|
||||
1px 1px 0 #fff, 0 0 5px rgba(0, 0, 0, 0.75);
|
||||
padding-top: 85px;
|
||||
box-sizing: border-box;
|
||||
font-family: "Papyrus", serif;
|
||||
border: 3px solid black;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
|
|
@ -245,16 +221,19 @@ ul.tokens {
|
|||
transition: transform 500ms ease;
|
||||
|
||||
&.townsfolk {
|
||||
box-shadow: 0 0 10px #004cff, 0 0 10px #004cff;
|
||||
box-shadow: 0 0 10px $townsfolk, 0 0 10px #004cff;
|
||||
}
|
||||
&.outsider {
|
||||
box-shadow: 0 0 10px #00d6ff, 0 0 10px #00d6ff;
|
||||
box-shadow: 0 0 10px $outsider, 0 0 10px $outsider;
|
||||
}
|
||||
&.minion {
|
||||
box-shadow: 0 0 10px #ff6900, 0 0 10px #ff6900;
|
||||
box-shadow: 0 0 10px $minion, 0 0 10px $minion;
|
||||
}
|
||||
&.demon {
|
||||
box-shadow: 0 0 10px #ff0000, 0 0 10px #ff0000;
|
||||
box-shadow: 0 0 10px $demon, 0 0 10px $demon;
|
||||
}
|
||||
&.traveller {
|
||||
box-shadow: 0 0 10px $traveller, 0 0 10px $traveller;
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -288,12 +267,10 @@ ul.reminders {
|
|||
display: block;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
border: 3px solid black;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding-top: 65px;
|
||||
transition: transform 500ms ease;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
[
|
||||
{"townsfolk": 3, "outsiders": 0, "minions": 1, "demons": 1},
|
||||
{"townsfolk": 3, "outsiders": 1, "minions": 1, "demons": 1},
|
||||
{"townsfolk": 5, "outsiders": 0, "minions": 1, "demons": 1},
|
||||
{"townsfolk": 5, "outsiders": 1, "minions": 1, "demons": 1},
|
||||
{"townsfolk": 5, "outsiders": 2, "minions": 1, "demons": 1},
|
||||
{"townsfolk": 7, "outsiders": 0, "minions": 2, "demons": 1},
|
||||
{"townsfolk": 7, "outsiders": 1, "minions": 2, "demons": 1},
|
||||
{"townsfolk": 7, "outsiders": 2, "minions": 2, "demons": 1},
|
||||
{"townsfolk": 9, "outsiders": 0, "minions": 3, "demons": 1},
|
||||
{"townsfolk": 9, "outsiders": 1, "minions": 3, "demons": 1},
|
||||
{"townsfolk": 9, "outsiders": 2, "minions": 3, "demons": 1}
|
||||
]
|
||||
13
src/main.js
13
src/main.js
|
|
@ -1,5 +1,18 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import {
|
||||
faUsers,
|
||||
faHeartbeat,
|
||||
faVoteYea,
|
||||
faUserFriends,
|
||||
faUser
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
||||
library.add(faUsers, faHeartbeat, faVoteYea, faUserFriends, faUser);
|
||||
|
||||
Vue.component("font-awesome-icon", FontAwesomeIcon);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
|
|
|
|||
|
|
@ -240,5 +240,16 @@
|
|||
"reminders": ["Die"],
|
||||
"setup": false,
|
||||
"ability": "Each night*, choose a player: they die. If you kill yourself this way, a Minion becomes the Imp."
|
||||
},
|
||||
{
|
||||
"id": "harlot",
|
||||
"name": "Harlot",
|
||||
"set": "SNV",
|
||||
"team": "traveller",
|
||||
"firstNight": false,
|
||||
"otherNight": true,
|
||||
"reminders": ["Die"],
|
||||
"setup": false,
|
||||
"ability": "Each night*, choose a living player: if they agree, you learn their character, but you both might die."
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,13 @@
|
|||
$token: 150px;
|
||||
$townsfolk: #1f65ff;
|
||||
$outsider: #46d5ff;
|
||||
$minion: #ff6900;
|
||||
$demon: #ff0000;
|
||||
$traveller: #cc04ff;
|
||||
|
||||
$roles:
|
||||
'good',
|
||||
'evil',
|
||||
'baron',
|
||||
'butler',
|
||||
'chef',
|
||||
|
|
@ -20,17 +29,6 @@ $roles:
|
|||
'scarletwoman' 75%,
|
||||
'undertaker' 85%,
|
||||
'virgin',
|
||||
'harlot',
|
||||
'washerwoman' 75%;
|
||||
|
||||
@each $img, $fontsize in $roles {
|
||||
.token.#{$img} {
|
||||
&:before {
|
||||
background-image: url('../assets/icons/#{$img}.png');
|
||||
}
|
||||
font-size: $fontsize;
|
||||
}
|
||||
|
||||
.reminder.#{$img}:before {
|
||||
background-image: url('../assets/icons/#{$img}.png');
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue