From b4ee8567059a13760f357078eaee066d31d921c1 Mon Sep 17 00:00:00 2001 From: Steffen Date: Sun, 28 Mar 2021 21:56:58 +0200 Subject: [PATCH 1/4] updated character reference sheet visuals --- src/components/TownSquare.vue | 9 +- src/components/modals/Modal.vue | 7 +- src/components/modals/ReferenceModal.vue | 193 +++++++++++------------ 3 files changed, 101 insertions(+), 108 deletions(-) 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..4fa3a14 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,10 @@ export default { display: flex; align-content: center; justify-content: center; + .roles &, + .characters & { + max-width: 100%; + } } .modal-fade-enter, diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue index a07fc16..320d76b 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 +113,112 @@ 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; + } + + h4 { + text-transform: uppercase; + text-align: center; + transform: rotate(90deg); + transform-origin: center; + font-size: 80%; + } +} + ul { + column-count: 2; + flex-grow: 1; + display: block; + padding: 5px 0; + li { display: flex; - width: 100%; align-items: center; - align-content: center; - /*background: linear-gradient(0deg, #ffffff0f, transparent);*/ - border-radius: 10px; + width: 100%; + min-height: 6vh; + padding-right: 10px; .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%; } } } From 4620332fffbb95bf553f6d36323cfb61167e66ee Mon Sep 17 00:00:00 2001 From: Steffen Date: Tue, 30 Mar 2021 21:33:52 +0200 Subject: [PATCH 2/4] reference sheet finished --- src/components/modals/Modal.vue | 1 + src/components/modals/ReferenceModal.vue | 29 +++++++++++++++++++----- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue index 4fa3a14..fe08b13 100644 --- a/src/components/modals/Modal.vue +++ b/src/components/modals/Modal.vue @@ -125,6 +125,7 @@ export default { .roles &, .characters & { max-width: 100%; + padding: 10px; } } diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue index 320d76b..5c670a5 100644 --- a/src/components/modals/ReferenceModal.vue +++ b/src/components/modals/ReferenceModal.vue @@ -46,7 +46,8 @@ {{ role.ability }}
-
  • +
  • +
  • @@ -168,6 +169,8 @@ h3 { align-items: center; justify-content: center; align-content: center; + overflow: hidden; + text-shadow: 0 0 4px black; } h4 { @@ -180,17 +183,15 @@ h3 { } ul { - column-count: 2; flex-grow: 1; - display: block; + display: flex; padding: 5px 0; li { display: flex; align-items: center; - width: 100%; - min-height: 6vh; - padding-right: 10px; + flex-grow: 1; + width: 420px; .icon { width: 8vh; background-size: cover; @@ -223,6 +224,22 @@ ul { } } +/** 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%; } + } + } +} + /** hide players when town square is set to "public" **/ #townsquare.public ~ .characters .modal .player { display: none; From 5171996b3932cf3c36834aa4188583998a31fd32 Mon Sep 17 00:00:00 2001 From: Steffen Date: Tue, 30 Mar 2021 21:34:09 +0200 Subject: [PATCH 3/4] bugfixes and improved session joining --- CHANGELOG.md | 8 ++++++++ src/store/persistence.js | 2 +- src/store/socket.js | 1 + 3 files changed, 10 insertions(+), 1 deletion(-) 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/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); } }; From 5f17432df854a26140eebf81f89ad0d20c7b8c4e Mon Sep 17 00:00:00 2001 From: Steffen Date: Tue, 30 Mar 2021 21:34:31 +0200 Subject: [PATCH 4/4] 2.11.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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": {