Start setting up a world system

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="app">
     <Header version="pre-alpha" @selectEncounter="selectEncounter" :encounters="encounters" />
-    <Combat v-show="$data.encounter === encounter" v-for="(encounter, index) in encounters" :key="'encounter-' + index" :encounter="encounter" />
+    <Explore :world="world" />
+    <!-- <Combat v-show="$data.encounter === encounter" v-for="(encounter, index) in encounters" :key="'encounter-' + index" :encounter="encounter" /> -->
   </div>
 </template>
 
@@ -9,20 +10,23 @@
 import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
 import Combat from './components/Combat.vue'
 import Header from './components/Header.vue'
+import Explore from './components/Explore.vue'
 import * as Creatures from '@/game/creatures'
 import * as Items from '@/game/items'
 import { Creature } from '@/game/creature'
-import { ProperNoun, TheyPronouns, FemalePronouns, MalePronouns, ImproperNoun } from '@/game/language'
+import { ProperNoun, TheyPronouns, FemalePronouns, MalePronouns, ImproperNoun, POV } from '@/game/language'
+import { Place, Direction, World } from '@/game/world'
 import { Encounter } from './game/combat'
 
 @Component({
   components: {
-    Combat, Header
+    Combat, Header, Explore
   },
   data () {
     return {
       encounter: null,
-      encounters: null
+      encounters: null,
+      world: null
     }
   }
 })
@@ -46,6 +50,18 @@ export default class App extends Vue {
     this.$data.encounters.push(new Encounter({ name: 'Large Wah' }, this.makeParty().concat([new Creatures.Shingo()])))
 
     this.$data.encounter = this.$data.encounters[0]
+
+    const foo = new Place('Foo', 'A very foo-y place')
+    const other = new Place('Bar', 'The bar')
+    foo.biconnect(Direction.North, other)
+
+    const something = new Place('Baz', 'BAZZZZZZZZZZ')
+    foo.biconnect(Direction.East, something)
+
+    const player = new Creatures.Wolf()
+    player.perspective = POV.Second
+    player.location = foo
+    this.$data.world = new World(player)
   }
 
   makeParty (): Creature[] {

src/components/Explore.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="explore-layout">
+    <div class="explore-log">
+
+    </div>
+    <div class="explore-worldinfo">
+      <p>Time: {{ world.time }}</p>
+    </div>
+    <div class="explore-info">
+      <h2 class="location-name">{{ location.name }}</h2>
+      <p class="location-desc">{{ location.desc }}</p>
+    </div>
+    <div class="explore-nav">
+      <button @click="location=location.connections[direction]" v-for="direction in Object.keys(location.connections)" :key="direction" class="nav-direction" :style="navBtnCss(direction)">
+        {{location.connections[direction].name}}
+      </button>
+    </div>
+    <div class="explore-actions">
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Direction, World, Place } from '@/game/world'
+
+@Component({})
+
+export default class Explore extends Vue {
+  get location () {
+    return this.world.player.location
+  }
+
+  set location (loc: Place) {
+    this.world.player.location = loc
+  }
+
+  @Prop()
+  world!: World
+
+  navBtnCss (dir: Direction) {
+    return {
+      '--nav-direction': dir
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+
+.explore-layout {
+  position: relative;
+  display: grid;
+  grid-template-areas: "log worldinfo"
+                       "log info     "
+                       "log actions  "
+                       "nav actions  ";
+  grid-template-rows: 0.5fr 2fr 1fr 1fr;
+  grid-template-columns: 2fr 1fr;
+  width: 100%;
+  height: 100%;
+}
+
+.explore-log {
+  grid-area: log;
+  background: #222;
+}
+
+.explore-worldinfo {
+  grid-area: worldinfo;
+  background: #111;
+}
+
+.explore-info {
+  grid-area: info;
+  background: #333;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: none;
+  justify-content: start;
+  align-items: center;
+}
+
+.location-name {
+  font-size: 200%;
+}
+
+.location-desc {
+  font-size: 150%;
+}
+.explore-nav {
+  grid-area: nav;
+  background: #444;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  grid-template-areas: "Northwest North  Northeast"
+                       "West      Center East     "
+                       "Southwest South  Southeast";
+  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.nav-direction {
+  grid-area: var(--nav-direction);
+  margin: 5%;
+  background: #555;
+  color: #ccc;
+  font-size: 200%;
+  border-color: #ccc;
+  border-width: 3px;
+  border-radius: 8px;
+  border-style: outset;
+  outline: none;
+}
+
+.nav-direction:hover {
+  background: #666;
+}
+
+.nav-direction:active {
+  background: #777;
+  border-style: inset;
+}
+
+.nav-direction:focus {
+  background: #666;
+}
+
+.explore-actions {
+  grid-area: actions;
+  background: #555;
+}
+</style>

src/game/combat.ts

@@ -477,12 +477,10 @@ export class Encounter {
       // still not undefined...
       const currentProgress = this.initiatives.get(combatant) ?? 0
       this.initiatives.set(combatant, currentProgress + closestRemaining * Math.max(combatant.stats.Speed, 1))
-      console.log(combatant.name.toString(), currentProgress, closestRemaining)
     })
 
     // TODO: still let the creature use drained-vigor moves
 
-    console.log(this.currentMove.name.toString())
     if (this.currentMove.disabled) {
       this.nextMove()
     }

src/game/entity.ts

@@ -1,7 +1,7 @@
 import { DamageType, Damage, Stats, Vigor, VoreStats, VoreStat, Stat, Vigors } from './combat'
 import { Noun, Pronoun, TextLike, POV, PronounAsNoun, FirstPersonPronouns, SecondPersonPronouns } from './language'
 import { LogEntry, LogLine } from './interface'
-import { Container } from './vore'
+import { Place, Nowhere } from './world'
 
 export abstract class Entity {
   get name (): Noun {
@@ -27,9 +27,10 @@ export abstract class Entity {
   desc: TextLike = "It's a ting."
   perspective: POV = POV.Third
   title: TextLike = "Some thing."
+  location: Place
 
   constructor (public baseName: Noun, public kind: Noun, public basePronouns: Pronoun) {
-
+    this.location = Nowhere
   }
 }
 

src/game/world.ts

@@ -0,0 +1,64 @@
+import { TextLike } from './language'
+import { Entity } from './entity'
+import { Creature } from './creature'
+
+export enum Direction {
+  Northwest = "Northwest",
+  North = "North",
+  Northeast = "Northeast",
+  West = "West",
+  East = "East",
+  Southwest = "Southwest",
+  South = "South",
+  Southeast = "Southeast"
+}
+
+export function reverse (dir: Direction): Direction {
+  switch (dir) {
+    case Direction.Northwest: return Direction.Southeast
+    case Direction.North: return Direction.South
+    case Direction.Northeast: return Direction.Southwest
+    case Direction.West: return Direction.East
+    case Direction.East: return Direction.West
+    case Direction.Southwest: return Direction.Northeast
+    case Direction.South: return Direction.North
+    case Direction.Southeast: return Direction.Northwest
+  }
+}
+
+export class Connection {
+  constructor (public src: Place, public dst: Place) {
+
+  }
+}
+
+export class Place {
+  connections: {[key in Direction]?: Place} = {}
+
+  constructor (public name: TextLike, public desc: TextLike) {
+
+  }
+
+  connect (dir: Direction, dst: Place) {
+    this.connections[dir] = dst
+  }
+
+  biconnect (dir: Direction, dst: Place) {
+    this.connections[dir] = dst
+    dst.connections[reverse(dir)] = this
+  }
+}
+
+export const Nowhere = new Place(
+  "Nowhere",
+  "This isn't anywhere!"
+)
+
+export class World {
+  time = "It's time!"
+  creatures: Creature[] = []
+
+  constructor (public player: Creature) {
+    this.creatures.push(player)
+  }
+}