@hytopia.com/examples 1.0.11 → 1.0.13

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

@@ -294,6 +294,40 @@
         </div>
       </div>
     `;
+    
+    // Add tooltips to reward items after rendering
+    addRewardTooltips(quest.reward);
+  }
+
+  function addRewardTooltips(reward) {
+    // Clear any existing tooltips first
+    const existingTooltipItems = document.querySelectorAll('.quests-reward-item-tooltip-enabled');
+    existingTooltipItems.forEach(item => removeRewardTooltip(item));
+    
+    // Add tooltips to item rewards
+    if (reward.items) {
+      reward.items.forEach((itemReward, index) => {
+        const rewardItem = document.querySelector(`[data-reward-item-index="${index}"]`);
+        if (rewardItem && window.ItemTooltips) {
+          createRewardTooltip(rewardItem, itemReward);
+        }
+      });
+    }
+  }
+
+  function createRewardTooltip(item, itemData) {
+    const options = {
+      tooltipClass: 'quests-reward-item-tooltip',
+      contentClass: 'quests-reward-item-tooltip-content',
+      showBuyPrice: false,
+      showSellPrice: false
+    };
+    
+    ItemTooltips.createTooltip(item, itemData, options);
+  }
+
+  function removeRewardTooltip(item) {
+    ItemTooltips.removeTooltip(item, 'quests-reward-item-tooltip');
   }
 
   function generateObjectivesHTML(quest) {
@@ -330,11 +364,11 @@
     });
     
     // Handle item rewards
-    reward.items?.forEach(itemReward => {
+    reward.items?.forEach((itemReward, index) => {
       const quantity = itemReward.quantity > 1 ? `x${itemReward.quantity.toLocaleString()}` : 'x1';
       const iconSrc = itemReward.iconImageUri ? `{{CDN_ASSETS_URL}}/${itemReward.iconImageUri}` : '{{CDN_ASSETS_URL}}/icons/items/gold.png';
       rewards.push(`
-        <div class="quests-reward-item">
+        <div class="quests-reward-item quests-reward-item-tooltip-enabled" data-reward-item-index="${index}">
           <img src="${iconSrc}" alt="Item" class="quests-reward-icon">
           <span class="quests-reward-text">${sanitizeText(itemReward.name)} (${quantity})</span>
         </div>
@@ -754,6 +788,40 @@
     line-height: 1.3;
   }
 
+  /* Quest reward tooltip positioning - left-aligned for full-width items */
+  .quests-reward-item-tooltip {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 8px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: 2000;
+    pointer-events: none;
+  }
+
+  .quests-reward-item-tooltip-enabled {
+    position: relative;
+    cursor: pointer;
+  }
+
+  /* Override center positioning for quest reward tooltips */
+  .quests-reward-item-tooltip-content {
+    transform: translateX(0) !important;
+  }
+
+  /* Position caret over the reward icon */
+  .quests-reward-item-tooltip-content::after {
+    left: 20px !important;
+    transform: translateX(-50%) !important;
+  }
+
+  .quests-reward-item-tooltip-content::before {
+    left: 20px !important;
+    transform: translateX(-50%) !important;
+  }
+
   /* Empty State */
   .quests-empty-state {
     flex: 1;

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

@@ -0,0 +1,224 @@
+<!-- Shared Item Stats System -->
+<script>
+/**
+ * Centralized Item Stats System
+ * Provides consistent stat formatting across all UI components
+ */
+window.ItemStats = (function() {
+  'use strict';
+
+  // Parse color formatting in text: [HEXCODE]text[/] -> <span style="color: #HEXCODE">text</span>
+  // Parse line breaks: [b] -> <br>
+  function parseText(text) {
+    if (!text) return text;
+    
+    // First, replace [b] with <br> for line breaks
+    text = text.replace(/\[b\]/g, '<br>');
+    
+    // Then, handle color formatting [HEXCODE]text[/] pattern
+    const colorPattern = /\[([A-Fa-f0-9]{6})\](.*?)\[\/\]/g;
+    
+    return text.replace(colorPattern, (match, hexCode, content) => {
+      return `<span style="color: #${hexCode}">${content}</span>`;
+    });
+  }
+
+  function generateItemStats(itemData, options = {}) {
+    const config = {
+      includeDescription: true,
+      includePricing: false,
+      showBuyPrice: false,
+      showSellPrice: false,
+      buyPriceLabel: 'Price: ',
+      sellPriceLabel: 'Sells For: ',
+      notBuyableLabel: 'Not Buyable',
+      notSellableLabel: 'Not Sellable',
+      statsClass: 'item-stats',
+      descriptionClass: 'item-description',
+      priceClass: 'item-price',
+      ...options
+    };
+
+    const sections = [];
+    
+    // Item stats (weapons and wearables)
+    const stats = [];
+    
+    // Weapon damage (no "when equipped" needed since weapons are used directly)
+    if (itemData.damage && itemData.damage !== 0) {
+      if (itemData.damageVariance && itemData.damageVariance !== 0) {
+        const min = Math.floor(itemData.damage * (1 - itemData.damageVariance));
+        const max = Math.floor(itemData.damage * (1 + itemData.damageVariance));
+        stats.push(`${min}-${max} damage`);
+      } else {
+        stats.push(`${itemData.damage} damage`);
+      }
+    }
+    
+    // Wearable stats
+    const wearableStats = [];
+    if (itemData.damageBonus && itemData.damageBonus !== 0) {
+      wearableStats.push(`+${itemData.damageBonus} damage dealt`);
+    }
+    if (itemData.damageBonusPercent && itemData.damageBonusPercent !== 0) {
+      wearableStats.push(`+${itemData.damageBonusPercent}% damage dealt`);
+    }
+    if (itemData.damageReduction && itemData.damageReduction !== 0) {
+      wearableStats.push(`-${itemData.damageReduction} damage taken`);
+    }
+    if (itemData.damageReductionPercent && itemData.damageReductionPercent !== 0) {
+      wearableStats.push(`-${itemData.damageReductionPercent}% damage taken`);
+    }
+    
+    // Collect all stat lines first
+    const allStatLines = [];
+    
+    // Add wearable stats
+    if (wearableStats.length > 0) {
+      allStatLines.push(...wearableStats);
+    }
+    
+    // Add custom stat texts
+    if (itemData.statTexts && itemData.statTexts.length > 0) {
+      for (const statText of itemData.statTexts) {
+        const parsedStatText = parseText(statText);
+        allStatLines.push(parsedStatText);
+      }
+    }
+    
+    // Add header and stats together if we have stats
+    if (allStatLines.length > 0) {
+      if (itemData.statsHeader) {
+        const headerText = parseText(itemData.statsHeader);
+        stats.push(`<div class="stats-header">${headerText}</div>${allStatLines.join('<br>')}`);
+      } else {
+        stats.push(allStatLines.join('<br>'));
+      }
+    }
+    
+    if (stats.length > 0) {
+      sections.push(`<div class="${config.statsClass}">${stats.join('<br>')}</div>`);
+    }
+    
+    // Item description
+    if (config.includeDescription && itemData.description) {
+      const parsedDescription = parseText(itemData.description);
+      sections.push(`<div class="${config.descriptionClass}">${parsedDescription}</div>`);
+    }
+    
+    // Price information
+    if (config.includePricing) {
+      if (config.showBuyPrice && itemData.buyPrice !== undefined) {
+        const price = itemData.buyPrice || 0;
+        if (price > 0) {
+          sections.push(`<div class="${config.priceClass}">${config.buyPriceLabel}${price.toLocaleString()} gold</div>`);
+        } else {
+          sections.push(`<div class="${config.priceClass}">${config.notBuyableLabel}</div>`);
+        }
+      }
+      
+      if (config.showSellPrice && itemData.sellPrice !== undefined) {
+        const price = itemData.sellPrice || 0;
+        if (price > 0) {
+          sections.push(`<div class="${config.priceClass}">${config.sellPriceLabel}${price.toLocaleString()} gold</div>`);
+        } else {
+          sections.push(`<div class="${config.priceClass}">${config.notSellableLabel}</div>`);
+        }
+      }
+    }
+    
+    return sections.join('');
+  }
+
+  function hasItemStats(itemData) {
+    return itemData.description || 
+           itemData.sellPrice !== undefined ||
+           itemData.buyPrice !== undefined ||
+           itemData.damageBonus !== undefined ||
+           itemData.damageBonusPercent !== undefined ||
+           itemData.damageReduction !== undefined ||
+           itemData.damageReductionPercent !== undefined ||
+           itemData.damage !== undefined ||
+           itemData.damageVariance !== undefined ||
+           (itemData.statTexts && itemData.statTexts.length > 0) ||
+           itemData.statsHeader;
+  }
+
+  // Public API
+  return {
+    parseText: parseText,
+    generateItemStats: generateItemStats,
+    hasItemStats: hasItemStats
+  };
+})();
+</script>
+
+<style>
+  /* Shared Item Stats Styles */
+  .item-stats {
+    margin-top: 6px;
+    font-size: 11px;
+    line-height: 1.4;
+    color: #7dd87d;
+    font-weight: 500;
+  }
+
+  .stats-header {
+    color: #999999;
+    font-weight: 500;
+    margin-bottom: 3px;
+    font-size: 11px;
+  }
+
+  .item-description {
+    color: #cccccc;
+    margin-top: 6px;
+    font-size: 11px;
+    line-height: 1.4;
+  }
+
+  .item-price {
+    color: #ffd700;
+    margin-top: 6px;
+    font-weight: 500;
+    font-size: 11px;
+  }
+
+  /* Crafting-specific stat styles */
+  .crafting-item-stats {
+    margin-top: 4px;
+    font-size: 9px;
+    line-height: 1.3;
+    color: #7dd87d;
+    font-weight: 500;
+  }
+
+  .crafting-item-stats .stats-header {
+    color: #999999;
+    font-weight: 500;
+    margin-bottom: 2px;
+    font-size: 9px;
+  }
+
+  .crafting-item-description {
+    margin-top: 4px;
+    font-size: 9px;
+    line-height: 1.3;
+    color: var(--crafting-text-muted, #cccccc);
+  }
+
+  /* Mobile styles */
+  body.mobile .crafting-item-stats {
+    font-size: 8px;
+    margin-top: 3px;
+  }
+
+  body.mobile .crafting-item-stats .stats-header {
+    font-size: 8px;
+  }
+
+  body.mobile .crafting-item-description {
+    font-size: 8px;
+    margin-top: 3px;
+  }
+</style> 

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

@@ -24,6 +24,12 @@ window.ItemTooltips = (function() {
   }
 
   function hasTooltipData(itemData) {
+    // Use shared ItemStats system if available, otherwise use basic check
+    if (window.ItemStats) {
+      return itemData.name || window.ItemStats.hasItemStats(itemData);
+    }
+    
+    // Fallback check if ItemStats not available
     return itemData.name || 
            itemData.description || 
            itemData.sellPrice !== undefined ||
@@ -67,71 +73,27 @@ window.ItemTooltips = (function() {
       sections.push(`<div class="tooltip-name">${itemData.name}</div>`);
     }
     
-    // Item stats (weapons and wearables)
-    const stats = [];
-    
-    // Weapon damage (no "when equipped" needed since weapons are used directly)
-    if (itemData.damage && itemData.damage !== 0) {
-      if (itemData.damageVariance && itemData.damageVariance !== 0) {
-        const min = Math.floor(itemData.damage * (1 - itemData.damageVariance));
-        const max = Math.floor(itemData.damage * (1 + itemData.damageVariance));
-        stats.push(`${min}-${max} damage`);
-      } else {
-        stats.push(`${itemData.damage} damage`);
-      }
-    }
-    
-    // Wearable stats
-    const wearableStats = [];
-    if (itemData.damageBonus && itemData.damageBonus !== 0) {
-      wearableStats.push(`+${itemData.damageBonus} damage dealt`);
-    }
-    if (itemData.damageBonusPercent && itemData.damageBonusPercent !== 0) {
-      wearableStats.push(`+${itemData.damageBonusPercent}% damage dealt`);
-    }
-    if (itemData.damageReduction && itemData.damageReduction !== 0) {
-      wearableStats.push(`-${itemData.damageReduction} damage taken`);
-    }
-    if (itemData.damageReductionPercent && itemData.damageReductionPercent !== 0) {
-      wearableStats.push(`-${itemData.damageReductionPercent}% damage taken`);
-    }
-    
-    // Collect all stat lines first
-    const allStatLines = [];
-    
-    // Add wearable stats
-    if (wearableStats.length > 0) {
-      allStatLines.push(...wearableStats);
-    }
-    
-    // Add custom stat texts
-    if (itemData.statTexts && itemData.statTexts.length > 0) {
-      for (const statText of itemData.statTexts) {
-        const parsedStatText = parseText(statText);
-        allStatLines.push(parsedStatText);
+    // Use shared ItemStats system for consistent stat generation
+    if (window.ItemStats) {
+      const itemStatsHTML = window.ItemStats.generateItemStats(itemData, {
+        includeDescription: true,
+        includePricing: false,
+        statsClass: 'tooltip-stats',
+        descriptionClass: 'tooltip-description',
+        priceClass: 'tooltip-value'
+      });
+      
+      if (itemStatsHTML) {
+        sections.push(itemStatsHTML);
       }
-    }
-    
-    // Add header and stats together if we have stats
-    if (allStatLines.length > 0) {
-      if (itemData.statsHeader) {
-        const headerText = parseText(itemData.statsHeader);
-        stats.push(`<div class="tooltip-stats-header">${headerText}</div>${allStatLines.join('<br>')}`);
-      } else {
-        stats.push(allStatLines.join('<br>'));
+    } else {
+      // Fallback: Item description only if ItemStats not available
+      if (itemData.description) {
+        const parsedDescription = parseText(itemData.description);
+        sections.push(`<div class="tooltip-description">${parsedDescription}</div>`);
       }
     }
     
-    if (stats.length > 0) {
-      sections.push(`<div class="tooltip-stats">${stats.join('<br>')}</div>`);
-    }
-    
-    // Item description
-    if (itemData.description) {
-      const parsedDescription = parseText(itemData.description);
-      sections.push(`<div class="tooltip-description">${parsedDescription}</div>`);
-    }
-    
     // Price information
     if (config.showBuyPrice && itemData.buyPrice !== undefined) {
       const price = itemData.buyPrice || 0;
@@ -189,22 +151,31 @@ window.ItemTooltips = (function() {
   .backpack-slot:hover .item-tooltip,
   .backpack-hotbar-slot:hover .item-tooltip,
   .backpack-wearable-slot:hover .item-tooltip,
-  .merchant-slot:hover .item-tooltip,
-  .merchant-hotbar-slot: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,
-  .merchant-slot:hover .merchant-item-tooltip,
-  .merchant-hotbar-slot:hover .merchant-item-tooltip {
+      .merchant-slot:hover .item-tooltip,
+    .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,
+    .merchant-slot:hover .merchant-item-tooltip,
+    .merchant-hotbar-slot:hover .merchant-item-tooltip,
+    .crafting-slot:hover .crafting-item-tooltip,
+    .crafting-requirement-item:hover .crafting-requirement-tooltip,
+    .quests-reward-item:hover .quests-reward-item-tooltip {
     opacity: 1;
     visibility: visible;
     transform: translateY(-8px);
   }
 
-  .item-tooltip-content,
-  .backpack-item-tooltip-content,
-  .merchant-item-tooltip-content {
+      .item-tooltip-content,
+    .backpack-item-tooltip-content,
+    .merchant-item-tooltip-content,
+    .crafting-item-tooltip-content,
+    .crafting-requirement-tooltip-content,
+    .quests-reward-item-tooltip-content {
     background: linear-gradient(145deg, #2a2a2a, #1e1e1e);
     border: 2px solid #444;
     border-radius: 8px;
@@ -225,9 +196,12 @@ window.ItemTooltips = (function() {
   }
 
   /* Tooltip Caret */
-  .item-tooltip-content::after,
-  .backpack-item-tooltip-content::after,
-  .merchant-item-tooltip-content::after {
+      .item-tooltip-content::after,
+    .backpack-item-tooltip-content::after,
+    .merchant-item-tooltip-content::after,
+    .crafting-item-tooltip-content::after,
+    .crafting-requirement-tooltip-content::after,
+    .quests-reward-item-tooltip-content::after {
     content: '';
     position: absolute;
     top: 100%;
@@ -237,9 +211,12 @@ window.ItemTooltips = (function() {
     border-top-color: #444;
   }
 
-  .item-tooltip-content::before,
-  .backpack-item-tooltip-content::before,
-  .merchant-item-tooltip-content::before {
+      .item-tooltip-content::before,
+    .backpack-item-tooltip-content::before,
+    .merchant-item-tooltip-content::before,
+    .crafting-item-tooltip-content::before,
+    .crafting-requirement-tooltip-content::before,
+    .quests-reward-item-tooltip-content::before {
     content: '';
     position: absolute;
     top: calc(100% - 2px);
@@ -247,8 +224,17 @@ window.ItemTooltips = (function() {
     transform: translateX(-50%);
     border: 6px solid transparent;
     border-top-color: #2a2a2a;
-    z-index: 1;
-  }
+          z-index: 1;
+    }
+
+    /* Tooltip Content Sections */
+    .tooltip-name,
+    .backpack-tooltip-name,
+    .merchant-tooltip-name {
+      font-weight: 600;
+      color: #ffffff;
+      font-size: 12px;
+    }
 
   /* Tooltip Content Sections */
   .tooltip-name,
@@ -295,7 +281,12 @@ window.ItemTooltips = (function() {
   }
 
   /* Mobile - Hide tooltips on mobile devices */
-  body.mobile .item-tooltip {
+  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;
   }
 

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

@@ -1,31 +1,140 @@
 {
-  "health": 100,
-  "currentRegionId": "stalkhaven-port",
-  "currentRegionSpawnFacingAngle": 180,
-  "currentRegionSpawnPoint": {
-    "x": -6,
-    "y": 8,
-    "z": -28
-  },
-  "skillExperience": [],
+  "health": 130,
+  "currentRegionId": "stalkhaven",
+  "skillExperience": [
+    [
+      "exploration",
+      375
+    ],
+    [
+      "agility",
+      79
+    ],
+    [
+      "combat",
+      320
+    ],
+    [
+      "foraging",
+      8
+    ]
+  ],
   "backpack": {
-    "items": []
+    "items": [
+      {
+        "position": 0,
+        "itemId": "common_mushroom",
+        "quantity": 3
+      },
+      {
+        "position": 1,
+        "itemId": "ratkin_tooth",
+        "quantity": 3
+      }
+    ]
   },
   "hotbar": {
     "items": [
       {
         "position": 0,
+        "itemId": "dull_sword"
+      },
+      {
+        "position": 2,
         "itemId": "toy_sword"
+      },
+      {
+        "position": 3,
+        "itemId": "gold",
+        "quantity": 147
+      },
+      {
+        "position": 1,
+        "itemId": "raw_hide",
+        "quantity": 2
+      },
+      {
+        "position": 4,
+        "itemId": "ratkin_eyes"
+      },
+      {
+        "position": 5,
+        "itemId": "ratkin_tail",
+        "quantity": 2
+      },
+      {
+        "position": 6,
+        "itemId": "ratkin_bones",
+        "quantity": 3
+      },
+      {
+        "position": 7,
+        "itemId": "common_seeds",
+        "quantity": 4
       }
     ]
   },
   "questLog": {
-    "quests": []
+    "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": "completed",
+        "objectiveProgress": {
+          "kill-5-ratkin": 5,
+          "dodge-3-times": 3,
+          "talk-to-mark": 1
+        }
+      },
+      {
+        "questId": "hammers-and-crafting",
+        "state": "active",
+        "objectiveProgress": {
+          "gather-materials": 2,
+          "craft-item": 0,
+          "talk-to-arden": 0
+        }
+      },
+      {
+        "questId": "stalkhavens-outpost",
+        "state": "active",
+        "objectiveProgress": {
+          "talk-to-chanterelion": 0
+        }
+      }
+    ]
   },
   "storage": {
     "items": []
   },
   "wearables": {
-    "items": []
+    "items": [
+      {
+        "position": 1,
+        "itemId": "adventurer_tunic"
+      }
+    ]
+  },
+  "currentRegionSpawnFacingAngle": 0,
+  "currentRegionSpawnPoint": {
+    "x": 1,
+    "y": 2,
+    "z": 40
   }
 }