diff --git a/src/components/Combat.vue b/src/components/Combat.vue index 2644512..3ee87ef 100644 --- a/src/components/Combat.vue +++ b/src/components/Combat.vue @@ -92,16 +92,22 @@ export default class Combat extends Vue { @Emit("executedLeft") executedLeft (entry: LogEntry) { const log = document.querySelector("#log") - if (log !== null) { + const before = log.querySelector("div.log-entry") const holder = document.createElement("div") + holder.classList.add("log-entry") + entry.render().forEach(element => { holder.appendChild(element) }) + holder.classList.add("left-move") - log.appendChild(holder) + const hline = document.createElement("div") + hline.classList.add("log-separator") + log.insertBefore(hline, before) + log.insertBefore(holder, hline) - log.scrollTo({ top: log.scrollHeight, left: 0 }) + log.scrollTo({ top: 0, left: 0 }) } this.encounter.nextMove() @@ -113,14 +119,21 @@ export default class Combat extends Vue { const log = document.querySelector("#log") if (log !== null) { + const before = log.querySelector("div.log-entry") const holder = document.createElement("div") + holder.classList.add("log-entry") + entry.render().forEach(element => { holder.appendChild(element) }) + holder.classList.add("right-move") - log.appendChild(holder) + const hline = document.createElement("div") + hline.classList.add("log-separator") + log.insertBefore(hline, before) + log.insertBefore(holder, hline) - log.scrollTo({ top: log.scrollHeight, left: 0 }) + log.scrollTo({ top: 0, left: 0 }) } this.encounter.nextMove() @@ -359,7 +372,7 @@ a { white-space: nowrap; } -#log > div { +#log > div.log-entry { color: #888; padding-top: 4pt; padding-bottom: 4pt; @@ -386,73 +399,59 @@ div.right-move { width: 75%; } -#log > div.left-move:nth-last-child(7) { - padding-top: 8pt; - color: #988; +#log > div.left-move:nth-child(7) { + color: #898; } -#log > div.left-move:nth-last-child(6) { - padding-top: 12pt; - color: #a88; +#log > div.left-move:nth-child(6) { + color: #8a8; } -#log > div.left-move:nth-last-child(5) { - padding-top: 16pt; - color: #b88; +#log > div.left-move:nth-child(5) { + color: #8b8; } -#log > div.left-move:nth-last-child(4) { - padding-top: 20pt; - color: #c88; +#log > div.left-move:nth-child(4) { + color: #8c8; } -#log > div.left-move:nth-last-child(3) { - padding-top: 24pt; - color: #d88; +#log > div.left-move:nth-child(3) { + color: #8d8; } -#log > div.left-move:nth-last-child(2) { - padding-top: 28pt; - color: #e88; +#log > div.left-move:nth-child(2) { + color: #8e8; } -#log > div.left-move:nth-last-child(1) { - padding-top: 32pt; - color: #f88; +#log > div.left-move:nth-child(1) { + color: #8f8; } -#log > div.right-move:nth-last-child(7) { - padding-top: 8pt; +#log > div.right-move:nth-child(7) { color: #988; } -#log > div.right-move:nth-last-child(6) { - padding-top: 12pt; +#log > div.right-move:nth-child(6) { color: #a88; } -#log > div.right-move:nth-last-child(5) { - padding-top: 16pt; +#log > div.right-move:nth-child(5) { color: #b88; } -#log > div.right-move:nth-last-child(4) { - padding-top: 20pt; +#log > div.right-move:nth-child(4) { color: #c88; } -#log > div.right-move:nth-last-child(3) { - padding-top: 24pt; +#log > div.right-move:nth-child(3) { color: #d88; } -#log > div.right-move:nth-last-child(2) { - padding-top: 28pt; +#log > div.right-move:nth-child(2) { color: #e88; } -#log > div.right-move:nth-last-child(1) { - padding-top: 32pt; +#log > div.right-move:nth-child(1) { color: #f88; } @@ -465,4 +464,11 @@ div.right-move { .combatant-picker { flex: 1 1; } + +.log-separator { + width: 100%; + height: 4px; + margin: 4pt 0pt 4pt; + background: linear-gradient(90deg, transparent, #444 10%, #444 90%, transparent 100%); +} diff --git a/src/game/combat/actions.ts b/src/game/combat/actions.ts index 97ecb4f..59e6b66 100644 --- a/src/game/combat/actions.ts +++ b/src/game/combat/actions.ts @@ -13,7 +13,7 @@ export class PassAction extends Action { } execute (user: Creature, target: Creature): LogEntry { - return nilLog + return new LogLine(`${user.name.capital} ${user.name.conjugate(new Verb('pass', 'passes'))}`) } describe (user: Creature, target: Creature): LogEntry {