@hytopia.com/examples 1.0.17 → 1.0.18

package/frontiers-rpg-game/assets/ui/menus/backpack.html

@@ -82,6 +82,9 @@
     accessory: 5
   };
 
+  const mouseFollower = createMouseFollower();
+  let heldItem = null;
+
   // Setup hytopia data handlers
   hytopia.onData(data => {
     if (data.type === 'toggleBackpack') {
@@ -134,15 +137,8 @@
     }
   }
 
-  function setupEventListeners() {
-    const closeButton = document.querySelector('.backpack-close');
-    closeButton.addEventListener('click', closeBackpack);
-
-    let heldItem = null;
-    const mouseFollower = createMouseFollower();
-
-    // Helper function to get slot info
-    function getSlotInfo(slot) {
+  // Helper function to get slot info
+  function getSlotInfo(slot) {
       if (slot.dataset.slotIndex) {
         return { type: 'backpack', index: slot.dataset.slotIndex };
       } else if (slot.dataset.slot) {
@@ -216,8 +212,14 @@
       // Copy content to mouse follower
       mouseFollower.innerHTML = contentHTML;
       
-      // Copy tooltip if it exists
+      // Copy tooltip if it exists and store reference for later restoration
       if (tooltip) {
+        // Store tooltip data for restoration
+        heldItem.tooltipData = {
+          element: tooltip.cloneNode(true),
+          parentSlot: slot
+        };
+        
         const tooltipClone = tooltip.cloneNode(true);
         tooltipClone.style.opacity = '1';
         tooltipClone.style.visibility = 'visible';
@@ -225,15 +227,26 @@
         tooltipClone.style.position = 'absolute';
         tooltipClone.style.bottom = 'auto';
         tooltipClone.style.top = '-8px';
+        
+        // Remove mobile tooltip classes that might interfere
+        tooltipClone.classList.remove('mobile-tooltip-visible');
+        
         mouseFollower.appendChild(tooltipClone);
+        
+        // Completely remove original tooltip to prevent ghosting
+        tooltip.remove();
       }
+    
+      // Position mouse follower at center of slot
+      const slotRect = slot.getBoundingClientRect();
+      const centerX = slotRect.left + slotRect.width / 2;
+      const centerY = slotRect.top + slotRect.height / 2;
       
-      mouseFollower.style.left = mouseX + 'px';
-      mouseFollower.style.top = mouseY + 'px';
+      mouseFollower.style.left = centerX + 15 + 'px';
+      mouseFollower.style.top = centerY - 15 + 'px';
       mouseFollower.classList.add('active');
       slot.classList.add('backpack-slot-empty');
       
-      console.log(`Picked up from ${slotInfo.type}: ${slotInfo.index}`);
       return true;
     }
 
@@ -252,8 +265,15 @@
     // Reset held item state
     function resetHeldItem() {
       if (!heldItem) return;
-      
+
       heldItem.sourceSlot.classList.remove('backpack-slot-empty');
+      
+      // Restore original tooltip by recreating it
+      if (heldItem.tooltipData) {
+        const restoredTooltip = heldItem.tooltipData.element.cloneNode(true);
+        heldItem.tooltipData.parentSlot.appendChild(restoredTooltip);
+      }
+      
       mouseFollower.classList.remove('active');
       mouseFollower.innerHTML = '';
       heldItem = null;
@@ -263,10 +283,13 @@
     function cancelHeldItem() {
       if (!heldItem) return;
       
-      console.log(`Cancelled pickup from ${heldItem.sourceType}: ${heldItem.sourceIndex}`);
       resetHeldItem();
     }
 
+  function setupEventListeners() {
+    const closeButton = document.querySelector('.backpack-close');
+    closeButton.addEventListener('click', closeBackpack);
+
     // Setup slot click handlers
     document.querySelectorAll('.backpack-slot, .backpack-wearable-slot, .backpack-hotbar-slot')
       .forEach(slot => {
@@ -321,6 +344,16 @@
   function closeBackpack() {
     document.querySelector('.backpack-overlay').style.display = 'none';
     hytopia.lockPointer(true);
+    
+    // Close any open mobile tooltips
+    if (window.ItemTooltips) {
+      window.ItemTooltips.closeAllMobileTooltips();
+    }
+
+    // Cancel any picked up item
+    if (heldItem) {
+      cancelHeldItem();
+    }
   }
 
   function openBackpack() {
@@ -785,66 +818,80 @@
 
   /* Mobile Styles */
   body.mobile {
-    --backpack-slot-size: 40px;
-    --backpack-hotbar-size: 40px;
-    --backpack-icon-size: 20px;
-    --backpack-gap: 3px;
-    --backpack-padding: 6px;
+    --backpack-slot-size: 44px;
+    --backpack-hotbar-size: 44px;
+    --backpack-icon-size: 32px;
+    --backpack-gap: 4px;
+    --backpack-padding: 8px;
   }
 
   body.mobile .backpack-overlay {
-    gap: 8px;
-    padding: 4px;
+    gap: 12px;
+    padding: 8px;
   }
 
   body.mobile .backpack-container,
   body.mobile .backpack-hotbar-container {
     width: auto;
-    max-width: 500px;
-    min-width: 320px;
+    max-width: 520px;
+    min-width: 340px;
+    border-radius: 8px;
   }
 
   body.mobile .backpack-header,
   body.mobile .backpack-hotbar-header {
-    padding: 4px 8px;
+    padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
   }
 
   body.mobile .backpack-title,
   body.mobile .backpack-hotbar-title {
-    font-size: 12px;
+    font-size: 14px;
   }
 
   body.mobile .backpack-close {
-    width: 20px;
-    height: 20px;
-    font-size: 14px;
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+    border-radius: 6px;
   }
 
   body.mobile .backpack-content {
-    padding: 6px;
-    gap: 6px;
+    padding: 12px;
+    gap: 12px;
   }
 
   body.mobile .backpack-wearables-panel {
-    flex-direction: row;
+    flex-direction: column;
     min-width: auto;
+    gap: 12px;
   }
 
   body.mobile .backpack-wearables-slots {
     justify-items: center;
+    padding: 8px;
+    border-radius: 6px;
   }
 
-  body.mobile .backpack-wearable-slot,
-  body.mobile .backpack-slot,
-  body.mobile .backpack-hotbar-slot {
-    box-sizing: border-box;
+  body.mobile .backpack-grid {
+    padding: 8px;
+    border-radius: 6px;
   }
 
-  body.mobile .backpack-grid,
   body.mobile .backpack-hotbar-grid {
     justify-items: center;
     width: fit-content;
     margin: 0 auto;
+    padding: 12px;
+    border-radius: 0 0 6px 6px;
+  }
+
+  body.mobile .backpack-wearable-slot,
+  body.mobile .backpack-slot,
+  body.mobile .backpack-hotbar-slot {
+    box-sizing: border-box;
+    border-radius: 6px;
+    border-width: 2px;
   }
 
   body.mobile .backpack-slot-content,
@@ -853,36 +900,58 @@
   }
 
   body.mobile .backpack-item-icon {
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
   }
 
   body.mobile .backpack-hotbar-slot-icon {
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
   }
 
   body.mobile .backpack-slot-quantity {
-    font-size: 7px;
-    padding: 1px 2px;
-    bottom: 1px;
-    right: 1px;
-    min-width: 8px;
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 10px;
+    border-radius: 3px;
   }
 
   body.mobile .backpack-hotbar-slot-quantity {
     font-size: 8px;
     padding: 1px 3px;
-    bottom: 1px;
-    right: 1px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 12px;
+    border-radius: 3px;
   }
 
-  body.mobile .backpack-item-tooltip {
-    display: none;
-  }
+
 
   body.mobile .backpack-wearable-slot-label {
-    font-size: 9px;
+    font-size: 7px;
+    font-weight: 500;
+  }
+
+  body.mobile .backpack-mouse-follower {
+    width: 44px;
+    height: 44px;
+    border-radius: 6px;
+  }
+
+  body.mobile .backpack-mouse-follower img {
+    width: 36px;
+    height: 36px;
+  }
+
+  body.mobile .backpack-mouse-follower .backpack-hotbar-slot-quantity {
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 10px;
+    border-radius: 3px;
   }
 
   .backpack-mouse-follower {

package/frontiers-rpg-game/assets/ui/menus/crafting.html

@@ -831,37 +831,40 @@
 
 
   /* Mobile responsive */
-  @media (max-width: 768px) {
+
     body.mobile {
-      --crafting-slot-size: 40px;
-      --crafting-icon-size: 20px;
-      --crafting-gap: 3px;
-      --crafting-padding: 6px;
+      --crafting-slot-size: 44px;
+      --crafting-icon-size: 32px;
+      --crafting-gap: 4px;
+      --crafting-padding: 8px;
     }
 
     body.mobile .crafting-container {
       width: auto;
-      max-width: 500px;
-      min-width: 320px;
+      max-width: 520px;
+      min-width: 340px;
+      border-radius: 8px;
     }
 
     body.mobile .crafting-content {
-      padding: 6px;
-      flex-direction: column;
-      gap: 8px;
+      padding: 12px;
+      gap: 12px;
     }
 
     body.mobile .crafting-grid {
       justify-items: center;
       width: fit-content;
       margin: 0 auto;
+      padding: 8px;
+      border-radius: 6px;
     }
 
     body.mobile .crafting-right-panel {
       width: auto;
       flex: 1;
-      min-height: 80px;
+      min-height: 120px;
       padding: var(--crafting-padding);
+      border-radius: 6px;
     }
 
     body.mobile .crafting-panel-content {
@@ -874,10 +877,9 @@
       padding: 16px;
     }
 
-
-
     body.mobile .crafting-header {
-      padding: 4px 8px;
+      padding: 8px 12px;
+      border-radius: 8px 8px 0 0;
     }
 
     body.mobile .crafting-info {
@@ -890,15 +892,21 @@
     }
 
     body.mobile .crafting-name {
-      font-size: 12px;
+      font-size: 14px;
     }
 
     body.mobile .crafting-title {
-      font-size: 10px;
+      font-size: 12px;
+    }
+
+    body.mobile .crafting-close {
+      width: 24px;
+      height: 24px;
+      font-size: 16px;
     }
 
     body.mobile .crafting-item-details {
-      gap: 6px;
+      gap: 8px;
     }
 
     body.mobile .crafting-item-header {
@@ -908,69 +916,83 @@
     }
 
     body.mobile .crafting-item-header .crafting-item-icon {
-      width: 24px;
-      height: 24px;
+      width: 28px;
+      height: 28px;
     }
 
     body.mobile .crafting-item-name {
-      font-size: 10px;
+      font-size: 11px;
     }
 
     body.mobile .crafting-requirements-title {
-      font-size: 10px;
+      font-size: 11px;
     }
 
     body.mobile .crafting-requirements-list {
       grid-template-columns: repeat(2, 1fr);
-      gap: 3px;
+      gap: 4px;
     }
 
     body.mobile .crafting-requirement-item {
-      padding: 3px 4px;
-      min-height: 28px;
-      gap: 4px;
+      padding: 4px 6px;
+      min-height: 32px;
+      gap: 6px;
+      border-radius: 6px;
     }
 
     body.mobile .crafting-requirement-icon {
-      width: 16px;
-      height: 16px;
+      width: 18px;
+      height: 18px;
     }
 
     body.mobile .crafting-requirement-name {
-      font-size: 9px;
+      font-size: 10px;
     }
 
     body.mobile .crafting-requirement-quantity {
-      font-size: 8px;
-      padding: 1px 2px;
+      font-size: 9px;
+      padding: 1px 3px;
     }
 
     body.mobile .crafting-no-requirements {
-      font-size: 10px;
-      padding: 12px;
+      font-size: 11px;
+      padding: 14px;
     }
 
     body.mobile .crafting-item-actions {
-      padding-top: 6px;
+      padding-top: 8px;
     }
 
     body.mobile .crafting-action-btn {
-      padding: 6px 12px;
-      font-size: 10px;
+      padding: 8px 14px;
+      font-size: 11px;
     }
 
-    body.mobile .crafting-item-stats {
+    body.mobile .crafting-slot-quantity {
       font-size: 8px;
-      margin-top: 3px;
+      padding: 1px 3px;
+      bottom: 2px;
+      right: 2px;
+      min-width: 10px;
+      border-radius: 3px;
+    }
+
+    body.mobile .crafting-item-icon {
+      width: 36px;
+      height: 36px;
+    }
+
+    body.mobile .crafting-item-stats {
+      font-size: 9px;
+      margin-top: 4px;
     }
 
     body.mobile .crafting-item-stats .stats-header {
-      font-size: 8px;
+      font-size: 9px;
     }
 
     body.mobile .crafting-item-description {
-      font-size: 8px;
-      margin-top: 3px;
+      font-size: 9px;
+      margin-top: 4px;
     }
-  }
 </style>

package/frontiers-rpg-game/assets/ui/menus/dialogue.html

@@ -375,93 +375,71 @@
     flex: 1;
   }
 
-  /* Mobile and Small Screen Responsive */
-  @media (max-width: 768px) {
-    .dialogue-panel {
-      bottom: max(16px, env(safe-area-inset-bottom, 16px));
-      right: max(12px, env(safe-area-inset-right, 12px));
-      width: min(100vw - 24px, calc(100vw - 2 * max(12px, env(safe-area-inset-right, 12px))));
-      max-width: 340px;
-      max-height: min(70vh, calc(100vh - 32px));
-    }
-
-    .dialogue-header {
-      padding: 8px 12px;
-    }
-
-    .dialogue-npc-avatar {
-      width: 28px;
-      height: 28px;
-    }
-
-    .dialogue-npc-name {
-      font-size: 11px;
-    }
-
-    .dialogue-npc-title {
-      font-size: 9px;
-    }
+  /* Mobile Responsive */
+  body.mobile .dialogue-panel {
+    bottom: 20px;
+    right: 20px;
+    width: auto;
+    max-width: 340px;
+    min-width: 280px;
+    max-height: calc(100vh - 40px);
+  }
 
-    .dialogue-close {
-      width: 18px;
-      height: 18px;
-      font-size: 10px;
-    }
+  body.mobile .dialogue-header {
+    padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
+  }
 
-    .dialogue-content {
-      padding: 10px;
-      max-height: calc(min(60vh, calc(100vh - 80px)) - 50px);
-    }
+  body.mobile .dialogue-container {
+    border-radius: 8px;
+  }
 
-    .dialogue-message {
-      padding: 8px;
-      font-size: 11px;
-      margin-bottom: 8px;
-    }
+  body.mobile .dialogue-npc-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+  }
 
-    .dialogue-option {
-      padding: 6px 8px;
-      font-size: 10px;
-    }
+  body.mobile .dialogue-npc-name {
+    font-size: 12px;
+  }
 
-    .dialogue-quest-icon {
-      width: 14px;
-      height: 14px;
-    }
+  body.mobile .dialogue-npc-title {
+    font-size: 10px;
   }
 
-  /* Very small screens (landscape phones, small devices) */
-  @media (max-width: 480px) {
-    .dialogue-panel {
-      max-height: min(60vh, calc(100vh - 20px));
-      max-width: 300px;
-    }
+  body.mobile .dialogue-close {
+    width: 20px;
+    height: 20px;
+    font-size: 12px;
+    border-radius: 4px;
+  }
 
-    .dialogue-content {
-      max-height: calc(min(50vh, calc(100vh - 60px)) - 45px);
-      padding: 8px;
-    }
+  body.mobile .dialogue-content {
+    padding: 12px;
+    max-height: calc(100vh - 140px);
+  }
 
-    .dialogue-message {
-      padding: 6px;
-      font-size: 10px;
-    }
+  body.mobile .dialogue-content * {
+    overflow-y: scroll;
+    touch-action: pan-y !important;
+  }
 
-    .dialogue-option {
-      padding: 5px 6px;
-      font-size: 9px;
-    }
+  body.mobile .dialogue-message {
+    padding: 8px;
+    font-size: 11px;
+    margin-bottom: 8px;
+    border-radius: 4px;
+  }
 
-    .dialogue-quest-icon {
-      width: 12px;
-      height: 12px;
-    }
+  body.mobile .dialogue-option {
+    padding: 8px 10px;
+    font-size: 11px;
+    border-radius: 4px;
   }
 
-  /* Ultra-wide screens - prevent dialogue from being too far left */
-  @media (min-width: 1920px) {
-    .dialogue-panel {
-      right: max(20px, calc((100vw - 1200px) / 4));
-    }
+  body.mobile .dialogue-quest-icon {
+    width: 14px;
+    height: 14px;
   }
 </style>