Add marching-ants borders to selected creatures

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" @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)" />
+      <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 && combatant !== encounter.currentMove" :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" @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)" />
+      <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 && combatant !== encounter.currentMove" :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>
@@ -157,7 +157,7 @@ export default class Combat extends Vue {
   }
 
   selectable (creature: Creature): boolean {
-    return !creature.destroyed
+    return !creature.destroyed && this.encounter.currentMove !== creature
   }
 
   doScroll (target: HTMLElement, speed: number, t: number) {

src/components/Statblock.vue

@@ -1,9 +1,9 @@
 <template>
   <div @click="$emit('select')" class="statblock">
     <div class="statblock-shader statblock-shader-hover"></div>
-    <div class="statblock-shader statblock-shader-selected"></div>
-    <div class="statblock-shader statblock-shader-selected-ally"></div>
-    <div class="statblock-shader statblock-shader-current-turn"></div>
+    <div class="statblock-shader statblock-shader-selected marching-ants"></div>
+    <div class="statblock-shader statblock-shader-selected-ally marching-ants"></div>
+    <div class="statblock-shader statblock-shader-current-turn marching-ants"></div>
     <div class="statblock-shader statblock-shader-dead">
       <i class="fas fa-skull-crossbones" />
     </div>
@@ -296,8 +296,15 @@ a {
   opacity: 0.5;
 }
 
+/* yoinked from https://codepen.io/danichk/pen/PPRxrR?editors=0110 */
+
+.marching-ants {
+  background: linear-gradient(#111, #111) padding-box, repeating-linear-gradient(-45deg, var(--ants-color) 0, var(--ants-color) 25%, transparent 0, transparent 50%) 0 / 20px 20px;
+  animation: marching-ants 12s infinite linear;
+  border: 4px solid transparent;
+}
 .statblock[data-active] .statblock-shader-selected {
-  border: 4px dashed red;
+  --ants-color: #f88;
   border-radius: 8px;
   width: calc(100% - 8px);
   height: calc(100% - 8px);
@@ -305,7 +312,8 @@ a {
 }
 
 .statblock[data-active-ally] .statblock-shader-selected-ally {
-  border: 4px dashed #f8f;
+  --ants-color: #88f;
+  border: 4px solid transparent;
   border-radius: 8px;
   width: calc(100% - 8px);
   height: calc(100% - 8px);
@@ -313,13 +321,20 @@ a {
 }
 
 .statblock[data-current-turn] .statblock-shader-current-turn {
-  border: 4px dashed white;
+  --ants-color: #fff;
+  border: 4px solid transparent;
   border-radius: 8px;
   width: calc(100% - 8px);
   height: calc(100% - 8px);
   opacity: 0.75;
 }
 
+@keyframes marching-ants {
+  to {
+    background-position: 100% 100%;
+  }
+}
+
 .statblock-shader-dead i {
   font-size: 100px;
   position: absolute;