@hytopia.com/examples 1.0.3 → 1.0.5

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

@@ -0,0 +1,306 @@
+<!-- Shared Item Tooltip System -->
+<script>
+/**
+ * Centralized Item Tooltip System
+ * Provides consistent tooltip functionality across all UI components
+ */
+window.ItemTooltips = (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 hasTooltipData(itemData) {
+    return itemData.name || 
+           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;
+  }
+
+  function createTooltip(slot, itemData, options = {}) {
+    if (!hasTooltipData(itemData)) return;
+
+    // Default options
+    const config = {
+      tooltipClass: 'item-tooltip',
+      contentClass: 'item-tooltip-content',
+      showBuyPrice: false,
+      showSellPrice: true,
+      buyPriceLabel: 'Price: ',
+      sellPriceLabel: 'Sells For: ',
+      notBuyableLabel: 'Not Buyable',
+      notSellableLabel: 'Not Sellable',
+      ...options
+    };
+
+    const tooltip = document.createElement('div');
+    tooltip.className = config.tooltipClass;
+    
+    const content = document.createElement('div');
+    content.className = config.contentClass;
+    
+    const sections = [];
+    
+    // Item name
+    if (itemData.name) {
+      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);
+      }
+    }
+    
+    // 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>'));
+      }
+    }
+    
+    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;
+      if (price > 0) {
+        sections.push(`<div class="tooltip-value">${config.buyPriceLabel}${price.toLocaleString()} gold</div>`);
+      } else {
+        sections.push(`<div class="tooltip-value">${config.notBuyableLabel}</div>`);
+      }
+    }
+    
+    if (config.showSellPrice && itemData.sellPrice !== undefined) {
+      const price = itemData.sellPrice || 0;
+      if (price > 0) {
+        sections.push(`<div class="tooltip-value">${config.sellPriceLabel}${price.toLocaleString()} gold</div>`);
+      } else {
+        sections.push(`<div class="tooltip-value">${config.notSellableLabel}</div>`);
+      }
+    }
+    
+    content.innerHTML = sections.join('');
+    tooltip.appendChild(content);
+    slot.appendChild(tooltip);
+  }
+
+  function removeTooltip(slot, tooltipClass = 'item-tooltip') {
+    const existingTooltip = slot.querySelector(`.${tooltipClass}`);
+    if (existingTooltip) existingTooltip.remove();
+  }
+
+  // Public API
+  return {
+    parseText: parseText,
+    hasTooltipData: hasTooltipData,
+    createTooltip: createTooltip,
+    removeTooltip: removeTooltip
+  };
+})();
+</script>
+
+<style>
+  /* Shared Item Tooltip Styles */
+  .item-tooltip {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: 8px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: 2000;
+    pointer-events: none;
+  }
+
+  /* Tooltip visibility on hover - Generic classes */
+  .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 {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(-8px);
+  }
+
+  .item-tooltip-content,
+  .backpack-item-tooltip-content,
+  .merchant-item-tooltip-content {
+    background: linear-gradient(145deg, #2a2a2a, #1e1e1e);
+    border: 2px solid #444;
+    border-radius: 8px;
+    padding: 10px 14px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    font-size: 12px;
+    font-weight: 500;
+    color: #cccccc;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    white-space: normal;
+    min-width: 150px;
+    max-width: 300px;
+    line-height: 1.4;
+    position: relative;
+    text-align: left;
+    transform: translateX(-50%);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  }
+
+  /* Tooltip Caret */
+  .item-tooltip-content::after,
+  .backpack-item-tooltip-content::after,
+  .merchant-item-tooltip-content::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 8px solid transparent;
+    border-top-color: #444;
+  }
+
+  .item-tooltip-content::before,
+  .backpack-item-tooltip-content::before,
+  .merchant-item-tooltip-content::before {
+    content: '';
+    position: absolute;
+    top: calc(100% - 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: #2a2a2a;
+    z-index: 1;
+  }
+
+  /* Tooltip Content Sections */
+  .tooltip-name,
+  .backpack-tooltip-name,
+  .merchant-tooltip-name {
+    font-weight: 600;
+    color: #ffffff;
+    font-size: 12px;
+  }
+
+  .tooltip-stats,
+  .backpack-tooltip-stats {
+    margin-top: 6px;
+    font-size: 11px;
+    line-height: 1.4;
+    color: #7dd87d;
+    font-weight: 500;
+  }
+
+  .tooltip-stats-header,
+  .backpack-tooltip-stats-header {
+    color: #999999;
+    font-weight: 500;
+    margin-bottom: 3px;
+    font-size: 11px;
+  }
+
+  .tooltip-description,
+  .backpack-tooltip-description,
+  .merchant-tooltip-description {
+    color: #cccccc;
+    margin-top: 6px;
+    font-size: 11px;
+    line-height: 1.4;
+  }
+
+  .tooltip-value,
+  .backpack-tooltip-value,
+  .merchant-tooltip-value {
+    color: #ffd700;
+    margin-top: 6px;
+    font-weight: 500;
+    font-size: 11px;
+  }
+
+  /* Mobile - Hide tooltips on mobile devices */
+  body.mobile .item-tooltip {
+    display: none;
+  }
+
+  /* Mouse Follower Tooltip (for backpack drag system) */
+  .backpack-mouse-follower .item-tooltip {
+    z-index: 2001;
+  }
+</style> 

package/frontiers-rpg-game/index.ts

@@ -16,5 +16,7 @@ import GameManager from './src/GameManager';
  */
 
 startServer(() => {
+  GameManager.instance.loadItems();
+  GameManager.instance.loadQuests();
   GameManager.instance.loadRegions();
 });

package/frontiers-rpg-game/package.json

@@ -4,16 +4,21 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "nodemon --watch src --watch assets --ext ts,js,json,html --exec \"bun index.ts\"",
+    "dev-ui": "nodemon --watch assets/ui --ext html,js --ignore index.html --exec \"bun run ./assets/ui/build.js\""
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@hytopia.com/assets": "latest",
-    "hytopia": "latest"
+    "@hytopia.com/assets": "^0.3.2",
+    "hytopia": "*"
   },
   "trustedDependencies": [
     "mediasoup",
     "sharp"
-  ]
+  ],
+  "devDependencies": {
+    "nodemon": "^3.1.10"
+  }
 }

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

@@ -1,6 +1,6 @@
-import { World } from 'hytopia';
+import type GameRegion from './GameRegion';
 
-const CYCLE_CLOCK_INTERVAL_MS = 250; // Update clock every 1 second
+const CYCLE_CLOCK_INTERVAL_MS = 5000; // Update clock every 1 second
 const CYCLE_CLOCK_OFFSET_HOURS = 7;
 const CYCLE_DAY_MAX_SKYBOX_INTENSITY = 1.2;
 const CYCLE_DURATION_MS = 24 * 60 * 1000; // Day/Night Cycle Every 24 minutes
@@ -9,8 +9,8 @@ const CYCLE_NIGHT_MIN_SKYBOX_INTENSITY = 0.005;
 export default class GameClock {
   public static readonly instance = new GameClock();
 
-  private _timeMs: number = 0;
-  private _worlds: Set<World> = new Set();
+  private _timeMs: number = 7 * 60 * 1000; // 5 + Offset time start (hours) 12pm
+  private _regions: Set<GameRegion> = new Set();
 
   private constructor() {
     setInterval(() => this._tickClock(), CYCLE_CLOCK_INTERVAL_MS);
@@ -27,12 +27,12 @@ export default class GameClock {
     return Math.floor(totalMinutes) % 60;
   }
 
-  public addWorld(world: World): void {
-    this._worlds.add(world);
+  public addRegionClockCycle(region: GameRegion): void {
+    this._regions.add(region);
   }
 
-  public removeWorld(world: World): void {
-    this._worlds.delete(world);
+  public removeRegionClockCycle(region: GameRegion): void {
+    this._regions.delete(region);
   }
 
   private _tickClock(): void {
@@ -42,10 +42,12 @@ export default class GameClock {
       this._timeMs = 0;
     }
 
-    this._worlds.forEach((world) => this._updateWorldClockCycle(world));
+    this._regions.forEach((region) => this._updateRegionClockCycle(region));
   }
 
-  private _updateWorldClockCycle(world: World): void {
+  private _updateRegionClockCycle(region: GameRegion): void {
+    const world = region.world;
+    
     // Calculate sun position in circular path
     const timeProgress = this._timeMs / CYCLE_DURATION_MS;
     const sunAngle = timeProgress * 2 * Math.PI;
@@ -59,8 +61,9 @@ export default class GameClock {
     
     // Calculate lighting intensity based on sun height (simple and elegant)
     const sunHeightNormalized = (sunHeight - (-50)) / (250 - (-50)); // Normalize to 0-1
-    const lightIntensity = Math.max(0.2, sunHeightNormalized * 1.5);
-    const ambientIntensity = Math.max(0.35, sunHeightNormalized * 0.9);
+
+    const lightIntensity = Math.max(region.minDirectionalLightIntensity, sunHeightNormalized * region.maxDirectionalLightIntensity);
+    const ambientIntensity = Math.max(region.minAmbientLightIntensity, sunHeightNormalized * region.maxAmbientLightIntensity);
     
     // Calculate skybox intensity with ease-in transition
     const skyboxT = Math.max(0, Math.min(1, sunHeightNormalized));
@@ -85,7 +88,7 @@ export default class GameClock {
     const r = Math.floor(colorIntensity * (nightR + dayProgress * (dayR - nightR)));
     const g = Math.floor(colorIntensity * (nightG + dayProgress * (dayG - nightG)));
     const b = Math.floor(colorIntensity * (nightB + dayProgress * (dayB - nightB)));
-    
+
     // Apply lighting
     world.setDirectionalLightColor({ r, g, b });
     world.setDirectionalLightIntensity(lightIntensity);

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

@@ -1,30 +1,76 @@
-import { WorldManager } from 'hytopia';
+import { Player, PlayerManager, World } from 'hytopia';
+import GameClock from './GameClock';
+import GamePlayer from './GamePlayer';
+import ItemRegistry from './items/ItemRegistry';
+import QuestRegistry from './quests/QuestRegistry';
 import type GameRegion from './GameRegion';
 
 // Regions
-import StalkhavenRegion from './regions/StalkhavenRegion';
+import ChitterForestRegion from './regions/chitter-forest/ChitterForestRegion';
+import RatkinNestRegion from './regions/ratkin-nest/RatkinNestRegion';
+import StalkhavenRegion from './regions/stalkhaven/StalkhavenRegion';
+import StalkhavenPortRegion from './regions/stalkhaven-port/StalkhavenPortRegion';
+// import WeaversHollowRegion from './regions/weavers-hollow/WeaversHollowRegion';
+
+// Since globalEventRouter isn't exported in the main index, we'll handle cleanup differently
+// We can rely on the GamePlayer.remove() method being called manually when needed
+// or implement a different cleanup strategy
 
 export default class GameManager {
   public static readonly instance = new GameManager();
 
-  private _regions: Map<string, GameRegion> = new Map(); // tag -> region
+  private _regions: Map<string, GameRegion> = new Map(); // id -> region
   private _startRegion: GameRegion;
 
+  public constructor() {
+    PlayerManager.instance.worldSelectionHandler = this._selectWorldForPlayer;
+  }
+
   public get startRegion(): GameRegion { return this._startRegion; }
 
-  public getRegion(tag: string): GameRegion | undefined {
-    return this._regions.get(tag);
+  public getRegion(id: string): GameRegion | undefined {
+    return this._regions.get(id);
+  }
+
+  public loadItems(): void {
+    ItemRegistry.initializeItems();
+  }
+
+  public loadQuests(): void {
+    QuestRegistry.initializeQuests();
   }
 
   public loadRegions(): void {
-    // Stalkhaven, Main City (Start)
+    // Chitter Forest
+    const chitterForestRegion = new ChitterForestRegion();
+    this._regions.set(chitterForestRegion.id, chitterForestRegion);
+    GameClock.instance.addRegionClockCycle(chitterForestRegion);
+
+    // Ratkin Nest
+    const ratkinNestRegion = new RatkinNestRegion();
+    this._regions.set(ratkinNestRegion.id, ratkinNestRegion);
+    GameClock.instance.addRegionClockCycle(ratkinNestRegion);
+    
+    // Stalkhaven
     const stalkhavenRegion = new StalkhavenRegion();
-    this._regions.set(stalkhavenRegion.tag!, stalkhavenRegion);
-    this._startRegion = stalkhavenRegion;
+    this._regions.set(stalkhavenRegion.id, stalkhavenRegion);
+    GameClock.instance.addRegionClockCycle(stalkhavenRegion);
 
-    // Other regions...
+    // Stalkhaven Port
+    const stalkhavenPortRegion = new StalkhavenPortRegion();
+    this._regions.set(stalkhavenPortRegion.id, stalkhavenPortRegion);
+    GameClock.instance.addRegionClockCycle(stalkhavenPortRegion);
+    this._startRegion = stalkhavenPortRegion;
+
+    // Weaver's Hollow
+    // const weaversHollowRegion = new WeaversHollowRegion();
+    // this._regions.set(weaversHollowRegion.id, weaversHollowRegion);
+    // // GameClock.instance.addRegionClockCycle(weaversHollowRegion);
+    // this._startRegion = weaversHollowRegion;
+  }
 
-    // Set Stalkhaven as the region/world players automatically join when they connect to the game.
-    WorldManager.instance.setDefaultWorld(stalkhavenRegion.world);
+  private _selectWorldForPlayer = async (player: Player): Promise<World | undefined> => {
+    const gamePlayer = await GamePlayer.getOrCreate(player);
+    return gamePlayer.currentRegion?.world ?? this._startRegion.world;
   }
 }