From 747f7fd0e302820a518b4d8cc071af4b7df7226b Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Thu, 9 Jul 2020 10:03:08 -0400
Subject: [PATCH] Lay things out a bit

---
 src/components/Combat.vue    | 26 +++++++++++++++++++-------
 src/components/Statblock.vue |  8 +++++---
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/Combat.vue b/src/components/Combat.vue
index 60fcd00..203eef3 100644
--- a/src/components/Combat.vue
+++ b/src/components/Combat.vue
@@ -1,16 +1,24 @@
 <template>
   <div class="hello">
     <h1>VORE TIME</h1>
+    <div class="horiz-display">
     <Statblock :subject="player" />
     <Statblock :subject="enemy" />
-    <h2>Your moves</h2>
-    <button @mouseleave="actionDescription= ''" @mouseover="actionDescription = action.desc" v-for="action in player.validActions(enemy)" :key="'player-' + action.name" v-on:click="log(action.execute(player, enemy))">{{action.name}}</button>
-    <button @mouseleave="actionDescription= ''" @mouseover="actionDescription = action.desc" v-for="action in player.validActions(player)" :key="'player-' + action.name" v-on:click="log(action.execute(player, player))">{{action.name}}</button>
-    <div>{{actionDescription}}</div>
+    </div>
+    <div class="horiz-display">
+      <div>
+        <h2>Your moves</h2>
+        <button @mouseleave="actionDescription= ''" @mouseover="actionDescription = action.desc" v-for="action in player.validActions(enemy)" :key="'player-' + action.name" v-on:click="log(action.execute(player, enemy))">{{action.name}}</button>
+        <button @mouseleave="actionDescription= ''" @mouseover="actionDescription = action.desc" v-for="action in player.validActions(player)" :key="'player-' + action.name" v-on:click="log(action.execute(player, player))">{{action.name}}</button>
+        <div>{{actionDescription}}</div>
+      </div>
+      <div>
+        <h2>Enemy moves</h2>
+        <button v-for="action in enemy.validActions(player)" :key="'enemy-' + action.name" v-on:click="log(action.execute(enemy, player))">{{action.name}}</button>
+        <button v-for="action in enemy.validActions(enemy)" :key="'enemy-' + action.name" v-on:click="log(action.execute(enemy, enemy))">{{action.name}}</button>
+        </div>
+      </div>
     <div id="log"></div>
-    <h2>Enemy moves</h2>
-    <button v-for="action in enemy.validActions(player)" :key="'enemy-' + action.name" v-on:click="log(action.execute(enemy, player))">{{action.name}}</button>
-    <button v-for="action in enemy.validActions(enemy)" :key="'enemy-' + action.name" v-on:click="log(action.execute(enemy, enemy))">{{action.name}}</button>
   </div>
 </template>
 
@@ -59,4 +67,8 @@ li {
 a {
   color: #42b983;
 }
+.horiz-display {
+  display: flex;
+  justify-content: center;
+}
 </style>
diff --git a/src/components/Statblock.vue b/src/components/Statblock.vue
index 3dd1b28..024a485 100644
--- a/src/components/Statblock.vue
+++ b/src/components/Statblock.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="statblock">
-    <h2>Stats</h2>
-    <div v-if="subject.perspective === firstperson">Player</div>
-    <div v-if="subject.perspective !== firstperson">Name: {{subject.name.all.capital}}</div>
+    <h2 v-if="subject.perspective === firstperson">Player</h2>
+    <h2 v-if="subject.perspective !== firstperson">{{subject.name.all.capital}}</h2>
     <div>Health: {{subject.health.toFixed(0)}} / {{subject.maxHealth.toFixed(0)}}</div>
     <div v-for="stat in Object.keys(subject.stats)" v-bind:key="stat">{{stat}}: {{subject.stats[stat]}}</div>
     <div>Status: {{subject.state}}</div>
@@ -48,4 +47,7 @@ li {
 a {
   color: #42b983;
 }
+.statblock {
+  margin: 16px;
+}
 </style>