Inventory - hover informations

MephisTools · Jun 1, 2019 · 89d0b05 · 89d0b05
1 parent c430354
commit 89d0b05
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -4,11 +4,13 @@
 
 Display packets and information about a current diablo2 session
 
+**Map**
+
 <img src="images/base_viewer.gif" width="200" height="200"> <img src="images/filters_viewer.gif" width="200" height="200"><img src="images/tp_viewer.gif" width="200" height="200"> <img src="images/mobs_viewer.gif" width="200" height="200">
 
 **Inventory**
 
-<img src="images/inventory.gif" width="200" height="200">
+<img src="images/inventory1.gif" width="200" height="200"> <img src="images/inventory2.gif" width="200" height="200">
 
 Uses
 * [leaflet](https://leafletjs.com/) to display maps

diff --git a/images/inventory.gif b/images/inventory.gif
diff --git a/images/inventory1.gif b/images/inventory1.gif
diff --git a/images/inventory2.gif b/images/inventory2.gif
diff --git a/src/inventory-live-viewer.js b/src/inventory-live-viewer.js
@@ -14,14 +14,40 @@ class InventoryLiveViewer extends LitElement {
       display: inline-block;
       margin:10px;
       background-color:grey;
+    }
+    
+    #popup {
+      display: none;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      border:1px solid;
+      background: #d9d9d9;
+      overflow-wrap: break-word;
+      width: 500px;
     }`
   }
 
   firstUpdated () {
   }
 
-  displayItemData (data) {
-    console.log(data)
+  displayItemData (e, data) {
+    let popup = this.shadowRoot.getElementById('popup')
+    popup.innerHTML = JSON.stringify(data)
+    popup.style.display = 'block'
+
+    window.addEventListener('mousemove', (e) => { this.followCursor(e) }, true)
+  }
+
+  followCursor (e) {
+    let popup = this.shadowRoot.getElementById('popup')
+    popup.style.top = e.clientY + 'px'
+    popup.style.left = e.clientX + 'px'
+  }
+
+  hideItemData () {
+    this.shadowRoot.getElementById('popup').style.display = 'none'
+    window.removeEventListener('mousemove', (e) => { this.followCursor(e) }, true)
   }
 
   listenToPackets () {
@@ -46,7 +72,8 @@ class InventoryLiveViewer extends LitElement {
                   let y = params['y'] + h
                   const e = this.shadowRoot.getElementById(`${params['container']}${x};${y}`)
                   e.src = 'assets/itemGrid.png'
-                  e.addEventListener('mouseover', () => { this.displayItemData(params) })
+                  e.addEventListener('mouseover', (event) => { this.displayItemData(event, params) })
+                  e.addEventListener('mouseout', () => { this.hideItemData() })
                 } catch (exception) {
                   console.log(`Failed ${JSON.stringify(params)}`)
                 }
@@ -56,15 +83,17 @@ class InventoryLiveViewer extends LitElement {
           case 8: // unequip TODO: handle case when removing belt (it drop potions into inventory non-equipped)
             const e = this.shadowRoot.getElementById(`e${params['x']};${params['y']}`)
             e.src = 'assets/itemGrid.png'
-            e.removeEventListener('mouseover', () => { this.displayItemData(params) })
+            e.removeEventListener('mouseover', (event) => { this.displayItemData(event, params) })
+            e.removeEventListener('mouseout', () => { this.hideItemData() })
             break
           case 4: // -> inventory non-equipped
           case 6: // whatever -> equipped
           case 14: // inventory closed -> ground -> inventory OR inventory -> belt
             if (params['equipped'] === 1) {
               const e = this.shadowRoot.getElementById(`e${params['x']};${params['y']}`)
               e.src = 'assets/itemGrid_filled.png'
-              e.addEventListener('mouseover', () => { this.displayItemData(params) })
+              e.addEventListener('mouseover', (event) => { this.displayItemData(event, params) })
+              e.addEventListener('mouseout', () => { this.hideItemData() })
             } else {
               for (let w = 0; w < params['width']; w++) {
                 for (let h = 0; h < params['height']; h++) {
@@ -73,7 +102,8 @@ class InventoryLiveViewer extends LitElement {
                     let y = params['y'] + h
                     const e = this.shadowRoot.getElementById(`${params['container']}${x};${y}`)
                     e.src = 'assets/itemGrid_filled.png'
-                    e.removeEventListener('mouseover', () => { this.displayItemData(params) })
+                    e.removeEventListener('mouseover', (event) => { this.displayItemData(event, params) })
+                    e.removeEventListener('mouseout', () => { this.hideItemData() })
                   } catch (exception) {
                     console.log(`Failed ${JSON.stringify(params)}`)
                   }
@@ -116,6 +146,8 @@ class InventoryLiveViewer extends LitElement {
     */
 
     return html`
+    <p id="popup">some text here</div>
+
     <!-- TODO: use diablo images for inventory (make same interface than diablo) -->
     <div>
     <h1>Equipped</h1>