Improve layout+scrollbars; fix some language issues

src/App.vue

@@ -107,4 +107,37 @@ body, html {
   font-family: sans-serif;
 }
 
+*::-webkit-scrollbar {
+    height: 2px;
+  }
+*::-webkit-scrollbar-button {
+    width: 0px;
+    height: 0px;
+}
+*::-webkit-scrollbar-thumb {
+    background: #e1e1e1;
+    border: 0px none #ffffff;
+    border-radius: 50px;
+}
+*::-webkit-scrollbar-thumb:hover {
+    background: #ffffff;
+}
+*::-webkit-scrollbar-thumb:active {
+    background: #000000;
+}
+*::-webkit-scrollbar-track {
+    background: #00000000;
+    border: 0px none #ffffff;
+    border-radius: 50px;
+}
+*::-webkit-scrollbar-track:hover {
+    background: #666666;
+}
+*::-webkit-scrollbar-track:active {
+    background: #333333;
+}
+*::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
 </style>

src/components/ActionButton.vue

@@ -53,7 +53,10 @@ export default class ActionButton extends Vue {
 .action-button {
   width: 100%;
   padding: 4pt;
+  flex: 0 1;
   background: #333;
+  border-color: #666;
+  border-style: outset;
 }
 
 .action-button:hover {

src/components/Combat.vue

@@ -7,6 +7,9 @@
       <Statblock v-on:click.native="right = combatant" class="right-stats" :data-active="combatant === right" v-for="combatant in combatants.filter(c => c.side == Side.Monsters && !c.digested)" v-bind:key="combatant.name" :subject="combatant" />
     </div>
     <div id="log">
+    </div>
+    <div class="left-fader">
+
     </div>
     <div class="left-actions">
       <div class="vert-display">
@@ -18,6 +21,9 @@
         <ActionButton @described="described" @executed="executedLeft" v-for="action in left.validActions(left)" :key="'left' + action.name" :action="action" :user="left" :target="right" :combatants="combatants" />
       </div>
       <div>{{actionDescription}}</div>
+    </div>
+    <div class="right-fader">
+
     </div>
     <div class="right-actions">
       <div class="vert-display">
@@ -135,7 +141,7 @@ export default class Combat extends Vue {
 <style scoped>
 .combat-layout {
   display: grid;
-  grid-template-rows: minmax(160pt, 20%) [main-row-start] 1fr 1fr [main-row-end] 20%;
+  grid-template-rows: minmax(160pt, 20%) 10% [main-row-start] 1fr 20% [main-row-end] ;
   grid-template-columns: 20% [main-col-start] 1fr 1fr [main-col-end] 20%;
   width: 100%;
   height: 100%;
@@ -149,7 +155,7 @@ export default class Combat extends Vue {
   font-size: 12pt;
   width: 100%;
   max-height: 100%;
-  align-self: end;
+  align-self: flex-start;
 }
 
 #left-stats,
@@ -177,6 +183,23 @@ export default class Combat extends Vue {
   overflow-y: auto;
 }
 
+.left-fader {
+  grid-area: 2 / 1 / 4 / 2;
+}
+
+.right-fader {
+  grid-area: 2 / 4 / 4 / 5;
+}
+
+.left-fader,
+.right-fader {
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(to bottom, #111, #00000000 10%, #00000000 90%, #111 100%);
+  height: 100%;
+  width: 100%;
+}
+
 .left-actions {
   grid-area: 2 / 1 / 4 / 2;
 }
@@ -187,13 +210,18 @@ export default class Combat extends Vue {
 
 .left-actions,
 .right-actions {
-  overflow-y: auto;
+  overflow-y: hidden;
   display: flex;
   flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
 
 #action-desc {
-  grid-area: main-row-end / main-col-start / 6 / main-col-end
+  grid-area: 2 / main-col-start / main-row-start / main-col-end;
+  padding: 8pt;
+  text-align: center;
+  font-size: 16pt;
 }
 
 h3 {
@@ -218,9 +246,11 @@ a {
   display: flex;
   flex-direction: column;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: start;
   height: 100%;
+  overflow-y: auto;
+  padding: 64px 0 64px;
 }
 .statblock:hover {
   background: #444;

src/game/combat/actions.ts

@@ -54,10 +54,10 @@ export class AttackAction extends TogetherAction {
 export class DevourAction extends TogetherAction {
   private test: StatVigorTest
 
-  protected failLines: POVPair<Entity, Entity> = new POVPair([
-    [[POV.First, POV.Third], (user, target) => new LogLine(`You fail to make a meal out of ${target.name}`)],
-    [[POV.Third, POV.First], (user, target) => new LogLine(`${user.name.capital} tries to devour you, but fails`)],
-    [[POV.Third, POV.Third], (user, target) => new LogLine(`${user.name.capital} unsuccessfully tries to swallow ${target.name}`)]
+  protected failLines: POVPairArgs<Entity, Entity, { container: Container }> = new POVPairArgs([
+    [[POV.First, POV.Third], (user, target, args) => new LogLine(`You fail to ${args.container.consumeVerb} ${target.name}`)],
+    [[POV.Third, POV.First], (user, target, args) => new LogLine(`${user.name.capital} tries to ${args.container.consumeVerb} you, but fails`)],
+    [[POV.Third, POV.Third], (user, target, args) => new LogLine(`${user.name.capital} unsuccessfully tries to ${args.container.consumeVerb} ${target.name}`)]
   ])
 
   allowed (user: Creature, target: Creature): boolean {
@@ -81,7 +81,7 @@ export class DevourAction extends TogetherAction {
     if (this.test.test(user, target)) {
       return this.container.consume(target)
     } else {
-      return this.failLines.run(user, target)
+      return this.failLines.run(user, target, { container: this.container })
     }
   }
 

src/game/creatures/withers.ts

@@ -9,7 +9,7 @@ import { InstantKill } from '../combat/effects'
 import * as Words from '../words'
 
 class MawContainer extends NormalContainer {
-  consumeVerb = new Verb('grab')
+  consumeVerb = new Verb('grab', 'grabs', 'grabbing', 'grabbed')
   releaseVerb = new Verb('release')
   struggleVerb = new Verb('struggle', 'struggles', 'struggling', 'struggled')
 

src/game/language.ts

@@ -33,17 +33,17 @@ export class POVPairArgs<K extends Entity, V extends Entity, U> {
   }
 }
 export class POVSolo<K extends Entity> {
-  run (user: K, args: any = {}): LogEntry {
+  run (user: K): LogEntry {
     const choice = this.options.find(element => element[0][0] === user.perspective)
 
     if (choice === undefined) {
       return new LogLine("Fen didn't write any text for this...")
     } else {
-      return choice[1](user, args)
+      return choice[1](user)
     }
   }
 
-  constructor (private options: Array<[[POV], (user: K, args: any) => LogEntry]>) {
+  constructor (private options: Array<[[POV], (user: K) => LogEntry]>) {
 
   }
 }

src/game/vore.ts

@@ -68,6 +68,7 @@ export interface Container extends Actionable {
 }
 
 export abstract class NormalContainer implements Container {
+  public name: Noun
   contents: Array<Vore> = []
   actions: Array<Action> = []
 
@@ -123,7 +124,8 @@ export abstract class NormalContainer implements Container {
     return new LogLine(...lines)
   }
 
-  constructor (public name: Noun, public owner: Vore, public voreTypes: Set<VoreType>, public capacity: number) {
+  constructor (name: Noun, public owner: Vore, public voreTypes: Set<VoreType>, public capacity: number) {
+    this.name = name.all
     this.actions.push(new DevourAction(this))
     this.actions.push(new ReleaseAction(this))
     this.actions.push(new StruggleAction(this))