diff --git a/src/components/Player.vue b/src/components/Player.vue index 607b454..d7517c5 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -37,14 +37,20 @@ icon="times-circle" class="cancel" title="Cancel" - @click="doSwap(true)" + @click="cancel()" /> +
  • - - Rename + Rename
    • -
  • +
  • + + Move player +
    • +
  • Swap seats
    • @@ -182,12 +191,16 @@ export default { value }); }, - initSwap() { + swapPlayer(player) { this.isMenuOpen = false; - this.$emit("swap-seats"); + this.$emit("swap-player", player); }, - doSwap(cancel) { - this.$emit("swap-seats", cancel ? false : this.player); + movePlayer(player) { + this.isMenuOpen = false; + this.$emit("move-player", player); + }, + cancel() { + this.$emit("cancel"); } } }; @@ -353,6 +366,7 @@ export default { z-index: 2; cursor: pointer; &.swap, + &.move, &.cancel { top: 9%; left: 20%; @@ -368,13 +382,14 @@ export default { } } -li.swap-from .player > svg.cancel { +li.from .player > svg.cancel { opacity: 1; transform: scale(1); pointer-events: all; } -li.swap:not(.swap-from) .player > svg.swap { +li.swap:not(.from) .player > svg.swap, +li.move:not(.from) .player > svg.move { opacity: 1; transform: scale(1); pointer-events: all; diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue index 0d49dfc..b44ecb7 100644 --- a/src/components/TownSquare.vue +++ b/src/components/TownSquare.vue @@ -16,11 +16,15 @@ @add-reminder="openReminderModal(index)" @set-role="openRoleModal(index)" @remove-player="removePlayer(index)" - @swap-seats="swapSeats(index, $event)" + @cancel="cancel(index)" + @swap-player="swapPlayer(index, $event)" + @move-player="movePlayer(index, $event)" @screenshot="$emit('screenshot', $event)" v-bind:class="{ - 'swap-from': swapFrom === index, - swap: swapFrom > -1 + from: Math.max(swap, move, nominate) === index, + swap: swap > -1, + move: move > -1, + nominate: nominate > -1 }" >
@@ -66,7 +70,9 @@ export default { return { selectedPlayer: 0, bluffs: 3, - swapFrom: -1 + swap: -1, + move: -1, + nominate: -1 }; }, methods: { @@ -94,18 +100,34 @@ export default { this.$store.commit("players/remove", playerIndex); } }, - swapSeats(from, to) { + swapPlayer(from, to) { if (to === undefined) { - this.swapFrom = from; - } else if (to === false) { - this.swapFrom = -1; + this.cancel(); + this.swap = from; } else { this.$store.commit("players/swap", [ - this.swapFrom, + this.swap, this.players.indexOf(to) ]); - this.swapFrom = -1; + this.cancel(); } + }, + movePlayer(from, to) { + if (to === undefined) { + this.cancel(); + this.move = from; + } else { + this.$store.commit("players/move", [ + this.move, + this.players.indexOf(to) + ]); + this.cancel(); + } + }, + cancel() { + this.move = -1; + this.swap = -1; + this.nominate = -1; } } }; diff --git a/src/components/modals/EditionModal.vue b/src/components/modals/EditionModal.vue index 3ad6fb2..4f29304 100644 --- a/src/components/modals/EditionModal.vue +++ b/src/components/modals/EditionModal.vue @@ -106,7 +106,7 @@ export default { } }, promptURL() { - const url = prompt("Enter URL to a custom-script.JSON"); + const url = prompt("Enter URL to a custom-script.json file"); if (url) { this.handleURL(url); } diff --git a/src/main.js b/src/main.js index a50aa22..6e81f4c 100644 --- a/src/main.js +++ b/src/main.js @@ -2,63 +2,38 @@ import Vue from "vue"; import App from "./App"; import store from "./store"; import { library } from "@fortawesome/fontawesome-svg-core"; -import { - faBookOpen, - faCamera, - faCog, - faHeartbeat, - faSearchMinus, - faSearchPlus, - faTheaterMasks, - faTimesCircle, - faUser, - faUserEdit, - faUserFriends, - faUsers, - faVoteYea, - faCheckSquare, - faSquare, - faRandom, - faPeopleArrows, - faBroadcastTower, - faCopy, - faExchangeAlt, - faHandPointRight, - faFileUpload, - faLink, - faUndo -} from "@fortawesome/free-solid-svg-icons"; +import { fas } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; -library.add( - faBookOpen, - faCamera, - faCog, - faHeartbeat, - faSearchMinus, - faSearchPlus, - faTheaterMasks, - faTimesCircle, - faUser, - faUserEdit, - faUserFriends, - faUsers, - faVoteYea, - faCheckSquare, - faSquare, - faRandom, - faPeopleArrows, - faBroadcastTower, - faCopy, - faExchangeAlt, - faHandPointRight, - faFileUpload, - faLink, - faUndo -); - +const faIcons = [ + "BookOpen", + "BroadcastTower", + "Camera", + "CheckSquare", + "Cog", + "Copy", + "ExchangeAlt", + "FileUpload", + "HandPointRight", + "Heartbeat", + "Link", + "PeopleArrows", + "Random", + "RedoAlt", + "SearchMinus", + "SearchPlus", + "Square", + "TheaterMasks", + "TimesCircle", + "Undo", + "User", + "UserEdit", + "UserFriends", + "Users", + "VoteYea" +]; +library.add(...faIcons.map(i => fas["fa" + i])); Vue.component("font-awesome-icon", FontAwesomeIcon); - Vue.config.productionTip = false; new Vue({ diff --git a/src/store/modules/players.js b/src/store/modules/players.js index ed0838c..513bd94 100644 --- a/src/store/modules/players.js +++ b/src/store/modules/players.js @@ -84,6 +84,9 @@ const mutations = { state.players[to], state.players[from] ]; + }, + move(state, [from, to]) { + state.players.splice(to, 0, state.players.splice(from, 1)[0]); } };