diff --git a/public/index.html b/public/index.html
index 96bbbcb..5b33bf2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,6 +22,7 @@
+
diff --git a/src/App.vue b/src/App.vue
index 47bdd77..887a93c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@
v-show="isEditionModalOpen"
@close="isEditionModalOpen = false"
>
- Select an edition:
+ Select an edition:
- .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;
diff --git a/src/components/RoleSelectionModal.vue b/src/components/RoleSelectionModal.vue
index b5ef46a..c53eeb7 100644
--- a/src/components/RoleSelectionModal.vue
+++ b/src/components/RoleSelectionModal.vue
@@ -1,6 +1,6 @@
-
Select the roles for {{ nontravelerPlayers }} players:
+ Select the roles for {{ nontravelerPlayers }} players:
diff --git a/src/components/Token.vue b/src/components/Token.vue
index e4379ab..e84a074 100644
--- a/src/components/Token.vue
+++ b/src/components/Token.vue
@@ -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;
}
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 442f89a..61be220 100644
--- a/src/components/TownSquare.vue
+++ b/src/components/TownSquare.vue
@@ -17,8 +17,26 @@
@remove-player="removePlayer"
>
-
- Choose a reminder token:
+
+
+
+ Choose a reminder token:
- Choose a new role:
+ Choose a new role:
- ({ 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 {