From cb45da4de49663a567bb2271e756cffd67b45163 Mon Sep 17 00:00:00 2001 From: Dave Date: Sat, 16 Jan 2021 23:56:10 +0000 Subject: [PATCH 01/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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 0ffde8418870e0f05cc2889d66ce52ac189a3375 Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 28 Feb 2021 11:00:41 +0000 Subject: [PATCH 14/31] adding code doc comments to the sendPlayerPronoun method --- src/store/socket.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/store/socket.js b/src/store/socket.js index e54a39c..dd647e2 100644 --- a/src/store/socket.js +++ b/src/store/socket.js @@ -485,6 +485,11 @@ class LiveSession { } } + /** + * Publish a player pronoun update + * @param player + * @param pronoun + */ sendPlayerPronoun({ player, pronoun }) { if (!this._isSpectator) return; const index = this._store.state.players.players.indexOf(player); From 769c891a67c04916923b41e98908466ac0958568 Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 28 Feb 2021 11:23:16 +0000 Subject: [PATCH 15/31] correcting pronoun to pronouns in all occurances --- src/components/Player.vue | 17 ++++++++++------- src/store/modules/players.js | 4 ++-- src/store/persistence.js | 2 +- src/store/socket.js | 28 ++++++++++++++-------------- 4 files changed, 27 insertions(+), 24 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 6be86cb..0a95818 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -104,8 +104,8 @@ :class="{ active: isMenuOpen }" > {{ player.name }} -
    - {{ player.pronoun }} +
    + {{ player.pronouns }}
    @@ -154,7 +154,7 @@
  • Change Pronouns @@ -241,13 +241,16 @@ export default { }; }, methods: { - changePronoun() { + changePronouns() { 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", { + const pronouns = prompt( + "Player preffered pronouns", + this.player.pronouns + ); + this.$store.commit("players/setPronouns", { player: this.player, - pronoun + pronouns }); this.isMenuOpen = false; }, diff --git a/src/store/modules/players.js b/src/store/modules/players.js index a04879b..7394456 100644 --- a/src/store/modules/players.js +++ b/src/store/modules/players.js @@ -107,10 +107,10 @@ const mutations = { state.players[index][property] = value; } }, - setPronoun(state, { player, pronoun }) { + setPronouns(state, { player, pronouns }) { const index = state.players.indexOf(player); if (index >= 0) { - state.players[index].pronoun = pronoun; + state.players[index].pronouns = pronouns; } }, add(state, name) { diff --git a/src/store/persistence.js b/src/store/persistence.js index 7599cf7..d525142 100644 --- a/src/store/persistence.js +++ b/src/store/persistence.js @@ -137,7 +137,7 @@ module.exports = store => { case "players/set": case "players/swap": case "players/move": - case "players/setPronoun": + case "players/setPronouns": if (state.players.players.length) { localStorage.setItem( "players", diff --git a/src/store/socket.js b/src/store/socket.js index dd647e2..35b1972 100644 --- a/src/store/socket.js +++ b/src/store/socket.js @@ -189,8 +189,8 @@ class LiveSession { case "bye": this._handleBye(params); break; - case "pronoun": - this._updatePlayerPronoun(params); + case "pronouns": + this._updatePlayerPronouns(params); break; } } @@ -247,7 +247,7 @@ class LiveSession { id: player.id, isDead: player.isDead, isVoteless: player.isVoteless, - pronoun: player.pronoun, + pronouns: player.pronouns, ...(player.role && player.role.team === "traveler" ? { roleId: player.role.id } : {}) @@ -308,7 +308,7 @@ class LiveSession { const player = players[x]; const { roleId } = state; // update relevant properties - ["name", "id", "isDead", "isVoteless", "pronoun"].forEach(property => { + ["name", "id", "isDead", "isVoteless", "pronouns"].forEach(property => { const value = state[property]; if (player[property] !== value) { this._store.commit("players/update", { player, property, value }); @@ -486,26 +486,26 @@ class LiveSession { } /** - * Publish a player pronoun update + * Publish a player pronouns update * @param player - * @param pronoun + * @param pronouns */ - sendPlayerPronoun({ player, pronoun }) { + sendPlayerPronouns({ player, pronouns }) { if (!this._isSpectator) return; const index = this._store.state.players.players.indexOf(player); - this._send("pronoun", { index, pronoun }); + this._send("pronouns", { index, pronouns }); } /** - * Update a pronoun based on incoming data. Player only. + * Update a pronouns based on incoming data. Player only. * @param index - * @param pronoun + * @param pronouns * @private */ - _updatePlayerPronoun({ index, pronoun }) { + _updatePlayerPronouns({ index, pronouns }) { const player = this._store.state.players.players[index]; if (!player) return; - this._store.commit("players/setPronoun", { player, pronoun }); + this._store.commit("players/setPronouns", { player, pronouns }); } /** @@ -839,8 +839,8 @@ export default store => { case "players/update": session.sendPlayer(payload); break; - case "players/setPronoun": - session.sendPlayerPronoun(payload); + case "players/setPronouns": + session.sendPlayerPronouns(payload); break; } }); From 3f33e105648a5c73d3be54292cff47731ea2f041 Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 28 Feb 2021 11:31:18 +0000 Subject: [PATCH 16/31] cleaning up formatting and syntax style in player.vue CSS --- src/components/Player.vue | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 0a95818..2520699 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -701,17 +701,13 @@ li.move:not(.from) .player .overlay svg.move { } } - &:hover { - .pronouns { - opacity: 1; - } + &:hover .pronouns { + opacity: 1; } - #townsquare:not(.spectator) &:hover, - &.active { - .pronouns { - color: white; - } + #townsquare:not(.spectator) &:hover .pronouns, + &.active .pronouns { + color: white; } } From 58263e2f6ddecaf4df59d51c87a9700817b38af1 Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 28 Feb 2021 11:46:54 +0000 Subject: [PATCH 17/31] Fixing ordering of fontawesome import array to maintain alphabetical ordering --- src/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main.js b/src/main.js index 30715bc..a11e77b 100644 --- a/src/main.js +++ b/src/main.js @@ -38,6 +38,7 @@ const faIcons = [ "TheaterMasks", "Times", "TimesCircle", + "Transgender", "TrashAlt", "Undo", "User", @@ -46,8 +47,7 @@ const faIcons = [ "Users", "VolumeUp", "VolumeMute", - "VoteYea", - "Transgender" + "VoteYea" ]; const fabIcons = ["Github", "Discord"]; library.add( From ecb205e027261c423d53398b3877c5898bf053da Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 28 Feb 2021 13:17:40 +0000 Subject: [PATCH 18/31] cleaning up vueX code to reuse existing player update methods, and add form flow logic to block infinite loops --- src/components/Player.vue | 13 +++++++------ src/store/modules/players.js | 6 ------ src/store/persistence.js | 1 - src/store/socket.js | 28 +++++++++++++++++----------- 4 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 2520699..f6ff859 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -248,11 +248,7 @@ export default { "Player preffered pronouns", this.player.pronouns ); - this.$store.commit("players/setPronouns", { - player: this.player, - pronouns - }); - this.isMenuOpen = false; + this.updatePlayer("pronouns", pronouns, true); }, toggleStatus() { if (this.grimoire.isPublic) { @@ -282,7 +278,12 @@ export default { this.updatePlayer("reminders", reminders, true); }, 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", { player: this.player, property, diff --git a/src/store/modules/players.js b/src/store/modules/players.js index 7394456..83bd351 100644 --- a/src/store/modules/players.js +++ b/src/store/modules/players.js @@ -107,12 +107,6 @@ const mutations = { state.players[index][property] = value; } }, - setPronouns(state, { player, pronouns }) { - const index = state.players.indexOf(player); - if (index >= 0) { - state.players[index].pronouns = pronouns; - } - }, add(state, name) { state.players.push({ ...NEWPLAYER, diff --git a/src/store/persistence.js b/src/store/persistence.js index d525142..4ba71e1 100644 --- a/src/store/persistence.js +++ b/src/store/persistence.js @@ -137,7 +137,6 @@ module.exports = store => { case "players/set": case "players/swap": case "players/move": - case "players/setPronouns": if (state.players.players.length) { localStorage.setItem( "players", diff --git a/src/store/socket.js b/src/store/socket.js index 35b1972..492cf6f 100644 --- a/src/store/socket.js +++ b/src/store/socket.js @@ -488,24 +488,29 @@ class LiveSession { /** * Publish a player pronouns update * @param player - * @param pronouns + * @param value */ - sendPlayerPronouns({ player, pronouns }) { - if (!this._isSpectator) return; + sendPlayerPronouns({ player, value }) { + //send pronoun only for the current player + if (this._store.state.session.playerId !== player.id) return; const index = this._store.state.players.players.indexOf(player); - this._send("pronouns", { index, pronouns }); + this._send("pronouns", { index, value }); } /** * Update a pronouns based on incoming data. Player only. * @param index - * @param pronouns + * @param value * @private */ - _updatePlayerPronouns({ index, pronouns }) { + _updatePlayerPronouns({ index, value }) { const player = this._store.state.players.players[index]; - if (!player) return; - this._store.commit("players/setPronouns", { player, pronouns }); + if (!player || this._store.state.session.playerId === player.id) return; + this._store.commit("players/update", { + player, + property: "pronouns", + value + }); } /** @@ -837,11 +842,12 @@ export default store => { session.sendGamestate("", true); break; case "players/update": + if (payload.property === "pronouns") { + session.sendPlayerPronouns(payload); + break; + } session.sendPlayer(payload); break; - case "players/setPronouns": - session.sendPlayerPronouns(payload); - break; } }); From b9bd77789acc1c06e1c85ef5a20803a9c4cf405b Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 28 Feb 2021 13:19:34 +0000 Subject: [PATCH 19/31] correcting spelling of preferred on pronoun prompt --- 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 f6ff859..82586c3 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -245,7 +245,7 @@ export default { if (!this.session.isSpectator || this.player.id !== this.session.playerId) return; const pronouns = prompt( - "Player preffered pronouns", + "Player preferred pronouns", this.player.pronouns ); this.updatePlayer("pronouns", pronouns, true); From f670193fba909a28881a52c391f4c70cb5113ff2 Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 28 Feb 2021 13:26:58 +0000 Subject: [PATCH 20/31] added a max width and overflow hidden to the pronouns tooltip to stop it getting too long --- src/components/Player.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Player.vue b/src/components/Player.vue index 82586c3..deb9839 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -675,6 +675,7 @@ li.move:not(.from) .player .overlay svg.move { .pronouns { display: inline-flex; position: absolute; + max-width: 250px; padding: 5px 10px; left: 110%; font-size: 80%; @@ -687,6 +688,7 @@ li.move:not(.from) .player .overlay svg.move { align-content: center; align-items: center; pointer-events: none; + overflow: hidden; opacity: 0; transition: opacity 200ms ease-in-out; From 81af1224585fcfe1af375ab0674c76f2ef1cafee Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 28 Feb 2021 14:51:15 +0000 Subject: [PATCH 21/31] making change pronoun option appear for story teller as well as seated player and updating flow control logic to allow story teller to change the pronouns for any player --- src/components/Player.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index deb9839..89991d9 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -155,7 +155,10 @@
  • Change Pronouns
    • @@ -242,7 +245,7 @@ export default { }, methods: { changePronouns() { - if (!this.session.isSpectator || this.player.id !== this.session.playerId) + if (this.session.isSpectator && this.player.id !== this.session.playerId) return; const pronouns = prompt( "Player preferred pronouns", From 6ad516588cdf5ad8506d951613ba8aa6bc4b65ee Mon Sep 17 00:00:00 2001 From: Dave Date: Sun, 28 Feb 2021 16:08:31 +0000 Subject: [PATCH 22/31] updated sockets send and recieve logic for pronouns to allow ST to update players pronouns and block infinite loops between a seated player and ST updates --- src/store/socket.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/store/socket.js b/src/store/socket.js index 492cf6f..b0a7f57 100644 --- a/src/store/socket.js +++ b/src/store/socket.js @@ -491,21 +491,28 @@ class LiveSession { * @param value */ sendPlayerPronouns({ player, value }) { - //send pronoun only for the current player - if (this._store.state.session.playerId !== player.id) return; + //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._send("pronouns", { index, value, fromST: !this._isSpectator }); } /** * Update a pronouns based on incoming data. Player only. * @param index * @param value + * @param fromSt * @private */ - _updatePlayerPronouns({ index, value }) { + _updatePlayerPronouns({ index, value, fromST }) { const player = this._store.state.players.players[index]; - if (!player || this._store.state.session.playerId === player.id) return; + if ( + !player || + (!fromST && this._store.state.session.playerId === player.id) || + player.pronouns === value + ) + return; this._store.commit("players/update", { player, property: "pronouns", From 2a028bb7cdae399bb7086df8a95d4c177bc04c50 Mon Sep 17 00:00:00 2001 From: Dave Date: Mon, 1 Mar 2021 14:53:32 +0000 Subject: [PATCH 23/31] stop pronouns being set to null when cacelling prompt --- src/components/Player.vue | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 89991d9..6cc6d2d 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -247,10 +247,9 @@ export default { changePronouns() { if (this.session.isSpectator && this.player.id !== this.session.playerId) return; - const pronouns = prompt( - "Player preferred pronouns", - this.player.pronouns - ); + const pronouns = + prompt("Player preferred pronouns", this.player.pronouns) || + this.player.pronouns; this.updatePlayer("pronouns", pronouns, true); }, toggleStatus() { From 2590f00ea99d349d976232d83419cc9fe37faf61 Mon Sep 17 00:00:00 2001 From: Dave Date: Mon, 1 Mar 2021 14:55:05 +0000 Subject: [PATCH 24/31] removing preferred, to mkae it just Player Pronouns --- src/components/Player.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 6cc6d2d..af52460 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -248,8 +248,7 @@ export default { if (this.session.isSpectator && this.player.id !== this.session.playerId) return; const pronouns = - prompt("Player preferred pronouns", this.player.pronouns) || - this.player.pronouns; + prompt("Player pronouns", this.player.pronouns) || this.player.pronouns; this.updatePlayer("pronouns", pronouns, true); }, toggleStatus() { From f6ca08d6d562fbc9f9b913cdb8069b1107d378c2 Mon Sep 17 00:00:00 2001 From: Dave Date: Tue, 2 Mar 2021 18:50:18 +0000 Subject: [PATCH 25/31] reworked CSS for pronoun tooltip and a little bit of player name to fix text overflow. Also moved the text content in to span tags for styling. --- src/components/Player.vue | 43 ++++++++++++++++------------------- src/components/TownSquare.vue | 14 ++++++------ 2 files changed, 26 insertions(+), 31 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index af52460..29b7b73 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -97,15 +97,14 @@ @click="updatePlayer('isVoteless', true)" title="Ghost vote" /> -
    - {{ player.name }} + {{ player.name }}
    - {{ player.pronouns }} + {{ player.pronouns }}
    @@ -653,7 +652,7 @@ li.move:not(.from) .player .overlay svg.move { /***** Player name *****/ .player > .name { - text-align: center; + display: inline-flex; justify-content: center; font-size: 120%; line-height: 120%; @@ -665,31 +664,36 @@ li.move:not(.from) .player .overlay svg.move { border-radius: 10px; top: 5px; box-shadow: 0 0 5px black; - text-overflow: ellipsis; padding: 0 4px; + span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + #townsquare:not(.spectator) &:hover, &.active { color: red; } + &:hover .pronouns { + opacity: 1; + color: white; + } + .pronouns { display: inline-flex; position: absolute; + right: 120%; max-width: 250px; - padding: 5px 10px; - left: 110%; - font-size: 80%; + 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)); - text-align: left; - justify-items: center; - align-content: center; align-items: center; pointer-events: none; - overflow: hidden; opacity: 0; transition: opacity 200ms ease-in-out; @@ -698,21 +702,12 @@ li.move:not(.from) .player .overlay svg.move { border: 10px solid transparent; width: 0; height: 0; - border-right-color: black; + border-left-color: black; position: absolute; - margin-right: 2px; - right: 100%; + margin-left: 2px; + left: 100%; } } - - &:hover .pronouns { - opacity: 1; - } - - #townsquare:not(.spectator) &:hover .pronouns, - &.active .pronouns { - color: white; - } } .player.dead > .name { diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue index 2849327..aea812e 100644 --- a/src/components/TownSquare.vue +++ b/src/components/TownSquare.vue @@ -292,15 +292,15 @@ export default { left: 100%; } } - //show pronouns tooltip on the left + .pronouns { - right: 110%; - left: auto; + left: 120%; + right: auto; &:before { - border-right-color: transparent; - border-left-color: black; - right: auto; - left: 100%; + border-left-color: transparent; + border-right-color: black; + left: auto; + right: 100%; } } } @else { From 77e89f290b66f35e7633841cfb610cabb363d830 Mon Sep 17 00:00:00 2001 From: Dave Date: Tue, 2 Mar 2021 19:03:36 +0000 Subject: [PATCH 26/31] changed out transgender symbol for the hopefully more suitable venus-mars icon --- src/components/Player.vue | 2 +- src/main.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 29b7b73..e4b3242 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -159,7 +159,7 @@ (session.isSpectator && player.id === session.playerId) " > - Change Pronouns + Change Pronouns     diff --git a/src/main.js b/src/main.js index a11e77b..1e1afdb 100644 --- a/src/main.js +++ b/src/main.js @@ -38,13 +38,13 @@ const faIcons = [ "TheaterMasks", "Times", "TimesCircle", - "Transgender", "TrashAlt", "Undo", "User", "UserEdit", "UserFriends", "Users", + "VenusMars", "VolumeUp", "VolumeMute", "VoteYea" From 992841a45be76dfa4aa07045a7440a362fc7892a Mon Sep 17 00:00:00 2001 From: Dave Date: Tue, 2 Mar 2021 19:16:46 +0000 Subject: [PATCH 27/31] cleaning up methods added for sending and receiveing changed pronouns in sockets.js --- src/store/socket.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/store/socket.js b/src/store/socket.js index b0a7f57..a013dc5 100644 --- a/src/store/socket.js +++ b/src/store/socket.js @@ -495,7 +495,7 @@ class LiveSession { 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, fromST: !this._isSpectator }); + this._send("pronouns", [index, value, !this._isSpectator]); } /** @@ -505,19 +505,19 @@ class LiveSession { * @param fromSt * @private */ - _updatePlayerPronouns({ index, value, fromST }) { + _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 - ) - return; - this._store.commit("players/update", { - player, - property: "pronouns", - value - }); + player && + (fromST || this._store.state.session.playerId !== player.id) && + player.pronouns !== value + ) { + this._store.commit("players/update", { + player, + property: "pronouns", + value + }); + } } /** @@ -851,9 +851,9 @@ export default store => { case "players/update": if (payload.property === "pronouns") { session.sendPlayerPronouns(payload); - break; + } else { + session.sendPlayer(payload); } - session.sendPlayer(payload); break; } }); From 4d2225c994935c1bdfbb41b403e6d4d5803281e9 Mon Sep 17 00:00:00 2001 From: Dave Date: Wed, 3 Mar 2021 22:23:22 +0000 Subject: [PATCH 28/31] tweaking styles and adding pronouns icon to name bar if the player has pronouns set, made the name bar slighlty wider to allow for the same number of charachtersfor this and moved the player menu slightly to account for it. --- src/components/Player.vue | 22 +++++++++++++++++----- src/components/TownSquare.vue | 27 ++++++++++++++++++--------- 2 files changed, 35 insertions(+), 14 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index e4b3242..2f86725 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -102,6 +102,10 @@ @click="isMenuOpen = !isMenuOpen" :class="{ active: isMenuOpen }" > + {{ player.name }}
    {{ player.pronouns }} @@ -652,13 +656,14 @@ li.move:not(.from) .player .overlay svg.move { /***** Player name *****/ .player > .name { - display: inline-flex; + right: 10%; + display: flex; justify-content: center; font-size: 120%; line-height: 120%; cursor: pointer; white-space: nowrap; - width: 100%; + width: 120%; background: rgba(0, 0, 0, 0.5); border: 3px solid black; border-radius: 10px; @@ -666,6 +671,11 @@ li.move:not(.from) .player .overlay svg.move { box-shadow: 0 0 5px black; padding: 0 4px; + svg { + top: 3px; + margin-right: 10px; + } + span { overflow: hidden; text-overflow: ellipsis; @@ -683,9 +693,9 @@ li.move:not(.from) .player .overlay svg.move { } .pronouns { - display: inline-flex; + display: flex; position: absolute; - right: 120%; + right: 110%; max-width: 250px; z-index: 25; background: rgba(0, 0, 0, 0.5); @@ -696,6 +706,8 @@ li.move:not(.from) .player .overlay svg.move { pointer-events: none; opacity: 0; transition: opacity 200ms ease-in-out; + padding: 0 4px; + bottom: -3px; &:before { content: " "; @@ -717,7 +729,7 @@ li.move:not(.from) .player .overlay svg.move { /***** Player menu *****/ .player > .menu { position: absolute; - left: 100%; + left: 110%; bottom: -5px; text-align: left; white-space: nowrap; diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue index aea812e..80a838b 100644 --- a/src/components/TownSquare.vue +++ b/src/components/TownSquare.vue @@ -264,7 +264,7 @@ export default { // open menu on the left .player > .menu { left: auto; - right: 100%; + right: 110%; margin-right: 15px; &:before { border-left-color: black; @@ -293,14 +293,23 @@ export default { } } - .pronouns { - left: 120%; - right: auto; - &:before { - border-left-color: transparent; - border-right-color: black; - left: auto; - right: 100%; + .name { + flex-direction: row-reverse; + + svg { + margin-left: 10px; + margin-right: 2px; + } + + .pronouns { + left: 110%; + right: auto; + &:before { + border-left-color: transparent; + border-right-color: black; + left: auto; + right: 100%; + } } } } @else { From a4a44f9ba8e34269d1942b1ad139b252d30b320c Mon Sep 17 00:00:00 2001 From: Dave Date: Wed, 3 Mar 2021 22:34:02 +0000 Subject: [PATCH 29/31] fixing bug stopping pronouns from being removed by checking for null specifically instead of just a falsey value. --- src/components/Player.vue | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 2f86725..e5f7d9c 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -250,9 +250,11 @@ export default { changePronouns() { if (this.session.isSpectator && this.player.id !== this.session.playerId) return; - const pronouns = - prompt("Player pronouns", this.player.pronouns) || this.player.pronouns; - this.updatePlayer("pronouns", pronouns, true); + 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() { if (this.grimoire.isPublic) { From b932ce2a157129b995157603edcc3f2ecb8af241 Mon Sep 17 00:00:00 2001 From: Dave Date: Wed, 3 Mar 2021 22:38:52 +0000 Subject: [PATCH 30/31] updating changleog for version 2.9.0 to release new pronoun features --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c03df0..47921a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Release Notes +### Version 2.9.0 +- added support for assigning pronouns to players and display of the pronouns in a tooltip on the player name. + +--- ### Version 2.8.0 - added hands-off live session support for homebrew / custom characters again! - added custom image opt-in that will prevent any (potentially malicious / harmful) images from loading until a player manually allows them to From 9e249765de2be3d3a4d9e1596dd65e19a6d3b314 Mon Sep 17 00:00:00 2001 From: Dave Date: Sat, 6 Mar 2021 09:34:18 +0000 Subject: [PATCH 31/31] final styling changes, making pronouns icon always appear on the same side. --- src/components/Player.vue | 11 +++++------ src/components/TownSquare.vue | 26 ++++++++------------------ 2 files changed, 13 insertions(+), 24 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index e5f7d9c..5dab5f1 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -102,12 +102,9 @@ @click="isMenuOpen = !isMenuOpen" :class="{ active: isMenuOpen }" > - {{ player.name }} -
    + +
    {{ player.pronouns }}
    @@ -675,13 +672,15 @@ li.move:not(.from) .player .overlay svg.move { svg { top: 3px; - margin-right: 10px; + margin-right: 2px; } span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + text-align: center; + flex-grow: 1; } #townsquare:not(.spectator) &:hover, diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue index 80a838b..3236102 100644 --- a/src/components/TownSquare.vue +++ b/src/components/TownSquare.vue @@ -292,24 +292,14 @@ export default { left: 100%; } } - - .name { - flex-direction: row-reverse; - - svg { - margin-left: 10px; - margin-right: 2px; - } - - .pronouns { - left: 110%; - right: auto; - &:before { - border-left-color: transparent; - border-right-color: black; - left: auto; - right: 100%; - } + .pronouns { + left: 110%; + right: auto; + &:before { + border-left-color: transparent; + border-right-color: black; + left: auto; + right: 100%; } } } @else {