Simplify ally selection; add dashed borders for selected target

src/components/Combat.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="combat-layout">
     <div @wheel="horizWheelLeft" class="statblock-row" id="left-stats">
-      <Statblock @selectPredator="right = combatant.containedIn.owner" @selectAlly="right = combatant" @select="doSelectLeft(combatant)" class="left-stats" :data-destroyed="combatant.destroyed" :data-disabled="encounter.currentMove.side === combatant.side && encounter.currentMove !== combatant" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === left" :data-active-ally="combatant === right" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes).slice().reverse()" v-bind:key="'left-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
+      <Statblock @selectPredator="right = combatant.containedIn.owner" @select="doSelectLeft(combatant)" class="left-stats" :data-ally="combatant.side === encounter.currentMove.side" :data-destroyed="combatant.destroyed" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === left" :data-active-ally="combatant === right" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Heroes).slice().reverse()" v-bind:key="'left-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
       <div class="spacer"></div>
     </div>
     <div @wheel="horizWheelRight" class="statblock-row" id="right-stats">
-      <Statblock @selectPredator="left = combatant.containedIn.owner" @selectAlly="left = combatant" @select="doSelectRight(combatant)" class="right-stats" :data-destroyed="combatant.destroyed" :data-disabled="encounter.currentMove.side === combatant.side && encounter.currentMove !== combatant" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === right" :data-active-ally="combatant === left" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters)" v-bind:key="'right-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
+      <Statblock @selectPredator="left = combatant.containedIn.owner" @select="doSelectRight(combatant)" class="right-stats" :data-ally="combatant.side === encounter.currentMove.side" :data-destroyed="combatant.destroyed" :data-current-turn="encounter.currentMove === combatant" :data-active="combatant === right" :data-active-ally="combatant === left" :data-eaten="combatant.containedIn !== null" :data-dead="combatant.vigors.Health <= 0" v-for="(combatant, index) in combatants.filter(c => c.side == Side.Monsters)" v-bind:key="'right-stat-' + index" :subject="combatant" :initiative="encounter.initiatives.get(combatant)" />
       <div class="spacer"></div>
     </div>
     <div class="statblock-separator" id="statblock-separator-left"></div>
@@ -184,14 +184,22 @@ export default class Combat extends Vue {
   }
 
   doSelectLeft (combatant: Creature) {
-    if (combatant.side !== this.$props.encounter.currentMove.side && this.selectable(combatant)) {
-      this.$data.left = combatant
+    if (this.selectable(combatant)) {
+      if (combatant.side !== this.$props.encounter.currentMove.side) {
+        this.$data.left = combatant
+      } else {
+        this.$data.right = combatant
+      }
     }
   }
 
   doSelectRight (combatant: Creature) {
-    if (combatant.side !== this.$props.encounter.currentMove.side && this.selectable(combatant)) {
-      this.$data.right = combatant
+    if (this.selectable(combatant)) {
+      if (combatant.side !== this.$props.encounter.currentMove.side) {
+        this.$data.right = combatant
+      } else {
+        this.$data.left = combatant
+      }
     }
   }
 

src/components/Statblock.vue

@@ -61,7 +61,6 @@
       <button v-if="subject.perspective === POV.Third" @click.stop="subject.perspective = POV.Second">Second-person</button>
       <button v-if="subject.perspective === POV.First" @click.stop="subject.perspective = POV.Third">Third-person</button>
       <button v-if="subject.perspective === POV.Second" @click.stop="subject.perspective = POV.First">First-person</button>
-      <button class="if-not-selected" @click.stop="$emit('selectAlly')">Select ally as target</button>
     </div>
   </div>
 </template>
@@ -298,27 +297,29 @@ a {
 }
 
 .statblock[data-active] .statblock-shader-selected {
-  background: white;
-  opacity: 0.15;
+  border: 4px dashed red;
+  border-radius: 8px;
+  width: calc(100% - 8px);
+  height: calc(100% - 8px);
+  opacity: 0.75;
 }
 
 .statblock[data-active-ally] .statblock-shader-selected-ally {
-  background: #88f;
-  opacity: 0.20;
+  border: 4px dashed #f8f;
+  border-radius: 8px;
+  width: calc(100% - 8px);
+  height: calc(100% - 8px);
+  opacity: 0.75;
 }
 
 .statblock[data-current-turn] .statblock-shader-current-turn {
   border: 4px dashed white;
   border-radius: 8px;
   width: calc(100% - 8px);
-  heighT: calc(100% - 8px);
+  height: calc(100% - 8px);
   opacity: 0.75;
 }
 
-.statblock[data-disabled] {
-  color: #888;
-}
-
 .statblock-shader-dead i {
   font-size: 100px;
   position: absolute;
@@ -331,7 +332,6 @@ a {
   opacity: 0.50;
 }
 
-.statblock:hover[data-disabled] .statblock-shader-hover,
 .statblock:hover[data-active] .statblock-shader-hover {
   opacity: 0;
 }
@@ -345,6 +345,14 @@ a {
   display: none;
 }
 
+.statblock .if-ally {
+  display: none;
+}
+
+.statblock[data-ally] .if-ally {
+  display: block;
+}
+
 .statblock-status-icons {
   display: flex;
   justify-content: space-evenly;