From cb45da4de49663a567bb2271e756cffd67b45163 Mon Sep 17 00:00:00 2001 From: Dave Date: Sat, 16 Jan 2021 23:56:10 +0000 Subject: [PATCH 01/55] add pronoun property to player in state --- src/store/modules/players.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/store/modules/players.js b/src/store/modules/players.js index ffec7c3..83bd351 100644 --- a/src/store/modules/players.js +++ b/src/store/modules/players.js @@ -4,7 +4,8 @@ const NEWPLAYER = { role: {}, reminders: [], isVoteless: false, - isDead: false + isDead: false, + pronouns: "" }; const state = () => ({ From ccd40ccc993f60ed04d3d5908edde93a9c386f43 Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 17 Jan 2021 00:18:26 +0000 Subject: [PATCH 02/55] adding method and dialog to player vue to update player pronoun in state. --- src/components/Player.vue | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/Player.vue b/src/components/Player.vue index 91f8f5a..eeb43fe 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -112,6 +112,9 @@
  • Rename
    • +
  • + Change Pronouns +
  • Nomination @@ -230,6 +233,13 @@ export default { handleEmojis: text => text.replace(/:([^: ]+?):/g, "").replace(/ •/g, "\n•") }, methods: { + changePronoun() { + if (this.session.isSpectator) return; + const pronoun = + prompt("Player preffered pronouns", this.player.pronoun) || + this.player.pronoun; + this.updatePlayer("pronoun", pronoun, true); + }, toggleStatus() { if (this.grimoire.isPublic) { if (!this.player.isDead) { From 5bafa94a1a31e4aaceb4399a6ab8427b94b0b90c Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 17 Jan 2021 00:36:49 +0000 Subject: [PATCH 03/55] make change pronoun menu option appear for both story tellers and the seated player --- src/components/Player.vue | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index eeb43fe..5b3df03 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -112,9 +112,6 @@
  • Rename
    • -
  • - Change Pronouns -
  • Nomination @@ -153,6 +150,12 @@
    • +
  • + Change Pronouns +
    • From 37194a390fb0dd2c981145a520cfa018281dce17 Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 17 Jan 2021 00:50:07 +0000 Subject: [PATCH 04/55] adding fonat awesome idon to menu option for change pronouns --- src/components/Player.vue | 2 +- src/main.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 5b3df03..ddb2e2c 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -154,7 +154,7 @@ @click="changePronoun" v-if="!session.isSpectator || player.id === session.playerId" > - Change Pronouns + Change Pronouns diff --git a/src/main.js b/src/main.js index a89be35..f728114 100644 --- a/src/main.js +++ b/src/main.js @@ -46,7 +46,8 @@ const faIcons = [ "Users", "VolumeUp", "VolumeMute", - "VoteYea" + "VoteYea", + "Transgender" ]; const fabIcons = ["Github", "Discord"]; library.add( From d8df724907043b42e4602f74f9073bbc3bb1f4c0 Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 17 Jan 2021 23:20:59 +0000 Subject: [PATCH 05/55] created css for pronoun tooltips --- src/components/Player.vue | 49 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index ddb2e2c..f84f3be 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -104,6 +104,9 @@ :class="{ active: isMenuOpen }" > {{ player.name }} +
    + {{ player.pronoun }} +
    @@ -641,6 +644,7 @@ li.move:not(.from) .player .overlay svg.move { /***** Player name *****/ .player > .name { text-align: center; + justify-content: center; font-size: 120%; line-height: 120%; cursor: pointer; @@ -652,13 +656,56 @@ li.move:not(.from) .player .overlay svg.move { top: 5px; box-shadow: 0 0 5px black; text-overflow: ellipsis; - overflow: hidden; padding: 0 4px; #townsquare:not(.spectator) &:hover, &.active { color: red; } + + .pronouns { + display: inline-block; + position: absolute; + padding: 5px 10px; + left: 120%; + z-index: 25; + font-size: 80%; + 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)); + text-align: left; + justify-items: center; + align-content: center; + align-items: center; + pointer-events: none; + opacity: 0; + transition: opacity 200ms ease-in-out; + + &:before { + content: " "; + border: 10px solid transparent; + width: 0; + height: 0; + border-right-color: black; + position: absolute; + margin-right: 2px; + right: 100%; + } + } + + &:hover { + .pronouns { + opacity: 1; + } + } + + #townsquare:not(.spectator) &:hover, + &.active { + .pronouns { + color: white; + } + } } .player.dead > .name { From 03731bc88719d360d78ff0abc269a5f83fd6b44b Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 17 Jan 2021 23:41:44 +0000 Subject: [PATCH 06/55] tweaking position of tooltip --- src/components/Player.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index f84f3be..c89b9cc 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -664,11 +664,10 @@ li.move:not(.from) .player .overlay svg.move { } .pronouns { - display: inline-block; + display: inline-flex; position: absolute; padding: 5px 10px; - left: 120%; - z-index: 25; + left: 110%; font-size: 80%; background: rgba(0, 0, 0, 0.5); border-radius: 10px; From 48eab1fa8c2deca157030cd8b187ea9234b7876a Mon Sep 17 00:00:00 2001 From: Dave Date: Mon, 18 Jan 2021 14:02:03 +0000 Subject: [PATCH 07/55] getting player pronouns to be synced over sockets layer --- src/components/Player.vue | 1 + src/store/socket.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index c89b9cc..7d73ea7 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -245,6 +245,7 @@ export default { prompt("Player preffered pronouns", this.player.pronoun) || this.player.pronoun; this.updatePlayer("pronoun", pronoun, true); + this.$emit("trigger", ["updatePlayer", this.player, "pronoun", pronoun]); }, toggleStatus() { if (this.grimoire.isPublic) { diff --git a/src/store/socket.js b/src/store/socket.js index 4da4a7c..9b368ec 100644 --- a/src/store/socket.js +++ b/src/store/socket.js @@ -222,6 +222,7 @@ class LiveSession { id: player.id, isDead: player.isDead, isVoteless: player.isVoteless, + pronoun: player.pronoun, ...(player.role && player.role.team === "traveler" ? { roleId: player.role.id } : {}) @@ -279,7 +280,7 @@ class LiveSession { const player = players[x]; const { roleId } = state; // update relevant properties - ["name", "id", "isDead", "isVoteless"].forEach(property => { + ["name", "id", "isDead", "isVoteless", "pronoun"].forEach(property => { const value = state[property]; if (player[property] !== value) { this._store.commit("players/update", { player, property, value }); From 30ca53dde3d57c148ecab69eab922c2976c0f4dd Mon Sep 17 00:00:00 2001 From: Dave Date: Mon, 18 Jan 2021 19:40:14 +0000 Subject: [PATCH 08/55] make pronouns tooltip appear on the left on the right hand side of the circle. --- src/components/TownSquare.vue | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue index 684c386..c1aead5 100644 --- a/src/components/TownSquare.vue +++ b/src/components/TownSquare.vue @@ -292,6 +292,17 @@ export default { left: 100%; } } + //show pronouns tooltip on the left + .pronouns { + right: 120%; + left: auto; + &:before { + border-right-color: transparent; + border-left-color: black; + right: auto; + left: 100%; + } + } } @else { // second half of players z-index: $i - 1; From b645c1312daac330777e5e9e140c3914a95bfc8e Mon Sep 17 00:00:00 2001 From: Dave Date: Mon, 18 Jan 2021 19:42:28 +0000 Subject: [PATCH 09/55] fixing correct distance between tooltip and name when displaying on the left --- src/components/TownSquare.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue index c1aead5..2849327 100644 --- a/src/components/TownSquare.vue +++ b/src/components/TownSquare.vue @@ -294,7 +294,7 @@ export default { } //show pronouns tooltip on the left .pronouns { - right: 120%; + right: 110%; left: auto; &:before { border-right-color: transparent; From 18e5b865184b8868c51cef505fa114e7385d2e13 Mon Sep 17 00:00:00 2001 From: Dave Date: Mon, 25 Jan 2021 21:15:45 +0000 Subject: [PATCH 10/55] makeing option to change pronouns only show for currently seated player --- src/components/Player.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 7d73ea7..3a3e864 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -155,7 +155,7 @@
  • Change Pronouns
    • From e60def422650b6f8c15df2ba9413116973baa60a Mon Sep 17 00:00:00 2001 From: Dave Date: Wed, 27 Jan 2021 19:41:28 +0000 Subject: [PATCH 11/55] creating an action to store player pronoun in state and persist the data in local storage --- src/components/Player.vue | 12 ++++++------ src/store/modules/players.js | 6 ++++++ src/store/persistence.js | 1 + 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 3a3e864..4e5fdf1 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -240,12 +240,12 @@ export default { }, methods: { changePronoun() { - if (this.session.isSpectator) return; - const pronoun = - prompt("Player preffered pronouns", this.player.pronoun) || - this.player.pronoun; - this.updatePlayer("pronoun", pronoun, true); - this.$emit("trigger", ["updatePlayer", this.player, "pronoun", pronoun]); + const pronoun = prompt("Player preffered pronouns", this.player.pronoun); + this.$store.commit("players/setPronoun", { + player: this.player, + pronoun + }); + this.isMenuOpen = false; }, toggleStatus() { if (this.grimoire.isPublic) { diff --git a/src/store/modules/players.js b/src/store/modules/players.js index 83bd351..a04879b 100644 --- a/src/store/modules/players.js +++ b/src/store/modules/players.js @@ -107,6 +107,12 @@ const mutations = { state.players[index][property] = value; } }, + setPronoun(state, { player, pronoun }) { + const index = state.players.indexOf(player); + if (index >= 0) { + state.players[index].pronoun = pronoun; + } + }, add(state, name) { state.players.push({ ...NEWPLAYER, diff --git a/src/store/persistence.js b/src/store/persistence.js index fbd22ab..a0282fe 100644 --- a/src/store/persistence.js +++ b/src/store/persistence.js @@ -122,6 +122,7 @@ module.exports = store => { case "players/set": case "players/swap": case "players/move": + case "players/setPronoun": if (state.players.players.length) { localStorage.setItem( "players", From 60fab2efe05a1b9564804cb28f0fed1577af7be3 Mon Sep 17 00:00:00 2001 From: Dave Date: Wed, 27 Jan 2021 20:33:38 +0000 Subject: [PATCH 12/55] adding code to transmit changes to player pronoun --- src/store/socket.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/store/socket.js b/src/store/socket.js index 3c29e1c..32e5b02 100644 --- a/src/store/socket.js +++ b/src/store/socket.js @@ -170,6 +170,9 @@ class LiveSession { case "bye": this._handleBye(params); break; + case "pronoun": + this._updatePlayerPronoun(params); + break; } } @@ -461,6 +464,24 @@ class LiveSession { } } + sendPlayerPronoun({ player, pronoun }) { + if (!this._isSpectator) return; + const index = this._store.state.players.players.indexOf(player); + this._send("pronoun", { index, pronoun }); + } + + /** + * Update a pronoun based on incoming data. Player only. + * @param index + * @param pronoun + * @private + */ + _updatePlayerPronoun({ index, pronoun }) { + const player = this._store.state.players.players[index]; + if (!player) return; + this._store.commit("players/setPronoun", { player, pronoun }); + } + /** * Handle a ping message by another player / storyteller * @param isSpectator @@ -789,6 +810,9 @@ export default store => { case "players/update": session.sendPlayer(payload); break; + case "players/setPronoun": + session.sendPlayerPronoun(payload); + break; } }); From ec05b07329b8b269e9f5ab15f2840b2ff2fabff4 Mon Sep 17 00:00:00 2001 From: Dave Date: Wed, 27 Jan 2021 22:36:42 +0000 Subject: [PATCH 13/55] adding additional validation to changePronoun method in player.vue --- src/components/Player.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Player.vue b/src/components/Player.vue index 4e5fdf1..8c777f2 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -240,6 +240,8 @@ export default { }, methods: { changePronoun() { + if (!this.session.isSpectator || this.player.id !== this.session.playerId) + return; const pronoun = prompt("Player preffered pronouns", this.player.pronoun); this.$store.commit("players/setPronoun", { player: this.player, From 3126de390d69c00166a82fd3cfdd63d56964d439 Mon Sep 17 00:00:00 2001 From: nicfreeman1209 Date: Fri, 29 Jan 2021 22:33:38 +0000 Subject: [PATCH 14/55] maximize reference modal & darken background, slightly compactify -> fits into half of a 1920x1080 screen --- src/components/modals/Modal.vue | 11 ++++++++--- src/components/modals/ReferenceModal.vue | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue index f5f686f..d8164c6 100644 --- a/src/components/modals/Modal.vue +++ b/src/components/modals/Modal.vue @@ -48,13 +48,18 @@ export default { flex-direction: column; max-width: 60%; - .characters &, - .vote-history &, - .night-reference & { + .night-reference &, + .vote-history & { max-height: 80%; max-width: 80%; overflow-y: auto; } + .characters & { + background: rgba(0, 0, 0, 0.95); + max-height: 100%; + max-width: 100%; + overflow-y: auto; + } ul { list-style-type: none; diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue index 29163a6..d4a6230 100644 --- a/src/components/modals/ReferenceModal.vue +++ b/src/components/modals/ReferenceModal.vue @@ -118,7 +118,7 @@ h4 { text-transform: capitalize; display: flex; align-items: center; - height: 20px; + height: 12px; &:before, &:after { content: " "; From 3020b2248cba0a126ef01aad4f6655b6a638be97 Mon Sep 17 00:00:00 2001 From: nicfreeman1209 Date: Wed, 3 Feb 2021 23:50:19 +0000 Subject: [PATCH 15/55] z-index: modals in front of menu +fix padding --- src/components/Menu.vue | 2 +- src/components/modals/Modal.vue | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 79715a5..39daeb4 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -328,7 +328,7 @@ export default { top: 3px; text-align: right; padding-right: 50px; - z-index: 200; + z-index: 75; svg { filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1)); diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue index d8164c6..3cb1647 100644 --- a/src/components/modals/Modal.vue +++ b/src/components/modals/Modal.vue @@ -56,8 +56,11 @@ export default { } .characters & { background: rgba(0, 0, 0, 0.95); - max-height: 100%; + padding: 0; + height: 100%; + width: 100%; max-width: 100%; + max-height: 100%; overflow-y: auto; } From 1abbea3cff6915241d18d4beea374a351e7ff13e Mon Sep 17 00:00:00 2001 From: nicfreeman1209 Date: Wed, 10 Feb 2021 02:04:02 +0000 Subject: [PATCH 16/55] add maximize button to modals status is remembered, per modal --- src/components/modals/Modal.vue | 58 +++++++++++++++------- src/components/modals/NightOrderModal.vue | 8 +-- src/components/modals/ReferenceModal.vue | 8 +-- src/components/modals/VoteHistoryModal.vue | 3 +- src/main.js | 3 +- 5 files changed, 52 insertions(+), 28 deletions(-) diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue index 3cb1647..b880393 100644 --- a/src/components/modals/Modal.vue +++ b/src/components/modals/Modal.vue @@ -3,11 +3,13 @@
    @@ -17,9 +19,18 @@