Set up a grid layout; go back to HTMLElement logs

src/App.vue

@@ -33,8 +33,8 @@ export default class App extends Vue {
 <style>
 body, html {
   background: #111;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 
 #app {
@@ -44,5 +44,7 @@ body, html {
   text-align: center;
   color: #ddd;
   background: #111;
+  width: 100%;
+  height: 100%;
 }
 </style>

src/components/Combat.vue

@@ -1,33 +1,22 @@
 <template>
-  <div class="hello">
-    <h1>VORE TIME</h1>
-    <div class="horiz-display">
-    <Statblock :subject="player" />
-    <Statblock :subject="enemy" />
-    </div>
+  <div class="combat-layout">
+    <Statblock class="player-stats" :subject="player" />
+    <Statblock class="enemy-stats" :subject="enemy" />
     <div id="log">
-      <div v-for="(entry, index) in combatLog" :key="'log' + index">
-        <div v-for="(line, lineIndex) in entry.render()" :key="index + ' ' + lineIndex">
-          {{ line }}
-        </div>
-        <br>
-      </div>
     </div>
-    <div class="horiz-display">
-      <div>
-        <h2>Your moves</h2>
-        <div class="vert-display">
-          <ActionButton @executed="executed" v-for="action in player.validActions(enemy)" :key="'player' + action.name" :action="action" :user="player" :target="enemy" />
-          <ActionButton @executed="executed" v-for="action in player.validActions(player)" :key="'player' + action.name" :action="action" :user="player" :target="enemy" />
-        </div>
-        <div>{{actionDescription}}</div>
+    <div class="player-actions">
+      <h2>Your moves</h2>
+      <div class="vert-display">
+        <ActionButton @executed="executed" v-for="action in player.validActions(enemy)" :key="'player' + action.name" :action="action" :user="player" :target="enemy" />
+        <ActionButton @executed="executed" v-for="action in player.validActions(player)" :key="'player' + action.name" :action="action" :user="player" :target="enemy" />
       </div>
-      <div>
-        <h2>Enemy moves</h2>
-        <div class="vert-display">
-          <ActionButton @executed="executed" v-for="action in enemy.validActions(player)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
-          <ActionButton @executed="executed" v-for="action in enemy.validActions(enemy)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
-        </div>
+      <div>{{actionDescription}}</div>
+    </div>
+    <div class="enemy-actions">
+      <h2>Enemy moves</h2>
+      <div class="vert-display">
+        <ActionButton @executed="executed" v-for="action in enemy.validActions(player)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
+        <ActionButton @executed="executed" v-for="action in enemy.validActions(enemy)" :key="'player' + action.name" :action="action" :user="enemy" :target="player" />
       </div>
     </div>
   </div>
@@ -54,22 +43,59 @@ export default class Combat extends Vue {
 
   actionDescription = ''
 
-  private combatLog: Array<LogEntry>
-
   constructor () {
     super()
-    this.combatLog = []
   }
 
   @Emit("executed")
   executed (entry: LogEntry) {
-    this.combatLog.push(entry)
+    const log = document.querySelector("#log")
+
+    if (log !== null) {
+      entry.render().forEach(element => {
+        log.appendChild(element)
+      })
+      log.appendChild(document.createElement("br"))
+      log.scrollTo({ top: 10000000000, left: 0 })
+    }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.combat-layout {
+  display: grid;
+  grid-template-rows: 20% [main-row-start] 30% 30% [main-row-end] 20%;
+  grid-template-columns: 20% [main-col-start] 60% [main-col-end] 20%;
+  width: 100%;
+  height: 100%;
+}
+
+.player-stats {
+  grid-area: 1 / 1 / 2 / 2
+}
+
+.enemy-stats {
+  grid-area: 1 / 3 / 2 / 4;
+}
+
+#log {
+  grid-area: main-row-start / main-col-start / main-row-end / main-col-end;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  font-size: 16pt;
+}
+
+.player-actions {
+  grid-area: 3 / 1 / 4 / 2;
+}
+
+.enemy-actions {
+  grid-area: 3 / 3 / 4 / 4;
+}
+
 h3 {
   margin: 40px 0 0;
 }
@@ -91,6 +117,7 @@ a {
 .vert-display {
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 </style>
 

src/game/interface.ts

@@ -1,5 +1,5 @@
 export interface LogEntry {
-    render: () => string[];
+    render: () => HTMLElement[];
 }
 
 export class LogLines implements LogEntry {
@@ -9,8 +9,12 @@ export class LogLines implements LogEntry {
       this.lines = lines
     }
 
-    render (): string[] {
-      return this.lines
+    render (): HTMLElement[] {
+      return this.lines.map(line => {
+        const div = document.createElement("div")
+        div.innerText = line
+        return div
+      })
     }
 }
 
@@ -21,7 +25,7 @@ export class CompositeLog implements LogEntry {
       this.entries = entries
     }
 
-    render (): string[] {
+    render (): HTMLElement[] {
       return this.entries.flatMap(e => e.render())
     }
 }