mirror of https://github.com/bra1n/townsquare.git
403 lines
8.7 KiB
Vue
403 lines
8.7 KiB
Vue
<template>
|
|
<li>
|
|
<div
|
|
class="player"
|
|
:class="{
|
|
dead: player.hasDied,
|
|
'no-vote': player.hasVoted,
|
|
traveler: player.role && player.role.team === 'traveler'
|
|
}"
|
|
>
|
|
<div class="shroud" @click="toggleStatus()"></div>
|
|
<div class="life" @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 && player.role.reminders.length"
|
|
v-bind:class="['leaf-top' + player.role.reminders.length]"
|
|
></span>
|
|
<span class="leaf-orange" v-if="player.role.setup"></span>
|
|
<div>{{ player.role.name }}</div>
|
|
</div>
|
|
<div class="ability" v-if="player.role.ability">
|
|
{{ player.role.ability }}
|
|
</div>
|
|
<div class="name" @click="changeName">
|
|
{{ player.name }}
|
|
<span class="remove" @click.stop="$emit('remove-player', player)">
|
|
<font-awesome-icon icon="times-circle" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="reminder add" @click="$emit('add-reminder', player)"></div>
|
|
</li>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
player: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
roles: {
|
|
type: Map,
|
|
required: true
|
|
},
|
|
isPublic: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
methods: {
|
|
toggleStatus() {
|
|
if (this.isPublic) {
|
|
if (!this.player.hasDied) {
|
|
this.$set(this.player, "hasDied", true);
|
|
} else if (this.player.hasVoted) {
|
|
this.$set(this.player, "hasVoted", false);
|
|
this.$set(this.player, "hasDied", false);
|
|
} else {
|
|
this.$set(this.player, "hasVoted", true);
|
|
}
|
|
} else {
|
|
this.$set(this.player, "hasDied", !this.player.hasDied);
|
|
}
|
|
},
|
|
changeRole() {
|
|
this.$emit("set-role", this.player);
|
|
},
|
|
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);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../vars.scss";
|
|
|
|
/***** Player token *****/
|
|
.circle .player {
|
|
margin-bottom: 10px;
|
|
padding-top: $token + 6px;
|
|
|
|
.shroud {
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2/3 * $token;
|
|
cursor: pointer;
|
|
transform: rotateX(0deg);
|
|
transform-origin: top center;
|
|
transition: transform 200ms ease-in-out;
|
|
z-index: 2;
|
|
filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
|
|
|
|
&: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 {
|
|
opacity: 0.5;
|
|
top: -10px;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
&.dead .shroud:before {
|
|
opacity: 1;
|
|
top: 0;
|
|
transform: perspective(400px) scale(1);
|
|
}
|
|
&.dead .name {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/****** Life token *******/
|
|
.player {
|
|
.life {
|
|
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;
|
|
}
|
|
|
|
&.dead {
|
|
&.traveler {
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#townsquare.public .player {
|
|
.shroud {
|
|
transform: perspective(400px) rotateX(90deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.life {
|
|
transform: perspective(400px) rotateY(0deg);
|
|
}
|
|
}
|
|
|
|
/***** Role token ******/
|
|
.circle .token {
|
|
border-radius: 50%;
|
|
height: $token + 6px;
|
|
width: $token + 6px;
|
|
background: url("../assets/token.png") center center;
|
|
background-size: 100%;
|
|
text-align: center;
|
|
color: black;
|
|
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;
|
|
font-family: "Papyrus", serif;
|
|
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(0deg);
|
|
backface-visibility: hidden;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
margin-left: ($token + 6) / -2;
|
|
|
|
&:before {
|
|
content: " ";
|
|
background-size: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
pointer-events: none;
|
|
&.leaf-left {
|
|
background-image: url("../assets/leaf-left.png");
|
|
}
|
|
&.leaf-orange {
|
|
background-image: url("../assets/leaf-orange.png");
|
|
}
|
|
&.leaf-right {
|
|
background-image: url("../assets/leaf-right.png");
|
|
}
|
|
&.leaf-top1 {
|
|
background-image: url("../assets/leaf-top1.png");
|
|
}
|
|
&.leaf-top2 {
|
|
background-image: url("../assets/leaf-top2.png");
|
|
}
|
|
&.leaf-top3 {
|
|
background-image: url("../assets/leaf-top3.png");
|
|
}
|
|
&.leaf-top4 {
|
|
background-image: url("../assets/leaf-top4.png");
|
|
}
|
|
&.leaf-top5 {
|
|
background-image: url("../assets/leaf-top5.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
#townsquare.public .token {
|
|
transform: perspective(400px) rotateY(-180deg);
|
|
}
|
|
|
|
/***** Player name *****/
|
|
.name {
|
|
font-size: 120%;
|
|
line-height: 120%;
|
|
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1))
|
|
drop-shadow(0 0 1px rgba(0, 0, 0, 1)) drop-shadow(0 0 1px rgba(0, 0, 0, 1));
|
|
cursor: pointer;
|
|
span {
|
|
display: none;
|
|
}
|
|
&:hover span {
|
|
display: inline-block;
|
|
&:hover {
|
|
color: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
/***** 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("../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;
|
|
padding-top: $token * 0.3 + 2px;
|
|
border-radius: 50%;
|
|
line-height: 90%;
|
|
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%;
|
|
background-size: 100%;
|
|
background-position: center 0;
|
|
background-repeat: no-repeat;
|
|
background-image: url("../assets/icons/plus.png");
|
|
transition: opacity 200ms;
|
|
}
|
|
|
|
&:after {
|
|
background-image: url("../assets/icons/x.png");
|
|
opacity: 0;
|
|
}
|
|
|
|
&.add {
|
|
opacity: 0;
|
|
top: 30px;
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:hover:before {
|
|
opacity: 0;
|
|
}
|
|
&:hover:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.circle li:hover .reminder.add {
|
|
opacity: 1;
|
|
top: 0;
|
|
}
|
|
.circle li:hover .reminder.add:before {
|
|
opacity: 1;
|
|
}
|
|
|
|
#townsquare.public .reminder {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|