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

make demon bluffs toggleable (closes #29)

This commit is contained in:
Steffen 2020-06-18 11:19:02 +02:00
parent 5b6b36b645
commit f8eb473ab3
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
1 changed files with 65 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/TownSquare.vue
View File

@ -24,9 +24,19 @@
></Player> ></Player>
</ul> </ul>
<div class="bluffs" v-if="players.length > 6" ref="bluffs"> <div
<h3>Demon bluffs</h3> class="bluffs"
v-if="players.length > 6"
ref="bluffs"
:class="{ closed: !isBluffsOpen }"
>
<h3>
<font-awesome-icon icon="camera" @click.stop="takeScreenshot" /> <font-awesome-icon icon="camera" @click.stop="takeScreenshot" />
<span v-if="session.isSpectator">Other characters</span>
<span v-else>Demon bluffs</span>
<font-awesome-icon icon="times-circle" @click.stop="toggleBluffs" />
<font-awesome-icon icon="plus-circle" @click.stop="toggleBluffs" />
</h3>
<ul> <ul>
<li <li
v-for="index in bluffs" v-for="index in bluffs"
@ -67,7 +77,8 @@ export default {
bluffs: 3, bluffs: 3,
swap: -1, swap: -1,
move: -1, move: -1,
nominate: -1 nominate: -1,
isBluffsOpen: true
}; };
}, },
methods: { methods: {
@ -75,6 +86,9 @@ export default {
const { width, height, x, y } = this.$refs.bluffs.getBoundingClientRect(); const { width, height, x, y } = this.$refs.bluffs.getBoundingClientRect();
this.$emit("screenshot", { width, height, x, y }); this.$emit("screenshot", { width, height, x, y });
}, },
toggleBluffs() {
this.isBluffsOpen = !this.isBluffsOpen;
},
handleTrigger(playerIndex, [method, params]) { handleTrigger(playerIndex, [method, params]) {
if (typeof this[method] === "function") { if (typeof this[method] === "function") {
this[method](playerIndex, params); this[method](playerIndex, params);
@ -287,16 +301,62 @@ export default {
} }
} }
h3 { h3 {
margin-top: 5px; margin: 5px 1vh 0;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
svg {
cursor: pointer;
flex-grow: 0;
&.fa-camera {
margin-right: 1vh;
}
&.fa-times-circle {
margin-left: 1vh;
}
&.fa-plus-circle {
margin-left: 1vh;
display: none;
}
&:hover path {
fill: url(#demon);
stroke-width: 30px;
stroke: white;
}
}
} }
ul { ul {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
li { li {
width: 14vh; width: 14vh;
height: 14vh; height: 14vh;
margin: 0 0.5%; margin: 0 0.5%;
display: inline-block; display: inline-block;
transition: all 250ms;
}
}
&.closed {
svg.fa-camera {
display: none;
}
svg.fa-times-circle {
display: none;
}
svg.fa-plus-circle {
display: block;
}
ul li {
width: 0;
height: 0;
} }
} }
} }