Merge pull request #142 from bra1n/updated-reference-sheets

Updated reference sheets
This commit is contained in:
Steffen 2021-03-30 21:37:55 +02:00 committed by GitHub
commit a0a2760939
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 132 additions and 112 deletions

View File

@ -1,5 +1,13 @@
# Release Notes # 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 ### 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. - 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. - fix issue where a player and storyteller updating the same players pronouns at around the same time causes an infinite loop disconnecting the session.

4
package-lock.json generated
View File

@ -1,11 +1,11 @@
{ {
"name": "townsquare", "name": "townsquare",
"version": "2.10.0", "version": "2.11.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"version": "2.10.0", "version": "2.11.0",
"license": "GPL-3.0", "license": "GPL-3.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32", "@fortawesome/fontawesome-svg-core": "^1.2.32",

View File

@ -1,6 +1,6 @@
{ {
"name": "townsquare", "name": "townsquare",
"version": "2.10.0", "version": "2.11.0",
"description": "Blood on the Clocktower Town Square", "description": "Blood on the Clocktower Town Square",
"author": "Steffen Baumgart", "author": "Steffen Baumgart",
"scripts": { "scripts": {

View File

@ -365,10 +365,6 @@ export default {
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
z-index: 50; z-index: 50;
#townsquare.public &.bluffs {
opacity: 0;
transform: scale(0.1);
}
> svg { > svg {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -439,6 +435,11 @@ export default {
} }
} }
#townsquare.public > .bluffs {
opacity: 0;
transform: scale(0.1);
}
.fabled ul li .token:before { .fabled ul li .token:before {
content: " "; content: " ";
opacity: 0; opacity: 0;

View File

@ -74,7 +74,8 @@ export default {
overflow-y: auto; overflow-y: auto;
} }
.roles & { .roles &,
.characters & {
max-height: 100%; max-height: 100%;
max-width: 60%; max-width: 60%;
} }
@ -121,6 +122,11 @@ export default {
display: flex; display: flex;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
.roles &,
.characters & {
max-width: 100%;
padding: 10px;
}
} }
.modal-fade-enter, .modal-fade-enter,

View File

@ -15,21 +15,16 @@
<font-awesome-icon icon="address-card" /> <font-awesome-icon icon="address-card" />
{{ edition.name || "Custom Script" }} {{ edition.name || "Custom Script" }}
</h3> </h3>
<ul class="legend"> <div
<li> v-for="(teamRoles, team) in rolesGrouped"
<span class="name">Name</span> :key="team"
<span class="icon">Icon</span> :class="['team', team]"
<span class="ability">Ability</span> >
<span class="player" v-if="Object.keys(playersByRole).length"> <aside>
Player
</span>
</li>
</ul>
<div v-for="(teamRoles, team) in rolesGrouped" :key="team" :class="[team]">
<h4>{{ team }}</h4> <h4>{{ team }}</h4>
</aside>
<ul> <ul>
<li v-for="role in teamRoles" :class="[team]" :key="role.id"> <li v-for="role in teamRoles" :class="[team]" :key="role.id">
<span class="name">{{ role.name }}</span>
<span <span
class="icon" class="icon"
v-if="role.id" v-if="role.id"
@ -43,11 +38,16 @@
})` })`
}" }"
></span> ></span>
<span class="ability">{{ role.ability }}</span> <div class="role">
<span class="player" v-if="Object.keys(playersByRole).length">{{ <span class="player" v-if="Object.keys(playersByRole).length">{{
playersByRole[role.id] ? playersByRole[role.id].join(", ") : "" playersByRole[role.id] ? playersByRole[role.id].join(", ") : ""
}}</span> }}</span>
<span class="name">{{ role.name }}</span>
<span class="ability">{{ role.ability }}</span>
</div>
</li> </li>
<li :class="[team]"></li>
<li :class="[team]"></li>
</ul> </ul>
</div> </div>
</Modal> </Modal>
@ -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 { .townsfolk {
.name, .name {
h4 {
color: $townsfolk; color: $townsfolk;
&:before,
&:after {
background-color: $townsfolk;
} }
aside {
background: linear-gradient(-90deg, $townsfolk, transparent);
} }
} }
.outsider { .outsider {
.name, .name {
h4 {
color: $outsider; color: $outsider;
&:before,
&:after {
background-color: $outsider;
} }
aside {
background: linear-gradient(-90deg, $outsider, transparent);
} }
} }
.minion { .minion {
.name, .name {
h4 {
color: $minion; color: $minion;
&:before,
&:after {
background-color: $minion;
} }
aside {
background: linear-gradient(-90deg, $minion, transparent);
} }
} }
.demon { .demon {
.name, .name {
h4 {
color: $demon; color: $demon;
&:before,
&:after {
background-color: $demon;
} }
aside {
background: linear-gradient(-90deg, $demon, transparent);
} }
} }
ul {
li { .team {
display: flex; display: flex;
align-items: stretch;
width: 100%; width: 100%;
align-items: center; &:not(:last-child):after {
align-content: center; content: " ";
/*background: linear-gradient(0deg, #ffffff0f, transparent);*/ display: block;
border-radius: 10px; width: 25%;
.icon { height: 1px;
width: 6vh; background: linear-gradient(90deg, #ffffffaa, transparent);
background-size: cover; position: absolute;
background-position: 0 -5px; left: 0;
bottom: 0;
}
aside {
width: 30px;
display: flex;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin: 0 10px; align-items: center;
justify-content: center;
align-content: center;
overflow: hidden;
text-shadow: 0 0 4px black;
}
h4 {
text-transform: uppercase;
text-align: center; text-align: center;
border-left: 1px solid #ffffff1f; transform: rotate(90deg);
border-right: 1px solid #ffffff1f; transform-origin: center;
font-size: 80%;
}
}
ul {
flex-grow: 1;
display: flex;
padding: 5px 0;
li {
display: flex;
align-items: center;
flex-grow: 1;
width: 420px;
.icon {
width: 8vh;
background-size: cover;
background-position: 0 -5px;
flex-shrink: 0;
flex-grow: 0;
&:after { &:after {
content: " "; content: " ";
display: block; display: block;
padding-top: 65%; padding-top: 75%;
} }
} }
.name { .role {
flex-grow: 0; line-height: 80%;
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 {
flex-grow: 1; flex-grow: 1;
} }
} .name {
&.legend {
width: 100%;
font-weight: bold; font-weight: bold;
height: 20px; font-size: 75%;
margin-top: 10px; display: block;
li span {
background: none;
height: auto;
font-family: inherit;
font-size: inherit;
color: #fff;
} }
.icon:after { .player {
padding-top: 0; 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%; }
} }
} }
} }

View File

@ -60,7 +60,7 @@ module.exports = store => {
if (localStorage.getItem("playerId")) { if (localStorage.getItem("playerId")) {
store.commit("session/setPlayerId", 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")); const [spectator, sessionId] = JSON.parse(localStorage.getItem("session"));
store.commit("session/setSpectator", spectator); store.commit("session/setSpectator", spectator);
store.commit("session/setSessionId", sessionId); store.commit("session/setSessionId", sessionId);

View File

@ -878,5 +878,6 @@ export default store => {
if (sessionId) { if (sessionId) {
store.commit("session/setSpectator", true); store.commit("session/setSpectator", true);
store.commit("session/setSessionId", sessionId); store.commit("session/setSessionId", sessionId);
store.commit("toggleGrimoire", false);
} }
}; };