Starts refactor using a PlayerView renderless component for Player logic

lootalot_front/src/App.vue

@@ -1,11 +1,25 @@
 <template>
   <main id="app" class="container">
-    <Player></Player>
+    <PlayerView :id="state.player_id" v-slot="{ player, updateWealth }">
+      <section class="section">
+        <HeaderBar :app_state="state">
+          <template v-slot:title>{{ player.name }}</template>
+        </HeaderBar>
+        <Wealth 
+            :wealth="[player.cp, player.sp, player.gp, player.pp]" 
+            :debt="player.debt"
+            @update="updateWealth">
+        </wealth>
+        <Chest :player="state.show_player_chest ? player.id : 0"></Chest>
+      </section>
+    </PlayerView>
   </main>
 </template>
 
 <script>
-import Player from './components/Player.vue'
+import PlayerView from './components/PlayerView.js'
+import HeaderBar from './components/HeaderBar.vue'
+import Wealth from './components/Wealth.vue'
 import Chest from './components/Chest.vue'
 import { AppStorage } from './AppStorage'
 
@@ -29,12 +43,14 @@ export default {
   name: 'app',
   data () {
       return {
-  	state: AppStorage.state,
+  	    state: AppStorage.state,
       };
   },
   components: {
-    Player,
-    Chest
+    PlayerView,
+    HeaderBar,
+    Chest,
+    Wealth
   },
   created () {
     // Initiate with active player set to value found in cookie