diff --git a/src/components/Combat.vue b/src/components/Combat.vue index 379549f..e07c3aa 100644 --- a/src/components/Combat.vue +++ b/src/components/Combat.vue @@ -94,9 +94,9 @@ export default class Combat extends Vue { @Emit("executedLeft") executedLeft (entry: LogEntry) { - this.writeLog(entry, "left-move") + this.writeLog(entry, "left") - this.writeLog(this.encounter.nextMove(), "center-move") + this.writeLog(this.encounter.nextMove(), "center") this.pickNext() } @@ -104,13 +104,13 @@ export default class Combat extends Vue { @Emit("executedRight") executedRight (entry: LogEntry) { - this.writeLog(entry, "right-move") + this.writeLog(entry, "right") - this.writeLog(this.encounter.nextMove(), "center-move") + this.writeLog(this.encounter.nextMove(), "center") this.pickNext() } - writeLog (entry: LogEntry, cls = "") { + writeLog (entry: LogEntry, side = "") { const log = this.$el.querySelector(".log") if (log !== null) { const elements = entry.render() @@ -123,12 +123,15 @@ export default class Combat extends Vue { holder.appendChild(element) }) - if (cls !== "") { - holder.classList.add(cls) + if (side !== "") { + holder.classList.add(side + "-move") } const hline = document.createElement("div") hline.classList.add("log-separator") + if (side !== "") { + hline.classList.add("log-separator-" + side) + } log.insertBefore(hline, before) log.insertBefore(holder, hline) @@ -145,7 +148,7 @@ export default class Combat extends Vue { new LogLine( `game o-vore lmaoooooooo` ), - "center-move" + "center" ) } else { if (this.encounter.currentMove.side === Side.Heroes) { @@ -522,12 +525,33 @@ div.right-move { } .log-separator { - width: 100%; + animation: log-keyframes 0.5s; height: 4px; - margin: 4pt 0pt 4pt; background: linear-gradient(90deg, transparent, #444 10%, #444 90%, transparent 100%); } +.log-separator-left { + margin: 4pt auto 4pt 0; +} + +.log-separator-center { + margin: 4pt auto 4pt; +} + +.log-separator-right { + margin: 4pt 0 4pt auto; +} + +@keyframes log-keyframes { + from { + width: 0%; + } + + to { + width: 100%; + } +} + .left-move { animation: left-fly-in 1s; } diff --git a/src/components/Explore.vue b/src/components/Explore.vue index 759c562..e0e2338 100644 --- a/src/components/Explore.vue +++ b/src/components/Explore.vue @@ -66,21 +66,24 @@ export default class Explore extends Vue { writeLog (entry: LogEntry) { const log = this.$el.querySelector(".explore-log") if (log !== null) { - const before = log.querySelector("div.explore-log-entry") - const holder = document.createElement("div") - holder.classList.add("explore-log-entry") - - entry.render().forEach(element => { - holder.appendChild(element) - }) - - holder.classList.add("explore-entry") - const hline = document.createElement("div") - hline.classList.add("explore-log-separator") - log.insertBefore(hline, before) - log.insertBefore(holder, hline) - - log.scrollTo({ top: 0, left: 0 }) + const rendered = entry.render() + if (rendered.length > 0) { + const before = log.querySelector("div.explore-log-entry") + const holder = document.createElement("div") + holder.classList.add("explore-log-entry") + + entry.render().forEach(element => { + holder.appendChild(element) + }) + + holder.classList.add("explore-entry") + const hline = document.createElement("div") + hline.classList.add("explore-log-separator") + log.insertBefore(hline, before) + log.insertBefore(holder, hline) + + log.scrollTo({ top: 0, left: 0 }) + } } } } @@ -93,7 +96,7 @@ export default class Explore extends Vue { flex: 10; position: relative; display: grid; - grid-template-areas: "statblock containers containers" + grid-template-areas: "containers containers statblock" "log log worldinfo" "log log info " "log log choices " @@ -111,12 +114,14 @@ export default class Explore extends Vue { flex-direction: row; flex-wrap: nowrap; overflow-x: scroll; + justify-content: flex-end; } .explore-log { grid-area: log; background: #222; overflow-y: scroll; + padding: 8pt; } .explore-worldinfo { @@ -197,9 +202,19 @@ export default class Explore extends Vue { } .explore-log-separator { - width: 100%; + animation: explore-log-keyframes 0.5s; height: 4px; - margin: 16pt 0pt 16pt; + margin: 16pt auto 16pt; background: linear-gradient(90deg, transparent, #444 10%, #444 90%, transparent 100%); } + +@keyframes explore-log-keyframes { + from { + width: 0%; + } + + to { + width: 100%; + } +} diff --git a/src/game/maps/town.ts b/src/game/maps/town.ts index 9663a18..bd3f479 100644 --- a/src/game/maps/town.ts +++ b/src/game/maps/town.ts @@ -3,7 +3,7 @@ import { ProperNoun, ImproperNoun, MalePronouns, FemalePronouns, TheyPronouns } import { Encounter } from '../combat' import * as Creatures from '../creatures' import * as Items from '../items' -import { LogLine, nilLog } from '../interface' +import { LogLine, nilLog, LogLines } from '../interface' import { Creature } from '../creature' import { DevourAction } from '../combat/actions' import { SurrenderEffect } from '../combat/effects' @@ -134,7 +134,10 @@ export const Town = (): Place => { "Nap", "Zzzzzz", (world, executor) => { - return world.advance(moment.duration(1, "hour")) + return new LogLines( + `You lie down for a nice nap...`, + world.advance(moment.duration(1, "hour")) + ) } ) )