Show the action description as an overlay

src/components/Combat.vue

@@ -26,7 +26,6 @@
         <i class="action-label fas fa-user" v-if="left.validActions(left).length > 0"></i>
         <ActionButton @described="described" @executed="executedLeft" v-for="(action, index) in left.validActions(left)" :key="'left-' + action.name + '-' + index" :action="action" :user="left" :target="left" :combatants="combatants" />
       </div>
-      <div>{{actionDescription}}</div>
     </div>
     <div class="right-fader">
 
@@ -41,7 +40,7 @@
         <ActionButton @described="described" @executed="executedRight" v-for="(action, index) in right.validActions(right)" :key="'right-' + action.name + '-' + index" :action="action" :user="right" :target="right" :combatants="combatants" />
       </div>
     </div>
-    <div v-if="encounter.winner === null" class="action-description">
+    <div v-if="actionDescVisible && encounter.winner === null" class="action-description">
     </div>
     <button @click="$emit('leave-combat')" v-if="encounter.winner !== null" class="exit-combat">
       Exit Combat
@@ -56,7 +55,7 @@
 import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
 import { Creature } from '@/game/creature'
 import { POV } from '@/game/language'
-import { LogEntry, LogLine } from '@/game/interface'
+import { LogEntry, LogLine, nilLog } from '@/game/interface'
 import Statblock from './Statblock.vue'
 import ActionButton from './ActionButton.vue'
 import { Side, Encounter } from '@/game/combat'
@@ -73,7 +72,8 @@ import { World } from '@/game/world'
         combatants: null,
         won: false,
         continuing: false,
-        totalWon: false
+        totalWon: false,
+        actionDescVisible: false
       }
     }
   }
@@ -88,8 +88,6 @@ export default class Combat extends Vue {
 
   Side = Side
 
-  actionDescription = ''
-
   get running () {
     if (this.encounter.winner === null || (this.$data.continuing === true && this.encounter.totalWinner === null)) {
       return true
@@ -101,7 +99,7 @@ export default class Combat extends Vue {
   @Emit("described")
   described (entry: LogEntry) {
     const actionDesc = this.$el.querySelector(".action-description")
-
+    this.$data.actionDescVisible = entry !== nilLog
     if (actionDesc !== null) {
       const holder = document.createElement("div")
       entry.render().forEach(element => {
@@ -337,7 +335,7 @@ export default class Combat extends Vue {
 .combat-layout {
   position: relative;
   display: grid;
-  grid-template-rows: fit-content(50%) 10% [main-row-start] 1fr 20% [main-row-end] ;
+  grid-template-rows: fit-content(50%) 3% [main-row-start] 1fr 20% [main-row-end] ;
   grid-template-columns: 1fr [main-col-start] fit-content(25%) fit-content(25%) [main-col-end] 1fr;
   width: 100%;
   height: 100%;
@@ -454,11 +452,15 @@ export default class Combat extends Vue {
 }
 
 .action-description {
-  grid-area: 2 / main-col-start / main-row-start / main-col-end;
-  padding: 8pt;
+  position: absolute;
+  grid-area: 2 / main-col-start / main-row-end / main-col-end;
   text-align: center;
   font-size: 16px;
+  padding-bottom: 48px;
   max-width: 1000px;
+  text-align: center;
+  width: 100%;
+  background: linear-gradient(0deg, transparent, black 48px, black)
 }
 
 h3 {