@hytopia.com/examples 1.0.2 → 1.0.4

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

@@ -1,12 +1,6 @@
-import {
-  startServer,
-  DefaultPlayerEntity,
-  PlayerEvent,
-} from 'hytopia';
+import { startServer } from 'hytopia';
 
-import GameClock from './classes/GameClock';
-
-import worldMap from './assets/maps/city.json';
+import GameManager from './src/GameManager';
 
 /**
  * This example loads and simulates extremely large map that is
@@ -21,23 +15,8 @@ import worldMap from './assets/maps/city.json';
  * loading is not yet implemented.
  */
 
-startServer(world => {
-  world.loadMap(worldMap);
-
-  GameClock.instance.addWorld(world);
-
-  // Spawn a player entity when a player joins the game.
-  world.on(PlayerEvent.JOINED_WORLD, ({ player }) => {
-    const playerEntity = new DefaultPlayerEntity({
-      player,
-      name: 'Player',
-    });
-  
-    playerEntity.spawn(world, { x: 0, y: 10, z: 0 });
-  });
-
-  // Despawn all player entities when a player leaves the game.
-  world.on(PlayerEvent.LEFT_WORLD, ({ player }) => {
-    world.entityManager.getPlayerEntitiesByPlayer(player).forEach(entity => entity.despawn());
-  });
+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": "^0.2.21",
-    "hytopia": "^0.5.20"
+    "@hytopia.com/assets": "^0.3.2",
+    "hytopia": "*"
   },
   "trustedDependencies": [
     "mediasoup",
     "sharp"
-  ]
+  ],
+  "devDependencies": {
+    "nodemon": "^3.1.10"
+  }
 }

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

@@ -0,0 +1,99 @@
+import type GameRegion from './GameRegion';
+
+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
+const CYCLE_NIGHT_MIN_SKYBOX_INTENSITY = 0.005;
+
+export default class GameClock {
+  public static readonly instance = new GameClock();
+
+  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);
+  }
+
+  public get hour(): number { 
+    const cycleProgress = (this._timeMs % CYCLE_DURATION_MS) / CYCLE_DURATION_MS;
+    return Math.floor((cycleProgress * 24) + CYCLE_CLOCK_OFFSET_HOURS) % 24;
+  }
+  
+  public get minute(): number { 
+    const cycleProgress = (this._timeMs % CYCLE_DURATION_MS) / CYCLE_DURATION_MS;
+    const totalMinutes = (cycleProgress * 24 * 60) + (CYCLE_CLOCK_OFFSET_HOURS * 60);
+    return Math.floor(totalMinutes) % 60;
+  }
+
+  public addRegionClockCycle(region: GameRegion): void {
+    this._regions.add(region);
+  }
+
+  public removeRegionClockCycle(region: GameRegion): void {
+    this._regions.delete(region);
+  }
+
+  private _tickClock(): void {
+    this._timeMs += CYCLE_CLOCK_INTERVAL_MS; 
+
+    if (this._timeMs >= CYCLE_DURATION_MS) {
+      this._timeMs = 0;
+    }
+
+    this._regions.forEach((region) => this._updateRegionClockCycle(region));
+  }
+
+  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;
+    const sunRadius = 300;
+    const sunHeight = 100 + Math.sin(sunAngle) * 150;
+    
+    const sunX = Math.cos(sunAngle) * sunRadius;
+    const sunZ = Math.sin(sunAngle) * sunRadius;
+    
+    world.setDirectionalLightPosition({ x: sunX, y: sunHeight, z: sunZ });
+    
+    // Calculate lighting intensity based on sun height (simple and elegant)
+    const sunHeightNormalized = (sunHeight - (-50)) / (250 - (-50)); // Normalize to 0-1
+
+    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));
+    const skyboxEaseT = skyboxT * skyboxT; // Simple ease-in using quadratic
+    const skyboxIntensity = CYCLE_NIGHT_MIN_SKYBOX_INTENSITY + 
+                           skyboxEaseT * (CYCLE_DAY_MAX_SKYBOX_INTENSITY - CYCLE_NIGHT_MIN_SKYBOX_INTENSITY);
+    
+    // Smooth color transition from night to day
+    const colorIntensity = Math.max(0.4, sunHeightNormalized);
+    const dayProgressT = Math.max(0, Math.min(1, sunHeightNormalized));
+    const dayProgress = dayProgressT * dayProgressT * (3 - 2 * dayProgressT); // Smooth step formula
+    
+    // Interpolate between night colors (cool blue) and day colors (warm white)
+    const nightR = 150;
+    const nightG = 180;
+    const nightB = 255;
+    
+    const dayR = 255;
+    const dayG = 255;
+    const dayB = 255;
+    
+    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);
+    world.setAmbientLightColor({ r, g, b });
+    world.setAmbientLightIntensity(ambientIntensity);
+    world.setSkyboxIntensity(skyboxIntensity);
+  }
+}

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

@@ -0,0 +1,76 @@
+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 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(); // id -> region
+  private _startRegion: GameRegion;
+
+  public constructor() {
+    PlayerManager.instance.worldSelectionHandler = this._selectWorldForPlayer;
+  }
+
+  public get startRegion(): GameRegion { return this._startRegion; }
+
+  public getRegion(id: string): GameRegion | undefined {
+    return this._regions.get(id);
+  }
+
+  public loadItems(): void {
+    ItemRegistry.initializeItems();
+  }
+
+  public loadQuests(): void {
+    QuestRegistry.initializeQuests();
+  }
+
+  public loadRegions(): void {
+    // // 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.id, stalkhavenRegion);
+    // GameClock.instance.addRegionClockCycle(stalkhavenRegion);
+
+    // // 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;
+  }
+
+  private _selectWorldForPlayer = async (player: Player): Promise<World | undefined> => {
+    const gamePlayer = await GamePlayer.getOrCreate(player);
+    return gamePlayer.currentRegion?.world ?? this._startRegion.world;
+  }
+}