Make the action buttons nicer; adjust container views

src/components/ActionButton.vue

@@ -1,6 +1,7 @@
 <template>
   <button class="action-button" @click="execute">
-    {{ action.name }}
+    <div class="action-title">{{ action.name }}</div>
+    <div class="action-desc">{{ action.desc }}</div>
   </button>
 </template>
 
@@ -32,8 +33,21 @@ export default class ActionButton extends Vue {
 <style scoped>
 
 .action-button {
-  width: 48pt;
-  height: 48pt;
+  width: 100pt;
+  background: #333;
+}
+
+.action-button:hover {
+  background: #555;
+}
+
+.action-title {
+  font-size: 125%;
+  color: #eee;
+}
+
+.action-desc {
+  color: #ccc;
 }
 
 </style>

src/components/Combat.vue

@@ -15,17 +15,19 @@
     <div id="log">
     </div>
     <div class="left-actions">
-      <h2>Your moves</h2>
       <div class="vert-display">
+        <h2>Moves</h2>
         <ActionButton @executed="executedLeft" v-for="action in left.validActions(right)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
+        <h2>Self-moves</h2>
         <ActionButton @executed="executedLeft" v-for="action in left.validActions(left)" :key="'left' + action.name" :action="action" :user="left" :target="right" />
       </div>
       <div>{{actionDescription}}</div>
     </div>
     <div class="right-actions">
-      <h2>Enemy moves</h2>
       <div class="vert-display">
+        <h2>Moves</h2>
         <ActionButton @executed="executedRight" v-for="action in right.validActions(left)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
+        <h2>Self-moves</h2>
         <ActionButton @executed="executedRight" v-for="action in right.validActions(right)" :key="'right' + action.name" :action="action" :user="right" :target="left" />
       </div>
     </div>
@@ -129,11 +131,11 @@ export default class Combat extends Vue {
 }
 
 .left-actions {
-  grid-area: 4 / 1 / 5 / 2;
+  grid-area: 4 / 1 / 6 / 2;
 }
 
 .right-actions {
-  grid-area: 4 / 3 / 5 / 4;
+  grid-area: 4 / 3 / 6 / 4;
 }
 
 h3 {
@@ -159,6 +161,8 @@ a {
   flex-direction: column;
   align-items: center;
   flex-wrap: wrap;
+  justify-content: start;
+  height: 100%;
 }
 </style>
 

src/components/ContainerView.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="container.fullness > 0" class="statblock">
-    <h3>{{container.name}}</h3>
-    <div>Fullness: {{container.fullness}} / {{container.capacity}}</div>
+    <h3>{{container.name.capital}}</h3>
+    <div>{{container.fullness}} / {{container.capacity}}</div>
     <div v-for="(prey, index) in container.contents" :key="'prey-' + index">{{prey.name}}</div>
   </div>
 </template>
@@ -27,6 +27,7 @@ export default class ContainerView extends Vue {
 <style scoped>
 h3 {
   margin: 40px 0 0;
+  font-size: 125%;
 }
 ul {
   list-style-type: none;