diff --git a/CHANGELOG.md b/CHANGELOG.md
index eff6e81..3f9893e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
# Release Notes
+### Version 2.11.0
+- new design for character reference sheet
+- automatically switch to grimoire view when joining a session through a link
+- fixed demon bluffs showing on public town square
+- fixed a bug that prevented connecting to a session when previously being connected and joining through a link
+
+---
+
### Version 2.10.0
- added [nomination log indicator](https://fontawesome.com/icons/book-dead). When a nomination log [v] is available, the number of currently visible entries is displayed. Clicking the indicator can reveal/hide the nomination log.
- fix issue where a player and storyteller updating the same players pronouns at around the same time causes an infinite loop disconnecting the session.
diff --git a/package-lock.json b/package-lock.json
index f2d0acb..ac73bc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
{
"name": "townsquare",
- "version": "2.10.0",
+ "version": "2.11.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
- "version": "2.10.0",
+ "version": "2.11.0",
"license": "GPL-3.0",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
diff --git a/package.json b/package.json
index aebc967..d4947a9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "townsquare",
- "version": "2.10.0",
+ "version": "2.11.0",
"description": "Blood on the Clocktower Town Square",
"author": "Steffen Baumgart",
"scripts": {
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 3236102..729a813 100644
--- a/src/components/TownSquare.vue
+++ b/src/components/TownSquare.vue
@@ -365,10 +365,6 @@ export default {
transition: all 200ms ease-in-out;
z-index: 50;
- #townsquare.public &.bluffs {
- opacity: 0;
- transform: scale(0.1);
- }
> svg {
position: absolute;
top: 10px;
@@ -439,6 +435,11 @@ export default {
}
}
+#townsquare.public > .bluffs {
+ opacity: 0;
+ transform: scale(0.1);
+}
+
.fabled ul li .token:before {
content: " ";
opacity: 0;
diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index f0390b8..fe08b13 100644
--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@@ -74,7 +74,8 @@ export default {
overflow-y: auto;
}
- .roles & {
+ .roles &,
+ .characters & {
max-height: 100%;
max-width: 60%;
}
@@ -121,6 +122,11 @@ export default {
display: flex;
align-content: center;
justify-content: center;
+ .roles &,
+ .characters & {
+ max-width: 100%;
+ padding: 10px;
+ }
}
.modal-fade-enter,
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index a07fc16..5c670a5 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -15,21 +15,16 @@
{{ edition.name || "Custom Script" }}
-
- -
- Name
- Icon
- Ability
-
- Player
-
-
-
-
-
{{ team }}
+
@@ -114,124 +114,128 @@ h3 {
}
}
-h4 {
- text-transform: capitalize;
- display: flex;
- align-items: center;
- height: 20px;
- &:before,
- &:after {
- content: " ";
- width: 100%;
- height: 1px;
- border-radius: 2px;
- }
- &:before {
- margin-right: 15px;
- }
- &:after {
- margin-left: 15px;
- }
-}
-
.townsfolk {
- .name,
- h4 {
+ .name {
color: $townsfolk;
- &:before,
- &:after {
- background-color: $townsfolk;
- }
+ }
+ aside {
+ background: linear-gradient(-90deg, $townsfolk, transparent);
}
}
.outsider {
- .name,
- h4 {
+ .name {
color: $outsider;
- &:before,
- &:after {
- background-color: $outsider;
- }
+ }
+ aside {
+ background: linear-gradient(-90deg, $outsider, transparent);
}
}
.minion {
- .name,
- h4 {
+ .name {
color: $minion;
- &:before,
- &:after {
- background-color: $minion;
- }
+ }
+ aside {
+ background: linear-gradient(-90deg, $minion, transparent);
}
}
.demon {
- .name,
- h4 {
+ .name {
color: $demon;
- &:before,
- &:after {
- background-color: $demon;
- }
+ }
+ aside {
+ background: linear-gradient(-90deg, $demon, transparent);
}
}
+
+.team {
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+ &:not(:last-child):after {
+ content: " ";
+ display: block;
+ width: 25%;
+ height: 1px;
+ background: linear-gradient(90deg, #ffffffaa, transparent);
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ }
+ aside {
+ width: 30px;
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ align-content: center;
+ overflow: hidden;
+ text-shadow: 0 0 4px black;
+ }
+
+ h4 {
+ text-transform: uppercase;
+ text-align: center;
+ transform: rotate(90deg);
+ transform-origin: center;
+ font-size: 80%;
+ }
+}
+
ul {
+ flex-grow: 1;
+ display: flex;
+ padding: 5px 0;
+
li {
display: flex;
- width: 100%;
align-items: center;
- align-content: center;
- /*background: linear-gradient(0deg, #ffffff0f, transparent);*/
- border-radius: 10px;
+ flex-grow: 1;
+ width: 420px;
.icon {
- width: 6vh;
+ width: 8vh;
background-size: cover;
background-position: 0 -5px;
- flex-grow: 0;
flex-shrink: 0;
- margin: 0 10px;
- text-align: center;
- border-left: 1px solid #ffffff1f;
- border-right: 1px solid #ffffff1f;
+ flex-grow: 0;
&:after {
content: " ";
display: block;
- padding-top: 65%;
+ padding-top: 75%;
}
}
- .name {
- flex-grow: 0;
- flex-shrink: 0;
- width: 15%;
- font-weight: bold;
- text-align: right;
- font-size: 110%;
- }
- .player {
- flex-grow: 0;
- flex-shrink: 1;
- text-align: right;
- margin: 0 10px;
- color: #888;
- font-size: smaller;
- }
- .ability {
+ .role {
+ line-height: 80%;
flex-grow: 1;
}
- }
- &.legend {
- width: 100%;
- font-weight: bold;
- height: 20px;
- margin-top: 10px;
- li span {
- background: none;
- height: auto;
- font-family: inherit;
- font-size: inherit;
- color: #fff;
+ .name {
+ font-weight: bold;
+ font-size: 75%;
+ display: block;
}
- .icon:after {
- padding-top: 0;
+ .player {
+ color: #888;
+ float: right;
+ font-size: 60%;
+ }
+ .ability {
+ font-size: 70%;
+ }
+ }
+}
+
+/** break into 1 column below 1200px **/
+@media screen and (max-width: 1199.98px) {
+ .modal {
+ max-width: 60%;
+ }
+ ul {
+ li {
+ .icon { width: 6vh; }
+ .role { line-height: 100%; }
+ .name { font-size: 100%; }
+ .player { font-size: 100%; }
+ .ability { font-size: 90%; }
}
}
}
diff --git a/src/store/persistence.js b/src/store/persistence.js
index 4ba71e1..55c2b78 100644
--- a/src/store/persistence.js
+++ b/src/store/persistence.js
@@ -60,7 +60,7 @@ module.exports = store => {
if (localStorage.getItem("playerId")) {
store.commit("session/setPlayerId", localStorage.getItem("playerId"));
}
- if (localStorage.getItem("session")) {
+ if (localStorage.getItem("session") && !window.location.hash.substr(1)) {
const [spectator, sessionId] = JSON.parse(localStorage.getItem("session"));
store.commit("session/setSpectator", spectator);
store.commit("session/setSessionId", sessionId);
diff --git a/src/store/socket.js b/src/store/socket.js
index 1b898e8..e193a08 100644
--- a/src/store/socket.js
+++ b/src/store/socket.js
@@ -878,5 +878,6 @@ export default store => {
if (sessionId) {
store.commit("session/setSpectator", true);
store.commit("session/setSessionId", sessionId);
+ store.commit("toggleGrimoire", false);
}
};