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

added demon bluffs

This commit is contained in:
Steffen 2020-04-18 21:03:58 +02:00
parent 53f2042374
commit 79206e17df
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
7 changed files with 92 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -22,6 +22,7 @@
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/static/ms-icon-144x144.png">
<meta name="theme-color" content="#ff0000">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div id="app"></div>

13
src/App.vue
View File

@ -13,7 +13,7 @@
v-show="isEditionModalOpen"
@close="isEditionModalOpen = false"
>
<h2>Select an edition:</h2>
<h3>Select an edition:</h3>
<ul class="editions">
<li
v-for="edition in editions"
@ -247,6 +247,17 @@ body {
position: relative;
}
h1, h2, h3, h4, h5 {
margin: 0;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#app {
height: 100%;
}

5
src/components/Modal.vue
View File

@ -48,11 +48,6 @@ export default {
flex-direction: column;
max-width: 60%;
h2 {
margin: 0;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;

6
src/components/Player.vue
View File

@ -137,7 +137,7 @@ export default {
top: 0;
transform: perspective(400px) scale(1);
}
&.dead .name {
&.dead > .name {
opacity: 0.5;
}
}
@ -250,12 +250,12 @@ export default {
width: $token / 2;
height: $token / 2;
color: black;
font-size: 50%;
font-size: 45%;
font-weight: bold;
display: block;
margin: 5px ($token / -4) 0;
text-align: center;
padding-top: $token * 0.3 + 2px;
padding: ($token * 0.3 + 2px) 5px 0;
border-radius: 50%;
line-height: 90%;
border: 3px solid black;

7
src/components/RoleSelectionModal.vue
View File

@ -1,6 +1,6 @@
<template>
<Modal class="roles" v-show="isOpen" @close="close()">
<h2>Select the roles for {{ nontravelerPlayers }} players:</h2>
<h3>Select the roles for {{ nontravelerPlayers }} players:</h3>
<ul
class="tokens"
v-for="(teamRoles, team) in roleSelection"
@ -131,6 +131,11 @@ export default {
if (!Object.keys(this.roleSelection).length) {
this.selectRandomRoles();
}
},
watch: {
roles() {
this.selectRandomRoles();
}
}
};
</script>

26
src/components/Token.vue
View File

@ -98,18 +98,6 @@ export default {
}
}
.name {
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);
font-family: "Papyrus", serif;
position: absolute;
top: 73%;
width: 100%;
line-height: 100%;
}
.ability {
display: flex;
position: absolute;
@ -122,6 +110,7 @@ export default {
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
border: 3px solid black;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
text-align: left;
justify-items: center;
align-content: center;
@ -129,7 +118,6 @@ export default {
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease-in-out;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
&:before {
content: " ";
@ -142,6 +130,18 @@ export default {
right: 100%;
}
}
.name {
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);
font-family: "Papyrus", serif;
position: absolute;
top: 73%;
width: 100%;
line-height: 100%;
}
&:hover .ability {
opacity: 1;
}

62
src/components/TownSquare.vue
View File

@ -17,8 +17,26 @@
@remove-player="removePlayer"
></Player>
</ul>
<Modal v-show="availableReminders.length && selectedPlayer" @close="closeModal">
<h2>Choose a reminder token:</h2>
<div class="bluffs" v-if="players.length > 6">
<h3>Demon bluffs</h3>
<ul>
<li @click="openRoleModal(bluffs[0])">
<Token :role="bluffs[0].role"></Token>
</li>
<li @click="openRoleModal(bluffs[1])">
<Token :role="bluffs[1].role"></Token>
</li>
<li @click="openRoleModal(bluffs[2])">
<Token :role="bluffs[2].role"></Token>
</li>
</ul>
</div>
<Modal
v-show="availableReminders.length && selectedPlayer"
@close="closeModal"
>
<h3>Choose a reminder token:</h3>
<ul class="reminders">
<li
v-for="reminder in availableReminders"
@ -32,7 +50,7 @@
</ul>
</Modal>
<Modal v-show="availableRoles.length && selectedPlayer" @close="closeModal">
<h2>Choose a new role:</h2>
<h3>Choose a new role:</h3>
<ul class="tokens">
<li
v-for="role in availableRoles"
@ -80,7 +98,8 @@ export default {
return {
selectedPlayer: false,
availableReminders: [],
availableRoles: []
availableRoles: [],
bluffs: Array(3).fill({}).map(() => ({ role: {} }))
};
},
methods: {
@ -104,7 +123,7 @@ export default {
this.availableReminders = [];
this.selectedPlayer = player;
this.roles.forEach(role => {
if (role.id !== player.role.id) {
if (player.role && role.id !== player.role.id) {
this.availableRoles.push(role);
}
});
@ -222,6 +241,36 @@ export default {
padding: 20px;
}
/***** Demon bluffs *******/
.bluffs {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
border: 3px solid black;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
transform-origin: bottom left;
transform: scale(1);
opacity: 1;
transition: all 200ms ease-in-out;
h3 {
margin-top: 5px;
}
li {
width: 120px;
height: 120px;
margin: 0 5px;
display: inline-block;
font-size: 18px;
}
}
#townsquare.public .bluffs {
opacity: 0;
transform: scale(0.1);
}
/***** Role token modal ******/
ul.tokens li {
border-radius: 50%;
@ -267,7 +316,8 @@ ul.reminders .reminder {
border: 3px solid black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
padding-top: 65px;
padding: 65px 9px 0;
line-height: 100%;
transition: transform 500ms ease;
&:before {