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

13
src/App.vue
View File

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

5
src/components/Modal.vue
View File

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

6
src/components/Player.vue
View File

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

7
src/components/RoleSelectionModal.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Modal class="roles" v-show="isOpen" @close="close()"> <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 <ul
class="tokens" class="tokens"
v-for="(teamRoles, team) in roleSelection" v-for="(teamRoles, team) in roleSelection"
@ -131,6 +131,11 @@ export default {
if (!Object.keys(this.roleSelection).length) { if (!Object.keys(this.roleSelection).length) {
this.selectRandomRoles(); this.selectRandomRoles();
} }
},
watch: {
roles() {
this.selectRandomRoles();
}
} }
}; };
</script> </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 { .ability {
display: flex; display: flex;
position: absolute; position: absolute;
@ -122,6 +110,7 @@ export default {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border-radius: 10px; border-radius: 10px;
border: 3px solid black; border: 3px solid black;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
text-align: left; text-align: left;
justify-items: center; justify-items: center;
align-content: center; align-content: center;
@ -129,7 +118,6 @@ export default {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
&:before { &:before {
content: " "; content: " ";
@ -142,6 +130,18 @@ export default {
right: 100%; 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 { &:hover .ability {
opacity: 1; opacity: 1;
} }

62
src/components/TownSquare.vue
View File

@ -17,8 +17,26 @@
@remove-player="removePlayer" @remove-player="removePlayer"
></Player> ></Player>
</ul> </ul>
<Modal v-show="availableReminders.length && selectedPlayer" @close="closeModal"> <div class="bluffs" v-if="players.length > 6">
<h2>Choose a reminder token:</h2> <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"> <ul class="reminders">
<li <li
v-for="reminder in availableReminders" v-for="reminder in availableReminders"
@ -32,7 +50,7 @@
</ul> </ul>
</Modal> </Modal>
<Modal v-show="availableRoles.length && selectedPlayer" @close="closeModal"> <Modal v-show="availableRoles.length && selectedPlayer" @close="closeModal">
<h2>Choose a new role:</h2> <h3>Choose a new role:</h3>
<ul class="tokens"> <ul class="tokens">
<li <li
v-for="role in availableRoles" v-for="role in availableRoles"
@ -80,7 +98,8 @@ export default {
return { return {
selectedPlayer: false, selectedPlayer: false,
availableReminders: [], availableReminders: [],
availableRoles: [] availableRoles: [],
bluffs: Array(3).fill({}).map(() => ({ role: {} }))
}; };
}, },
methods: { methods: {
@ -104,7 +123,7 @@ export default {
this.availableReminders = []; this.availableReminders = [];
this.selectedPlayer = player; this.selectedPlayer = player;
this.roles.forEach(role => { this.roles.forEach(role => {
if (role.id !== player.role.id) { if (player.role && role.id !== player.role.id) {
this.availableRoles.push(role); this.availableRoles.push(role);
} }
}); });
@ -222,6 +241,36 @@ export default {
padding: 20px; 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 ******/ /***** Role token modal ******/
ul.tokens li { ul.tokens li {
border-radius: 50%; border-radius: 50%;
@ -267,7 +316,8 @@ ul.reminders .reminder {
border: 3px solid black; border: 3px solid black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer; cursor: pointer;
padding-top: 65px; padding: 65px 9px 0;
line-height: 100%;
transition: transform 500ms ease; transition: transform 500ms ease;
&:before { &:before {