From 709076fcc0cea89e6eb655575d8aedd7fbea4933 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sun, 19 Jul 2020 15:37:04 -0400
Subject: [PATCH] Use icons instead of text for the action groups

---
 src/components/Combat.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Combat.vue b/src/components/Combat.vue
index 0760de9..3999ec5 100644
--- a/src/components/Combat.vue
+++ b/src/components/Combat.vue
@@ -13,11 +13,11 @@
     </div>
     <div class="left-actions">
       <div class="vert-display">
-        <h2>Group-moves</h2>
+        <i class="action-label fas fa-users" v-if="left.validGroupActions(combatants).length > 0"></i>
         <ActionButton @described="described" @executed="executedLeft" v-for="action in left.validGroupActions(combatants)" :key="'right' + action.name" :action="action" :user="left" :target="right" :combatants="combatants" />
-        <h2>Moves</h2>
+        <i class="action-label fas fa-user-friends" v-if="left.validActions(right).length > 0"></i>
         <ActionButton @described="described" @executed="executedLeft" v-for="action in left.validActions(right)" :key="'left' + action.name" :action="action" :user="left" :target="right" :combatants="combatants" />
-        <h2>Self-moves</h2>
+        <i class="action-label fas fa-user" v-if="left.validActions(left).length > 0"></i>
         <ActionButton @described="described" @executed="executedLeft" v-for="action in left.validActions(left)" :key="'left' + action.name" :action="action" :user="left" :target="right" :combatants="combatants" />
       </div>
       <div>{{actionDescription}}</div>
@@ -27,11 +27,11 @@
     </div>
     <div class="right-actions">
       <div class="vert-display">
-        <h2>Group-moves</h2>
+        <i class="action-label fas fa-users" v-if="right.validGroupActions(combatants).length > 0"></i>
         <ActionButton @described="described" @executed="executedRight" v-for="action in right.validGroupActions(combatants)" :key="'right' + action.name" :action="action" :user="right" :target="left" :combatants="combatants" />
-        <h2>Moves</h2>
+        <i class="action-label fas fa-user-friends" v-if="right.validActions(left).length > 0"></i>
         <ActionButton @described="described" @executed="executedRight" v-for="action in right.validActions(left)" :key="'right' + action.name" :action="action" :user="right" :target="left" :combatants="combatants" />
-        <h2>Self-moves</h2>
+        <i class="action-label fas fa-user" v-if="right.validActions(right).length > 0"></i>
         <ActionButton @described="described" @executed="executedRight" v-for="action in right.validActions(right)" :key="'right' + action.name" :action="action" :user="right" :target="left" :combatants="combatants" />
       </div>
     </div>
@@ -258,6 +258,9 @@ a {
 .statblock:hover[data-active] {
   background: #666;
 }
+.action-label {
+  font-size: 200%;
+}
 </style>
 
 <style>
@@ -376,5 +379,4 @@ div.right-move {
 .combatant-picker {
   flex: 1 1;
 }
-
 </style>