added player move feature

src/components/Player.vue

@@ -37,14 +37,20 @@
         icon="times-circle"
         class="cancel"
         title="Cancel"
-        @click="doSwap(true)"
+        @click="cancel()"
       />
       <font-awesome-icon
         icon="exchange-alt"
         class="swap"
-        @click="doSwap()"
+        @click="swapPlayer(player)"
         title="Swap seats with this player"
       />
+      <font-awesome-icon
+        icon="redo-alt"
+        class="move"
+        @click="movePlayer(player)"
+        title="Move player to this seat"
+      />
 
       <font-awesome-icon
         icon="vote-yea"
@@ -65,14 +71,17 @@
       <transition name="fold">
         <ul class="menu" v-if="isMenuOpen && !session.isSpectator">
           <li @click="changeName">
-            <font-awesome-icon icon="user-edit" />
+            <font-awesome-icon icon="user-edit" />Rename
-            Rename
           </li>
           <!--<li @click="nomination">
             <font-awesome-icon icon="hand-point-right" />
             Nomination
           </li>-->
-          <li @click="initSwap">
+          <li @click="movePlayer()">
+            <font-awesome-icon icon="redo-alt" />
+            Move player
+          </li>
+          <li @click="swapPlayer()">
             <font-awesome-icon icon="exchange-alt" />
             Swap seats
           </li>
@@ -182,12 +191,16 @@ export default {
         value
       });
     },
-    initSwap() {
+    swapPlayer(player) {
       this.isMenuOpen = false;
-      this.$emit("swap-seats");
+      this.$emit("swap-player", player);
     },
-    doSwap(cancel) {
+    movePlayer(player) {
-      this.$emit("swap-seats", cancel ? false : this.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;

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,
+          from: Math.max(swap, move, nominate) === index,
-          swap: swapFrom > -1
+          swap: swap > -1,
+          move: move > -1,
+          nominate: nominate > -1
         }"
       ></Player>
     </ul>
@@ -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;
+        this.cancel();
-      } else if (to === false) {
+        this.swap = from;
-        this.swapFrom = -1;
       } 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;
     }
   }
 };

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);
       }

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 {
+import { fas } from "@fortawesome/free-solid-svg-icons";
-  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 { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-library.add(
+const faIcons = [
-  faBookOpen,
+  "BookOpen",
-  faCamera,
+  "BroadcastTower",
-  faCog,
+  "Camera",
-  faHeartbeat,
+  "CheckSquare",
-  faSearchMinus,
+  "Cog",
-  faSearchPlus,
+  "Copy",
-  faTheaterMasks,
+  "ExchangeAlt",
-  faTimesCircle,
+  "FileUpload",
-  faUser,
+  "HandPointRight",
-  faUserEdit,
+  "Heartbeat",
-  faUserFriends,
+  "Link",
-  faUsers,
+  "PeopleArrows",
-  faVoteYea,
+  "Random",
-  faCheckSquare,
+  "RedoAlt",
-  faSquare,
+  "SearchMinus",
-  faRandom,
+  "SearchPlus",
-  faPeopleArrows,
+  "Square",
-  faBroadcastTower,
+  "TheaterMasks",
-  faCopy,
+  "TimesCircle",
-  faExchangeAlt,
+  "Undo",
-  faHandPointRight,
+  "User",
-  faFileUpload,
+  "UserEdit",
-  faLink,
+  "UserFriends",
-  faUndo
+  "Users",
-);
+  "VoteYea"
-
+];
+library.add(...faIcons.map(i => fas["fa" + i]));
 Vue.component("font-awesome-icon", FontAwesomeIcon);
-
 Vue.config.productionTip = false;
 
 new Vue({

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]);
   }
 };