small fixes

lootalot_front/src/App.vue

@@ -2,7 +2,7 @@
   <PlayerView :id="state.player_id" 
       v-slot="{ player, loot, notifications, actions }">
     <main id="app" class="container">
-      <header style="padding-bottom: 1.5em;">
+      <header >
         <HeaderBar :app_state="state">
           <template v-slot:title>{{ player.name }}</template>
           <template v-slot:links>
@@ -103,7 +103,7 @@ export default {
   components: {
     PlayerView,
     HeaderBar,
-    'AddingChest': Chest,
+    'AddingChest': Chest, // Alias to prevent component re-use 
     Chest,
     Wealth
   },
@@ -140,3 +140,8 @@ export default {
 }
 </script>
 
+<style scoped>
+    header {
+        padding-bottom: 1.5em;
+    }
+</style>

lootalot_front/src/components/Wealth.vue

@@ -25,19 +25,19 @@
       </template>
       <template v-else>
       <div class="level-item ">
-       <p class="is-size-4">{{ wealth[3] }}</p>
+       <p class="is-size-4">{{ pp }}</p>
        <p class="heading">PP</p>
       </div>
      <div class="level-item ">
-       <p class="is-size-4">{{ wealth[2] }}</p>
+       <p class="is-size-4">{{ gp }}</p>
        <p class="heading">PO</p>
      	</div>
      <div class="level-item ">
-       <p class="is-size-4">{{ wealth[1] }}</p>
+       <p class="is-size-4 has-text-grey-light">{{ sp }}</p>
        <p class="heading">PA</p>
        </div>
      <div class="level-item ">
-       <p class="is-size-4">{{ wealth[0] }}</p>
+       <p class="is-size-4 has-text-grey-light">{{ cp }}</p>
        <p class="heading">PC</p>
        </div>
     </template>
@@ -69,6 +69,25 @@
             	this.editing = false;
                 this.edit_value = 0;
             }
+        },
+        computed: {
+            pp () {
+                return this.wealth[3];
+            },
+            gp () {
+                const gp = this.wealth[2];
+                if (gp < 10) {
+                    return "0" + gp;
+                } else {
+                    return gp;
+                }
+            },
+            sp () {
+                return this.wealth[1];
+            },
+            cp () {
+                return this.wealth[0];
+            },
         }
     }
 </script>