2020-04-01 20:57:14 +00:00
|
|
|
<template>
|
|
|
|
<li>
|
2020-04-05 17:50:33 +00:00
|
|
|
<div
|
|
|
|
class="player"
|
2020-04-05 19:50:06 +00:00
|
|
|
:class="{
|
|
|
|
dead: player.hasDied,
|
|
|
|
'no-vote': player.hasVoted,
|
2020-04-10 15:48:20 +00:00
|
|
|
traveler: player.role && player.role.team === 'traveler'
|
2020-04-05 19:50:06 +00:00
|
|
|
}"
|
2020-04-05 17:50:33 +00:00
|
|
|
>
|
2020-04-01 20:57:14 +00:00
|
|
|
<div class="shroud" @click="toggleStatus()"></div>
|
2020-04-08 19:30:55 +00:00
|
|
|
<div class="life" @click="toggleStatus()"></div>
|
2020-04-15 20:40:58 +00:00
|
|
|
<Token :role="player.role" @set-role="setRole" />
|
2020-04-05 17:50:33 +00:00
|
|
|
<div class="ability" v-if="player.role.ability">
|
|
|
|
{{ player.role.ability }}
|
|
|
|
</div>
|
2020-04-05 20:54:15 +00:00
|
|
|
<div class="name" @click="changeName">
|
|
|
|
{{ player.name }}
|
|
|
|
<span class="remove" @click.stop="$emit('remove-player', player)">
|
|
|
|
<font-awesome-icon icon="times-circle" />
|
|
|
|
</span>
|
|
|
|
</div>
|
2020-04-01 20:57:14 +00:00
|
|
|
</div>
|
2020-04-05 17:50:33 +00:00
|
|
|
<template v-if="player.reminders">
|
|
|
|
<div
|
|
|
|
class="reminder"
|
|
|
|
v-bind:key="reminder.role + ' ' + reminder.name"
|
|
|
|
v-for="reminder in player.reminders"
|
|
|
|
v-bind:class="[reminder.role]"
|
|
|
|
@click="removeReminder(reminder)"
|
|
|
|
>
|
|
|
|
{{ reminder.name }}
|
|
|
|
</div>
|
|
|
|
</template>
|
2020-04-04 14:14:25 +00:00
|
|
|
<div class="reminder add" @click="$emit('add-reminder', player)"></div>
|
2020-04-01 20:57:14 +00:00
|
|
|
</li>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-04-15 20:40:58 +00:00
|
|
|
import Token from "./Token";
|
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
export default {
|
2020-04-15 20:40:58 +00:00
|
|
|
components: {
|
|
|
|
Token
|
|
|
|
},
|
2020-04-05 17:50:33 +00:00
|
|
|
props: {
|
|
|
|
player: {
|
|
|
|
type: Object,
|
|
|
|
required: true
|
2020-04-01 20:57:14 +00:00
|
|
|
},
|
2020-04-05 17:50:33 +00:00
|
|
|
roles: {
|
|
|
|
type: Map,
|
|
|
|
required: true
|
2020-04-01 20:57:14 +00:00
|
|
|
},
|
2020-04-05 17:50:33 +00:00
|
|
|
isPublic: {
|
|
|
|
type: Boolean,
|
|
|
|
required: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggleStatus() {
|
2020-04-08 19:30:55 +00:00
|
|
|
if (this.isPublic) {
|
2020-04-05 17:50:33 +00:00
|
|
|
if (!this.player.hasDied) {
|
2020-04-08 19:30:55 +00:00
|
|
|
this.$set(this.player, "hasDied", true);
|
|
|
|
} else if (this.player.hasVoted) {
|
2020-04-05 17:50:33 +00:00
|
|
|
this.$set(this.player, "hasVoted", false);
|
2020-04-08 19:30:55 +00:00
|
|
|
this.$set(this.player, "hasDied", false);
|
|
|
|
} else {
|
|
|
|
this.$set(this.player, "hasVoted", true);
|
2020-04-01 20:57:14 +00:00
|
|
|
}
|
2020-04-05 17:50:33 +00:00
|
|
|
} else {
|
2020-04-08 19:30:55 +00:00
|
|
|
this.$set(this.player, "hasDied", !this.player.hasDied);
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
|
|
|
},
|
2020-04-15 20:40:58 +00:00
|
|
|
setRole() {
|
2020-04-08 19:30:55 +00:00
|
|
|
this.$emit("set-role", this.player);
|
2020-04-05 17:50:33 +00:00
|
|
|
},
|
2020-04-05 19:50:06 +00:00
|
|
|
changeName() {
|
|
|
|
const name = prompt("Player name", this.player.name);
|
|
|
|
this.player.name = name || this.player.name;
|
|
|
|
},
|
2020-04-05 17:50:33 +00:00
|
|
|
removeReminder(reminder) {
|
|
|
|
this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
|
2020-04-01 20:57:14 +00:00
|
|
|
}
|
|
|
|
}
|
2020-04-05 17:50:33 +00:00
|
|
|
};
|
2020-04-01 20:57:14 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2020-04-05 19:50:06 +00:00
|
|
|
@import "../vars.scss";
|
2020-04-01 20:57:14 +00:00
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
/***** Player token *****/
|
|
|
|
.circle .player {
|
|
|
|
margin-bottom: 10px;
|
2020-04-08 19:30:55 +00:00
|
|
|
padding-top: $token + 6px;
|
2020-04-01 20:57:14 +00:00
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
.shroud {
|
2020-04-10 09:21:27 +00:00
|
|
|
top: 0;
|
|
|
|
left: 0;
|
2020-04-05 17:50:33 +00:00
|
|
|
position: absolute;
|
2020-04-10 09:21:27 +00:00
|
|
|
width: 100%;
|
2020-04-05 17:50:33 +00:00
|
|
|
height: 2/3 * $token;
|
|
|
|
cursor: pointer;
|
2020-04-10 09:21:27 +00:00
|
|
|
transform: rotateX(0deg);
|
2020-04-08 19:30:55 +00:00
|
|
|
transform-origin: top center;
|
2020-04-10 09:21:27 +00:00
|
|
|
transition: transform 200ms ease-in-out;
|
2020-04-05 17:50:33 +00:00
|
|
|
z-index: 2;
|
2020-04-10 18:46:52 +00:00
|
|
|
filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
|
2020-04-10 09:21:27 +00:00
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: " ";
|
|
|
|
background: url("../assets/shroud.png") center -10px no-repeat;
|
|
|
|
background-size: auto 100%;
|
|
|
|
position: absolute;
|
|
|
|
margin-left: -2/6 * $token;
|
|
|
|
width: 2/3 * $token;
|
|
|
|
height: 2/3 * $token;
|
|
|
|
left: 50%;
|
|
|
|
top: -30px;
|
|
|
|
opacity: 0;
|
|
|
|
transform: perspective(400px) scale(1.5);
|
|
|
|
transform-origin: top center;
|
|
|
|
transition: all 200ms ease-in-out;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover:before {
|
2020-04-05 17:50:33 +00:00
|
|
|
opacity: 0.5;
|
|
|
|
top: -10px;
|
2020-04-04 15:25:11 +00:00
|
|
|
transform: scale(1);
|
|
|
|
}
|
2020-04-01 20:57:14 +00:00
|
|
|
}
|
|
|
|
|
2020-04-10 09:21:27 +00:00
|
|
|
&.dead .shroud:before {
|
2020-04-05 17:50:33 +00:00
|
|
|
opacity: 1;
|
|
|
|
top: 0;
|
2020-04-08 19:30:55 +00:00
|
|
|
transform: perspective(400px) scale(1);
|
2020-04-01 20:57:14 +00:00
|
|
|
}
|
2020-04-05 17:50:33 +00:00
|
|
|
&.dead .name {
|
2020-04-05 19:50:06 +00:00
|
|
|
opacity: 0.5;
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
|
|
|
}
|
2020-04-01 20:57:14 +00:00
|
|
|
|
2020-04-08 19:30:55 +00:00
|
|
|
/****** Life token *******/
|
2020-04-10 09:21:27 +00:00
|
|
|
.player {
|
2020-04-08 19:30:55 +00:00
|
|
|
.life {
|
2020-04-10 09:21:27 +00:00
|
|
|
border-radius: 50%;
|
|
|
|
height: $token + 6px;
|
|
|
|
width: $token + 6px;
|
|
|
|
background: url("../assets/life.png") center center;
|
|
|
|
background-size: 100%;
|
|
|
|
border: 3px solid black;
|
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
|
cursor: pointer;
|
|
|
|
transition: transform 200ms ease-in-out;
|
|
|
|
transform: perspective(400px) rotateY(180deg);
|
|
|
|
backface-visibility: hidden;
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
top: 0;
|
|
|
|
margin-left: ($token + 6) / -2;
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
|
|
|
|
2020-04-08 19:30:55 +00:00
|
|
|
&.dead {
|
|
|
|
&.no-vote .life:after {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life {
|
|
|
|
background-image: url("../assets/death.png");
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
content: " ";
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
|
|
background: url("../assets/vote.png") center center no-repeat;
|
|
|
|
background-size: 50%;
|
|
|
|
height: $token + 3px;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-04-15 15:30:26 +00:00
|
|
|
|
|
|
|
&.traveler .life {
|
|
|
|
filter: grayscale(100%);
|
|
|
|
}
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
|
|
|
|
2020-04-10 09:21:27 +00:00
|
|
|
#townsquare.public .player {
|
|
|
|
.shroud {
|
|
|
|
transform: perspective(400px) rotateX(90deg);
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life {
|
|
|
|
transform: perspective(400px) rotateY(0deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
/***** Role token ******/
|
2020-04-15 20:40:58 +00:00
|
|
|
.player .token {
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
top: 0;
|
|
|
|
margin-left: ($token + 6) / -2;
|
2020-04-08 19:30:55 +00:00
|
|
|
height: $token + 6px;
|
|
|
|
width: $token + 6px;
|
|
|
|
transition: transform 200ms ease-in-out;
|
|
|
|
transform: perspective(400px) rotateY(0deg);
|
|
|
|
backface-visibility: hidden;
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
2020-04-01 20:57:14 +00:00
|
|
|
|
2020-04-15 20:40:58 +00:00
|
|
|
#townsquare.public .circle .token {
|
2020-04-08 19:30:55 +00:00
|
|
|
transform: perspective(400px) rotateY(-180deg);
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
2020-04-01 20:57:14 +00:00
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
/***** Player name *****/
|
|
|
|
.name {
|
|
|
|
font-size: 120%;
|
|
|
|
line-height: 120%;
|
2020-04-05 20:54:15 +00:00
|
|
|
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1))
|
2020-04-08 20:42:51 +00:00
|
|
|
drop-shadow(0 0 1px rgba(0, 0, 0, 1)) drop-shadow(0 0 1px rgba(0, 0, 0, 1));
|
2020-04-05 19:50:06 +00:00
|
|
|
cursor: pointer;
|
2020-04-05 20:54:15 +00:00
|
|
|
span {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
&:hover span {
|
|
|
|
display: inline-block;
|
|
|
|
&:hover {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
}
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/***** Ability text *****/
|
|
|
|
#townsquare.public .ability {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.circle .ability {
|
|
|
|
position: absolute;
|
|
|
|
padding: 5px 10px;
|
|
|
|
top: 20px;
|
|
|
|
right: 100%;
|
2020-04-11 21:06:15 +00:00
|
|
|
width: 250px;
|
2020-04-05 17:50:33 +00:00
|
|
|
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;
|
2020-04-02 20:23:40 +00:00
|
|
|
position: absolute;
|
2020-04-05 17:50:33 +00:00
|
|
|
left: 100%;
|
|
|
|
width: 0;
|
|
|
|
height: 0;
|
|
|
|
border-left-color: black;
|
2020-04-02 20:23:40 +00:00
|
|
|
top: 20px;
|
2020-04-05 17:50:33 +00:00
|
|
|
margin: 0 2px;
|
2020-04-02 20:23:40 +00:00
|
|
|
}
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
2020-04-02 20:23:40 +00:00
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
.player:hover .ability {
|
|
|
|
display: block;
|
|
|
|
}
|
2020-04-02 20:23:40 +00:00
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
/***** Reminder token *****/
|
|
|
|
.circle .reminder {
|
|
|
|
background: url("../assets/reminder.png") center center;
|
|
|
|
background-size: 100%;
|
|
|
|
width: $token / 2;
|
|
|
|
height: $token / 2;
|
|
|
|
color: black;
|
|
|
|
font-size: 50%;
|
|
|
|
font-weight: bold;
|
|
|
|
display: block;
|
|
|
|
margin: 5px ($token / -4) 0;
|
|
|
|
text-align: center;
|
2020-04-08 20:42:51 +00:00
|
|
|
padding-top: $token * 0.3 + 2px;
|
2020-04-05 17:50:33 +00:00
|
|
|
border-radius: 50%;
|
2020-04-08 20:42:51 +00:00
|
|
|
line-height: 90%;
|
2020-04-05 17:50:33 +00:00
|
|
|
border: 3px solid black;
|
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
|
transition: all 200ms;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:before,
|
|
|
|
&:after {
|
|
|
|
content: " ";
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2020-04-01 20:57:14 +00:00
|
|
|
background-size: 100%;
|
2020-04-05 17:50:33 +00:00
|
|
|
background-position: center 0;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-image: url("../assets/icons/plus.png");
|
|
|
|
transition: opacity 200ms;
|
|
|
|
}
|
2020-04-01 20:57:14 +00:00
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
&:after {
|
|
|
|
background-image: url("../assets/icons/x.png");
|
|
|
|
opacity: 0;
|
|
|
|
}
|
2020-04-01 20:57:14 +00:00
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
&.add {
|
|
|
|
opacity: 0;
|
|
|
|
top: 30px;
|
2020-04-01 20:57:14 +00:00
|
|
|
&:after {
|
2020-04-05 17:50:33 +00:00
|
|
|
display: none;
|
2020-04-01 20:57:14 +00:00
|
|
|
}
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
2020-04-01 20:57:14 +00:00
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
&:hover:before {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
&:hover:after {
|
|
|
|
opacity: 1;
|
2020-04-01 20:57:14 +00:00
|
|
|
}
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
|
|
|
.circle li:hover .reminder.add {
|
|
|
|
opacity: 1;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
.circle li:hover .reminder.add:before {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2020-04-01 20:57:14 +00:00
|
|
|
|
2020-04-05 17:50:33 +00:00
|
|
|
#townsquare.public .reminder {
|
2020-04-08 20:42:51 +00:00
|
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
2020-04-05 17:50:33 +00:00
|
|
|
}
|
2020-04-01 20:57:14 +00:00
|
|
|
</style>
|