Merge branch 'main' into feature-visible-nom-log-indicator-button

This commit is contained in:
Michael Langford 2021-03-18 15:49:04 -04:00 committed by GitHub
commit 3cfc9939f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 382 additions and 160 deletions

19
.github/workflows/changelog-check.yml vendored Normal file
View File

@ -0,0 +1,19 @@
name: Enforce Changelog Update
on:
pull_request:
types: [assigned, opened, synchronize, reopened, labeled, unlabeled]
branches:
- main
jobs:
build:
name: Check Actions
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Changelog check
uses: Zomzog/changelog-checker@v1.1.0
with:
fileName: CHANGELOG.md
noChangelogLabel: no changelog
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

View File

@ -2,6 +2,20 @@
### Version 2.9.1 ### Version 2.9.1
- 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 gamestate JSON not showing (custom) roles and failing to load states with custom scripts properly
- fix gamestate not stripping out special characters from role.id on load
- made character assignment modal a bit prettier
- got rid of the extra pixels on the Soldier icon
- fixed lengthy live session channel names not being correctly cut off
- hide player names in night order / character reference popup when town square is public
- fix (pre-)vote calculation being off by one if the nominee votes
---
### Version 2.9.0
- added support for assigning pronouns to players and display of the pronouns in a tooltip on the player name.
- added button to modals that allows the user to maximize them
- added Mephit and Snitch to roles.json
### Version 2.8.0 ### Version 2.8.0
- added hands-off live session support for homebrew / custom characters again! - added hands-off live session support for homebrew / custom characters again!

188
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "townsquare", "name": "townsquare",
"version": "2.8.0", "version": "2.9.1",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -500,6 +500,15 @@
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
}, },
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cacache": { "cacache": {
"version": "13.0.1", "version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@ -525,6 +534,31 @@
"unique-filename": "^1.1.1" "unique-filename": "^1.1.1"
} }
}, },
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"optional": true
},
"find-cache-dir": { "find-cache-dir": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@ -544,6 +578,32 @@
"path-exists": "^4.0.0" "path-exists": "^4.0.0"
} }
}, },
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"optional": true
},
"json5": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
"optional": true,
"requires": {
"minimist": "^1.2.5"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": { "locate-path": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@ -605,6 +665,15 @@
"minipass": "^3.1.1" "minipass": "^3.1.1"
} }
}, },
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": { "terser-webpack-plugin": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -620,6 +689,17 @@
"terser": "^4.6.12", "terser": "^4.6.12",
"webpack-sources": "^1.4.3" "webpack-sources": "^1.4.3"
} }
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.1.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
} }
} }
}, },
@ -3064,23 +3144,23 @@
"integrity": "sha512-FeIuBzArONbAmKmZIsZIFGu/Gc9AVGlVeVbhCq+G2YIl6QkT0TDn2HKN/FMf1btXEB9kEmIuQf3/lBTVAbmFOg==" "integrity": "sha512-FeIuBzArONbAmKmZIsZIFGu/Gc9AVGlVeVbhCq+G2YIl6QkT0TDn2HKN/FMf1btXEB9kEmIuQf3/lBTVAbmFOg=="
}, },
"elliptic": { "elliptic": {
"version": "6.5.3", "version": "6.5.4",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
"integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==", "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
"requires": { "requires": {
"bn.js": "^4.4.0", "bn.js": "^4.11.9",
"brorand": "^1.0.1", "brorand": "^1.1.0",
"hash.js": "^1.0.0", "hash.js": "^1.0.0",
"hmac-drbg": "^1.0.0", "hmac-drbg": "^1.0.1",
"inherits": "^2.0.1", "inherits": "^2.0.4",
"minimalistic-assert": "^1.0.0", "minimalistic-assert": "^1.0.1",
"minimalistic-crypto-utils": "^1.0.0" "minimalistic-crypto-utils": "^1.0.1"
}, },
"dependencies": { "dependencies": {
"bn.js": { "bn.js": {
"version": "4.11.9", "version": "4.12.0",
"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
"integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==" "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
} }
} }
}, },
@ -8840,88 +8920,6 @@
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.1.1",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.1.tgz",
"integrity": "sha512-wz/+HFg/3SBayHWAlZXARcnDTl3VOChrfW9YnxvAweiuyKX/7IGx1ad/4yJHmwhgWlOVYMAbTiI7GV8G33PfGQ==",
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"optional": true
},
"json5": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
"integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
"optional": true,
"requires": {
"minimist": "^1.2.5"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 76 KiB

View File

@ -361,7 +361,7 @@ export default {
top: 3px; top: 3px;
text-align: right; text-align: right;
padding-right: 50px; padding-right: 50px;
z-index: 200; z-index: 75;
svg { svg {
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1)); filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));

View File

@ -97,13 +97,16 @@
@click="updatePlayer('isVoteless', true)" @click="updatePlayer('isVoteless', true)"
title="Ghost vote" title="Ghost vote"
/> />
<div <div
class="name" class="name"
@click="isMenuOpen = !isMenuOpen" @click="isMenuOpen = !isMenuOpen"
:class="{ active: isMenuOpen }" :class="{ active: isMenuOpen }"
> >
{{ player.name }} <span>{{ player.name }}</span>
<font-awesome-icon icon="venus-mars" v-if="player.pronouns" />
<div class="pronouns" v-if="player.pronouns">
<span>{{ player.pronouns }}</span>
</div>
</div> </div>
<transition name="fold"> <transition name="fold">
@ -150,6 +153,15 @@
</template> </template>
<template v-else> Seat occupied</template> <template v-else> Seat occupied</template>
</li> </li>
<li
@click="changePronouns"
v-if="
!session.isSpectator ||
(session.isSpectator && player.id === session.playerId)
"
>
<font-awesome-icon icon="venus-mars" />Change Pronouns
</li>
</ul> </ul>
</transition> </transition>
</div> </div>
@ -232,6 +244,15 @@ export default {
}; };
}, },
methods: { methods: {
changePronouns() {
if (this.session.isSpectator && this.player.id !== this.session.playerId)
return;
const pronouns = prompt("Player pronouns", this.player.pronouns);
//Only update pronouns if not null (prompt was not cancelled)
if (pronouns !== null) {
this.updatePlayer("pronouns", pronouns, true);
}
},
toggleStatus() { toggleStatus() {
if (this.grimoire.isPublic) { if (this.grimoire.isPublic) {
if (!this.player.isDead) { if (!this.player.isDead) {
@ -260,7 +281,12 @@ export default {
this.updatePlayer("reminders", reminders, true); this.updatePlayer("reminders", reminders, true);
}, },
updatePlayer(property, value, closeMenu = false) { updatePlayer(property, value, closeMenu = false) {
if (this.session.isSpectator && property !== "reminders") return; if (
this.session.isSpectator &&
property !== "reminders" &&
property !== "pronouns"
)
return;
this.$store.commit("players/update", { this.$store.commit("players/update", {
player: this.player, player: this.player,
property, property,
@ -629,25 +655,72 @@ li.move:not(.from) .player .overlay svg.move {
/***** Player name *****/ /***** Player name *****/
.player > .name { .player > .name {
text-align: center; right: 10%;
display: flex;
justify-content: center;
font-size: 120%; font-size: 120%;
line-height: 120%; line-height: 120%;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 120%;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border: 3px solid black; border: 3px solid black;
border-radius: 10px; border-radius: 10px;
top: 5px; top: 5px;
box-shadow: 0 0 5px black; box-shadow: 0 0 5px black;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 4px; padding: 0 4px;
svg {
top: 3px;
margin-right: 2px;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
flex-grow: 1;
}
#townsquare:not(.spectator) &:hover, #townsquare:not(.spectator) &:hover,
&.active { &.active {
color: red; color: red;
} }
&:hover .pronouns {
opacity: 1;
color: white;
}
.pronouns {
display: flex;
position: absolute;
right: 110%;
max-width: 250px;
z-index: 25;
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));
align-items: center;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease-in-out;
padding: 0 4px;
bottom: -3px;
&:before {
content: " ";
border: 10px solid transparent;
width: 0;
height: 0;
border-left-color: black;
position: absolute;
margin-left: 2px;
left: 100%;
}
}
} }
.player.dead > .name { .player.dead > .name {
@ -657,7 +730,7 @@ li.move:not(.from) .player .overlay svg.move {
/***** Player menu *****/ /***** Player menu *****/
.player > .menu { .player > .menu {
position: absolute; position: absolute;
left: 100%; left: 110%;
bottom: -5px; bottom: -5px;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;

View File

@ -264,7 +264,7 @@ export default {
// open menu on the left // open menu on the left
.player > .menu { .player > .menu {
left: auto; left: auto;
right: 100%; right: 110%;
margin-right: 15px; margin-right: 15px;
&:before { &:before {
border-left-color: black; border-left-color: black;
@ -292,6 +292,16 @@ export default {
left: 100%; left: 100%;
} }
} }
.pronouns {
left: 110%;
right: auto;
&:before {
border-left-color: transparent;
border-right-color: black;
left: auto;
right: 100%;
}
}
} @else { } @else {
// second half of players // second half of players
z-index: $i - 1; z-index: $i - 1;

View File

@ -10,17 +10,14 @@
<em>{{ nominee.name }}</em <em>{{ nominee.name }}</em
>! >!
<br /> <br />
<template v-if="nominee.role.team !== 'traveler'">
<em class="blue"> <em class="blue">
{{ voters.length }} vote{{ voters.length !== 1 ? "s" : "" }} {{ voters.length }} vote{{ voters.length !== 1 ? "s" : "" }}
</em> </em>
in favor in favor
<em>(majority is {{ Math.ceil(alive / 2) }})</em> <em v-if="nominee.role.team !== 'traveler'">
</template> (majority is {{ Math.ceil(alive / 2) }})
<template v-else> </em>
<em>{{ Math.ceil(players.length / 2) }} votes</em> required for a <em v-else>(majority is {{ Math.ceil(players.length / 2) }})</em>
<em>majority</em>.
</template>
<div v-if="session.isVoteInProgress || session.lockedVote > 1"> <div v-if="session.isVoteInProgress || session.lockedVote > 1">
<em class="blue" v-if="voters.length">{{ voters.join(", ") }} </em> <em class="blue" v-if="voters.length">{{ voters.join(", ") }} </em>
@ -170,7 +167,10 @@ export default {
...voters.slice(nomination + 1), ...voters.slice(nomination + 1),
...voters.slice(0, nomination + 1) ...voters.slice(0, nomination + 1)
]; ];
return reorder.slice(0, this.session.lockedVote - 1).filter(n => !!n); return (this.session.lockedVote
? reorder.slice(0, this.session.lockedVote - 1)
: reorder
).filter(n => !!n);
} }
}, },
data() { data() {

View File

@ -163,19 +163,15 @@ export default {
if (metaIndex > -1) { if (metaIndex > -1) {
meta = roles.splice(metaIndex, 1).pop(); meta = roles.splice(metaIndex, 1).pop();
} }
const customRoles = roles.map(role => { this.$store.commit("setCustomRoles", roles);
role.id = role.id.toLocaleLowerCase().replace(/[^a-z0-9]/g, "");
return role;
});
this.$store.commit("setCustomRoles", customRoles);
this.$store.commit( this.$store.commit(
"setEdition", "setEdition",
Object.assign({}, meta, { id: "custom" }) Object.assign({}, meta, { id: "custom" })
); );
// check for fabled and set those too, if present // check for fabled and set those too, if present
if (customRoles.some(({ id }) => this.$store.state.fabled.has(id))) { if (roles.some(({ id }) => this.$store.state.fabled.has(id))) {
const fabled = []; const fabled = [];
customRoles.forEach(({ id }) => { roles.forEach(({ id }) => {
if (this.$store.state.fabled.has(id)) { if (this.$store.state.fabled.has(id)) {
fabled.push(this.$store.state.fabled.get(id)); fabled.push(this.$store.state.fabled.get(id));
} }

View File

@ -37,7 +37,9 @@ export default {
edition: this.edition.isOfficial edition: this.edition.isOfficial
? { id: this.edition.id } ? { id: this.edition.id }
: this.edition, : this.edition,
roles: this.edition.isOfficial ? "" : this.$store.getters.customRoles, roles: this.edition.isOfficial
? ""
: this.$store.getters.customRolesStripped,
fabled: this.players.fabled.map(({ id }) => id), fabled: this.players.fabled.map(({ id }) => id),
players: this.players.players.map(player => ({ players: this.players.players.map(player => ({
...player, ...player,

View File

@ -3,20 +3,39 @@
<div class="modal-backdrop" @click="close"> <div class="modal-backdrop" @click="close">
<div <div
class="modal" class="modal"
:class="{ maximized: isMaximized }"
role="dialog" role="dialog"
aria-labelledby="modalTitle" aria-labelledby="modalTitle"
aria-describedby="modalDescription" aria-describedby="modalDescription"
@click.stop="" @click.stop=""
> >
<font-awesome-icon @click="close" class="close" icon="times-circle" /> <div class="top-right-buttons">
<font-awesome-icon
@click="isMaximized = !isMaximized"
class="top-right-button"
:icon="['fas', isMaximized ? 'window-minimize' : 'window-maximize']"
/>
<font-awesome-icon
@click="close"
class="top-right-button"
icon="times-circle"
/>
</div>
<div class="slot">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</div>
</transition> </transition>
</template> </template>
<script> <script>
export default { export default {
data: function() {
return {
isMaximized: false
};
},
methods: { methods: {
close() { close() {
this.$emit("close"); this.$emit("close");
@ -46,16 +65,20 @@ export default {
box-shadow: 2px 2px 20px 1px #000; box-shadow: 2px 2px 20px 1px #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 60%;
.characters &,
.vote-history &,
.night-reference & {
max-height: 80%; max-height: 80%;
max-width: 80%; max-width: 80%;
.vote-history &,
.night-reference &,
.characters & {
overflow-y: auto; overflow-y: auto;
} }
.roles & {
max-height: 100%;
max-width: 60%;
}
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -67,16 +90,37 @@ export default {
justify-content: center; justify-content: center;
line-height: 100%; line-height: 100%;
} }
> .close {
> .top-right-buttons {
position: absolute; position: absolute;
z-index: 100;
top: 15px;
right: 20px; right: 20px;
top: 20px; > .top-right-button {
cursor: pointer; cursor: pointer;
z-index: 5; width: 28px;
&:hover { &:hover {
color: red; color: red;
} }
} }
}
> .slot {
max-height: 100%;
position: initial;
}
}
.maximized {
background: rgba(0, 0, 0, 0.95);
padding: 0;
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
display: flex;
align-content: center;
justify-content: center;
} }
.modal-fade-enter, .modal-fade-enter,

View File

@ -25,7 +25,7 @@
> >
<span class="name"> <span class="name">
{{ role.name }} {{ role.name }}
<template v-if="role.players.length"> <span class="player" v-if="role.players.length">
<br /> <br />
<small <small
v-for="(player, index) in role.players" v-for="(player, index) in role.players"
@ -35,7 +35,7 @@
player.name + (role.players.length > index + 1 ? "," : "") player.name + (role.players.length > index + 1 ? "," : "")
}}</small }}</small
> >
</template> </span>
</span> </span>
<span <span
class="icon" class="icon"
@ -77,7 +77,7 @@
></span> ></span>
<span class="name"> <span class="name">
{{ role.name }} {{ role.name }}
<template v-if="role.players.length"> <span class="player" v-if="role.players.length">
<br /> <br />
<small <small
v-for="(player, index) in role.players" v-for="(player, index) in role.players"
@ -87,7 +87,7 @@
player.name + (role.players.length > index + 1 ? "," : "") player.name + (role.players.length > index + 1 ? "," : "")
}}</small }}</small
> >
</template> </span>
</span> </span>
<span class="reminder" v-if="role.otherNightReminder"> <span class="reminder" v-if="role.otherNightReminder">
{{ role.otherNightReminder }} {{ role.otherNightReminder }}
@ -180,7 +180,7 @@ export default {
.toggle { .toggle {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 20px; top: 15px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: red; color: red;
@ -362,4 +362,9 @@ ul {
} }
} }
} }
/** hide players when town square is set to "public" **/
#townsquare.public ~ .night-reference .modal .player {
display: none;
}
</style> </style>

View File

@ -100,7 +100,7 @@ export default {
.toggle { .toggle {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 20px; top: 15px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: red; color: red;
@ -195,7 +195,7 @@ ul {
&:after { &:after {
content: " "; content: " ";
display: block; display: block;
padding-top: 66%; padding-top: 65%;
} }
} }
.name { .name {
@ -219,6 +219,7 @@ ul {
} }
} }
&.legend { &.legend {
width: 100%;
font-weight: bold; font-weight: bold;
height: 20px; height: 20px;
margin-top: 10px; margin-top: 10px;
@ -234,4 +235,9 @@ ul {
} }
} }
} }
/** hide players when town square is set to "public" **/
#townsquare.public ~ .characters .modal .player {
display: none;
}
</style> </style>

View File

@ -168,8 +168,8 @@ ul.tokens {
padding-left: 5%; padding-left: 5%;
li { li {
border-radius: 50%; border-radius: 50%;
width: 6vw; width: 5vw;
margin: 1%; margin: 5px;
opacity: 0.5; opacity: 0.5;
transition: all 250ms; transition: all 250ms;
&.selected { &.selected {

View File

@ -1,7 +1,7 @@
<template> <template>
<Modal <Modal
class="vote-history" class="vote-history"
v-show="modals.voteHistory && session.voteHistory" v-if="modals.voteHistory && session.voteHistory"
@close="toggleModal('voteHistory')" @close="toggleModal('voteHistory')"
> >
<font-awesome-icon <font-awesome-icon
@ -91,7 +91,7 @@ export default {
.clear { .clear {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 20px; top: 15px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: red; color: red;
@ -99,7 +99,7 @@ export default {
} }
h3 { h3 {
margin: 0 40px; margin: 0 40px 0 10px;
svg { svg {
vertical-align: middle; vertical-align: middle;
} }
@ -107,6 +107,8 @@ h3 {
table { table {
border-spacing: 10px 0; border-spacing: 10px 0;
margin-left: auto;
margin-right: auto;
} }
thead td { thead td {

View File

@ -45,9 +45,12 @@ const faIcons = [
"UserEdit", "UserEdit",
"UserFriends", "UserFriends",
"Users", "Users",
"VenusMars",
"VolumeUp", "VolumeUp",
"VolumeMute", "VolumeMute",
"VoteYea" "VoteYea",
"WindowMaximize",
"WindowMinimize"
]; ];
const fabIcons = ["Github", "Discord"]; const fabIcons = ["Github", "Discord"];
library.add( library.add(

View File

@ -179,6 +179,11 @@ export default new Vuex.Store({
return role; return role;
} }
}) })
// clean up role.id
.map(role => {
role.id = role.id.toLocaleLowerCase().replace(/[^a-z0-9]/g, "");
return role;
})
// map existing roles to base definition or pre-populate custom roles to ensure all properties // map existing roles to base definition or pre-populate custom roles to ensure all properties
.map( .map(
role => role =>

View File

@ -4,7 +4,8 @@ const NEWPLAYER = {
role: {}, role: {},
reminders: [], reminders: [],
isVoteless: false, isVoteless: false,
isDead: false isDead: false,
pronouns: ""
}; };
const state = () => ({ const state = () => ({
@ -79,10 +80,11 @@ const actions = {
return player; return player;
}); });
} else { } else {
players = state.players.map(({ name, id }) => ({ players = state.players.map(({ name, id, pronouns }) => ({
...NEWPLAYER, ...NEWPLAYER,
name, name,
id id,
pronouns
})); }));
commit("setFabled", { fabled: [] }); commit("setFabled", { fabled: [] });
} }

View File

@ -189,6 +189,9 @@ class LiveSession {
case "bye": case "bye":
this._handleBye(params); this._handleBye(params);
break; break;
case "pronouns":
this._updatePlayerPronouns(params);
break;
} }
} }
@ -244,6 +247,7 @@ class LiveSession {
id: player.id, id: player.id,
isDead: player.isDead, isDead: player.isDead,
isVoteless: player.isVoteless, isVoteless: player.isVoteless,
pronouns: player.pronouns,
...(player.role && player.role.team === "traveler" ...(player.role && player.role.team === "traveler"
? { roleId: player.role.id } ? { roleId: player.role.id }
: {}) : {})
@ -304,7 +308,7 @@ class LiveSession {
const player = players[x]; const player = players[x];
const { roleId } = state; const { roleId } = state;
// update relevant properties // update relevant properties
["name", "id", "isDead", "isVoteless"].forEach(property => { ["name", "id", "isDead", "isVoteless", "pronouns"].forEach(property => {
const value = state[property]; const value = state[property];
if (player[property] !== value) { if (player[property] !== value) {
this._store.commit("players/update", { player, property, value }); this._store.commit("players/update", { player, property, value });
@ -481,6 +485,41 @@ class LiveSession {
} }
} }
/**
* Publish a player pronouns update
* @param player
* @param value
*/
sendPlayerPronouns({ player, value }) {
//send pronoun only for the seated player or storyteller
if (this._isSpectator && this._store.state.session.playerId !== player.id)
return;
const index = this._store.state.players.players.indexOf(player);
this._send("pronouns", [index, value, !this._isSpectator]);
}
/**
* Update a pronouns based on incoming data. Player only.
* @param index
* @param value
* @param fromSt
* @private
*/
_updatePlayerPronouns([index, value, fromST]) {
const player = this._store.state.players.players[index];
if (
player &&
(fromST || this._store.state.session.playerId !== player.id) &&
player.pronouns !== value
) {
this._store.commit("players/update", {
player,
property: "pronouns",
value
});
}
}
/** /**
* Handle a ping message by another player / storyteller * Handle a ping message by another player / storyteller
* @param playerIdOrCount * @param playerIdOrCount
@ -752,11 +791,11 @@ export default store => {
const session = new LiveSession(store); const session = new LiveSession(store);
// listen to mutations // listen to mutations
store.subscribe(({ type, payload }) => { store.subscribe(({ type, payload }, state) => {
switch (type) { switch (type) {
case "session/setSessionId": case "session/setSessionId":
if (payload) { if (state.session.sessionId) {
session.connect(payload); session.connect(state.session.sessionId);
} else { } else {
window.location.hash = ""; window.location.hash = "";
session.disconnect(); session.disconnect();
@ -810,7 +849,11 @@ export default store => {
session.sendGamestate("", true); session.sendGamestate("", true);
break; break;
case "players/update": case "players/update":
if (payload.property === "pronouns") {
session.sendPlayerPronouns(payload);
} else {
session.sendPlayer(payload); session.sendPlayer(payload);
}
break; break;
} }
}); });