Add time library; name connections

package-lock.json

@@ -7681,6 +7681,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "moment": "^2.27.0",
     "tippy.js": "^6.2.5",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.5",

src/App.vue

@@ -55,7 +55,7 @@ export default class App extends Vue {
     const other = new Place('Bar', 'The bar')
     foo.biconnect(Direction.North, other)
 
-    const something = new Place('Baz', 'BAZZZZZZZZZZ')
+    const something = new Place('Baz', 'Despacito 3')
     foo.biconnect(Direction.East, something)
 
     const player = new Creatures.Wolf()

src/components/Explore.vue

@@ -4,16 +4,15 @@
 
     </div>
     <div class="explore-worldinfo">
-      <p>Time: {{ world.time }}</p>
+      <p class="worldinfo-date">{{ world.time.format("MMMM Do YYYY") }}</p>
+      <p class="worldinfo-time">{{ world.time.format("h:mm:ss A")}}</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>
+      <NavButton @click.native="location=location.connections[direction]" v-for="direction in Object.keys(location.connections)" :key="direction" :style="navBtnCss(direction)" :location="location" :direction="direction" />
     </div>
     <div class="explore-actions">
 
@@ -25,8 +24,13 @@
 
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Direction, World, Place } from '@/game/world'
+import NavButton from './NavButton.vue'
 
-@Component({})
+@Component({
+  components: {
+    NavButton
+  }
+})
 
 export default class Explore extends Vue {
   get location () {
@@ -37,7 +41,7 @@ export default class Explore extends Vue {
     this.world.player.location = loc
   }
 
-  @Prop()
+  @Prop({ type: World })
   world!: World
 
   navBtnCss (dir: Direction) {
@@ -74,6 +78,10 @@ export default class Explore extends Vue {
   background: #111;
 }
 
+.worldinfo-date,
+.worldinfo-time {
+  font-size: 125%;
+}
 .explore-info {
   grid-area: info;
   background: #333;
@@ -104,32 +112,6 @@ export default class Explore extends Vue {
   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;

src/components/NavButton.vue

@@ -0,0 +1,67 @@
+<template>
+  <button class="nav-button">
+    {{location.connections[direction].dst.name}}
+    <div class="tooltip-template">
+      <div class="tooltip-title">{{ location.connections[direction].name }}</div>
+      <div class="tooltip-body">{{ location.connections[direction].desc }}</div>
+    </div>
+  </button>
+</template>
+
+<script lang="ts">
+
+import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
+import { Action, GroupAction } from '@/game/combat'
+import { Creature } from '@/game/creature'
+import { Place, Direction } from '@/game/world'
+import tippy from 'tippy.js'
+
+@Component({})
+export default class NavButton extends Vue {
+  @Prop()
+  location!: Place
+
+  @Prop()
+  direction!: Direction
+
+  mounted () {
+    const elem = this.$el
+    const tooltip = this.$el.querySelector(".tooltip-template") as HTMLElement
+    tippy(
+      elem,
+      {
+        content: tooltip
+      }
+    )
+  }
+}
+</script>
+
+<style scoped>
+
+.nav-button {
+  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-button:hover {
+  background: #666;
+}
+
+.nav-button:active {
+  background: #777;
+  border-style: inset;
+}
+
+.nav-button:focus {
+  background: #666;
+}
+</style>

src/game/world.ts

@@ -1,6 +1,7 @@
 import { TextLike } from './language'
 import { Entity } from './entity'
 import { Creature } from './creature'
+import moment, { Moment, Duration } from 'moment'
 
 export enum Direction {
   Northwest = "Northwest",
@@ -27,25 +28,25 @@ export function reverse (dir: Direction): Direction {
 }
 
 export class Connection {
-  constructor (public src: Place, public dst: Place) {
+  constructor (public src: Place, public dst: Place, public name: TextLike = "Travel", public desc: TextLike = "Go there lol") {
 
   }
 }
 
 export class Place {
-  connections: {[key in Direction]?: Place} = {}
+  connections: {[key in Direction]?: Connection} = {}
 
   constructor (public name: TextLike, public desc: TextLike) {
 
   }
 
   connect (dir: Direction, dst: Place) {
-    this.connections[dir] = dst
+    this.connections[dir] = new Connection(this, dst)
   }
 
   biconnect (dir: Direction, dst: Place) {
-    this.connections[dir] = dst
-    dst.connections[reverse(dir)] = this
+    this.connect(dir, dst)
+    dst.connect(reverse(dir), this)
   }
 }
 
@@ -55,10 +56,15 @@ export const Nowhere = new Place(
 )
 
 export class World {
-  time = "It's time!"
+  time: Moment
   creatures: Creature[] = []
 
   constructor (public player: Creature) {
+    this.time = moment.utc([500, 1, 1, 9, 0, 0, 0])
     this.creatures.push(player)
   }
+
+  advance (dt: Duration) {
+    this.time.add(dt)
+  }
 }