small fixes

lootalot_front/src/App.vue

@@ -32,7 +32,6 @@ export const store = {
         if (this.debug) console.log('setActivePlayer to ', newPlayerId)
         this.state.player_id = newPlayerId
         document.cookie = `player_id=${newPlayerId};`;
-        if (this.debug) console.log('setCookie', document.cookie);
     },
     switchPlayerChestVisibility () {
         if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
@@ -43,6 +42,16 @@ export const store = {
         if (this.debug) console.log('newRequest from', playerId, 'on', itemId)
         this.state.requests[playerId].push(itemId);
     },
+    cancelRequest(itemId) {
+        const playerId = this.state.player_id
+        if (this.debug) console.log('cancelRequest of', playerId, 'on', itemId)
+        var idx = this.state.requests[playerId].indexOf(itemId);
+        if (idx > -1) {
+            this.state.requests[playerId].splice(idx, 1);
+        } else {
+            if (this.debug) console.log("cancel a non-existent request")
+        }
+    }
 }
 
 function getCookie(cname) {

lootalot_front/src/components/Chest.vue

@@ -4,9 +4,9 @@
     <table class="table is-fullwidth is-striped" >
         <thead>
           <tr>
-            <th width="100%" >Objets de {{ player }}</th>
+            <th>Objets de {{ player }}</th>
-            <th v-if="canGrab" style="min-width: 120px"></th>
+            <th v-if="canGrab"></th>
-            <th v-if="canSell" style="min-width: 120px">
+            <th v-if="canSell">
                   <button class="button is-fullwidth" 
                     :class="is_selling ? 'is-danger' :  'is-warning'"
                     @click="is_selling = !is_selling"

lootalot_front/src/components/Request.vue

@@ -1,26 +1,28 @@
 <template>
-    <div v-if="!isInConflict">
+  <div class="buttons is-right" >
-        <button class="button is-medium is-primary is-fullwidth" 
+    <template v-if="isInConflict">
-            @click="putRequest"
+      <button class="button is-success" 
-            :disabled="isRequested">
-          <span class="icon">
-            <i class="fas fa-praying-hands"></i>
-          </span>
-        </button>
-    </div>
-    <div class="buttons has-addons is-centered" v-else>
-        <button class="button is-medium is-success" 
             @click="cancelRequest"
         >
-          <span class="icon">
+          <span class="icon is-small">
             <i class="fas fa-hand-peace"></i>
           </span>
         </button>
-        <button class="button is-medium is-danger" 
+        <button class="button is-danger" 
             @click="hardenRequest"
           >
-          <span class="icon">
+          <span class="icon is-small">
-            <i class="fas fa-dice"></i>
+            <i class="fas fa-hand-middle-finger"></i>
+          </span>
+        </button>
+    </template>
+    <button class="button is-primary" 
+        @click="putRequest"
+        :class="{'is-outlined': isRequested}"
+        :disabled="isRequested"
+    >
+      <span class="icon is-small">
+        <i class="fas fa-praying-hands"></i>
       </span>
     </button>
   </div>
@@ -68,6 +70,7 @@
             },
             // The active player withdraws his request
             cancelRequest () {
+                store.cancelRequest(this.item)
             },
             // The active player insist on his claim
             // TODO: Find a simple and fun system to express