Merge pull request #223 from retro-pc/redesign

redesign

src/components/Mercenary.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="inventory">
-    <span class="head">
+  <div class="mercenary">
+    <span class="mercenary-head">
       <Item v-if="head" :item.sync="head" @click.native="onSelect(head)" @contextmenu.prevent.stop="itemRC($event, head)"/></span>
-    <span class="torso">
+    <span class="mercenary-torso">
       <Item v-if="torso" :item.sync="torso" @click.native="onSelect(torso)" @contextmenu.prevent.stop="itemRC($event, torso)"/></span>
-    <span class="right-hand weapon">
+    <span class="mercenary-right-hand weapon">
       <Item v-if="right_hand" :item.sync="right_hand" @click.native="onSelect(right_hand)" @contextmenu.prevent.stop="itemRC($event, right_hand)"/></span>
-    <span class="left-hand weapon">
+    <span class="mercenary-left-hand weapon">
       <Item v-if="left_hand" :item.sync="left_hand" @click.native="onSelect(left_hand)" @contextmenu.prevent.stop="itemRC($event, left_hand)"/></span>
   </div>
 </template>

src/components/inventory/Grid.vue

@@ -1,13 +1,13 @@
 <template>
-  <div id="grid" class="grid" :class="gridClass">
+  <div id="grid" class="d2p-InventoryGrid" :class="gridClass">
+    <!-- {{items}} -->
     <div class="h-1 cell" :class="'y-' + (h - 1)" v-for="h in height">
-      <div :id="id + '-' + w + '-' + h" class="w-1 h-1 y-0 cell" :class="'x-' + (w - 1)" v-for="w in width" 
-          v-on:drop="drop($event, w, h)" v-on:dragover="dragover" v-on:dragenter="dragenter($event, w, h)" 
+      <div :id="id + '-' + w + '-' + h" class="w-1 h-1 y-0 cell" :class="'x-' + (w - 1)" v-for="w in width"
+          v-on:drop="drop($event, w, h)" v-on:dragover="dragover" v-on:dragenter="dragenter($event, w, h)"
           v-on:dragleave="dragleave($event, w, h)" @contextmenu.prevent.stop="gridRC($event, w, h)">
       </div>
     </div>
-    <Item v-for="(item, idx) in items" :key="idx" :item.sync="item" @click.native="onSelect(item)" 
-          @contextmenu.prevent.stop="itemRC($event, item)"/>
+    <Item v-for="(item, idx) in items" :key="idx" :item.sync="item" @click.native="onSelect(item)" @contextmenu.prevent.stop="itemRC($event, item)"/>
   </div>
 </template>
 
@@ -103,4 +103,4 @@
       }
     }
   };  
-</script>
+</script>

src/components/inventory/Item.vue

@@ -41,7 +41,6 @@
 </template>
 
 <script>
-  import { createPopper } from '@popperjs/core';
   import tippy from 'tippy.js';
 
   export default {
@@ -86,6 +85,7 @@
         const countY = Math.ceil(this.item.total_nr_of_sockets / countX)
         let i = 0
         let j = 0
+        let offsetY1 = 0;
         if (this.item.total_nr_of_sockets == 5) {
           // Exception, draw like the 5 of a dice
           if (idx < 3) {
@@ -112,6 +112,14 @@
             }
           }
         }
+
+        // switch(this.item.total_nr_of_sockets ) {
+        //   case 1: offsetY1 = 0; break;
+        //   case 3: offsetY1 = -1; break;
+        //   case 4: offsetY1 = -0.5; break;
+        //   case 5: offsetY1 = -1; break;
+        // }
+
         return {
           transform: `translateX(${cellSize * (((i + 0.5) * this.item.inv_width) / countX - 0.5)}px) 
             translateY(${cellSize * (((j + 0.5) * this.item.inv_height) / countY - 0.5)}px)`,
@@ -120,6 +128,7 @@
         }
       },
       itemName(item) {
+        if (!item.type) return;
         let name = item.type_name;
         if (item.magic_prefix) {
           let magic_prefix_name = constants.magic_prefixes[item.magic_prefix]
@@ -224,4 +233,4 @@
       }
     }
   };  
-</script>
+</script>

src/components/inventory/ItemEditor.vue

@@ -19,67 +19,65 @@
       <ul className="item-options">
         <span v-if="!item.simple_item">
           <li>
-            Item Level: 
+            <label>Item Level:</label>
             <input class="edit-box" type="number" v-model.number="item.level" min="1" max="99" @input="onEvent('update')"/>
           </li>
           <li>
             <label>Quality:</label>
             <multiselect v-model.number="item.quality" :options="rarities_options" :searchable="true" :canDeselect="false" :canClear="false" :required="true" @update:model-value="onEvent('update')"/>
           </li>
-          <li>
-            <div v-if="item.quality == 4">
+          <li v-if="item.quality == 4">
               <label>Prefix:</label>
               <multiselect v-model.number="item.magic_prefix" :options="magic_prefixes_options" :searchable="true" :canDeselect="false" :canClear="false" :required="true" @update:model-value="onEvent('update')"/>
               <label>Suffix:</label>
               <multiselect v-model.number="item.magic_suffix" :options="magic_suffixes_options" :searchable="true" :canDeselect="false" :canClear="false" :required="true" @update:model-value="onEvent('update')"/>
-            </div>
-            <div v-if="item.quality == 6 || item.quality == 8">
+          </li>
+          <li v-if="item.quality == 6 || item.quality == 8">
               <label>Prefix:</label>
               <multiselect v-model.number="item.rare_name_id" :options="rare_names_options" :searchable="true" :canDeselect="false" :canClear="false" :required="true" @update:model-value="onEvent('update')"/>
               <label>Suffix:</label>
               <multiselect v-model.number="item.rare_name_id2" :options="rare_names_options" :searchable="true" :canDeselect="false" :canClear="false" :required="true" @update:model-value="onEvent('update')"/>
-            </div>
           </li>
-          <li>
-            <div v-if="item.quality == 5">
+          <li v-if="item.quality == 5">
+
               <label>Set Name:</label>
               <multiselect v-model.number="item.set_id" :options="set_items_options" :searchable="true" :canDeselect="false" :canClear="false" :required="true" @update:model-value="onEvent('update')"/>
-            </div>
+
           </li>
         </span>
 
-        <li>
-          <div v-if="!item.simple_item">
-            Base:
+        <li v-if="!item.simple_item">
+
+           <label> Base:</label>
               <multiselect v-model="item.type" :options="getBasesOptions(item.type)" :searchable="true" :can-deselect="false" :can-clear="false" :required="true" @update:model-value="onEvent('update')" />
-          </div>
+
         </li>
-        <li>
-          <div v-if="item.defense_rating">
+        <li  v-if="item.defense_rating">
+
             <label>Defense:</label>
             <input class="edit-box" type="number" v-model.number="item.defense_rating" min="1" max="999" @input="onEvent('update')"/>
-          </div>
+
         </li>
-        <li>
+        <li v-if="getItemMaxSockets() > 0 && !item.given_runeword">
           <!-- <div>{{getItemMaxSockets()}}</div> -->
-          <div v-if="getItemMaxSockets() > 0 && !item.given_runeword">
+
             <label>Sockets:</label>
             <input class="edit-box" type="number" v-model.number="item.total_nr_of_sockets" min="0" :max="getItemMaxSockets()" @input="onEvent('update')"/>
-          </div>
+
         </li>
-        <li>
-          <div v-if="itemCanEthereal(item.type)">
+        <li  v-if="itemCanEthereal(item.type)">
+
             <div class="form-check form-check-inline">
               <label class="form-check-label">
                 <input class="form-check-input" type="checkbox" v-model.number="item.ethereal" :true-value="1" :false-value="0" @change="onEvent('update')">
                 Ethereal
               </label>
             </div>
-          </div>  
+
         </li>
       </ul>
     </div>
-    
+
     <div v-if="!item.simple_item" class="item-stats">
       <div v-if="item.magic_attributes" class="item-magic-stats">
         <div>Item Stats</div>
@@ -99,15 +97,15 @@
         <div>Sockets Stats</div>
         <ItemStatsEditor :id="id + 'Socketed stats'" v-model:item-stats.sync="item.socketed_attributes" @stat-change="onEvent('update')"/>
       </div>
-      <!-- 
+      <!--
       <div v-if="item.socketed_items">
         <div v-for="(socketed_item, index) in item.socketed_items">
           <ItemEditor ref="itemEditor" :item.sync="socketed_item" :id="id + 'Socketed' + index" @item-event="onChildEvent"></>
         </div>
-      </div> 
+      </div>
       -->
     </div>
-    
+
   </div>
 </template>
 
@@ -271,4 +269,4 @@ export default {
   computed: {
   }
 };  
-</script>
+</script>

src/components/inventory/ItemStatsEditor.vue

@@ -1,18 +1,13 @@
 <template>
-  <div>
+  <div style="padding-top: 20px;">
     <div v-for="(stat, statIdx) in itemStats" :key="statIdx" class="form-row">
-      <div class="col-md-4">
-        <div class="form-row">
-          <div class="col-md-1">
-            <button type="button" class="btn btn-link red" @click="removeStat(statIdx)">&times;</button>
-          </div>
-          <div class="col-md-11">
-            <multiselect v-model.number="stat.id" :options="stats_options" :searchable="true" :canDeselect="false" :canClear="false" :required="true" @update:model-value="onItemModified"/>
-          </div>
-        </div>
+      <div class="col-md-auto">
+        <button type="button" class="btn btn-link red" @click="removeStat(statIdx)">&times;</button>
       </div>
-
-      <div v-for="valIdx in numValues(stat.id)" class="col-md-2">
+      <div class="col-md-3" style="padding-top: 5px;">
+        <multiselect v-model.number="stat.id" :options="stats_options" :searchable="true" :canDeselect="false" :canClear="false" :required="true" @update:model-value="onItemModified"/>
+      </div>
+      <div v-for="valIdx in numValues(stat.id)" class="col-md-2" style="padding-top: 5px;">
         <template v-if="isClass(stat.id, valIdx)">
           <multiselect v-model.number="stat.values[valIdx-1]" :options="classes.map(charClass => ({value: charClass.id, label: charClass.co}))" :searchable="true" :canDeselect="false" :canClear="false" @update:model-value="onItemModified"/>
         </template>
@@ -141,4 +136,4 @@ export default {
     }
   }
 }  
-</script>
+</script>