From a028cf867fb7962c8c46efeade6c46c81bef7ef0 Mon Sep 17 00:00:00 2001 From: Steffen Date: Fri, 8 May 2020 19:33:29 +0200 Subject: [PATCH 1/7] menu added, session plugin created --- src/components/Menu.vue | 40 ++++++++++++++++++++++++++++++++++++---- src/store/index.js | 9 +++++++-- src/store/session.js | 8 ++++++++ 3 files changed, 51 insertions(+), 6 deletions(-) create mode 100644 src/store/session.js diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 39ad9ee..24c4794 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -37,6 +37,16 @@
  • Background image
    • +
  • + Host Live Session +
    • +
  • + Join Live Session +
    • +
  • + {{ grimoire.sessionId.substr(2) }} + Leave Session +
  • @@ -80,10 +90,10 @@ export default { components: { Screenshot }, - computed: mapState({ - grimoire: state => state.grimoire, - players: state => state.players.players - }), + computed: { + ...mapState(["grimoire"]), + ...mapState("players", ["players"]) + }, methods: { takeScreenshot(dimensions = {}) { this.$store.commit("updateScreenshot"); @@ -95,6 +105,28 @@ export default { prompt("Enter custom background URL") ); }, + hostSession() { + const sessionId = prompt( + "Enter a code for your session", + Math.random() + .toString(36) + .substring(2, 7) + ); + if (sessionId) { + this.$store.commit("setSessionId", "h:" + sessionId.substr(0, 5)); + } + }, + joinSession() { + const sessionId = prompt( + "Enter the code of the session you want to join" + ); + if (sessionId) { + this.$store.commit("setSessionId", "j:" + sessionId.substr(0, 5)); + } + }, + leaveSession() { + this.$store.commit("setSessionId", ""); + }, addPlayer() { const name = prompt("Player name"); if (name) { diff --git a/src/store/index.js b/src/store/index.js index e5991cf..7a6b23e 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,6 +1,7 @@ import Vue from "vue"; import Vuex from "vuex"; import persistence from "./persistence"; +import session from "./session"; import players from "./modules/players"; import editionJSON from "../editions.json"; import rolesJSON from "../roles.json"; @@ -33,7 +34,8 @@ export default new Vuex.Store({ isScreenshotSuccess: false, zoom: 1, background: "", - bluffs: [] + bluffs: [], + sessionId: "" }, modals: { edition: false, @@ -67,6 +69,9 @@ export default new Vuex.Store({ setBackground({ grimoire }, background) { grimoire.background = background; }, + setSessionId({ grimoire }, sessionId) { + grimoire.sessionId = sessionId; + }, setBluff({ grimoire }, { index, role }) { grimoire.bluffs.splice(index, 1, role); }, @@ -88,5 +93,5 @@ export default new Vuex.Store({ state.roles = getRolesByEdition(edition); } }, - plugins: [persistence] + plugins: [persistence, session] }); diff --git a/src/store/session.js b/src/store/session.js new file mode 100644 index 0000000..0077564 --- /dev/null +++ b/src/store/session.js @@ -0,0 +1,8 @@ +module.exports = store => { + // setup + + // listen to mutations + store.subscribe(({ type, payload }, state) => { + console.log(type, payload, state); + }); +}; From da3cd967230de0900e2dca06ddcf5cf809671a02 Mon Sep 17 00:00:00 2001 From: Steffen Date: Sat, 9 May 2020 21:47:00 +0200 Subject: [PATCH 2/7] added live sessions for townsquare sync --- src/App.vue | 2 + src/components/Menu.vue | 75 ++++---- src/components/Player.vue | 32 ++-- src/components/TownInfo.vue | 4 +- src/components/TownSquare.vue | 8 +- src/components/modals/RoleModal.vue | 3 +- src/components/modals/RolesModal.vue | 4 +- src/main.js | 6 +- src/store/index.js | 6 +- src/store/modules/players.js | 4 +- src/store/session.js | 258 ++++++++++++++++++++++++++- 11 files changed, 342 insertions(+), 60 deletions(-) diff --git a/src/App.vue b/src/App.vue index 41baadf..00f57d7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -57,9 +57,11 @@ export default { this.$refs.menu.randomizeSeatings(); break; case "e": + if (this.grimoire.isSpectator) return; this.$store.commit("toggleModal", "edition"); break; case "c": + if (this.grimoire.isSpectator) return; this.$store.commit("toggleModal", "roles"); break; case "Escape": diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 24c4794..af22e0c 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -43,40 +43,46 @@
  • Join Live Session
    • +
  • + + {{ grimoire.isSpectator ? "Spectating" : "Hosting" }} +
  • - {{ grimoire.sessionId.substr(2) }} + {{ grimoire.sessionId }} Leave Session
    • - -
  • - - Players -
    • -
  • [A] Add
    • -
  • - [R] Randomize -
    • -
  • - Remove all -
    • + @@ -113,7 +119,8 @@ export default { .substring(2, 7) ); if (sessionId) { - this.$store.commit("setSessionId", "h:" + sessionId.substr(0, 5)); + this.$store.commit("setSpectator", false); + this.$store.commit("setSessionId", sessionId.substr(0, 5)); } }, joinSession() { @@ -121,29 +128,35 @@ export default { "Enter the code of the session you want to join" ); if (sessionId) { - this.$store.commit("setSessionId", "j:" + sessionId.substr(0, 5)); + this.$store.commit("setSpectator", true); + this.$store.commit("setSessionId", sessionId.substr(0, 5)); } }, leaveSession() { + this.$store.commit("setSpectator", false); this.$store.commit("setSessionId", ""); }, addPlayer() { + if (this.grimoire.isSpectator) return; const name = prompt("Player name"); if (name) { this.$store.commit("players/add", name); } }, randomizeSeatings() { + if (this.grimoire.isSpectator) return; if (confirm("Are you sure you want to randomize seatings?")) { this.$store.dispatch("players/randomize"); } }, clearPlayers() { + if (this.grimoire.isSpectator) return; if (confirm("Are you sure you want to remove all players?")) { this.$store.commit("players/clear"); } }, clearRoles() { + if (this.grimoire.isSpectator) return; this.$store.commit("showGrimoire"); if (confirm("Are you sure you want to remove all player roles?")) { this.$store.dispatch("players/clearRoles"); diff --git a/src/components/Player.vue b/src/components/Player.vue index fc2b60d..31c2e0f 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -4,8 +4,8 @@ ref="player" class="player" :class="{ - dead: player.hasDied, - 'no-vote': player.hasVoted, + dead: player.isDead, + 'no-vote': player.isVoteless, traveler: player.role && player.role.team === 'traveler' }" > @@ -36,8 +36,8 @@ @@ -109,20 +109,23 @@ export default { }, toggleStatus() { if (this.grimoire.isPublic) { - if (!this.player.hasDied) { - this.updatePlayer("hasDied", true); - } else if (this.player.hasVoted) { - this.updatePlayer("hasVoted", false); - this.updatePlayer("hasDied", false); + if (!this.player.isDead) { + this.updatePlayer("isDead", true); + } else if (this.player.isVoteless) { + this.updatePlayer("isVoteless", false); + this.updatePlayer("isDead", false); } else { - this.updatePlayer("hasVoted", true); + this.updatePlayer("isVoteless", true); } } else { - this.updatePlayer("hasDied", !this.player.hasDied); - this.updatePlayer("hasVoted", false); + this.updatePlayer("isDead", !this.player.isDead); + if (this.player.isVoteless) { + this.updatePlayer("isVoteless", false); + } } }, changeName() { + if (this.grimoire.isSpectator) return; const name = prompt("Player name", this.player.name) || this.player.name; this.updatePlayer("name", name); }, @@ -132,6 +135,7 @@ export default { this.updatePlayer("reminders", reminders); }, updatePlayer(property, value) { + if (this.grimoire.isSpectator && property !== "reminders") return; this.$store.commit("players/update", { player: this.player, property, @@ -181,7 +185,7 @@ export default { pointer-events: none; } - &:hover:before { + #townsquare:not(.spectator) &:hover:before { opacity: 0.5; top: -10px; transform: scale(1); @@ -332,7 +336,7 @@ export default { text-overflow: ellipsis; overflow: hidden; } - &:hover { + #townsquare:not(.spectator) &:hover { color: red; span { display: block; diff --git a/src/components/TownInfo.vue b/src/components/TownInfo.vue index 7eb9229..c2bf7ae 100644 --- a/src/components/TownInfo.vue +++ b/src/components/TownInfo.vue @@ -47,7 +47,7 @@ export default { teams: function() { const { players } = this.$store.state.players; const nonTravelers = this.$store.getters["players/nonTravelers"]; - const alive = players.filter(player => player.hasDied !== true).length; + const alive = players.filter(player => player.isDead !== true).length; return { ...gameJSON[nonTravelers - 5], traveler: players.length - nonTravelers, @@ -55,7 +55,7 @@ export default { votes: alive + players.filter( - player => player.hasDied === true && player.hasVoted !== true + player => player.isDead === true && player.isVoteless !== true ).length }; }, diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue index 1ec2bcf..f596c91 100644 --- a/src/components/TownSquare.vue +++ b/src/components/TownSquare.vue @@ -2,7 +2,10 @@