only empty seats can be claimed by players and ST can clear seats now

src/App.vue

@@ -3,11 +3,11 @@
     id="app"
     @keyup="keyup"
     tabindex="-1"
-    v-bind:class="{
+    :class="{
       screenshot: grimoire.isScreenshot,
       night: grimoire.isNight
     }"
-    v-bind:style="{
+    :style="{
       backgroundImage: grimoire.background
         ? `url('${grimoire.background}')`
         : ''

src/components/Menu.vue

@@ -26,7 +26,7 @@
         :class="{ success: grimoire.isScreenshotSuccess }"
       />
     </span>
-    <div class="menu" v-bind:class="{ open: grimoire.isMenuOpen }">
+    <div class="menu" :class="{ open: grimoire.isMenuOpen }">
       <font-awesome-icon icon="cog" @click="toggleMenu" />
       <ul>
         <li class="tabs" :class="tab">

src/components/Player.vue

@@ -100,7 +100,7 @@
       <div
         class="name"
         @click="isMenuOpen = !isMenuOpen"
-        v-bind:class="{ active: isMenuOpen }"
+        :class="{ active: isMenuOpen }"
       >
         {{ player.name }}
       </div>
@@ -131,13 +131,27 @@
               <font-awesome-icon icon="times-circle" />
               Remove
             </li>
-          </template>
+            <li
-          <li @click="claimSeat" v-if="session.isSpectator">
+              @click="updatePlayer('id', '', true)"
+              v-if="player.id && session.sessionId"
+            >
               <font-awesome-icon icon="chair" />
-            <template v-if="player.id !== session.playerId">
+              Vacate seat
+            </li>
+          </template>
+          <li
+            @click="claimSeat"
+            v-if="session.isSpectator"
+            :class="{ disabled: player.id && player.id !== session.playerId }"
+          >
+            <font-awesome-icon icon="chair" />
+            <template v-if="!player.id">
               Claim seat
             </template>
-            <template v-else> Vacate seat </template>
+            <template v-else-if="player.id === session.playerId">
+              Vacate seat
+            </template>
+            <template v-else> Seat occupied</template>
           </li>
         </ul>
       </transition>
@@ -146,14 +160,14 @@
     <template v-if="player.reminders">
       <div
         class="reminder"
-        v-bind:key="reminder.role + ' ' + reminder.name"
+        :key="reminder.role + ' ' + reminder.name"
         v-for="reminder in player.reminders"
-        v-bind:class="[reminder.role]"
+        :class="[reminder.role]"
         @click="removeReminder(reminder)"
       >
         <span
           class="icon"
-          v-bind:style="{
+          :style="{
             backgroundImage: `url(${reminder.image ||
               require('../assets/icons/' + reminder.role + '.png')})`
           }"
@@ -244,22 +258,23 @@ export default {
     changeName() {
       if (this.session.isSpectator) return;
       const name = prompt("Player name", this.player.name) || this.player.name;
-      this.updatePlayer("name", name);
+      this.updatePlayer("name", name, true);
-      this.isMenuOpen = false;
     },
     removeReminder(reminder) {
       const reminders = [...this.player.reminders];
       reminders.splice(this.player.reminders.indexOf(reminder), 1);
-      this.updatePlayer("reminders", reminders);
+      this.updatePlayer("reminders", reminders, true);
-      this.isMenuOpen = false;
     },
-    updatePlayer(property, value) {
+    updatePlayer(property, value, closeMenu = false) {
       if (this.session.isSpectator && property !== "reminders") return;
       this.$store.commit("players/update", {
         player: this.player,
         property,
         value
       });
+      if (closeMenu) {
+        this.isMenuOpen = false;
+      }
     },
     removePlayer() {
       this.isMenuOpen = false;
@@ -661,6 +676,14 @@ li.move:not(.from) .player .overlay svg.move {
   li:hover {
     color: red;
   }
+
+  li.disabled {
+    cursor: default;
+    &:hover {
+      color: white;
+    }
+  }
+
   svg {
     margin-right: 2px;
   }

src/components/Token.vue

@@ -3,7 +3,7 @@
     <span
       class="icon"
       v-if="role.id"
-      v-bind:style="{
+      :style="{
         backgroundImage: `url(${role.image ||
           require('../assets/icons/' + role.id + '.png')})`
       }"
@@ -18,7 +18,7 @@
     ></span>
     <span
       v-if="role.reminders && role.reminders.length"
-      v-bind:class="['leaf-top' + role.reminders.length]"
+      :class="['leaf-top' + role.reminders.length]"
     ></span>
     <span class="leaf-orange" v-if="role.setup"></span>
     <svg viewBox="0 0 150 150" class="name">
@@ -32,17 +32,14 @@
         x="66.6%"
         text-anchor="middle"
         class="label mozilla"
-        v-bind:font-size="role.name | nameToFontSize"
+        :font-size="role.name | nameToFontSize"
       >
         <textPath xlink:href="#curve">
           {{ role.name }}
         </textPath>
       </text>
     </svg>
-    <div
+    <div class="edition" :class="[`edition-${role.edition}`, role.team]"></div>
-      class="edition"
-      v-bind:class="[`edition-${role.edition}`, role.team]"
-    ></div>
     <div class="ability" v-if="role.ability">
       {{ role.ability }}
     </div>

src/components/TownInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <ul class="info">
-    <li class="edition" v-bind:class="['edition-' + edition]"></li>
+    <li class="edition" :class="['edition-' + edition]"></li>
     <li v-if="players.length - teams.traveler < 5">
       Please add more players!
     </li>
@@ -15,23 +15,23 @@
       {{ teams.outsider }}
       <font-awesome-icon
         class="outsider"
-        v-bind:icon="teams.outsider > 1 ? 'user-friends' : 'user'"
+        :icon="teams.outsider > 1 ? 'user-friends' : 'user'"
       />
       {{ teams.minion }}
       <font-awesome-icon
         class="minion"
-        v-bind:icon="teams.minion > 1 ? 'user-friends' : 'user'"
+        :icon="teams.minion > 1 ? 'user-friends' : 'user'"
       />
       {{ teams.demon }}
       <font-awesome-icon
         class="demon"
-        v-bind:icon="teams.demon > 1 ? 'user-friends' : 'user'"
+        :icon="teams.demon > 1 ? 'user-friends' : 'user'"
       />
       <template v-if="teams.traveler">
         {{ teams.traveler }}
         <font-awesome-icon
           class="traveler"
-          v-bind:icon="teams.traveler > 1 ? 'user-friends' : 'user'"
+          :icon="teams.traveler > 1 ? 'user-friends' : 'user'"
         />
       </template>
       <template v-if="grimoire.isNight">

src/components/TownSquare.vue

@@ -2,20 +2,20 @@
   <div
     id="townsquare"
     class="square"
-    v-bind:class="{
+    :class="{
       public: grimoire.isPublic,
       spectator: session.isSpectator,
       vote: session.nomination
     }"
   >
-    <ul class="circle" v-bind:class="['size-' + players.length]">
+    <ul class="circle" :class="['size-' + players.length]">
       <Player
         v-for="(player, index) in players"
         :key="index"
         :player="player"
         @screenshot="$emit('screenshot', $event)"
         @trigger="handleTrigger(index, $event)"
-        v-bind:class="{
+        :class="{
           from: Math.max(swap, move, nominate) === index,
           swap: swap > -1,
           move: move > -1,

src/components/modals/EditionModal.vue

@@ -6,8 +6,8 @@
         <li
           v-for="edition in editions"
           class="edition"
-          v-bind:class="['edition-' + edition.id]"
+          :class="['edition-' + edition.id]"
-          v-bind:key="edition.id"
+          :key="edition.id"
           @click="setEdition(edition.id)"
         >
           {{ edition.name }}
@@ -39,7 +39,7 @@
       <ul class="scripts">
         <li
           v-for="(script, index) in scripts"
-          v-bind:key="index"
+          :key="index"
           @click="handleURL(script[1])"
         >
           {{ script[0] }}

src/components/modals/FabledModal.vue

@@ -4,7 +4,7 @@
       Choose a fabled character to add to the game
     </h3>
     <ul class="tokens">
-      <li v-for="role in fabled" v-bind:key="role.id" @click="setFabled(role)">
+      <li v-for="role in fabled" :key="role.id" @click="setFabled(role)">
         <Token :role="role" />
       </li>
     </ul>

src/components/modals/NightOrderModal.vue

@@ -29,7 +29,7 @@
           <span
             class="icon"
             v-if="role.id"
-            v-bind:style="{
+            :style="{
               backgroundImage: `url(${role.image ||
                 require('../../assets/icons/' + role.id + '.png')})`
             }"
@@ -46,7 +46,7 @@
           <span
             class="icon"
             v-if="role.id"
-            v-bind:style="{
+            :style="{
               backgroundImage: `url(${role.image ||
                 require('../../assets/icons/' + role.id + '.png')})`
             }"

src/components/modals/ReferenceModal.vue

@@ -33,7 +33,7 @@
           <span
             class="icon"
             v-if="role.id"
-            v-bind:style="{
+            :style="{
               backgroundImage: `url(${role.image ||
                 require('../../assets/icons/' + role.id + '.png')})`
             }"

src/components/modals/RoleModal.vue

@@ -14,8 +14,8 @@
     <ul class="tokens">
       <li
         v-for="role in availableRoles"
-        v-bind:class="[role.team]"
+        :class="[role.team]"
-        v-bind:key="role.id"
+        :key="role.id"
         @click="setRole(role)"
       >
         <Token :role="role" />

src/components/modals/RolesModal.vue

@@ -5,19 +5,15 @@
     @close="toggleModal('roles')"
   >
     <h3>Select the characters for {{ nonTravelers }} players:</h3>
-    <ul
+    <ul class="tokens" v-for="(teamRoles, team) in roleSelection" :key="team">
-      class="tokens"
+      <li class="count" :class="[team]">
-      v-for="(teamRoles, team) in roleSelection"
-      v-bind:key="team"
-    >
-      <li class="count" v-bind:class="[team]">
         {{ teamRoles.filter(role => role.selected).length }} /
         {{ game[nonTravelers - 5][team] }}
       </li>
       <li
         v-for="role in teamRoles"
-        v-bind:class="[role.team, role.selected ? 'selected' : '']"
+        :class="[role.team, role.selected ? 'selected' : '']"
-        v-bind:key="role.id"
+        :key="role.id"
         @click="role.selected = !role.selected"
       >
         <Token :role="role" />
@@ -31,7 +27,7 @@
       <div
         class="button"
         @click="assignRoles"
-        v-bind:class="{
+        :class="{
           disabled: selectedRoles > nonTravelers || !selectedRoles
         }"
       >

src/store/socket.js

@@ -510,11 +510,13 @@ class LiveSession {
 
   /**
    * Claim a seat, needs to be confirmed by the Storyteller.
-   * @param seat either -1 or the index of the seat claimed
+   * Seats already occupied can't be claimed.
+   * @param seat either -1 to vacate or the index of the seat claimed
    */
   claimSeat(seat) {
     if (!this._isSpectator) return;
-    if (this._store.state.players.players.length > seat) {
+    const players = this._store.state.players.players;
+    if (players.length > seat && (seat < 0 || !players[seat].id)) {
       this._send("claim", [seat, this._store.state.session.playerId]);
     }
   }