@hytopia.com/examples 1.0.21 → 1.0.23

package/frontiers-rpg-game/assets/ui/hud.html

@@ -212,7 +212,7 @@
     
     // Setup click events
     hotbarSlots.forEach((slot, index) => {
-      slot.addEventListener('click', () => setActiveSlot(index));
+      slot.addEventListener('pointerdown', () => setActiveSlot(index));
     });
 
     // Setup keyboard events
@@ -233,22 +233,22 @@
     };
 
     Object.entries(buttons).forEach(([id, handler]) => {
-      document.getElementById(id).addEventListener('click', handler);
+      document.getElementById(id).addEventListener('pointerdown', handler);
     });
 
     // Setup death overlay respawn button
-    document.getElementById('hud-death-respawn-btn').addEventListener('click', handleRespawn);
+    document.getElementById('hud-death-respawn-btn').addEventListener('pointerdown', handleRespawn);
     
     // Setup mobile buttons
-    document.getElementById('hud-attack-btn').addEventListener('touchstart', handleAttackTap);
-    document.getElementById('hud-attack-btn').addEventListener('touchend', stopAutoAttack);
-    document.getElementById('hud-attack-btn').addEventListener('touchcancel', stopAutoAttack);
-    document.getElementById('hud-dodge-btn').addEventListener('touchstart', () => hytopia.pressInput('q', true));
-    document.getElementById('hud-dodge-btn').addEventListener('touchend', () => hytopia.pressInput('q', false));
-    document.getElementById('hud-jump-btn').addEventListener('touchstart', () => hytopia.pressInput('sp', true));
-    document.getElementById('hud-jump-btn').addEventListener('touchend', () => hytopia.pressInput('sp', false));
-    document.getElementById('hud-interact-btn').addEventListener('touchstart', () => hytopia.pressInput('e', true));
-    document.getElementById('hud-interact-btn').addEventListener('touchend', () => hytopia.pressInput('e', false));
+    document.getElementById('hud-attack-btn').addEventListener('pointerdown', handleAttackTap);
+    document.getElementById('hud-attack-btn').addEventListener('pointerup', stopAutoAttack);
+    document.getElementById('hud-attack-btn').addEventListener('pointercancel', stopAutoAttack);
+    document.getElementById('hud-dodge-btn').addEventListener('pointerdown', () => hytopia.pressInput('q', true));
+    document.getElementById('hud-dodge-btn').addEventListener('pointerup', () => hytopia.pressInput('q', false));
+    document.getElementById('hud-jump-btn').addEventListener('pointerdown', () => hytopia.pressInput('sp', true));
+    document.getElementById('hud-jump-btn').addEventListener('pointerup', () => hytopia.pressInput('sp', false));
+    document.getElementById('hud-interact-btn').addEventListener('pointerdown', () => hytopia.pressInput('e', true));
+    document.getElementById('hud-interact-btn').addEventListener('pointerup', () => hytopia.pressInput('e', false));
   }
 
   function updateHudQuestCount(activeCount, completedCount) {
@@ -511,7 +511,6 @@
   let autoAttackInterval = null;
   let lastTapTime = 0;
 
-
   function handleAttackTap() {
     const currentTime = Date.now();
     
@@ -1544,8 +1543,6 @@
     opacity: 1;
   }
 
-
-
   /* ============================================
      MOBILE RESPONSIVE
      ============================================ */

package/frontiers-rpg-game/assets/ui/index.html

@@ -957,12 +957,12 @@ window.ItemTooltips = (function() {
 
   function setupEventListeners() {
     const closeButton = document.querySelector('.backpack-close');
-    closeButton.addEventListener('click', closeBackpack);
+    closeButton.addEventListener('pointerdown', closeBackpack);
 
     // Setup slot click handlers
     document.querySelectorAll('.backpack-slot, .backpack-wearable-slot, .backpack-hotbar-slot')
       .forEach(slot => {
-        slot.addEventListener('click', e => {
+        slot.addEventListener('pointerdown', e => {
           e.preventDefault();
           e.stopPropagation();
           
@@ -991,7 +991,7 @@ window.ItemTooltips = (function() {
     });
 
     // Setup click outside containers handler for item dropping
-    document.addEventListener('click', e => {
+    document.addEventListener('pointerdown', e => {
       // Only handle if we have a held item
       if (!heldItem) return;
       
@@ -1900,7 +1900,7 @@ window.ItemTooltips = (function() {
 
   // Event Listeners
   function setupEventListeners() {
-    document.querySelector('.skills-close').addEventListener('click', closeSkills);
+    document.querySelector('.skills-close').addEventListener('pointerdown', closeSkills);
     
     // Setup mobile tooltip handling
     setupMobileTooltips();
@@ -1913,10 +1913,10 @@ window.ItemTooltips = (function() {
     if (!isMobile) return;
     
     // Add click handler to skills container for event delegation
-    document.querySelector('.skills-skills-grid').addEventListener('click', handleMobileTooltipClick);
+    document.querySelector('.skills-skills-grid').addEventListener('pointerdown', handleMobileTooltipClick);
     
     // Add click handler to document to close tooltips when clicking outside
-    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('pointerdown', handleDocumentClick);
   }
   
   function handleMobileTooltipClick(e) {
@@ -2470,7 +2470,7 @@ window.ItemTooltips = (function() {
           optionEl.textContent = option.text;
         }
         
-        optionEl.addEventListener('click', () => {
+        optionEl.addEventListener('pointerdown', () => {
           if (option.dismiss) {
             closeDialogue(option.pureExit);
           }
@@ -2520,7 +2520,7 @@ window.ItemTooltips = (function() {
   });
 
   // Setup close button
-  document.querySelector('.dialogue-close').addEventListener('click', closeDialogue);
+  document.querySelector('.dialogue-close').addEventListener('pointerdown', closeDialogue);
 </script>
 
 <style>
@@ -2820,11 +2820,7 @@ window.ItemTooltips = (function() {
   body.mobile .dialogue-content {
     padding: 12px;
     max-height: calc(100vh - 140px);
-  }
-
-  body.mobile .dialogue-content * {
-    overflow-y: scroll;
-    
+    overflow-y: auto;
   }
 
   body.mobile .dialogue-message {
@@ -2846,31 +2842,38 @@ window.ItemTooltips = (function() {
     height: 14px;
   }
 
-  /* Override global touch-action: none for dialogue interactions */
-  body.mobile .dialogue-option,
-  body.mobile .dialogue-close,
-  body.mobile .dialogue-option *,
-  body.mobile .dialogue-close * {
-    touch-action: manipulation !important;
-    pointer-events: auto !important;
-  }
-
-  /* Ensure dialogue containers allow touch events */
+  /* AGGRESSIVE override of global touch-action: none for dialogue */
+  body.mobile .dialogue-overlay,
   body.mobile .dialogue-panel,
   body.mobile .dialogue-container,
+  body.mobile .dialogue-header,
   body.mobile .dialogue-content,
-  body.mobile .dialogue-options {
+  body.mobile .dialogue-options,
+  body.mobile .dialogue-option,
+  body.mobile .dialogue-close {
     touch-action: manipulation !important;
+    pointer-events: auto !important;
+    -webkit-touch-callout: default !important;
+    -webkit-user-select: auto !important;
+    user-select: auto !important;
   }
 
-  /* Override global mobile touch rules specifically for dialogue */
-  body.mobile .dialogue-panel *:not(.dialogue-message) {
+  /* Force touch events on all dialogue interactive elements */
+  body.mobile .dialogue-option,
+  body.mobile .dialogue-option *,
+  body.mobile .dialogue-close,
+  body.mobile .dialogue-close *,
+  body.mobile .dialogue-quest-icon,
+  body.mobile .dialogue-option-text {
     touch-action: manipulation !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
   }
 
-  /* Allow scrolling only on message content */
+  /* Only allow scrolling on message content */
   body.mobile .dialogue-message {
     touch-action: pan-y !important;
+    overflow-y: auto;
   }
 </style> 
 
@@ -2949,7 +2952,7 @@ window.ItemTooltips = (function() {
 
   function setupEventListeners() {
     const closeButton = document.querySelector('.quests-close');
-    closeButton.addEventListener('click', closeQuests);
+    closeButton.addEventListener('pointerdown', closeQuests);
   }
 
   function updateQuestData(questData) {
@@ -3046,7 +3049,7 @@ window.ItemTooltips = (function() {
       <div class="quests-item-progress">${progress}</div>
     `;
     
-    questItem.addEventListener('click', () => selectQuest(questId));
+    questItem.addEventListener('pointerdown', () => selectQuest(questId));
     return questItem;
   }
 
@@ -4068,7 +4071,7 @@ window.ItemTooltips = (function() {
     // Add close button handler
     const closeButton = document.querySelector('.merchant-close');
     if (closeButton) {
-      closeButton.addEventListener('click', () => toggleMerchant(null));
+      closeButton.addEventListener('pointerdown', () => toggleMerchant(null));
     }
   }
 
@@ -4380,15 +4383,15 @@ window.ItemTooltips = (function() {
     const confirmBtn = placeholder.querySelector('.merchant-confirm-action');
 
     if (decreaseBtn) {
-      decreaseBtn.addEventListener('click', () => changeQuantity(-1));
+      decreaseBtn.addEventListener('pointerdown', () => changeQuantity(-1));
     }
     
     if (increaseBtn) {
-      increaseBtn.addEventListener('click', () => changeQuantity(1));
+      increaseBtn.addEventListener('pointerdown', () => changeQuantity(1));
     }
 
     if (confirmBtn && price > 0) {
-      confirmBtn.addEventListener('click', confirmAction);
+      confirmBtn.addEventListener('pointerdown', confirmAction);
     }
   }
 
@@ -5166,7 +5169,7 @@ window.ItemTooltips = (function() {
     // Add close button handler
     const closeButton = document.querySelector('.crafting-close');
     if (closeButton) {
-      closeButton.addEventListener('click', () => toggleCrafting(null));
+      closeButton.addEventListener('pointerdown', () => toggleCrafting(null));
     }
   }
 
@@ -5436,7 +5439,7 @@ window.ItemTooltips = (function() {
     const confirmBtn = placeholder.querySelector('.crafting-confirm-action');
 
     if (confirmBtn) {
-      confirmBtn.addEventListener('click', confirmCrafting);
+      confirmBtn.addEventListener('pointerdown', confirmCrafting);
     }
 
     // Add tooltips to requirement items
@@ -6262,7 +6265,7 @@ window.ItemTooltips = (function() {
 
   // Event Listeners
   function setupEventListeners() {
-    document.querySelector('.help-close').addEventListener('click', closeHelp);
+    document.querySelector('.help-close').addEventListener('pointerdown', closeHelp);
   }
 
   // Initialize
@@ -7254,7 +7257,7 @@ window.ItemTooltips = (function() {
     
     // Setup click events
     hotbarSlots.forEach((slot, index) => {
-      slot.addEventListener('click', () => setActiveSlot(index));
+      slot.addEventListener('pointerdown', () => setActiveSlot(index));
     });
 
     // Setup keyboard events
@@ -7275,22 +7278,22 @@ window.ItemTooltips = (function() {
     };
 
     Object.entries(buttons).forEach(([id, handler]) => {
-      document.getElementById(id).addEventListener('click', handler);
+      document.getElementById(id).addEventListener('pointerdown', handler);
     });
 
     // Setup death overlay respawn button
-    document.getElementById('hud-death-respawn-btn').addEventListener('click', handleRespawn);
+    document.getElementById('hud-death-respawn-btn').addEventListener('pointerdown', handleRespawn);
     
     // Setup mobile buttons
-    document.getElementById('hud-attack-btn').addEventListener('touchstart', handleAttackTap);
-    document.getElementById('hud-attack-btn').addEventListener('touchend', stopAutoAttack);
-    document.getElementById('hud-attack-btn').addEventListener('touchcancel', stopAutoAttack);
-    document.getElementById('hud-dodge-btn').addEventListener('touchstart', () => hytopia.pressInput('q', true));
-    document.getElementById('hud-dodge-btn').addEventListener('touchend', () => hytopia.pressInput('q', false));
-    document.getElementById('hud-jump-btn').addEventListener('touchstart', () => hytopia.pressInput('sp', true));
-    document.getElementById('hud-jump-btn').addEventListener('touchend', () => hytopia.pressInput('sp', false));
-    document.getElementById('hud-interact-btn').addEventListener('touchstart', () => hytopia.pressInput('e', true));
-    document.getElementById('hud-interact-btn').addEventListener('touchend', () => hytopia.pressInput('e', false));
+    document.getElementById('hud-attack-btn').addEventListener('pointerdown', handleAttackTap);
+    document.getElementById('hud-attack-btn').addEventListener('pointerup', stopAutoAttack);
+    document.getElementById('hud-attack-btn').addEventListener('pointercancel', stopAutoAttack);
+    document.getElementById('hud-dodge-btn').addEventListener('pointerdown', () => hytopia.pressInput('q', true));
+    document.getElementById('hud-dodge-btn').addEventListener('pointerup', () => hytopia.pressInput('q', false));
+    document.getElementById('hud-jump-btn').addEventListener('pointerdown', () => hytopia.pressInput('sp', true));
+    document.getElementById('hud-jump-btn').addEventListener('pointerup', () => hytopia.pressInput('sp', false));
+    document.getElementById('hud-interact-btn').addEventListener('pointerdown', () => hytopia.pressInput('e', true));
+    document.getElementById('hud-interact-btn').addEventListener('pointerup', () => hytopia.pressInput('e', false));
   }
 
   function updateHudQuestCount(activeCount, completedCount) {
@@ -7553,7 +7556,6 @@ window.ItemTooltips = (function() {
   let autoAttackInterval = null;
   let lastTapTime = 0;
 
-
   function handleAttackTap() {
     const currentTime = Date.now();
     
@@ -8586,8 +8588,6 @@ window.ItemTooltips = (function() {
     opacity: 1;
   }
 
-
-
   /* ============================================
      MOBILE RESPONSIVE
      ============================================ */

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

@@ -288,12 +288,12 @@
 
   function setupEventListeners() {
     const closeButton = document.querySelector('.backpack-close');
-    closeButton.addEventListener('click', closeBackpack);
+    closeButton.addEventListener('pointerdown', closeBackpack);
 
     // Setup slot click handlers
     document.querySelectorAll('.backpack-slot, .backpack-wearable-slot, .backpack-hotbar-slot')
       .forEach(slot => {
-        slot.addEventListener('click', e => {
+        slot.addEventListener('pointerdown', e => {
           e.preventDefault();
           e.stopPropagation();
           
@@ -322,7 +322,7 @@
     });
 
     // Setup click outside containers handler for item dropping
-    document.addEventListener('click', e => {
+    document.addEventListener('pointerdown', e => {
       // Only handle if we have a held item
       if (!heldItem) return;
       

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

@@ -60,7 +60,7 @@
     // Add close button handler
     const closeButton = document.querySelector('.crafting-close');
     if (closeButton) {
-      closeButton.addEventListener('click', () => toggleCrafting(null));
+      closeButton.addEventListener('pointerdown', () => toggleCrafting(null));
     }
   }
 
@@ -330,7 +330,7 @@
     const confirmBtn = placeholder.querySelector('.crafting-confirm-action');
 
     if (confirmBtn) {
-      confirmBtn.addEventListener('click', confirmCrafting);
+      confirmBtn.addEventListener('pointerdown', confirmCrafting);
     }
 
     // Add tooltips to requirement items

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

@@ -68,7 +68,7 @@
           optionEl.textContent = option.text;
         }
         
-        optionEl.addEventListener('click', () => {
+        optionEl.addEventListener('pointerdown', () => {
           if (option.dismiss) {
             closeDialogue(option.pureExit);
           }
@@ -118,7 +118,7 @@
   });
 
   // Setup close button
-  document.querySelector('.dialogue-close').addEventListener('click', closeDialogue);
+  document.querySelector('.dialogue-close').addEventListener('pointerdown', closeDialogue);
 </script>
 
 <style>
@@ -418,11 +418,7 @@
   body.mobile .dialogue-content {
     padding: 12px;
     max-height: calc(100vh - 140px);
-  }
-
-  body.mobile .dialogue-content * {
-    overflow-y: scroll;
-    
+    overflow-y: auto;
   }
 
   body.mobile .dialogue-message {
@@ -444,30 +440,37 @@
     height: 14px;
   }
 
-  /* Override global touch-action: none for dialogue interactions */
-  body.mobile .dialogue-option,
-  body.mobile .dialogue-close,
-  body.mobile .dialogue-option *,
-  body.mobile .dialogue-close * {
-    touch-action: manipulation !important;
-    pointer-events: auto !important;
-  }
-
-  /* Ensure dialogue containers allow touch events */
+  /* AGGRESSIVE override of global touch-action: none for dialogue */
+  body.mobile .dialogue-overlay,
   body.mobile .dialogue-panel,
   body.mobile .dialogue-container,
+  body.mobile .dialogue-header,
   body.mobile .dialogue-content,
-  body.mobile .dialogue-options {
+  body.mobile .dialogue-options,
+  body.mobile .dialogue-option,
+  body.mobile .dialogue-close {
     touch-action: manipulation !important;
+    pointer-events: auto !important;
+    -webkit-touch-callout: default !important;
+    -webkit-user-select: auto !important;
+    user-select: auto !important;
   }
 
-  /* Override global mobile touch rules specifically for dialogue */
-  body.mobile .dialogue-panel *:not(.dialogue-message) {
+  /* Force touch events on all dialogue interactive elements */
+  body.mobile .dialogue-option,
+  body.mobile .dialogue-option *,
+  body.mobile .dialogue-close,
+  body.mobile .dialogue-close *,
+  body.mobile .dialogue-quest-icon,
+  body.mobile .dialogue-option-text {
     touch-action: manipulation !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
   }
 
-  /* Allow scrolling only on message content */
+  /* Only allow scrolling on message content */
   body.mobile .dialogue-message {
     touch-action: pan-y !important;
+    overflow-y: auto;
   }
 </style> 

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

@@ -155,7 +155,7 @@
 
   // Event Listeners
   function setupEventListeners() {
-    document.querySelector('.help-close').addEventListener('click', closeHelp);
+    document.querySelector('.help-close').addEventListener('pointerdown', closeHelp);
   }
 
   // Initialize

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

@@ -85,7 +85,7 @@
     // Add close button handler
     const closeButton = document.querySelector('.merchant-close');
     if (closeButton) {
-      closeButton.addEventListener('click', () => toggleMerchant(null));
+      closeButton.addEventListener('pointerdown', () => toggleMerchant(null));
     }
   }
 
@@ -397,15 +397,15 @@
     const confirmBtn = placeholder.querySelector('.merchant-confirm-action');
 
     if (decreaseBtn) {
-      decreaseBtn.addEventListener('click', () => changeQuantity(-1));
+      decreaseBtn.addEventListener('pointerdown', () => changeQuantity(-1));
     }
     
     if (increaseBtn) {
-      increaseBtn.addEventListener('click', () => changeQuantity(1));
+      increaseBtn.addEventListener('pointerdown', () => changeQuantity(1));
     }
 
     if (confirmBtn && price > 0) {
-      confirmBtn.addEventListener('click', confirmAction);
+      confirmBtn.addEventListener('pointerdown', confirmAction);
     }
   }
 

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

@@ -72,7 +72,7 @@
 
   function setupEventListeners() {
     const closeButton = document.querySelector('.quests-close');
-    closeButton.addEventListener('click', closeQuests);
+    closeButton.addEventListener('pointerdown', closeQuests);
   }
 
   function updateQuestData(questData) {
@@ -169,7 +169,7 @@
       <div class="quests-item-progress">${progress}</div>
     `;
     
-    questItem.addEventListener('click', () => selectQuest(questId));
+    questItem.addEventListener('pointerdown', () => selectQuest(questId));
     return questItem;
   }
 

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

@@ -179,7 +179,7 @@
 
   // Event Listeners
   function setupEventListeners() {
-    document.querySelector('.skills-close').addEventListener('click', closeSkills);
+    document.querySelector('.skills-close').addEventListener('pointerdown', closeSkills);
     
     // Setup mobile tooltip handling
     setupMobileTooltips();
@@ -192,10 +192,10 @@
     if (!isMobile) return;
     
     // Add click handler to skills container for event delegation
-    document.querySelector('.skills-skills-grid').addEventListener('click', handleMobileTooltipClick);
+    document.querySelector('.skills-skills-grid').addEventListener('pointerdown', handleMobileTooltipClick);
     
     // Add click handler to document to close tooltips when clicking outside
-    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('pointerdown', handleDocumentClick);
   }
   
   function handleMobileTooltipClick(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hytopia.com/examples",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "",
   "license": "ISC",
   "author": "",