townsquare/src/components/TownInfo.vue

161 lines
3.7 KiB
Vue
Raw Normal View History

<template>
<ul class="info">
2020-04-10 09:37:06 +00:00
<li class="edition" v-bind:class="['edition-' + edition]"></li>
2020-04-28 19:47:28 +00:00
<li v-if="players.length - teams.traveler < 5">
Please add more players!
</li>
<li>
{{ players.length }} <font-awesome-icon class="players" icon="users" />
{{ teams.alive }} <font-awesome-icon class="alive" icon="heartbeat" />
{{ teams.votes }} <font-awesome-icon class="votes" icon="vote-yea" />
</li>
2020-04-11 20:55:37 +00:00
<li v-if="players.length - teams.traveler >= 5">
{{ teams.townsfolk }}
<font-awesome-icon class="townsfolk" icon="user-friends" />
2020-04-11 20:55:37 +00:00
{{ teams.outsider }}
<font-awesome-icon
class="outsider"
2020-04-11 20:55:37 +00:00
v-bind:icon="teams.outsider > 1 ? 'user-friends' : 'user'"
/>
2020-04-11 20:55:37 +00:00
{{ teams.minion }}
<font-awesome-icon
class="minion"
2020-04-11 20:55:37 +00:00
v-bind:icon="teams.minion > 1 ? 'user-friends' : 'user'"
/>
2020-04-11 20:55:37 +00:00
{{ teams.demon }}
<font-awesome-icon
class="demon"
2020-04-11 20:55:37 +00:00
v-bind:icon="teams.demon > 1 ? 'user-friends' : 'user'"
/>
2020-04-11 20:55:37 +00:00
<template v-if="teams.traveler">
{{ teams.traveler }}
<font-awesome-icon
class="traveler"
2020-04-11 20:55:37 +00:00
v-bind:icon="teams.traveler > 1 ? 'user-friends' : 'user'"
/>
</template>
</li>
</ul>
</template>
<script>
import gameJSON from "./../game";
2020-05-02 19:33:44 +00:00
import { mapState } from "vuex";
export default {
computed: {
teams: function() {
2020-05-03 21:05:17 +00:00
const { players } = this.$store.state.players;
const nonTravelers = this.$store.getters["players/nonTravelers"];
const alive = players.filter(player => player.hasDied !== true).length;
return {
2020-05-03 21:05:17 +00:00
...gameJSON[nonTravelers - 5],
traveler: players.length - nonTravelers,
alive,
votes:
alive +
2020-05-03 21:05:17 +00:00
players.filter(
player => player.hasDied === true && player.hasVoted !== true
).length
};
2020-05-02 19:33:44 +00:00
},
2020-05-03 21:05:17 +00:00
...mapState({
edition: state => state.edition,
players: state => state.players.players
})
}
};
</script>
<style lang="scss">
@import "../vars.scss";
2020-05-02 19:33:44 +00:00
// Editions
@each $img, $skipIcons in $editions {
.edition-#{$img} {
background-image: url("../assets/editions/#{$img}.png");
}
@if $skipIcons != true {
.edition-#{$img}.townsfolk {
background-image: url("../assets/editions/#{$img}-townsfolk.png");
}
.edition-#{$img}.outsider {
background-image: url("../assets/editions/#{$img}-outsider.png");
}
.edition-#{$img}.minion {
background-image: url("../assets/editions/#{$img}-minion.png");
}
.edition-#{$img}.demon {
background-image: url("../assets/editions/#{$img}-demon.png");
}
}
}
.info {
position: absolute;
display: flex;
left: 50%;
top: 50%;
width: 20%;
height: 20%;
margin-left: -10%;
margin-top: -5%;
2020-04-10 09:21:27 +00:00
padding: 50px 0 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-align: center;
padding: 0 5px;
width: 100%;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
svg {
margin-right: 10px;
}
.players {
color: #00f700;
}
.alive {
color: #ff4a50;
}
.votes {
2020-05-05 18:51:40 +00:00
color: #fff;
}
.townsfolk {
color: $townsfolk;
}
.outsider {
color: $outsider;
}
.minion {
color: $minion;
}
.demon {
color: $demon;
}
.traveler {
color: $traveler;
}
}
2020-04-10 08:59:32 +00:00
2020-04-10 09:37:06 +00:00
li.edition {
2020-04-10 08:59:32 +00:00
width: 220px;
height: 200px;
background-position: 0 center;
background-repeat: no-repeat;
2020-04-10 08:59:32 +00:00
background-size: 100% auto;
position: absolute;
top: -50px;
}
}
</style>