Add a (very primitive) profile screen

src/App.vue

@@ -3,7 +3,7 @@
     <Header />
     <div id="main-area">
       <transition name="component-fade" mode='out-in'>
-        <component @leaveCombat="world.encounter = null" v-bind:is="mode" :world="world" :encounter="world.encounter" />
+        <component @profile="profileOn = true" @exit="profileOn = false" @leaveCombat="world.encounter = null" v-bind:is="mode" :world="world" :encounter="world.encounter" />
       </transition>
     </div>
   </div>
@@ -11,9 +11,10 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
-import Combat from './components/Combat.vue'
 import Header from './components/Header.vue'
+import Combat from './components/Combat.vue'
 import Explore from './components/Explore.vue'
+import Profile from './components/Profile.vue'
 import * as Creatures from '@/game/creatures'
 import * as Items from '@/game/items'
 import { Creature } from '@/game/creature'
@@ -27,11 +28,12 @@ import { Town } from './game/maps/town'
 
 @Component({
   components: {
-    Combat, Header, Explore
+    Combat, Header, Explore, Profile
   },
   data () {
     return {
       world: null,
+      profileOn: false,
       props: {
         Explore: {
           world: this
@@ -47,7 +49,13 @@ export default class App extends Vue {
   }
 
   get mode () {
-    return this.$data.world.encounter === null ? "Explore" : "Combat"
+    if (this.$data.world.encounter !== null) {
+      return "Combat"
+    } else if (this.$data.profileOn) {
+      return "Profile"
+    } else {
+      return "Explore"
+    }
   }
 
   @Emit('startFight')

src/components/Explore.vue

@@ -4,6 +4,7 @@
       <div class="explore-log-filler"></div>
     </div>
     <div class="explore-worldinfo">
+      <button @click="$emit('profile')">Show profile</button>
       <p class="worldinfo-date">{{ world.time.format("MMMM Do Y") }}</p>
       <p class="worldinfo-date">{{ world.time.format("hh:mm:ss a") }}</p>
     </div>

src/components/Profile.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="character-layout">
+    <div class="character-items">
+      <button @click="$emit('exit')" class="profile-exit">Exit</button>
+    </div>
+    <div class="character-containers">
+      <ContainerView :container="container" v-for="(container, index) in world.player.containers" :key="'explore-container-' + index" />
+    </div>
+    <div class="character-stats">
+      <Statblock :subject="world.player" :initiative="0" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import Statblock from './Statblock.vue'
+import ContainerView from './ContainerView.vue'
+import { Creature } from '@/game/creature'
+import { World } from '@/game/world'
+@Component({
+  components: {
+    Statblock, ContainerView
+  }
+})
+
+export default class Explore extends Vue {
+  @Prop()
+  world!: World
+}
+
+</script>
+
+<style scoped>
+
+.character-layout {
+  flex: 10;
+  position: relative;
+  display: grid;
+  grid-template-areas:
+  "items     containers"
+  "stats     containers";
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+  height: 100%;
+  max-width: 1500px;
+  margin: auto;
+  overflow: hidden;
+}
+
+.character-items {
+  background: #222;
+  grid-area: "items";
+}
+
+.character-containers {
+  background: #222;
+  grid-area: "containers"
+}
+
+.character-stats {
+  background: #111;
+  grid-area: "stats";
+}
+
+.profile-exit {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>