small fixes while reviewing code

lootalot_front/src/components/ItemInput.vue

@@ -4,7 +4,7 @@
     <div class="control is-expanded" 
         :class="{'is-loading': is_loading }">
       <input type="text" 
-        v-model="search"
+        v-model="item_name"
         @input="autoCompletion" 
         class="input" 
        :class="{'is-danger': no_results, 
@@ -12,6 +12,11 @@
         autocomplete="on">
         </input>
       </div>
+    <div class="control">
+      <input type="text" class="input"
+        :class="{'is-danger': !item_price}"
+        v-model.number="item_price"></input>
+    </div>
     <div class="control">
       <button class="button is-primary"
         :disabled="no_results"
@@ -23,7 +28,7 @@
       <div class="dropdown-menu">
         <div class="dropdown-content">
             <a v-for="(result,i) in results" :key="i"
-              @click="setResult(result.name)"
+              @click="setResult(result)"
               class="dropdown-item"
               >
               {{ result.name }}
@@ -35,18 +40,15 @@
 </template>
 
 <script>
-    // List of items for autocomplete
-    const MOCK_ITEMS = [
-        {id: 35, name: "Cape d'invisibilité", sell_value: 30000}, 
-        {id: 8, name: "Arc long", sell_value: 10}, 
-    ];
 
     export default {
+        props: ["source"],
         data () {
             return {
                 is_loading: false,
                 no_results: false,
-                search: '',
+                item_name: '',
+                item_price: '',
                 results: [],
                 auto_open: false,
             };
@@ -55,13 +57,13 @@
             autoCompletion (ev) {
                 // TODO: a lot happens here that
                 //       need to be clarified
-                if (this.search == '') {
+                if (this.item_name == '') {
                     this.auto_open = false;
                     this.results = [];
                     this.no_results = false;
                 } else {
-                    this.results = MOCK_ITEMS.filter(item => {
+                    this.results = this.source.filter(item => {
-                        return item.name.includes(this.search);
+                        return item.name.includes(this.item_name);
                     });
                     // Update status 
                     if (this.results.length == 0) {
@@ -73,12 +75,17 @@
                 }
             },
             setResult(result) {
-                this.search = result;
+                this.item_name = result.name;
+                this.item_price = result.sell_value;
                 this.auto_open = false;
             },
             addItem () {
-                this.$emit("addItem", this.search);        
+                this.$emit("addItem", {
-                this.search = '';
+                   name: this.item_name,
+                   sell_value: this.item_price
+                });        
+                this.item_name = '';
+                this.item_price = '';
                 this.results = [];
                 this.no_results = false;
                 this.auto_open = false;

lootalot_front/src/components/Loot.vue

@@ -1,32 +1,29 @@
 <template>
-    <div class="card is-shadowless">
+  <div>
-        <div class="card-header">
+  <p class="heading has-text-left is-size-5">
-          <p class="card-header-title">
+    Nouveau loot - {{ looted.length }} objet(s)</p>
-            Nouveau loot - {{ looted.length }} objet(s)</p>
+  <ItemInput @addItem="onAddItem" :source="inventory"></ItemInput>
-          </div>
+  <p v-for="(item, idx) in looted" :key="idx"
-        <div class="card-content">
+     class="has-text-left is-size-5">
-          <ItemInput @addItem="onAddItem"></ItemInput>
+    {{ item.name }} ({{ item.sell_value }}po)
-          <p v-for="(item, idx) in looted" :key="idx"
+  </p>
-             class="has-text-left is-size-5">
+  </div>
-            {{ item }}
-          </p>
-          </div>
-        <div class="card-footer">
-          <div class="card-footer-item buttons is-center">
-            <a class="button is-primary">Confirmer</a>
-            <a @click="onClose" class="button is-danger">Annuler</a>
-            </div>
-          </div>
-      </div>
 </template>
 
 <script>
     import ItemInput from './ItemInput.vue'
+    // List of items for autocomplete
+    const MOCK_ITEMS = [
+        {id: 35, name: "Cape d'invisibilité", sell_value: 30000}, 
+        {id: 8, name: "Arc long", sell_value: 10}, 
+        {id: 9, name: "Arc court", sell_value: 10}, 
+    ];
  
     export default {
         components: { ItemInput },
         data () { return {
             looted: [],
+            inventory: MOCK_ITEMS,
         }; 
         },
         methods: {

lootalot_front/src/components/Player.vue

@@ -10,15 +10,9 @@
 	</a>
     </div>
     <div id="menu" class="navbar-menu">
-      <div class="navbar-start">
+      <div class="navbar-start" v-if="!playerIsGroup">
-     	<template v-if="playerIsGroup">
-     	  <a class="navbar-item">Nouveau loot</a>
-     	</template>
-     	<template v-else>
      	  <a class="navbar-item" @click="switchPlayerChestVisibility">
      	    {{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
-     	  <a class="navbar-item">Marchand</a>
-     	</template>
       </div>
       <div class="navbar-end">
       <div class="navbar-item has-dropdown is-hoverable">
@@ -36,10 +30,24 @@
       </div>
     </div>
   </nav>
-  <section class="has-background-light" v-if="show_wealth">
+  <section class="box is-shadowless" v-if="show_wealth">
-  <Wealth :wealth="wealth" :debt="player.debt"></Wealth>
+    <Wealth :wealth="wealth" :debt="player.debt"></Wealth>
+  </section>
+  <section class="card">
+    <div class="card-content">
+      <Loot v-if="is_adding"></Loot>
+      <Chest v-else :player="shownChest"></Chest>
+    </div>
+    <div class="card-footer" v-if="shownChest == player.id">
+      <template v-if="is_adding">
+        <a class="card-footer-item">Confirmer</a>
+        <a class="card-footer-item" @click="toggleAdding">Annuler</a>
+      </template>
+      <a v-else class="card-footer-item" @click="toggleAdding">
+        + {{ playerIsGroup ? 'Nouveau loot' : 'Acheter' }}
+      </a>
+    </div>
   </section>
-  <Chest :player="shownChest"></Chest>
   </div>
 </template>
 
@@ -47,28 +55,16 @@
     import { AppStorage } from '../AppStorage'
     import Chest from './Chest.vue'
     import Wealth from './Wealth.vue'
+    import Loot from './Loot.vue'
     /*
     The Player control board.
-    To test :
-        - Player name is displayed
-        - Player's wealth is displayed -> Inside Wealth component
-        - Dropdown:
-            - The first item is the group
-            - Opened by activator
-            - Closed when clicked outside
-            - Click on item does switch active player
-        - Switch player :
-            - Name is updated when player_id is updated
-            - Wealth is updated -> Inside Wealth component
-        - Chest button controls Chest visibility
-            
     */
-    let handleOutsideClick;
     export default {
-        components: { Chest, Wealth },
+        components: { Chest, Wealth, Loot },
         data () {
             return {
                 app_state: AppStorage.state,
+                is_adding: false,
                 show_wealth: true,
             };
         },
@@ -82,12 +78,12 @@
             	if (!this.app_state.initiated) {
             	    return ["-", "-", "-", "-"];
             	} else {
-		    const cp = this.player.cp
+                    const cp = this.player.cp
-		    const sp = this.player.sp
+                    const sp = this.player.sp
-		    const gp = this.player.gp
+                    const gp = this.player.gp
-		    const pp = this.player.pp
+                    const pp = this.player.pp
-		    return [cp, sp, gp, pp];
+                    return [cp, sp, gp, pp];
-		}
+                }
             },
             // Check if the active player is the special 'Group' player
             playerIsGroup () {
@@ -100,6 +96,9 @@
             }
         },
         methods: {
+            toggleAdding () {
+               this.is_adding = !this.is_adding; 
+            },
             switchPlayerChestVisibility () {
                 AppStorage.switchPlayerChestVisibility();
             },

lootalot_front/src/components/Request.vue

@@ -2,25 +2,22 @@
   <div class="buttons is-right" >
     <template v-if="isInConflict">
       <button class="button is-success" 
-            @click="cancelRequest"
+        @click="cancelRequest">
-        >
+        <span class="icon is-small">
-          <span class="icon is-small">
+          <i class="fas fa-hand-peace"></i>
-            <i class="fas fa-hand-peace"></i>
+        </span>
-          </span>
+      </button>
-        </button>
+      <button class="button is-danger" 
-        <button class="button is-danger" 
+        @click="hardenRequest">
-            @click="hardenRequest"
+        <span class="icon is-small">
-          >
+          <i class="fas fa-hand-middle-finger"></i>
-          <span class="icon is-small">
+        </span>
-            <i class="fas fa-hand-middle-finger"></i>
+      </button>
-          </span>
-        </button>
     </template>
     <button class="button is-primary" 
-        @click="putRequest"
+      @click="putRequest"
-        :class="{'is-outlined': isRequested}"
+      :class="{'is-small': isRequested}"
-        :disabled="isRequested"
+      :disabled="isRequested">
-    >
       <span class="icon is-small">
         <i class="fas fa-praying-hands"></i>
       </span>
@@ -33,20 +30,18 @@
     export default {
         props: ["item"],
         data () { 
-            return {
+            return AppStorage.state;
-                state: AppStorage.state,
-            };
         },
         computed: {
             // Check if item is requested by active player
             isRequested () {
-                const reqs = this.state.player_claims[this.state.player_id];
+                const reqs = this.player_claims[this.player_id];
                 return reqs.includes(this.item);
             },
             // Check if item is requested by multiple players including active one
             isInConflict () {
-                const reqs = this.state.player_claims;
+                const reqs = this.player_claims;
-                const playerId = this.state.player_id;
+                const playerId = this.player_id;
                 var reqByPlayer = false;
                 var reqByOther = false;
                 for (var key in reqs) {

lootalot_front/src/components/Wealth.vue

@@ -9,7 +9,7 @@
       </div>
     <template v-if="edit">
       <div class="level-item">
-    	<input type="number" step="0.01" v-model="edit_value"></input>
+    	<input class="input" type="number" step="0.01" v-model="edit_value"></input>
       </div>
       <div class="level-item">
         <button class="button is-danger" @click="updateWealth()">