@hytopia.com/examples 1.0.17 → 1.0.18

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

@@ -77,6 +77,9 @@
   function closeSkills() {
     document.querySelector('.skills-overlay').style.display = 'none';
     hytopia.lockPointer(true);
+    
+    // Close any open mobile tooltips
+    closeAllMobileTooltips();
   }
 
   // Update Functions
@@ -107,6 +110,9 @@
       const skillItem = createSkillItem(skill);
       skillsGrid.appendChild(skillItem);
     });
+    
+    // Close any open mobile tooltips after updating skills
+    closeAllMobileTooltips();
   }
 
   function updateSkillsExp(data) {
@@ -174,6 +180,54 @@
   // Event Listeners
   function setupEventListeners() {
     document.querySelector('.skills-close').addEventListener('click', closeSkills);
+    
+    // Setup mobile tooltip handling
+    setupMobileTooltips();
+  }
+
+  // Mobile tooltip handling
+  function setupMobileTooltips() {
+    // Check if we're on mobile
+    const isMobile = document.body.classList.contains('mobile');
+    if (!isMobile) return;
+    
+    // Add click handler to skills container for event delegation
+    document.querySelector('.skills-skills-grid').addEventListener('click', handleMobileTooltipClick);
+    
+    // Add click handler to document to close tooltips when clicking outside
+    document.addEventListener('click', handleDocumentClick);
+  }
+  
+  function handleMobileTooltipClick(e) {
+    const skillItem = e.target.closest('.skills-skill-item');
+    if (!skillItem) return;
+    
+    e.stopPropagation();
+    
+    const tooltip = skillItem.querySelector('.skills-skill-tooltip');
+    if (!tooltip) return;
+    
+    // Close any other open tooltips
+    closeAllMobileTooltips();
+    
+    // Toggle this tooltip
+    tooltip.classList.add('skills-mobile-tooltip-visible');
+  }
+  
+  function handleDocumentClick(e) {
+    // Close tooltips when clicking outside
+    if (!e.target.closest('.skills-skill-item')) {
+      closeAllMobileTooltips();
+    }
+  }
+  
+  function closeAllMobileTooltips() {
+    const visibleTooltips = document.querySelectorAll('.skills-mobile-tooltip-visible');
+    if (visibleTooltips.length > 0) {
+      visibleTooltips.forEach(tooltip => {
+        tooltip.classList.remove('skills-mobile-tooltip-visible');
+      });
+    }
   }
 
   // Initialize
@@ -490,96 +544,135 @@
   /* Mobile Styles */
   body.mobile .skills-container {
     width: auto;
-    max-width: 98vw;
-    min-width: 300px;
+    max-width: 680px;
+    min-width: 475px;
+    border-radius: 8px;
   }
 
   body.mobile .skills-header {
-    padding: 6px 8px;
+    padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
   }
 
   body.mobile .skills-title {
-    font-size: 11px;
+    font-size: 14px;
   }
 
   body.mobile .skills-close {
-    width: 18px;
-    height: 18px;
-    font-size: 12px;
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+    border-radius: 6px;
   }
 
   body.mobile .skills-content {
-    padding: 6px;
+    padding: 12px;
   }
 
   body.mobile .skills-player-section,
   body.mobile .skills-skills-section {
-    margin-bottom: 8px;
-    padding: 6px;
+    padding: 10px;
+    border-radius: 6px;
   }
 
   body.mobile .skills-section-title {
-    font-size: 10px;
-    margin-bottom: 6px;
+    font-size: 12px;
+    margin-bottom: 8px;
   }
 
   body.mobile .skills-level-display {
-    margin-bottom: 4px;
+    margin-bottom: 8px;
   }
 
   body.mobile .skills-level-number {
-    font-size: 12px;
+    font-size: 16px;
   }
 
   body.mobile .skills-exp-bar {
-    height: 14px;
+    height: 16px;
+    border-radius: 6px;
   }
 
   body.mobile .skills-exp-text {
-    font-size: 8px;
+    font-size: 10px;
   }
 
   body.mobile .skills-skills-grid {
-    grid-template-columns: 1fr 1fr;
-    gap: 4px;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 6px;
   }
 
   body.mobile .skills-skill-item {
-    gap: 8px;
-    padding: 3px;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    min-height: 40px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
   }
 
   body.mobile .skills-skill-icon {
     width: 28px;
     height: 28px;
-  }
-
-  body.mobile .skills-skill-icon-img {
-    width: 100%;
-    height: 100%;
+    border-radius: 6px;
   }
 
   body.mobile .skills-skill-header {
-    margin-bottom: 3px;
+    margin-bottom: 4px;
   }
 
   body.mobile .skills-skill-name {
-    font-size: 9px;
+    font-size: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   body.mobile .skills-skill-level {
-    font-size: 8px;
+    font-size: 9px;
+    flex-shrink: 0;
   }
 
   body.mobile .skills-skill-exp-bar {
     height: 10px;
+    border-radius: 6px;
   }
 
   body.mobile .skills-skill-exp-text {
-    font-size: 6px;
+    font-size: 7px;
   }
 
   body.mobile .skills-skill-tooltip {
-    display: none;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: all 0.2s ease;
+  }
+
+  body.mobile .skills-mobile-tooltip-visible {
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: translateY(-8px) !important;
+  }
+
+  body.mobile .skills-skill-tooltip-content {
+    max-width: 180px;
+    font-size: 10px;
+  }
+
+  /* Center the caret on mobile */
+  body.mobile .skills-skill-tooltip-content::after {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  body.mobile .skills-skill-tooltip-content::before {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  /* Enable scrolling if needed */
+  body.mobile .skills-content * {
+    touch-action: pan-y !important;
   }
 </style>

package/frontiers-rpg-game/assets/ui/shared/item-tooltips.html

@@ -123,12 +123,75 @@ window.ItemTooltips = (function() {
     if (existingTooltip) existingTooltip.remove();
   }
 
+  // Mobile tooltip handling
+  let mobileTooltipActive = false;
+  
+  function initializeMobileTooltips() {
+    // Check if we're on mobile
+    const isMobile = document.body.classList.contains('mobile');
+    if (!isMobile) return;
+    
+    // Add click handler to document for event delegation
+    document.addEventListener('click', handleMobileTooltipClick, true);
+  }
+  
+  function handleMobileTooltipClick(e) {
+    // List of tooltip container selectors - include quest reward enabled class
+    const tooltipContainers = [
+      '.backpack-slot', '.backpack-hotbar-slot', '.backpack-wearable-slot',
+      '.hud-hotbar-slot', '.merchant-slot', '.merchant-hotbar-slot', 
+      '.crafting-slot', '.crafting-requirement-item', 
+      '.quests-reward-item', '.quests-reward-item-tooltip-enabled'
+    ];
+    
+    // Check if click is on a tooltip container
+    const container = e.target.closest(tooltipContainers.join(', '));
+    
+    if (container) {
+      // Find tooltip in this container
+      const tooltip = container.querySelector([
+        '.item-tooltip', '.backpack-item-tooltip', '.merchant-item-tooltip',
+        '.crafting-item-tooltip', '.crafting-requirement-tooltip', '.quests-reward-item-tooltip'
+      ].join(', '));
+      
+      if (tooltip) {
+        // Close any other open tooltips
+        closeAllMobileTooltips();
+        
+        // Show this tooltip
+        tooltip.classList.add('mobile-tooltip-visible');
+        mobileTooltipActive = true;
+      }
+    } else {
+      // Click outside any container - close all tooltips
+      closeAllMobileTooltips();
+    }
+  }
+  
+  function closeAllMobileTooltips() {
+    const visibleTooltips = document.querySelectorAll('.mobile-tooltip-visible');
+    if (visibleTooltips.length > 0) {
+      visibleTooltips.forEach(tooltip => {
+        tooltip.classList.remove('mobile-tooltip-visible');
+      });
+      mobileTooltipActive = false;
+    }
+  }
+  
+  // Initialize mobile tooltips when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeMobileTooltips);
+  } else {
+    initializeMobileTooltips();
+  }
+
   // Public API
   return {
     parseText: parseText,
     hasTooltipData: hasTooltipData,
     createTooltip: createTooltip,
-    removeTooltip: removeTooltip
+    removeTooltip: removeTooltip,
+    closeAllMobileTooltips: closeAllMobileTooltips
   };
 })();
 </script>
@@ -156,8 +219,7 @@ window.ItemTooltips = (function() {
     .merchant-hotbar-slot:hover .item-tooltip,
     .crafting-slot:hover .item-tooltip,
     .crafting-requirement-item:hover .item-tooltip,
-    .quests-reward-item:hover .item-tooltip,
-    /* Tooltip visibility on hover - Specific classes */
+
     .backpack-slot:hover .backpack-item-tooltip,
     .backpack-hotbar-slot:hover .backpack-item-tooltip,
     .backpack-wearable-slot:hover .backpack-item-tooltip,
@@ -281,14 +343,72 @@ window.ItemTooltips = (function() {
     font-size: 11px;
   }
 
-  /* Mobile - Hide tooltips on mobile devices */
+  /* Mobile - Control tooltip visibility on mobile devices */
   body.mobile .item-tooltip,
   body.mobile .backpack-item-tooltip,
   body.mobile .merchant-item-tooltip,
   body.mobile .crafting-item-tooltip,
   body.mobile .crafting-requirement-tooltip,
   body.mobile .quests-reward-item-tooltip {
-    display: none;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: all 0.2s ease;
+  }
+
+  /* Mobile tooltip visibility when tapped */
+  body.mobile .mobile-tooltip-visible {
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: translateY(-8px) !important;
+  }
+
+  /* Improve mobile tooltip positioning and touch targets */
+  body.mobile .backpack-slot,
+  body.mobile .backpack-hotbar-slot,
+  body.mobile .backpack-wearable-slot,
+  body.mobile .hud-hotbar-slot,
+  body.mobile .merchant-slot,
+  body.mobile .merchant-hotbar-slot,
+  body.mobile .crafting-slot,
+  body.mobile .crafting-requirement-item,
+  body.mobile .quests-reward-item,
+  body.mobile .quests-reward-item-tooltip-enabled {
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
+  }
+
+  /* Center carets on mobile tooltips */
+  body.mobile .item-tooltip-content::after,
+  body.mobile .backpack-item-tooltip-content::after,
+  body.mobile .merchant-item-tooltip-content::after,
+  body.mobile .crafting-item-tooltip-content::after,
+  body.mobile .crafting-requirement-tooltip-content::after,
+  body.mobile .quests-reward-item-tooltip-content::after {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  body.mobile .item-tooltip-content::before,
+  body.mobile .backpack-item-tooltip-content::before,
+  body.mobile .merchant-item-tooltip-content::before,
+  body.mobile .crafting-item-tooltip-content::before,
+  body.mobile .crafting-requirement-tooltip-content::before,
+  body.mobile .quests-reward-item-tooltip-content::before {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  /* Mobile tooltip content sizing */
+  body.mobile .item-tooltip-content,
+  body.mobile .backpack-item-tooltip-content,
+  body.mobile .merchant-item-tooltip-content,
+  body.mobile .crafting-item-tooltip-content,
+  body.mobile .crafting-requirement-tooltip-content,
+  body.mobile .quests-reward-item-tooltip-content {
+    max-width: 220px;
+    font-size: 11px;
+    padding: 8px 10px;
   }
 
   /* Mouse Follower Tooltip (for backpack drag system) */

package/frontiers-rpg-game/dev/persistence/player-player-1.json

@@ -1,6 +1,6 @@
 {
   "health": 120,
-  "currentRegionId": "chitter-forest",
+  "currentRegionId": "stalkhaven",
   "skillExperience": [
     [
       "exploration",
@@ -80,6 +80,14 @@
           "dodge-3-times": 3,
           "talk-to-mark": 0
         }
+      },
+      {
+        "questId": "dip-duck-dodge",
+        "state": "active",
+        "objectiveProgress": {
+          "dodge": 0,
+          "talk-to-sporn": 0
+        }
       }
     ]
   },
@@ -96,8 +104,8 @@
   },
   "currentRegionSpawnFacingAngle": 0,
   "currentRegionSpawnPoint": {
-    "x": -7,
+    "x": 1,
     "y": 2,
-    "z": 76
+    "z": 40
   }
 }

package/frontiers-rpg-game/src/entities/BaseCombatEntity.ts

@@ -15,7 +15,7 @@ import {
 
 const MOVEMENT_NOT_STUCK_DISTANCE_SQUARED = 3;
 const COMBAT_REGEN_DEFAULT_DELAY_MS = 7000; // 7 seconds
-const COMBAT_REGEN_DEFAULT_RATE = 0.03; // 3% per second
+const COMBAT_REGEN_DEFAULT_RATE = 0.05; // 5% per interval
 const COMBAT_REGEN_INTERVAL_MS = 3000; // 3 seconds
 
 import BaseEntity, { BaseEntityOptions } from './BaseEntity';

package/package.json

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