hytopia 0.3.27 → 0.3.29

package/examples/hygrounds/assets/ui/index.html

@@ -23,6 +23,13 @@
 <!-- Winner Announcement -->
 <div class="winner-announcement"></div>
 
+<!-- Rank Up Announcement -->
+<div class="rank-up-announcement">
+  <div class="rank-up-title">Rank Up!</div>
+  <img src="" alt="Rank Icon" class="rank-up-icon">
+  <div class="rank-up-name"></div>
+</div>
+
 <!-- Leaderboard -->
 <div class="leaderboard">
   <div class="leaderboard-title">Deathmatch</div>
@@ -40,7 +47,7 @@
   </div>
 </div>
 
-<div class="hud">  
+<div class="hud">
   <div class="info-container">
     <div class="ammo-indicator" style="display: none;">
       <img src="{{CDN_ASSETS_URL}}/icons/ammo.png" alt="Ammo Icon" class="ammo-icon">
@@ -48,6 +55,13 @@
       <span class="ammo-divider">/</span>
       <span class="total-ammo">30</span>
     </div>
+
+    <div class="exp-bar">
+      <div class="exp-bar-fill"></div>
+      <img src="{{CDN_ASSETS_URL}}/icons/ranks/unranked.png" alt="Exp Rank Icon" class="exp-icon">
+      <div class="exp-text">Unranked</div>
+    </div>
+
     <div class="shield-bar">
       <div class="shield-bar-fill"></div>
       <img src="{{CDN_ASSETS_URL}}/icons/shield.png" alt="Shield Icon" class="shield-icon">
@@ -64,18 +78,18 @@
 <div class="mobile-buttons-container">
   <div id="mobile-reload-button" class="mobile-button">
     <img src="{{CDN_ASSETS_URL}}/icons/mobile-reload.png" />
-  </div>  
-  
+  </div>
+
   <div id="mobile-interact-button" class="mobile-button">E</div>
-  
+
   <div id="mobile-jump-button" class="mobile-button">
     <img src="{{CDN_ASSETS_URL}}/icons/mobile-jump.png" />
   </div>
-  
+
   <div id="mobile-attack-button" class="mobile-button">
     <img src="{{CDN_ASSETS_URL}}/icons/mobile-shoot.png" />
   </div>
-  
+
   <div id="mobile-place-block-button" class="mobile-button">
     <img src="{{CDN_ASSETS_URL}}/icons/mobile-place-block.png" />
   </div>
@@ -100,21 +114,21 @@
     <div class="slot-quantity" style="display: none;"></div>
     <div class="slot-name" style="display: none;"></div>
   </div>
-  
+
   <div class="inventory-slot" data-slot="2">
     <div class="slot-number">2</div>
     <img class="slot-icon" style="display: none;">
     <div class="slot-quantity" style="display: none;"></div>
     <div class="slot-name" style="display: none;"></div>
   </div>
-  
+
   <div class="inventory-slot" data-slot="3">
     <div class="slot-number">3</div>
     <img class="slot-icon" style="display: none;">
     <div class="slot-quantity" style="display: none;"></div>
     <div class="slot-name" style="display: none;"></div>
   </div>
-  
+
   <div class="inventory-slot" data-slot="4">
     <div class="slot-number">4</div>
     <img class="slot-icon" style="display: none;">
@@ -131,6 +145,10 @@
 </div>
 
 <!-- Scene UI Templates -->
+<template id="player-rank-template">
+  <img src="" alt="Rank Icon" class="player-rank-icon">
+</template>
+
 <template id="item-label-template">
   <div class="item-label">
     <div class="label-quantity"></div>
@@ -151,9 +169,13 @@
 <!-- UI Scripts-->
 <script>
   const CDN_ASSETS_URL = '{{CDN_ASSETS_URL}}';
+  let ranks = [];
+  let lastExp = 0;
+  let lastRank;
   let leaderboardKillCounts = {};
   let gameEndTime = 0;
   let timerInterval;
+  let isLoadExpUpdate = true; // Flag to track the first EXP update
 
   function updateLeaderboard() {
     const leaderboardPlayers = document.querySelector('.leaderboard-players');
@@ -191,13 +213,13 @@
     // Create player elements for the leaderboard
     sortedPlayers.forEach((player, index) => {
       const [username, killCount] = player;
-      
+
       // Skip players with 0 kills
       if (killCount === 0) return;
-      
+
       const playerElement = document.createElement('div');
       playerElement.className = 'leaderboard-player';
-      
+
       let rankIcon = '';
       if (index === 0) {
         rankIcon = `<img src="${CDN_ASSETS_URL}/icons/crown-gold.png" class="rank-icon">`;
@@ -214,7 +236,7 @@
         </div>
         <div class="player-kills">${killCount}</div>
       `;
-      
+
       leaderboardPlayers.appendChild(playerElement);
     });
   }
@@ -222,15 +244,15 @@
   function updateTimer() {
     const now = Date.now();
     const timeRemaining = Math.max(0, gameEndTime - now);
-    
+
     // Format time as mm:ss
     const minutes = Math.floor(timeRemaining / 60000);
     const seconds = Math.floor((timeRemaining % 60000) / 1000);
     const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-    
+
     const timerElement = document.querySelector('.leaderboard-timer');
     timerElement.textContent = formattedTime;
-    
+
     // Stop the timer when it reaches zero
     if (timeRemaining <= 0) {
       clearInterval(timerInterval);
@@ -240,7 +262,7 @@
   function showGameStartAnnouncement() {
     const announcement = document.querySelector('.game-start-announcement');
     announcement.classList.add('active');
-    
+
     // Remove the active class after animation completes
     setTimeout(() => {
       announcement.classList.remove('active');
@@ -251,13 +273,45 @@
     const announcement = document.querySelector('.winner-announcement');
     announcement.textContent = `${username} wins!`;
     announcement.classList.add('active');
-    
+
     // Remove the active class after animation completes
     setTimeout(() => {
       announcement.classList.remove('active');
     }, 5000);
   }
 
+  function showRankUpAnnouncement(rank) {
+    const announcement = document.querySelector('.rank-up-announcement');
+    const rankIcon = announcement.querySelector('.rank-up-icon');
+    const rankName = announcement.querySelector('.rank-up-name');
+
+    rankIcon.src = `${CDN_ASSETS_URL}/${rank.iconUri}`;
+    rankName.textContent = rank.name;
+
+    announcement.classList.add('active');
+
+    // Remove the active class after animation completes (e.g., 5 seconds)
+    setTimeout(() => {
+      announcement.classList.remove('active');
+    }, 5000);
+  }
+
+  function showExpGainIndicator(amount) {
+    const expBar = document.querySelector('.exp-bar');
+    if (!expBar) return;
+
+    const indicator = document.createElement('div');
+    indicator.className = 'exp-gain-indicator';
+    indicator.textContent = `+${amount} Exp`;
+
+    expBar.appendChild(indicator);
+
+    // Remove after animation completes
+    setTimeout(() => {
+      indicator.remove();
+    }, 1500); // Match animation duration
+  }
+
   hytopia.registerSceneUITemplate('item-label', (id, onState) => {
     const template = document.getElementById('item-label-template');
     const clone = template.content.cloneNode(true);
@@ -291,6 +345,20 @@
     return clone;
   });
 
+  hytopia.registerSceneUITemplate('player-rank', (id, onState) => {
+    const template = document.getElementById('player-rank-template');
+    const clone = template.content.cloneNode(true);
+    const playerRankIcon = clone.querySelector('.player-rank-icon');
+
+    onState(state => {
+      if (state.iconUri) {
+        playerRankIcon.src = `${CDN_ASSETS_URL}/${state.iconUri}`;
+      }
+    });
+
+    return clone;
+  });
+
   hytopia.onData(data => {
     const { type } = data;
 
@@ -333,29 +401,29 @@
 
     if (type === 'damage-indicator') {
       const { direction } = data;
-      
+
       // Make sure we have a valid direction object
       if (!direction || typeof direction.x === 'undefined' || typeof direction.z === 'undefined') {
         console.error('Invalid direction object:', direction);
         return;
       }
-      
+
       // Hide all indicators first
       document.querySelectorAll('.damage-indicator').forEach(el => {
         el.classList.remove('active');
       });
-      
+
       // Determine which indicator to show based on the dominant direction
       const absX = Math.abs(direction.x);
       const absZ = Math.abs(direction.z);
-      
+
       let indicatorClass;
       if (absX > absZ) {
         indicatorClass = direction.x > 0 ? '.damage-indicator.right' : '.damage-indicator.left';
       } else {
         indicatorClass = direction.z > 0 ? '.damage-indicator.top' : '.damage-indicator.bottom';
       }
-      
+
       // Show and animate the indicator
       const indicator = document.querySelector(indicatorClass);
       if (indicator) {
@@ -366,24 +434,58 @@
       }
     }
 
+    if (type === 'exp-update') {
+      const { totalExp, rankIndex } = data;
+      const currentRank = ranks[rankIndex];
+      const nextRank = ranks[rankIndex + 1];
+      let gainedExp = 0;
+
+      // Calculate gained exp only after the first update, which is for loading existing exp
+      if (!isLoadExpUpdate) {
+        gainedExp = totalExp - lastExp;
+      } else {
+        isLoadExpUpdate = false; // Mark load update as done
+      }
+
+      if (lastRank && lastRank.name !== currentRank.name && totalExp > 0) {
+        showRankUpAnnouncement(currentRank);
+      }
+
+      // Show the gained exp number if positive
+      if (gainedExp > 0) {
+        showExpGainIndicator(gainedExp);
+      }
+
+      const expBarFill = document.querySelector('.exp-bar-fill');
+      const expBarText = document.querySelector('.exp-text');
+      const expRankIcon = document.querySelector('.exp-icon');
+
+      expBarFill.style.width = `${((totalExp - currentRank.totalExp) / (nextRank.totalExp - currentRank.totalExp)) * 100}%`;
+      expBarText.textContent = currentRank.name;
+      expRankIcon.src = `${CDN_ASSETS_URL}/${currentRank.iconUri}`;
+
+      lastExp = totalExp;
+      lastRank = currentRank;
+    }
+
     if (type === 'show-damage') {
       const { damage } = data;
-      
+
       // Create a new damage number element
       const damageNumber = document.createElement('div');
       damageNumber.className = 'hit-damage-number';
       damageNumber.textContent = damage;
-      
+
       // Add some randomness to position
       const randomX = Math.random() * 60 - 30; // -30 to 30px
       const randomY = Math.random() * 40 - 20; // -20 to 20px
-      
+
       damageNumber.style.transform = `translate(${randomX}px, ${randomY}px)`;
-      
+
       // Add to container
       const container = document.querySelector('.hit-damage-container');
       container.appendChild(damageNumber);
-      
+
       // Remove after animation completes
       setTimeout(() => {
         damageNumber.remove();
@@ -394,20 +496,20 @@
       const { health, maxHealth } = data;
       const healthText = document.querySelector('.health-text');
       const healthBarFill = document.querySelector('.health-bar-fill');
-      
+
       healthText.textContent = health;
       healthBarFill.style.width = `${(health / maxHealth) * 100}%`;
     }
 
     if (type === 'inventory') {
       const { inventory } = data;
-      
+
       inventory.forEach((item, i) => {
         const slot = document.querySelector(`.inventory-slot[data-slot="${i}"]`);
         const icon = slot.querySelector('.slot-icon');
         const name = slot.querySelector('.slot-name');
         const quantity = slot.querySelector('.slot-quantity');
-        
+
         icon.style.display = item ? 'block' : 'none';
         name.style.display = item ? 'block' : 'none';
         quantity.style.display = item ? 'block' : 'none';
@@ -424,7 +526,7 @@
 
     if (type === 'inventory-active-slot') {
       const { index } = data;
-      
+
       // Remove active slot class from all slots
       document.querySelectorAll('.inventory-slot').forEach(slot => {
         slot.classList.remove('inventory-active-slot');
@@ -469,7 +571,7 @@
       const materialsAmount = document.querySelector('.materials-amount');
       const currentMaterials = parseInt(materialsAmount.textContent);
       const difference = materials - currentMaterials;
-      
+
       if (difference !== 0) {
         const materialsCounter = document.querySelector('.materials-counter');
         const floatingNumber = document.createElement('div');
@@ -482,15 +584,19 @@
           floatingNumber.remove();
         }, 1000);
       }
-      
+
       materialsAmount.textContent = materials;
     }
 
+    if (type === 'ranks') {
+      ranks = data.ranks;
+    }
+
     if (type === 'shield') {
       const { shield, maxShield } = data;
       const shieldText = document.querySelector('.shield-text');
       const shieldBarFill = document.querySelector('.shield-bar-fill');
-      
+
       shieldText.textContent = shield;
       shieldBarFill.style.width = `${(shield / maxShield) * 100}%`;
     }
@@ -498,7 +604,7 @@
     if (type === 'scope-zoom') {
       const { zoom } = data;
       const scopeOverlay = document.querySelector('.scope-overlay');
-      
+
       if (zoom === 1) {
         scopeOverlay.classList.remove('active');
       } else {
@@ -508,18 +614,18 @@
 
     if (type === 'timer-sync') {
       const { startedAt, endsAt } = data;
-      
+
       // Clear any existing timer interval
       if (timerInterval) {
         clearInterval(timerInterval);
       }
-      
+
       // Set the end time
       gameEndTime = endsAt;
-      
+
       // Update timer immediately
       updateTimer();
-      
+
       // Set up interval to update timer every second
       timerInterval = setInterval(updateTimer, 1000);
     }
@@ -671,6 +777,53 @@
     animation: winnerFade 5s ease-in-out forwards;
   }
 
+  .rank-up-announcement {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1001;
+    font-family: 'Inter', sans-serif;
+    color: white;
+    text-align: center;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.5);
+  }
+
+  .rank-up-announcement.active {
+    animation: rankUpFade 5s ease-in-out forwards;
+  }
+
+  .rank-up-title {
+    font-size: 60px;
+    font-weight: bold;
+    color: #4CAF50; /* Green color for rank up */
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 20px;
+  }
+
+  .rank-up-icon {
+    width: 150px;
+    height: 150px;
+    margin-bottom: 20px;
+    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
+  }
+
+  .rank-up-name {
+    font-size: 40px;
+    font-weight: bold;
+    color: #FFEB3B; /* Yellow color for rank name */
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+
   @keyframes announcementFade {
     0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
     20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
@@ -687,6 +840,13 @@
     100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
   }
 
+  @keyframes rankUpFade {
+    0% { opacity: 0; transform: scale(0.7); }
+    20% { opacity: 1; transform: scale(1.1); }
+    80% { opacity: 1; transform: scale(1); }
+    100% { opacity: 0; transform: scale(0.9); }
+  }
+
   .hit-damage-container {
     position: fixed;
     top: 50%;
@@ -855,7 +1015,7 @@
     color: rgba(255, 255, 255, 0.8);
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
   }
-  
+
   .slot-icon {
     max-width: 70%;
     max-height: 70%;
@@ -875,7 +1035,7 @@
     padding: 1px 4px;
     border-radius: 3px;
   }
-  
+
   .slot-name {
     position: absolute;
     bottom: -18px;
@@ -910,6 +1070,7 @@
     width: 0%;
     height: 100%;
     background: linear-gradient(to right, #0000ff, #3333ff);
+    border-radius: 3px;
     transition: width 0.3s ease;
   }
 
@@ -947,6 +1108,7 @@
   .health-bar-fill {
     width: 100%;
     height: 100%;
+    border-radius: 3px;
     background: linear-gradient(to right, #ff0000, #ff3333);
     transition: width 0.3s ease;
   }
@@ -972,6 +1134,74 @@
     z-index: 1;
   }
 
+  .exp-bar {
+    width: 250px;
+    height: 20px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 3px;
+    box-shadow: 0 0 10px rgba(230, 190, 40, 0.3);
+    position: relative; /* Needed for absolute positioning of children */
+  }
+
+  .exp-bar-fill {
+    width: 0%;
+    height: 100%;
+    border-radius: 3px;
+    background: linear-gradient(to right, #e6be28, #f0cc40);
+    transition: width 0.3s ease;
+  }
+
+  .exp-icon {
+    position: absolute;
+    left: -5px;
+    top: 80%;
+    transform: translateY(-80%);
+    height: 60px;
+    width: 60px;
+    z-index: 1;
+  }
+
+  .exp-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 0.8em;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+    z-index: 1;
+  }
+
+  .exp-gain-indicator {
+    position: absolute;
+    z-index: 9999;
+    bottom: 100%; /* Start just above the bar */
+    left: 50%;
+    transform: translateX(-50%);
+    color: #e6be28; /* Match EXP bar color */
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+    pointer-events: none;
+    white-space: nowrap;
+    animation: expGainFadeUp 1.5s ease-out forwards;
+  }
+
+  @keyframes expGainFadeUp {
+    0% {
+      opacity: 0;
+      transform: translate(-50%, 10px); /* Start slightly lower and faded out */
+    }
+    20% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: translate(-50%, -30px); /* Move up and fade out */
+    }
+  }
+
   .item-label {
     background-color: rgba(0, 0, 0, 0.6);
     padding: 12px 20px;
@@ -1025,6 +1255,11 @@
     border-top: 8px solid rgba(0, 0, 0, 0.6);
   }
 
+  .player-rank-icon {
+    width: 48px;
+    height: 48px;
+  }
+
   .scope-overlay {
     position: fixed;
     top: 0;
@@ -1164,6 +1399,7 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
+    overflow-y: scroll;
   }
 
   .leaderboard-player {
@@ -1245,13 +1481,15 @@
   }
 
   body.mobile .shield-bar,
-  body.mobile .health-bar {
+  body.mobile .health-bar,
+  body.mobile .exp-bar {
     width: 120px;
     height: 16px;
   }
 
   body.mobile .shield-text,
-  body.mobile .health-text {
+  body.mobile .health-text,
+  body.mobile .exp-text {
     font-size: 0.7em;
   }
 
@@ -1261,6 +1499,11 @@
     height: 10px;
   }
 
+  body.mobile .exp-icon {
+    width: 35px;
+    height: 35px;
+  }
+
   body.mobile .leaderboard-title {
     font-size: 14px;
   }
@@ -1270,6 +1513,7 @@
   }
 
   body.mobile .leaderboard-players-count {
+    display: none;
     font-size: 12px;
   }
 
@@ -1291,6 +1535,10 @@
     font-size: 14px;
   }
 
+  body.mobile .exp-gain-indicator {
+    font-size: 12px;
+  }
+
   body.mobile div > canvas { /* hide three debugger panels */
     display: none !important;
   }
@@ -1335,4 +1583,17 @@
     width: 25px;
     height: 25px;
   }
+
+  body.mobile .rank-up-title {
+    font-size: 40px;
+  }
+
+  body.mobile .rank-up-icon {
+    width: 100px;
+    height: 100px;
+  }
+
+  body.mobile .rank-up-name {
+    font-size: 30px;
+  }
 </style>

package/examples/hygrounds/classes/ChestEntity.ts

@@ -47,6 +47,7 @@ export default class ChestEntity extends Entity {
       uri: 'audio/sfx/chest-open-2.mp3',
       volume: 0.7,
       referenceDistance: 8,
+      cutoffDistance: 20,
     });
   }