@hytopia.com/examples 1.0.17 → 1.0.19

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/src/GameManager.ts

@@ -77,7 +77,7 @@ export default class GameManager {
   }
 
   private _selectWorldForPlayer = async (player: Player): Promise<World | undefined> => {
-    const gamePlayer = await GamePlayer.getOrCreate(player);
+    const gamePlayer = GamePlayer.getOrCreate(player);
     return gamePlayer.currentRegion?.world ?? this._startRegion.world;
   }
 }

package/frontiers-rpg-game/src/GamePlayer.ts

@@ -88,13 +88,15 @@ export default class GamePlayer {
     this.hotbar.onSelectedItemChanged = this._onHotbarSelectedItemChanged;
   }
 
-  public static async getOrCreate(player: Player): Promise<GamePlayer> {
+  public static getOrCreate(player: Player): GamePlayer {
     let gamePlayer = this._instances.get(player.id);
+    
     if (!gamePlayer) {
       gamePlayer = new GamePlayer(player);
-      await gamePlayer.load();
+      gamePlayer.load();
       this._instances.set(player.id, gamePlayer);
     }
+
     return gamePlayer;
   }
 
@@ -342,8 +344,8 @@ export default class GamePlayer {
     this.player.joinWorld(region.world);
   }
 
-  public async load(): Promise<void> {
-    const serializedGamePlayerData = await this.player.getPersistedData();
+  public load(): void {
+    const serializedGamePlayerData = this.player.getPersistedData();
 
     if (serializedGamePlayerData) { // Existing player, load their state
       this._loadFromSerializedData(serializedGamePlayerData as SerializedGamePlayerData);

package/frontiers-rpg-game/src/GameRegion.ts

@@ -140,9 +140,8 @@ export default class GameRegion {
     }
   }
 
-  protected async onPlayerJoin(player: Player) {
-    console.log('onPlayerJoin', this.name);
-    const gamePlayer = await GamePlayer.getOrCreate(player);
+  protected onPlayerJoin(player: Player) {
+    const gamePlayer = GamePlayer.getOrCreate(player);
     
     // Set the current region for the player
     gamePlayer.setCurrentRegion(this);
@@ -153,11 +152,6 @@ export default class GameRegion {
     const gamePlayerEntity = new GamePlayerEntity(gamePlayer);
 
     gamePlayerEntity.spawn(this._world, spawnPoint, Quaternion.fromEuler(0, spawnFacingAngle, 0));
-
-    // Since we're using an async onPlayerJoin, we need to explicitly set the camera
-    // since the camera attachment logic as of SDK 0.6.7 only checks for an entity
-    // the first tick after a player joins a world in order to auto attach the camera.
-    player.camera.setAttachedToEntity(gamePlayerEntity);
     
     // Make the camera look at the correct spawn facing angle.
     // Calculate look direction based on facing angle (identity direction is -z, consistent with threejs)
@@ -200,8 +194,8 @@ export default class GameRegion {
   // The HYTOPIA SDK handles resynchronization of all persisted state back to the player client such as
   // their entity, scene ui states, etc, but anything that uses ephemeral state (Such as UI) we need
   // to handle reloading for them manually here.
-  protected async onPlayerReconnected(player: Player) { 
-    const gamePlayer = await GamePlayer.getOrCreate(player);
+  protected onPlayerReconnected(player: Player) { 
+    const gamePlayer = GamePlayer.getOrCreate(player);
     gamePlayer.onPlayerReconnected();
   }
 }

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.19",
   "description": "",
   "license": "ISC",
   "author": "",

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

@@ -1,103 +0,0 @@
-{
-  "health": 120,
-  "currentRegionId": "chitter-forest",
-  "skillExperience": [
-    [
-      "exploration",
-      225
-    ],
-    [
-      "combat",
-      162
-    ],
-    [
-      "agility",
-      20
-    ]
-  ],
-  "backpack": {
-    "items": []
-  },
-  "hotbar": {
-    "items": [
-      {
-        "position": 0,
-        "itemId": "dull_sword"
-      },
-      {
-        "position": 2,
-        "itemId": "toy_sword"
-      },
-      {
-        "position": 3,
-        "itemId": "gold",
-        "quantity": 82
-      },
-      {
-        "position": 1,
-        "itemId": "ratkin_tail"
-      },
-      {
-        "position": 4,
-        "itemId": "ratkin_tooth"
-      },
-      {
-        "position": 5,
-        "itemId": "ratkin_eyes",
-        "quantity": 3
-      },
-      {
-        "position": 6,
-        "itemId": "ratkin_bones",
-        "quantity": 3
-      }
-    ]
-  },
-  "questLog": {
-    "quests": [
-      {
-        "questId": "welcome-to-stalkhaven",
-        "state": "completed",
-        "objectiveProgress": {
-          "talk-to-mark": 1
-        }
-      },
-      {
-        "questId": "exploring-stalkhaven",
-        "state": "completed",
-        "objectiveProgress": {
-          "talk-to-mycelis": 1,
-          "talk-to-finn": 1,
-          "talk-to-sporn": 1,
-          "talk-to-mark": 1
-        }
-      },
-      {
-        "questId": "tested-mettle",
-        "state": "active",
-        "objectiveProgress": {
-          "kill-5-ratkin": 5,
-          "dodge-3-times": 3,
-          "talk-to-mark": 0
-        }
-      }
-    ]
-  },
-  "storage": {
-    "items": []
-  },
-  "wearables": {
-    "items": [
-      {
-        "position": 1,
-        "itemId": "adventurer_tunic"
-      }
-    ]
-  },
-  "currentRegionSpawnFacingAngle": 0,
-  "currentRegionSpawnPoint": {
-    "x": -7,
-    "y": 2,
-    "z": 76
-  }
-}