mirror of https://github.com/bra1n/townsquare.git
added demon bluffs
This commit is contained in:
Steffen
parent
53f2042374
commit
79206e17df
|
|
@ -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
13
src/App.vue
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export default {
|
|||
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));
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue