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" }} - -
-

{{ team }}

+
+
  • - {{ role.name }} - {{ role.ability }} - {{ - playersByRole[role.id] ? playersByRole[role.id].join(", ") : "" - }} +
    + {{ + playersByRole[role.id] ? playersByRole[role.id].join(", ") : "" + }} + {{ role.name }} + {{ role.ability }} +
    • +
  • +
@@ -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); } };