diff --git a/src/components/Combat.vue b/src/components/Combat.vue
index e6f6813..fd8590e 100644
--- a/src/components/Combat.vue
+++ b/src/components/Combat.vue
@@ -10,23 +10,23 @@
{{ combatant.name }}
-
-
+
+
Your moves
{{actionDescription}}
@@ -60,8 +60,8 @@ export default class Combat extends Vue {
super()
}
- @Emit("executed")
- executed (entry: LogEntry) {
+ @Emit("executedLeft")
+ executedLeft (entry: LogEntry) {
const log = document.querySelector("#log")
if (log !== null) {
@@ -69,14 +69,14 @@ export default class Combat extends Vue {
entry.render().forEach(element => {
holder.appendChild(element)
})
- holder.classList.add("player-move")
+ holder.classList.add("left-move")
log.appendChild(holder)
log.scrollTo({ top: 10000000000, left: 0 })
}
}
- @Emit("executedEnemy")
- executedEnemy (entry: LogEntry) {
+ @Emit("executedRight")
+ executedRight (entry: LogEntry) {
const log = document.querySelector("#log")
if (log !== null) {
@@ -84,7 +84,7 @@ export default class Combat extends Vue {
entry.render().forEach(element => {
holder.appendChild(element)
})
- holder.classList.add("enemy-move")
+ holder.classList.add("right-move")
log.appendChild(holder)
log.scrollTo({ top: 10000000000, left: 0 })
}
@@ -103,11 +103,11 @@ export default class Combat extends Vue {
flex: 10;
}
-.player-stats {
+.left-stats {
grid-area: 2 / 1 / 3 / 2
}
-.enemy-stats {
+.right-stats {
grid-area: 2 / 3 / 3 / 4;
}
@@ -174,22 +174,22 @@ a {
#log > div {
color: #888;
- padding-top: 8pt;
- padding-bottom: 8pt;
+ padding-top: 4pt;
+ padding-bottom: 4pt;
}
-div.player-move,
-div.enemy-move {
+div.left-move,
+div.right-move {
color: #888;
}
-div.player-move {
+div.left-move {
text-align: start;
margin-right: 25%;
margin-left: 5%;
}
-div.enemy-move {
+div.right-move {
text-align: end;
margin-left: 25%;
margin-right: 5%;
@@ -199,72 +199,74 @@ div.enemy-move {
width: 75%;
}
-#log > div.enemy-move:nth-last-child(7) {
+#log > div.left-move:nth-last-child(7) {
+ padding-top: 8pt;
color: #988;
}
-#log > div.enemy-move:nth-last-child(6) {
- padding-top: 8pt;
+#log > div.left-move:nth-last-child(6) {
+ padding-top: 12pt;
color: #a88;
}
-#log > div.enemy-move:nth-last-child(5) {
+#log > div.left-move:nth-last-child(5) {
padding-top: 16pt;
color: #b88;
}
-#log > div.enemy-move:nth-last-child(4) {
- padding-top: 24pt;
+#log > div.left-move:nth-last-child(4) {
+ padding-top: 20pt;
color: #c88;
}
-#log > div.enemy-move:nth-last-child(3) {
- padding-top: 32pt;
+#log > div.left-move:nth-last-child(3) {
+ padding-top: 24pt;
color: #d88;
}
-#log > div.enemy-move:nth-last-child(2) {
- padding-top: 40pt;
+#log > div.left-move:nth-last-child(2) {
+ padding-top: 28pt;
color: #e88;
}
-#log > div.enemy-move:nth-last-child(1) {
- padding-top: 48pt;
+#log > div.left-move:nth-last-child(1) {
+ padding-top: 32pt;
color: #f88;
}
-#log > div.player-move:nth-last-child(7) {
- color: #898;
+#log > div.right-move:nth-last-child(7) {
+ padding-top: 8pt;
+ color: #988;
}
-#log > div.player-move:nth-last-child(6) {
- padding-top: 8pt;
- color: #8a8;
+#log > div.right-move:nth-last-child(6) {
+ padding-top: 12pt;
+ color: #a88;
}
-#log > div.player-move:nth-last-child(5) {
+#log > div.right-move:nth-last-child(5) {
padding-top: 16pt;
- color: #8b8;
+ color: #b88;
}
-#log > div.player-move:nth-last-child(4) {
- padding-top: 24pt;
- color: #8c8;
+#log > div.right-move:nth-last-child(4) {
+ padding-top: 20pt;
+ color: #c88;
}
-#log > div.player-move:nth-last-child(3) {
- padding-top: 32pt;
- color: #8d8;
+#log > div.right-move:nth-last-child(3) {
+ padding-top: 24pt;
+ color: #d88;
}
-#log > div.player-move:nth-last-child(2) {
- padding-top: 40pt;
- color: #8e8;
+#log > div.right-move:nth-last-child(2) {
+ padding-top: 28pt;
+ color: #e88;
}
-#log > div.player-move:nth-last-child(1) {
- padding-top: 48pt;
- color: #8f8;
+#log > div.right-move:nth-last-child(1) {
+ padding-top: 32pt;
+ color: #f88;
}