From 5a3c628e8eb1751a81bf038e82a2f037ef2e4cb8 Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Thu, 13 Jun 2019 21:30:45 +0200
Subject: [PATCH] moves request inside own component

---
 lootalot_front/src/components/Chest.vue   | 11 +++++------
 lootalot_front/src/components/Player.vue  |  2 +-
 lootalot_front/src/components/Request.vue | 21 +++++++++++++++++++++
 lootalot_front/src/components/Wealth.vue  | 16 ++++++++--------
 4 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 lootalot_front/src/components/Request.vue

diff --git a/lootalot_front/src/components/Chest.vue b/lootalot_front/src/components/Chest.vue
index 74d9b7e..0c0fa1c 100644
--- a/lootalot_front/src/components/Chest.vue
+++ b/lootalot_front/src/components/Chest.vue
@@ -25,12 +25,7 @@
             <tr :key="`row-${idx}`">
               <td>{{item.name}}</td>
               <td v-if="canGrab">
-                <button class="button is-primary" disabled>
-                  <span class="icon">
-                    <i class="fas fa-praying-hands"></i>
-                  </span>
-                  <small>Request pending...</small>
-                </button>
+                <Request :item="item.id"></Request>
               </td>
               <td v-if="canSell">
                 <label class="checkbox" v-show="is_selling">
@@ -50,6 +45,7 @@
 
 <script>
     import { store } from '../App.vue'
+    import Request from './Request.vue'
     /*
         The chest displays the collection of items owned by a player
 
@@ -70,6 +66,9 @@
                 default: 0
             }
         },
+        components: {
+            Request
+        },
         data () {
             return {
                 app_state: store.state,
diff --git a/lootalot_front/src/components/Player.vue b/lootalot_front/src/components/Player.vue
index f9b6e71..70c8566 100644
--- a/lootalot_front/src/components/Player.vue
+++ b/lootalot_front/src/components/Player.vue
@@ -77,7 +77,7 @@
                 app_state: store.state,
                 player: {
                     name: "Groupe",
-                    wealth: [1000,100,10,1],
+                    wealth: [100,240,145000,134],
                     debt: 0,
                 },
                 player_list: [
diff --git a/lootalot_front/src/components/Request.vue b/lootalot_front/src/components/Request.vue
new file mode 100644
index 0000000..a7d71fd
--- /dev/null
+++ b/lootalot_front/src/components/Request.vue
@@ -0,0 +1,21 @@
+<template>
+        <button class="button is-primary" disabled>
+          <span class="icon">
+            <i class="fas fa-praying-hands"></i>
+          </span>
+          <small>Request pending...</small>
+        </button>
+</template>
+
+<style>
+    export default {
+        props: ["item"],
+        data () { 
+            return {
+            };
+        },
+        computed: {
+
+        }
+    }
+</style>
diff --git a/lootalot_front/src/components/Wealth.vue b/lootalot_front/src/components/Wealth.vue
index 9347a1e..53c6b4f 100644
--- a/lootalot_front/src/components/Wealth.vue
+++ b/lootalot_front/src/components/Wealth.vue
@@ -3,22 +3,22 @@
     <span class="icon is-large">
       <i class="fas fa-2x fa-piggy-bank"></i>
     </span>
-    <nav class="columns is-mobile">
+    <nav class="columns is-mobile is-multiline">
       <div class="column">
-          <p class="heading">CP</p>
-          <p class="is-size-3">{{ wealth[0] }}</p>
+          <p class="heading">PC</p>
+          <p class="is-size-4">{{ wealth[0] }}</p>
       </div>
       <div class="column">
-          <p class="heading">SP</p>
-          <p class="is-size-3">{{ wealth[1] }}</p>
+          <p class="heading">PA</p>
+          <p class="is-size-4">{{ wealth[1] }}</p>
       </div>
       <div class="column">
-          <p class="heading">GP</p>
-          <p class="is-size-3">{{ wealth[2] }}</p>
+          <p class="heading">PO</p>
+          <p class="is-size-4">{{ wealth[2] }}</p>
       </div>
       <div class="column">
           <p class="heading">PP</p>
-          <p class="is-size-3">{{ wealth[3] }}</p>
+          <p class="is-size-4">{{ wealth[3] }}</p>
       </div>
     </nav>
     <div v-if="edit"> <!-- or v-show ? -->