@hytopia.com/examples 1.0.50 → 1.0.51

package/hygrounds/assets/ui/index.html

@@ -33,8 +33,36 @@
 <!-- Leaderboard -->
 <div class="leaderboard">
   <div class="leaderboard-title">Deathmatch</div>
-  <div class="leaderboard-timer">0:00</div>
-  <div class="leaderboard-players-count">Players: 0</div>
+  <div class="leaderboard-info-row">
+    <div class="leaderboard-timer">
+      <img src="{{CDN_ASSETS_URL}}/icons/clock.png" alt="Timer" class="leaderboard-info-icon">
+      <span class="leaderboard-timer-value">0:00</span>
+    </div>
+    <div class="leaderboard-players-count">
+      <img src="{{CDN_ASSETS_URL}}/icons/player.png" alt="Players" class="leaderboard-info-icon">
+      <span class="leaderboard-player-count-value">0</span>
+    </div>
+  </div>
+  <div class="leaderboard-mobile-summary">
+    <div class="leaderboard-summary-entry summary-top">
+      <div class="summary-label-with-icon">
+        <img src="{{CDN_ASSETS_URL}}/icons/crown-gold.png" class="summary-crown" alt="Top player">
+        <span class="summary-name summary-top-name">—</span>
+      </div>
+      <span class="summary-kills summary-top-kills">0</span>
+    </div>
+    <div class="leaderboard-summary-entry summary-second">
+      <div class="summary-label-with-icon">
+        <img src="{{CDN_ASSETS_URL}}/icons/crown-silver.png" class="summary-crown" alt="Second player">
+        <span class="summary-name summary-second-name">—</span>
+      </div>
+      <span class="summary-kills summary-second-kills">0</span>
+    </div>
+    <div class="leaderboard-summary-entry summary-self">
+      <span class="summary-name summary-self-name">You</span>
+      <span class="summary-kills summary-self-kills">0</span>
+    </div>
+  </div>
   <div class="leaderboard-header">
     <div class="header-name">Player</div>
     <div class="header-kills">Kills</div>
@@ -62,15 +90,17 @@
       <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">
-      <div class="shield-text">0</div>
-    </div>
-    <div class="health-bar">
-      <div class="health-bar-fill"></div>
-      <img src="{{CDN_ASSETS_URL}}/icons/heart.png" alt="Health Icon" class="health-icon">
-      <div class="health-text">100</div>
+    <div class="health-shield-row">
+      <div class="health-bar">
+        <div class="health-bar-fill"></div>
+        <img src="{{CDN_ASSETS_URL}}/icons/heart.png" alt="Health Icon" class="health-icon">
+        <div class="health-text">100</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">
+        <div class="shield-text">0</div>
+      </div>
     </div>
   </div>
 </div>
@@ -176,6 +206,13 @@
   let gameEndTime = 0;
   let timerInterval;
   let isLoadExpUpdate = true; // Flag to track the first EXP update
+  let localPlayerUsername = '';
+  const summaryTopNameEl = document.querySelector('.summary-top-name');
+  const summaryTopKillsEl = document.querySelector('.summary-top-kills');
+  const summarySecondNameEl = document.querySelector('.summary-second-name');
+  const summarySecondKillsEl = document.querySelector('.summary-second-kills');
+  const summarySelfNameEl = document.querySelector('.summary-self-name');
+  const summarySelfKillsEl = document.querySelector('.summary-self-kills');
 
   function updateLeaderboard() {
     const leaderboardPlayers = document.querySelector('.leaderboard-players');
@@ -239,6 +276,35 @@
 
       leaderboardPlayers.appendChild(playerElement);
     });
+
+    updateLeaderboardSummary();
+  }
+
+  function updateLeaderboardSummary() {
+    if (
+      !document.body.classList.contains('mobile') ||
+      !summaryTopNameEl ||
+      !summaryTopKillsEl ||
+      !summarySecondNameEl ||
+      !summarySecondKillsEl ||
+      !summarySelfNameEl ||
+      !summarySelfKillsEl
+    ) {
+      return;
+    }
+
+    const entries = Object.entries(leaderboardKillCounts).sort((a, b) => b[1] - a[1]);
+    const [topName = '—', topKills = 0] = entries[0] ?? [];
+    const [secondName = '—', secondKills = 0] = entries[1] ?? [];
+    const yourName = localPlayerUsername || 'You';
+    const yourKills = localPlayerUsername ? (leaderboardKillCounts[localPlayerUsername] ?? 0) : 0;
+
+    summaryTopNameEl.textContent = topName || '—';
+    summaryTopKillsEl.textContent = `${topKills || 0} Kills`;
+    summarySecondNameEl.textContent = secondName || '—';
+    summarySecondKillsEl.textContent = `${secondKills || 0} Kills`;
+    summarySelfNameEl.textContent = yourName;
+    summarySelfKillsEl.textContent = `${yourKills || 0} Kills`;
   }
 
   function updateTimer() {
@@ -250,8 +316,10 @@
     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;
+    const timerValue = document.querySelector('.leaderboard-timer-value');
+    if (timerValue) {
+      timerValue.textContent = formattedTime;
+    }
 
     // Stop the timer when it reaches zero
     if (timeRemaining <= 0) {
@@ -549,21 +617,29 @@
     }
 
     if (type === 'leaderboard-sync') {
-      const { killCounts } = data;
+      const { killCounts, localPlayer } = data;
       leaderboardKillCounts = killCounts;
+      if (localPlayer) {
+        localPlayerUsername = localPlayer;
+      }
       updateLeaderboard();
     }
 
     if (type === 'leaderboard-update') {
-      const { username, killCount } = data;
+      const { username, killCount, localPlayer } = data;
       leaderboardKillCounts[username] = killCount;
+      if (localPlayer) {
+        localPlayerUsername = localPlayer;
+      }
       updateLeaderboard();
     }
 
     if (type === 'players-count') {
       const { count } = data;
-      const playersCount = document.querySelector('.leaderboard-players-count');
-      playersCount.textContent = `Players: ${count}`;
+      const playersCount = document.querySelector('.leaderboard-player-count-value');
+      if (playersCount) {
+        playersCount.textContent = count;
+      }
     }
 
     if (type === 'materials') {
@@ -1141,6 +1217,7 @@
     border-radius: 3px;
     box-shadow: 0 0 10px rgba(230, 190, 40, 0.3);
     position: relative; /* Needed for absolute positioning of children */
+    text-align: center;
   }
 
   .exp-bar-fill {
@@ -1358,6 +1435,7 @@
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     border: 2px solid rgba(255, 255, 255, 0.2);
     z-index: 100;
+    pointer-events: none;
   }
 
   .leaderboard-title {
@@ -1372,17 +1450,36 @@
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
   }
 
-  .leaderboard-timer {
-    text-align: center;
-    font-size: 16px;
-    font-weight: bold;
+.leaderboard-info-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
     margin-bottom: 10px;
-    padding: 3px;
+  }
+
+  .leaderboard-info-row .leaderboard-timer,
+  .leaderboard-info-row .leaderboard-players-count {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 3px;
+    padding: 3px 6px;
+    height: 20px;
+    font-size: 15px;
+    font-weight: bold;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
   }
 
+  .leaderboard-info-icon {
+    width: 14px;
+    height: 14px;
+    object-fit: contain;
+    display: block;
+  }
+
   .leaderboard-header {
     display: flex;
     justify-content: space-between;
@@ -1450,50 +1547,107 @@
     display: none;
   }
 
+.leaderboard-mobile-summary {
+  display: none;
+  gap: 4px;
+}
+
+.leaderboard-summary-entry {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 10px;
+}
+
+.summary-label-with-icon {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.summary-crown {
+  width: 12px;
+  height: 12px;
+}
+
+.leaderboard-summary-entry .summary-name {
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  font-size: 10px;
+}
+
+.leaderboard-summary-entry .summary-kills {
+  font-size: 11px;
+}
+
   /* Mobile UI */
   body.mobile .hud {
+    top: 15px;
     left: 50%;
     transform: translateX(-50%);
-    bottom: 35px;
+    bottom: auto;
     right: auto;
   }
 
   body.mobile .inventory-hud {
-    bottom: 30px;
+    bottom: 28px;
+    left: 24px;
+    right: auto;
+    top: auto;
+    transform: none;
+    display: flex;
+    gap: 10px;
   }
 
   body.mobile .inventory-slot {
-    width: 45px;
-    height: 45px;
-  }
-
-  body.mobile .slot-number {
-    font-size: 12px;
-    top: -16px;
+    width: 50px;
+    height: 50px;
   }
 
+  body.mobile .slot-number,
   body.mobile .slot-name {
-    font-size: 8px;
-    bottom: -14px;
+    display: none;
   }
 
   body.mobile .slot-quantity {
     font-size: 10px;
   }
 
-  body.mobile .shield-bar,
-  body.mobile .health-bar,
   body.mobile .exp-bar {
+    width: 160px;
+    height: 16px;
+    margin-bottom: 8px;
+  }
+
+  body.mobile .exp-text {
+    font-size: 0.7em;
+  }
+
+  body.mobile .shield-bar,
+  body.mobile .health-bar {
     width: 120px;
     height: 16px;
   }
 
   body.mobile .shield-text,
-  body.mobile .health-text,
-  body.mobile .exp-text {
+  body.mobile .health-text {
     font-size: 0.7em;
   }
 
+  body.mobile .info-container {
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  body.mobile .health-shield-row {
+    display: flex;
+    gap: 10px;
+  }
+
   body.mobile .shield-icon,
   body.mobile .health-icon {
     width: 10px;
@@ -1505,31 +1659,57 @@
     height: 35px;
   }
 
+  body.mobile .leaderboard {
+    top: 20px;
+    right: 20px;
+    width: 180px;
+    max-height: none;
+    z-index: 120;
+  }
+
   body.mobile .leaderboard-title {
     font-size: 14px;
   }
 
-  body.mobile .leaderboard-timer {
-    font-size: 12px;
+  body.mobile .leaderboard-timer,
+  body.mobile .leaderboard-players-count {
+    font-size: 11px;
+    padding: 3px 4px;
   }
 
-  body.mobile .leaderboard-players-count {
-    display: none;
-    font-size: 12px;
+  body.mobile .leaderboard-mobile-summary {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
   }
 
-  body.mobile .leaderboard-header {
-    font-size: 10px;
+  body.mobile .leaderboard-info-row {
+    margin-bottom: 0px;
+  }
+
+  body.mobile .leaderboard-mobile-summary .leaderboard-summary-entry:last-child {
+    margin-bottom: 0;
+  }
+
+  body.mobile .leaderboard-header,
+  body.mobile .leaderboard-players {
+    display: none;
   }
 
   body.mobile .leaderboard-player {
     font-size: 10px;
   }
 
+  body.mobile .materials-amount {
+    font-size: 14px;
+  }
+
   body.mobile .materials-counter {
-    right: 20px;
-    bottom: 115px;
-    font-size: 12px;
+    left: 24px;
+    bottom: 90px;
+    top: auto;
+    right: auto;
+    font-size: 10px;
   }
 
   body.mobile .floating-number {
@@ -1545,31 +1725,34 @@
   }
 
   body.mobile .mobile-buttons-container {
-    display: flex;
-    gap: 10px;
+    display: block;
     position: fixed;
-    bottom: 113px;
-    right: 118px;
+    bottom: 30px;
+    right: 50px;
+    width: 250px;
+    height: 230px;
     user-select: none;
-    pointer-events: auto !important;
+    pointer-events: none;
+    z-index: 1000;
   }
 
   body.mobile .mobile-button {
-    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.55);
     border-radius: 50%;
     align-items: center;
     justify-content: center;
     display: flex;
-    width: 45px;
-    height: 45px;
+    width: 56px;
+    height: 56px;
     -webkit-tap-highlight-color: transparent;
-    touch-action: none;
+    touch-action: manipulation;
     user-select: none;
     transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: transform, background-color;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
     font-family: 'Inter', sans-serif;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: bold;
     color: rgba(255, 255, 255, 0.8);
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
@@ -1583,8 +1766,48 @@
   }
 
   body.mobile .mobile-button img {
-    width: 25px;
-    height: 25px;
+    width: 22px;
+    height: 22px;
+  }
+
+  body.mobile #mobile-attack-button {
+    width: 100px;
+    height: 100px;
+    bottom: 0;
+    right: 0;
+  }
+
+  body.mobile #mobile-attack-button img {
+    width: 40px;
+    height: 40px;
+  }
+
+  body.mobile #mobile-jump-button {
+    width: 66px;
+    height: 66px;
+    bottom: 110px;
+    right: -10px;
+  }
+
+  body.mobile #mobile-place-block-button {
+    width: 62px;
+    height: 62px;
+    bottom: -20px;
+    right: 105px;
+  }
+
+  body.mobile #mobile-interact-button {
+    width: 58px;
+    height: 58px;
+    bottom: 50px;
+    right: 110px;
+  }
+
+  body.mobile #mobile-reload-button {
+    width: 58px;
+    height: 58px;
+    bottom: 100px;
+    right: 65px;
   }
 
   body.mobile .rank-up-title {

package/hygrounds/classes/BotPlayerEntity.ts

@@ -17,9 +17,9 @@ import GunEntity from './GunEntity';
 import ItemEntity from './ItemEntity';
 import { SPAWN_REGION_AABB } from '../gameConfig';
 
-const AIM_JITTER_RADIANS = 0.035;
-const AIM_JITTER_RANDOM_MIN_SCALE = 0.75;
-const AIM_JITTER_RANDOM_MAX_SCALE = 2.1;
+const AIM_JITTER_RADIANS = 0.055;
+const AIM_JITTER_RANDOM_MIN_SCALE = 0.6;
+const AIM_JITTER_RANDOM_MAX_SCALE = 2.6;
 const MELEE_ATTACK_RANGE = 2.4;
 const PICKAXE_SLOT_INDEX = 0;
 const LOOT_INTERACT_RANGE = 1.5;
@@ -28,6 +28,7 @@ const NAVIGATION_MIN_PROGRESS = 0.35;
 const MAX_VERTICAL_TARGET_DELTA = 12;
 const MELEE_LOOT_OPPORTUNITY_RANGE = 8;
 const BEHAVIOR_LOCK_MS = 450;
+const REACTION_DELAY_MS = 180;
 const ENEMY_RETARGET_COOLDOWN_MS = 750;
 const ENEMY_LOST_GRACE_MS = 1400;
 const LOOT_RETARGET_COOLDOWN_MS = 550;
@@ -194,7 +195,7 @@ class BotStubPlayer extends EventRouter {
 export default class BotPlayerEntity extends GamePlayerEntity {
   private static readonly _botsByWorld: Map<number, Set<BotPlayerEntity>> = new Map();
   private static readonly _activeWorlds: Set<number> = new Set();
-  private static readonly _maxBots = 5 + Math.floor(Math.random() * 4); // 5-8 inclusive
+  private static readonly _maxBots = 50; //5 + Math.floor(Math.random() * 4); // 5-8 inclusive
 
   public static ensureForWorld(world: World): void {
     const bots = this._botsByWorld.get(world.id) ?? new Set<BotPlayerEntity>();
@@ -292,6 +293,7 @@ export default class BotPlayerEntity extends GamePlayerEntity {
   private _lootForgetAt = 0;
   private _activeLootTargetId: number | undefined;
   private _lootOverrideUntil = 0;
+  private _nextReactionAt = 0;
 
   private constructor(driver: BotStubPlayer) {
     super(driver as unknown as Player);
@@ -552,6 +554,7 @@ export default class BotPlayerEntity extends GamePlayerEntity {
         this._enemyForgetAt = now + ENEMY_LOST_GRACE_MS;
         this._blockBreakTarget = undefined;
         this._blockBreakExpiresAt = 0;
+        this._nextReactionAt = now + REACTION_DELAY_MS + Math.random() * REACTION_DELAY_MS;
       }
 
       return;
@@ -562,6 +565,7 @@ export default class BotPlayerEntity extends GamePlayerEntity {
       (!current.isSpawned || current.isDead || now > this._enemyForgetAt)
     ) {
       this._targetEnemy = undefined;
+      this._nextReactionAt = 0;
     }
   }
 
@@ -676,6 +680,11 @@ export default class BotPlayerEntity extends GamePlayerEntity {
 
     const enemyPosition = this._targetEnemy.position;
     const distance = Math.sqrt(this._distanceSq(this.position, enemyPosition));
+    if (performance.now() < this._nextReactionAt) {
+      this._facePosition(enemyPosition, true, AIM_JITTER_RADIANS);
+      return;
+    }
+
     const gun = this._ensureBestWeaponEquipped();
 
     if (gun && gun.hasUsableAmmo()) {
@@ -786,7 +795,7 @@ export default class BotPlayerEntity extends GamePlayerEntity {
     const shouldJump = this._shouldAutoJump(target);
     if (shouldJump) {
       input.sp = true;
-      this._jumpRetryDebounceAt = performance.now() + 400;
+      this._jumpRetryDebounceAt = performance.now() + 550;
     } else if (!this._hasHeadroom() && this.playerController.isGrounded) {
       input.sp = true;
     }
@@ -795,7 +804,7 @@ export default class BotPlayerEntity extends GamePlayerEntity {
       this._strafe(0);
       if (this.playerController.isGrounded && performance.now() > this._jumpRetryDebounceAt) {
         input.sp = true;
-        this._jumpRetryDebounceAt = performance.now() + 400;
+        this._jumpRetryDebounceAt = performance.now() + 550;
       }
     }
 
@@ -806,7 +815,7 @@ export default class BotPlayerEntity extends GamePlayerEntity {
     const now = performance.now();
     if (now > this._strafeSwitchAt) {
       this._strafeDirection = this._strafeDirection === 1 ? -1 : 1;
-      this._strafeSwitchAt = now + 1000 + Math.random() * 750;
+      this._strafeSwitchAt = now + 1500 + Math.random() * 1200;
     }
 
     const input = this.player.input as PlayerInput;
@@ -816,7 +825,7 @@ export default class BotPlayerEntity extends GamePlayerEntity {
       input.a = true;
     }
 
-    if (deltaTimeMs > 0 && Math.random() < 0.02 && this.playerController.isGrounded) {
+    if (deltaTimeMs > 0 && Math.random() < 0.008 && this.playerController.isGrounded) {
       input.sp = true;
     }
   }
@@ -942,7 +951,7 @@ export default class BotPlayerEntity extends GamePlayerEntity {
     const now = performance.now();
     if (now > this._jumpRetryDebounceAt && this.playerController.isGrounded) {
       (this.player.input as PlayerInput).sp = true;
-      this._jumpRetryDebounceAt = now + 400;
+      this._jumpRetryDebounceAt = now + 550;
     }
 
     if (!this._blockBreakTarget) {
@@ -1058,7 +1067,7 @@ export default class BotPlayerEntity extends GamePlayerEntity {
 
     this.applyImpulse(impulse);
     (this.player.input as PlayerInput).sp = true;
-    this._jumpRetryDebounceAt = performance.now() + 450;
+    this._jumpRetryDebounceAt = performance.now() + 520;
 
     if (this._behaviorState === BotBehaviorState.LOOT) {
       this._targetLootEntity = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hytopia.com/examples",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "description": "",
   "license": "ISC",
   "author": "",