Switch to horizontal lists of combatants; adjust layout

src/App.vue

@@ -87,7 +87,6 @@ body, html {
   color: #ddd;
   background: #111;
   width: 100%;
-  max-width: 1000pt;
   margin: auto;
   height: 100%;
   display: flex;

src/components/ActionButton.vue

@@ -51,9 +51,10 @@ export default class ActionButton extends Vue {
 <style scoped>
 
 .action-button {
-  width: 100pt;
+  width: 100%;
+  padding: 4pt;
   background: #333;
-}q
+}
 
 .action-button:hover {
   background: #555;

src/components/Combat.vue

@@ -10,6 +10,8 @@
     </div>
     <div class="left-actions">
       <div class="vert-display">
+        <h2>Group-moves</h2>
+        <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>
         <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>
@@ -113,8 +115,8 @@ export default class Combat extends Vue {
 <style scoped>
 .combat-layout {
   display: grid;
-  grid-template-rows: 10% [main-row-start] 10%  1fr 1fr [main-row-end] 20%;
-  grid-template-columns: minmax(80pt, 20%) [main-col-start] 1fr [main-col-end] minmax(80pt, 20%);
+  grid-template-rows: minmax(160pt, 20%) [main-row-start] 1fr 1fr [main-row-end] 20%;
+  grid-template-columns: 20% [main-col-start] 1fr 1fr [main-col-end] 20%;
   width: 100%;
   height: 100%;
   flex: 10;
@@ -123,26 +125,31 @@ export default class Combat extends Vue {
 #log {
   grid-area: main-row-start / main-col-start / main-row-end / main-col-end;
   overflow-y: scroll;
-  font-size: 16pt;
+  font-size: 12pt;
   width: 100%;
   max-height: 100%;
   align-self: end;
 }
 
-.left-selector {
-  grid-area: 1 / 1 / 2 / 2;
+#left-stats,
+#right-stats {
+  display: flex;
 }
 
-.right-selector {
-  grid-area: 1 / 3 / 2 / 4;
+#left-stats {
+  flex-direction: row-reverse;
+}
+
+#right-stats {
+  flex-direction: row;
 }
 
 #left-stats {
-  grid-area: 2 / 1 / 4 / 2
+  grid-area: 1 / 1 / 2 / 3
 }
 
 #right-stats {
-  grid-area: 2 / 3 / 4 / 4;
+  grid-area: 1 / 3 / 2 / 5;
 }
 
 .stat-column {
@@ -150,11 +157,18 @@ export default class Combat extends Vue {
 }
 
 .left-actions {
-  grid-area: 4 / 1 / 6 / 2;
+  grid-area: 2 / 1 / 4 / 2;
+}
+
+.right-actions {
+  grid-area: 2 / 4 / 4 / 5;
 }
 
+.left-actions,
 .right-actions {
-  grid-area: 4 / 3 / 6 / 4;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 #action-desc {

src/components/Statblock.vue

@@ -114,8 +114,11 @@ li {
 a {
   color: #42b983;
 }
+
 .statblock {
-  margin: 16px;
+  flex: 1 0;
+  flex-basis: 100pt;
+  margin: 0pt 4pt 0pt;
   user-select: none;
 }
 
@@ -126,14 +129,9 @@ a {
   flex-wrap: wrap;
 }
 
-.stats,
-.vore-stats {
-  display: none;
-}
-
 .stat-entry {
   position: relative;
-  font-size: 16pt;
+  font-size: 10pt;
   padding-top: 4pt;
   padding-bottom: 4pt;
   display: flex;
@@ -142,6 +140,9 @@ a {
   user-select: none;
 }
 
+.stat-entry i {
+  transform: translate(0, -40%) scale(1.6);
+}
 .stat-entry.low {
   color: yellow;
 }