martyn
/
townsquare
mirror of https://github.com/bra1n/townsquare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

modularized session

This commit is contained in:
Steffen 2020-05-30 22:47:42 +02:00
parent 6dd797aa6d
commit 0f1397c53d
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
8 changed files with 126 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Menu.vue
View File

@ -106,10 +106,10 @@
<em>[C]</em> <em>[C]</em>
Choose & Assign Choose & Assign
</li> </li>
<li @click="clearRoles" v-if="players.length">
Remove all
</li>
</template> </template>
<li @click="clearRoles" v-if="players.length">
Remove all
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -144,9 +144,9 @@ export default {
Math.round(Math.random() * 10000) Math.round(Math.random() * 10000)
); );
if (sessionId) { if (sessionId) {
this.$store.commit("setSpectator", false); this.$store.commit("session/setSpectator", false);
this.$store.commit( this.$store.commit(
"setSessionId", "session/setSessionId",
sessionId.replace(/[^0-9a-z]/g, "").substr(0, 5) sessionId.replace(/[^0-9a-z]/g, "").substr(0, 5)
); );
this.copySessionUrl(); this.copySessionUrl();
@ -169,17 +169,17 @@ export default {
"Enter the channel number / name of the session you want to join" "Enter the channel number / name of the session you want to join"
); );
if (sessionId) { if (sessionId) {
this.$store.commit("setSpectator", true); this.$store.commit("session/setSpectator", true);
this.$store.commit( this.$store.commit(
"setSessionId", "session/setSessionId",
sessionId.replace(/[^0-9a-z]/g, "").substr(0, 5) sessionId.replace(/[^0-9a-z]/g, "").substr(0, 5)
); );
} }
}, },
leaveSession() { leaveSession() {
if (confirm("Are you sure you want to leave the active live game?")) { if (confirm("Are you sure you want to leave the active live game?")) {
this.$store.commit("setSpectator", false); this.$store.commit("session/setSpectator", false);
this.$store.commit("setSessionId", ""); this.$store.commit("session/setSessionId", "");
} }
}, },
addPlayer() { addPlayer() {
@ -203,7 +203,6 @@ export default {
} }
}, },
clearRoles() { clearRoles() {
if (this.session.isSpectator) return;
if (confirm("Are you sure you want to remove all player roles?")) { if (confirm("Are you sure you want to remove all player roles?")) {
this.$store.dispatch("players/clearRoles"); this.$store.dispatch("players/clearRoles");
this.$store.commit("setBluff"); this.$store.commit("setBluff");

51
src/components/Player.vue
View File

@ -69,29 +69,34 @@
</div> </div>
<transition name="fold"> <transition name="fold">
<ul class="menu" v-if="isMenuOpen && !session.isSpectator"> <ul class="menu" v-if="isMenuOpen">
<li @click="changeName"> <template v-if="!session.isSpectator">
<font-awesome-icon icon="user-edit" />Rename <li @click="changeName">
</li> <font-awesome-icon icon="user-edit" />Rename
<!--<li @click="nomination"> </li>
<font-awesome-icon icon="hand-point-right" /> <!--<li @click="nomination">
Nomination <font-awesome-icon icon="hand-point-right" />
</li>--> Nomination
<li @click="movePlayer()"> </li>-->
<font-awesome-icon icon="redo-alt" /> <li @click="movePlayer()">
Move player <font-awesome-icon icon="redo-alt" />
</li> Move player
<li @click="swapPlayer()"> </li>
<font-awesome-icon icon="exchange-alt" /> <li @click="swapPlayer()">
Swap seats <font-awesome-icon icon="exchange-alt" />
</li> Swap seats
<li @click="takeScreenshot"> </li>
<font-awesome-icon icon="camera" /> <li @click="takeScreenshot">
Screenshot <font-awesome-icon icon="camera" />
</li> Screenshot
<li @click="$emit('remove-player')"> </li>
<font-awesome-icon icon="times-circle" /> <li @click="$emit('remove-player')">
Remove <font-awesome-icon icon="times-circle" />
Remove
</li>
</template>
<li @click="claimSeat" v-if="session.isSpectator">
<font-awesome-icon icon="chair" /> Claim seat
</li> </li>
</ul> </ul>
</transition> </transition>

3
src/main.js
View File

@ -30,7 +30,8 @@ const faIcons = [
"UserEdit", "UserEdit",
"UserFriends", "UserFriends",
"Users", "Users",
"VoteYea" "VoteYea",
"Chair"
]; ];
library.add(...faIcons.map(i => fas["fa" + i])); library.add(...faIcons.map(i => fas["fa" + i]));
Vue.component("font-awesome-icon", FontAwesomeIcon); Vue.component("font-awesome-icon", FontAwesomeIcon);

26
src/store/index.js
View File

@ -1,8 +1,9 @@
import Vue from "vue"; import Vue from "vue";
import Vuex from "vuex"; import Vuex from "vuex";
import persistence from "./persistence"; import persistence from "./persistence";
import session from "./session"; import socket from "./socket";
import players from "./modules/players"; import players from "./modules/players";
import session from "./modules/session";
import editionJSON from "../editions.json"; import editionJSON from "../editions.json";
import rolesJSON from "../roles.json"; import rolesJSON from "../roles.json";
@ -23,7 +24,8 @@ const getRolesByEdition = (edition = "tb") => {
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules: {
players players,
session
}, },
state: { state: {
grimoire: { grimoire: {
@ -36,12 +38,6 @@ export default new Vuex.Store({
background: "", background: "",
bluffs: [] bluffs: []
}, },
session: {
sessionId: "",
isSpectator: false,
playerCount: 0,
playerId: ""
},
modals: { modals: {
reference: false, reference: false,
edition: false, edition: false,
@ -75,18 +71,6 @@ export default new Vuex.Store({
setBackground({ grimoire }, background) { setBackground({ grimoire }, background) {
grimoire.background = background; grimoire.background = background;
}, },
setSessionId({ session }, sessionId) {
session.sessionId = sessionId;
},
setPlayerId({ session }, playerId) {
session.playerId = playerId;
},
setSpectator({ session }, spectator) {
session.isSpectator = spectator;
},
setPlayerCount({ session }, playerCount) {
session.playerCount = playerCount;
},
setBluff({ grimoire }, { index, role } = {}) { setBluff({ grimoire }, { index, role } = {}) {
if (index !== undefined) { if (index !== undefined) {
grimoire.bluffs.splice(index, 1, role); grimoire.bluffs.splice(index, 1, role);
@ -128,5 +112,5 @@ export default new Vuex.Store({
} }
} }
}, },
plugins: [persistence, session] plugins: [persistence, socket]
}); });

22
src/store/modules/players.js
View File

@ -48,11 +48,23 @@ const actions = {
.map(a => a[1]); .map(a => a[1]);
commit("set", players); commit("set", players);
}, },
clearRoles({ state, commit }) { clearRoles({ state, commit, rootState }) {
const players = state.players.map(({ name }) => ({ let players;
name, if (rootState.session.isSpectator) {
...NEWPLAYER players = state.players.map(player => {
})); if (player.role.team !== "traveler") {
player.role = {};
}
player.reminders = [];
return player;
});
} else {
players = state.players.map(({ name, id }) => ({
name,
id,
...NEWPLAYER
}));
}
commit("set", players); commit("set", players);
} }
}; };

34
src/store/modules/session.js Normal file
View File

@ -0,0 +1,34 @@
const state = () => ({
sessionId: "",
isSpectator: false,
playerCount: 0,
playerId: "",
claimedSeat: -1
});
const getters = {};
const actions = {};
const mutations = {
setSessionId(state, sessionId) {
state.sessionId = sessionId;
},
setPlayerId(state, playerId) {
state.playerId = playerId;
},
setSpectator(state, spectator) {
state.isSpectator = spectator;
},
setPlayerCount(state, playerCount) {
state.playerCount = playerCount;
}
};
export default {
namespaced: true,
state,
getters,
actions,
mutations
};

12
src/store/persistence.js
View File

@ -32,12 +32,12 @@ module.exports = store => {
} }
/**** Session related data *****/ /**** Session related data *****/
if (localStorage.getItem("playerId")) { if (localStorage.getItem("playerId")) {
store.commit("setPlayerId", localStorage.getItem("playerId")); store.commit("session/setPlayerId", localStorage.getItem("playerId"));
} }
if (localStorage.getItem("session")) { if (localStorage.getItem("session")) {
const [spectator, sessionId] = JSON.parse(localStorage.getItem("session")); const [spectator, sessionId] = JSON.parse(localStorage.getItem("session"));
store.commit("setSpectator", spectator); store.commit("session/setSpectator", spectator);
store.commit("setSessionId", sessionId); store.commit("session/setSessionId", sessionId);
} }
// listen to mutations // listen to mutations
@ -99,7 +99,7 @@ module.exports = store => {
localStorage.removeItem("players"); localStorage.removeItem("players");
} }
break; break;
case "setSessionId": case "session/setSessionId":
if (payload) { if (payload) {
localStorage.setItem( localStorage.setItem(
"session", "session",
@ -109,11 +109,11 @@ module.exports = store => {
localStorage.removeItem("session"); localStorage.removeItem("session");
} }
break; break;
case "setPlayerId": case "session/setPlayerId":
if (payload) { if (payload) {
localStorage.setItem("playerId", payload); localStorage.setItem("playerId", payload);
} else { } else {
localStorage.removeItem("setPlayerId"); localStorage.removeItem("playerId");
} }
break; break;
} }

56
src/store/session.js → src/store/socket.js
View File

@ -27,7 +27,7 @@ class LiveSession {
this._socket.onopen = this._onOpen.bind(this); this._socket.onopen = this._onOpen.bind(this);
this._socket.onclose = () => { this._socket.onclose = () => {
this._socket = null; this._socket = null;
this._store.commit("setSessionId", ""); this._store.commit("session/setSessionId", "");
clearInterval(this._pingTimer); clearInterval(this._pingTimer);
this._pingTimer = null; this._pingTimer = null;
}; };
@ -110,13 +110,13 @@ class LiveSession {
connect(channel) { connect(channel) {
if (!this._store.state.session.playerId) { if (!this._store.state.session.playerId) {
this._store.commit( this._store.commit(
"setPlayerId", "session/setPlayerId",
Math.random() Math.random()
.toString(36) .toString(36)
.substr(2) .substr(2)
); );
} }
this._store.commit("setPlayerCount", 0); this._store.commit("session/setPlayerCount", 0);
this._isSpectator = this._store.state.session.isSpectator; this._isSpectator = this._store.state.session.isSpectator;
this._open(channel); this._open(channel);
} }
@ -125,7 +125,7 @@ class LiveSession {
* Close the current session, if any. * Close the current session, if any.
*/ */
disconnect() { disconnect() {
this._store.commit("setPlayerCount", 0); this._store.commit("session/setPlayerCount", 0);
if (this._socket) { if (this._socket) {
this._send("bye", this._store.state.session.playerId); this._send("bye", this._store.state.session.playerId);
this._socket.close(); this._socket.close();
@ -140,6 +140,7 @@ class LiveSession {
if (this._isSpectator) return; if (this._isSpectator) return;
this._gamestate = this._store.state.players.players.map(player => ({ this._gamestate = this._store.state.players.players.map(player => ({
name: player.name, name: player.name,
id: player.id,
isDead: player.isDead, isDead: player.isDead,
isVoteless: player.isVoteless, isVoteless: player.isVoteless,
...(player.role && player.role.team === "traveler" ...(player.role && player.role.team === "traveler"
@ -181,28 +182,15 @@ class LiveSession {
// update status for each player // update status for each player
gamestate.forEach((state, x) => { gamestate.forEach((state, x) => {
const player = players[x]; const player = players[x];
const { name, isDead, isVoteless, role } = state; const { role } = state;
if (player.name !== name) { // update relevant properties
this._store.commit("players/update", { ["name", "id", "isDead", "isVoteless"].forEach(property => {
player, const value = state[property];
property: "name", if (player[property] !== value) {
value: name this._store.commit("players/update", { player, property, value });
}); }
} });
if (player.isDead !== isDead) { // roles are special, because of travelers
this._store.commit("players/update", {
player,
property: "isDead",
value: isDead
});
}
if (player.isVoteless !== isVoteless) {
this._store.commit("players/update", {
player,
property: "isVoteless",
value: isVoteless
});
}
if (role && player.role.id !== role.id) { if (role && player.role.id !== role.id) {
this._store.commit("players/update", { this._store.commit("players/update", {
player, player,
@ -298,7 +286,10 @@ class LiveSession {
delete this._players[player]; delete this._players[player];
} }
} }
this._store.commit("setPlayerCount", Object.keys(this._players).length); this._store.commit(
"session/setPlayerCount",
Object.keys(this._players).length
);
} }
/** /**
@ -308,7 +299,10 @@ class LiveSession {
*/ */
_handleBye(playerId) { _handleBye(playerId) {
delete this._players[playerId]; delete this._players[playerId];
this._store.commit("setPlayerCount", Object.keys(this._players).length); this._store.commit(
"session/setPlayerCount",
Object.keys(this._players).length
);
} }
} }
@ -319,7 +313,7 @@ module.exports = store => {
// listen to mutations // listen to mutations
store.subscribe(({ type, payload }) => { store.subscribe(({ type, payload }) => {
switch (type) { switch (type) {
case "setSessionId": case "session/setSessionId":
if (payload) { if (payload) {
session.connect(payload); session.connect(payload);
} else { } else {
@ -345,7 +339,7 @@ module.exports = store => {
// check for session Id in hash // check for session Id in hash
const [command, param] = window.location.hash.substr(1).split("/"); const [command, param] = window.location.hash.substr(1).split("/");
if (command === "play") { if (command === "play") {
store.commit("setSpectator", true); store.commit("session/setSpectator", true);
store.commit("setSessionId", param); store.commit("session/setSessionId", param);
} }
}; };