@hytopia.com/examples 1.0.17 → 1.0.18

package/frontiers-rpg-game/assets/ui/hud.html

@@ -93,6 +93,20 @@
     <div class="hud-crosshair-vertical"></div>
   </div>
 
+  <!-- Mobile Control Buttons -->
+  <button class="hud-mobile-button" id="hud-attack-btn">
+    <img src="{{CDN_ASSETS_URL}}/icons/skills/combat.png" alt="Attack" class="hud-mobile-button-icon">
+  </button>
+  <button class="hud-mobile-button" id="hud-dodge-btn">
+    <img src="{{CDN_ASSETS_URL}}/icons/skills/agility.png" alt="Dodge" class="hud-mobile-button-icon">
+  </button>
+  <button class="hud-mobile-button" id="hud-jump-btn">
+    <img src="{{CDN_ASSETS_URL}}/icons/buttons/jump.png" alt="Jump" class="hud-mobile-button-icon">
+  </button>
+  <button class="hud-mobile-button" id="hud-interact-btn">
+    <img src="{{CDN_ASSETS_URL}}/icons/buttons/e-mobile.png" alt="Interact" class="hud-mobile-button-icon">
+  </button>
+
   <!-- Hotbar -->
   <div class="hud-hotbar-container">
     <div class="hud-hotbar-grid">
@@ -224,6 +238,17 @@
 
     // Setup death overlay respawn button
     document.getElementById('hud-death-respawn-btn').addEventListener('click', handleRespawn);
+    
+    // Setup mobile buttons
+    document.getElementById('hud-attack-btn').addEventListener('touchstart', handleAttackTap);
+    document.getElementById('hud-attack-btn').addEventListener('touchend', stopAutoAttack);
+    document.getElementById('hud-attack-btn').addEventListener('touchcancel', stopAutoAttack);
+    document.getElementById('hud-dodge-btn').addEventListener('touchstart', () => hytopia.pressInput('q', true));
+    document.getElementById('hud-dodge-btn').addEventListener('touchend', () => hytopia.pressInput('q', false));
+    document.getElementById('hud-jump-btn').addEventListener('touchstart', () => hytopia.pressInput('sp', true));
+    document.getElementById('hud-jump-btn').addEventListener('touchend', () => hytopia.pressInput('sp', false));
+    document.getElementById('hud-interact-btn').addEventListener('touchstart', () => hytopia.pressInput('e', true));
+    document.getElementById('hud-interact-btn').addEventListener('touchend', () => hytopia.pressInput('e', false));
   }
 
   function updateHudQuestCount(activeCount, completedCount) {
@@ -482,6 +507,49 @@
     }
   }
 
+  // Auto-attack system
+  let autoAttackInterval = null;
+  let lastTapTime = 0;
+
+
+  function handleAttackTap() {
+    const currentTime = Date.now();
+    
+    // Double tap detected (within 300ms)
+    if (currentTime - lastTapTime < 300 && lastTapTime > 0) {
+      stopAutoAttack();
+      hytopia.pressInput('mr', true);
+      setTimeout(() => hytopia.pressInput('mr', false), 100);
+      lastTapTime = 0;
+      return;
+    }
+    
+    // Single tap - start auto attack
+    lastTapTime = currentTime;
+    startAutoAttack();
+  }
+
+  function startAutoAttack() {
+    if (autoAttackInterval) return;
+    
+    // Immediate first attack
+    hytopia.pressInput('ml', true);
+    setTimeout(() => hytopia.pressInput('ml', false), 100);
+    
+    // Repeat every 500ms
+    autoAttackInterval = setInterval(() => {
+      hytopia.pressInput('ml', true);
+      setTimeout(() => hytopia.pressInput('ml', false), 100);
+    }, 500);
+  }
+
+  function stopAutoAttack() {
+    if (autoAttackInterval) {
+      clearInterval(autoAttackInterval);
+      autoAttackInterval = null;
+    }
+  }
+
   // Initialize HUD
   initializeHUD();
 
@@ -1407,181 +1475,312 @@
     }
   }
 
+  /* ============================================
+     MOBILE CONTROL BUTTONS
+     ============================================ */
+
+  .hud-mobile-button {
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(145deg, var(--hud-primary), var(--hud-secondary));
+    border: 2px solid var(--hud-border);
+    border-radius: 50%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+    transition: all var(--hud-transition);
+    box-shadow: var(--hud-box-shadow), var(--hud-inset-shadow);
+    pointer-events: auto;
+    
+    /* Mobile optimizations */
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+    outline: none;
+  }
+
+  /* Individual button positioning */
+  #hud-attack-btn {
+    bottom: 50px;
+    right: 70px;
+    height: 70px;
+    width: 70px;
+  }
+
+  #hud-dodge-btn {
+    bottom: 50px;
+    right: 155px;
+  }
+
+  #hud-jump-btn {
+    bottom: 130px;
+    right: 50px;
+  }
+
+  #hud-interact-btn {
+    bottom: 120px;
+    right: 130px;
+  }
+
+  .hud-mobile-button:active {
+    transform: scale(0.95);
+    box-shadow: var(--hud-box-shadow);
+  }
+
+  .hud-mobile-button-icon {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: contain;
+    opacity: 0.85;
+    transition: opacity var(--hud-transition);
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
+  }
+
+  .hud-mobile-button:active .hud-mobile-button-icon {
+    opacity: 1;
+  }
+
+
+
   /* ============================================
      MOBILE RESPONSIVE
      ============================================ */
 
-  @media (max-width: 768px) {
-    :root {
-      --hud-hotbar-size: 40px;
-      --hud-bar-height: 16px;
-      --hud-bar-width: 180px;
-      --hud-hotbar-gap: 6px;
-      --hud-status-gap: 3px;
-      --hud-clock-size: 12px;
-    }
+  body.mobile {
+    --hud-hotbar-size: 44px;
+    --hud-bar-height: 16px;
+    --hud-bar-width: 160px;
+    --hud-hotbar-gap: 5px;
+    --hud-status-gap: 10px;
+    --hud-clock-size: 10px;
+    --hud-actions-gap: 10px;
+  }
 
-    .hud-hotbar-container {
-      bottom: 16px;
-    }
+  /* Show mobile buttons only on mobile */
+  body.mobile .hud-mobile-button {
+    display: flex;
+  }
 
-    .hud-hotbar-grid {
-      padding: 8px;
-      border-radius: 8px;
-    }
+  body.mobile .hud-hotbar-container {
+    bottom: 8px;
+  }
 
-    .hud-status-container {
-      bottom: 70px;
-    }
+  body.mobile .hud-hotbar-grid {
+    padding: 8px;
+    border-radius: 8px;
+    gap: 4px;
+  }
 
-    .hud-clock-container {
-      top: 16px;
-      right: 16px;
-    }
+  body.mobile .hud-status-container {
+    bottom: 82px;
+    gap: 16px;
+  }
 
-    .hud-clock {
-      padding: 8px;
-    }
+  body.mobile .hud-clock-container {
+    top: 16px;
+    right: 16px;
+  }
 
-    .hud-hotbar-slot-content {
-      font-size: 12px;
-    }
+  body.mobile .hud-clock {
+    padding: 8px 10px;
+    border-radius: 8px;
+  }
 
-    .hud-hotbar-slot-icon {
-      width: 28px;
-      height: 28px;
-    }
+  body.mobile .hud-hotbar-slot {
+    border-radius: 8px;
+    border-width: 2px;
+  }
 
-    .hud-hotbar-slot-quantity {
-      font-size: 8px;
-      padding: 1px 3px;
-    }
+  body.mobile .hud-hotbar-slot-content {
+    font-size: 12px;
+  }
 
-    .hud-health-text,
-    .hud-exp-text {
-      font-size: 10px;
-    }
+  body.mobile .hud-hotbar-slot-icon {
+    width: 32px;
+    height: 32px;
+  }
 
-    .hud-exp-gain {
-      font-size: 12px;
-      left: calc(var(--hud-bar-width) + var(--hud-status-gap) + var(--hud-bar-width) / 2);
-    }
+  body.mobile .hud-hotbar-slot-quantity {
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+  }
 
-    .hud-action-buttons {
-      top: 60px;
-      right: 16px;
-    }
+  body.mobile .hud-health-bar,
+  body.mobile .hud-exp-bar {
+    border-radius: 8px;
+  }
 
-    .hud-action-button-icon {
-      width: 24px;
-      height: 24px;
-    }
+  body.mobile .hud-health-text,
+  body.mobile .hud-exp-text {
+    font-size: 10px;
+  }
 
-    .hud-action-tooltip {
-      display: none;
-    }
+  body.mobile .hud-exp-gain {
+    font-size: 12px;
+    left: calc(var(--hud-bar-width) + var(--hud-status-gap) + var(--hud-bar-width) / 2);
+  }
 
-    .hud-action-key-indicator {
-      width: 16px;
-      height: 16px;
-      top: -6px;
-      right: -6px;
-      font-size: 8px;
-    }
+  body.mobile .hud-action-buttons {
+    top: 55px;
+    right: 16px;
+    gap: 10px;
+  }
 
-    .hud-quest-count-indicator {
-      min-width: 14px;
-      height: 14px;
-      top: -6px;
-      left: -6px;
-      font-size: 8px;
-    }
+  body.mobile .hud-action-button {
+    width: 44px;
+    height: 44px;
+    border-radius: 8px;
+    border-width: 2px;
+  }
 
-    .hud-help-icon {
-      font-size: 18px;
-    }
+  body.mobile .hud-action-button-icon {
+    width: 44px;
+    height: 44px;
+  }
 
-    /* Notification Mobile Adjustments */
-    .hud-notification-container {
-      top: 60px;
-      right: 66px;
-      gap: 8px;
-    }
+  body.mobile .hud-action-tooltip {
+    display: none;
+  }
 
-    .hud-notification {
-      min-width: 160px;
-      max-width: 240px;
-      padding: 10px 12px;
-      font-size: 11px;
-    }
+  body.mobile .hud-action-key-indicator {
+    width: 16px;
+    height: 16px;
+    top: -6px;
+    right: -6px;
+    font-size: 8px;
+    border-radius: 6px;
+  }
 
-    .hud-notification-content {
-      gap: 8px;
-    }
+  body.mobile .hud-quest-count-indicator {
+    width: 16px;
+    height: 16px;
+    top: -6px;
+    left: -6px;
+    font-size: 9px;
+  }
 
-    .hud-notification-text {
-      font-size: 11px;
-    }
+  body.mobile .hud-help-notification-indicator {
+    width: 12px;
+    height: 12px;
+    top: -5px;
+    left: -5px;
+  }
 
-    .hud-crosshair-horizontal {
-      width: 8px;
-      left: -4px;
-    }
+  body.mobile .hud-help-icon {
+    font-size: 20px;
+  }
 
-    .hud-crosshair-vertical {
-      height: 8px;
-      top: -4px;
-    }
+  /* Notification Mobile Adjustments */
+  body.mobile .hud-notification-container {
+    top: 55px;
+    right: 70px;
+    gap: 8px;
+  }
 
-    /* Area Banner Mobile */
-    .hud-area-banner-text {
-      font-size: clamp(1.8rem, 10vw, 3rem);
-      letter-spacing: 0.05em;
-      margin: 0 0 4px 0;
-    }
+  body.mobile .hud-notification {
+    min-width: 160px;
+    max-width: 240px;
+    padding: 10px 12px;
+    font-size: 10px;
+    border-radius: 8px;
+  }
 
-    @keyframes underlineExpand {
-      to { 
-        width: min(300px, 85vw); 
-        opacity: 1; 
-      }
-    }
+  body.mobile .hud-notification-content {
+    gap: 8px;
+  }
 
-    /* Death Overlay Mobile */
-    .hud-death-content {
-      margin: 0 16px;
-      max-width: 90vw;
-    }
+  body.mobile .hud-notification-icon {
+    width: 14px;
+    height: 14px;
+    font-size: 10px;
+  }
 
-    .hud-death-title {
-      font-size: clamp(1.8rem, 10vw, 3.5rem);
-      margin: 0 0 4px 0;
-      letter-spacing: 0.05em;
-    }
+  body.mobile .hud-notification-text {
+    font-size: 10px;
+  }
 
-    .hud-death-subtitle {
-      font-size: clamp(0.8rem, 4vw, 1rem);
-      margin: 0 0 10px 0;
-    }
+  body.mobile .hud-crosshair-horizontal {
+    width: 10px;
+    height: 2px;
+    left: -5px;
+    top: -1px;
+  }
 
-    .hud-death-underline {
-      margin: 0 auto 20px auto;
-    }
+  body.mobile .hud-crosshair-vertical {
+    width: 2px;
+    height: 10px;
+    top: -5px;
+    left: -1px;
+  }
 
-    @keyframes deathUnderlineExpand {
-      to { 
-        width: min(200px, 80vw); 
-        opacity: 1; 
-      }
+  /* Area Banner Mobile */
+  body.mobile .hud-area-banner-text {
+    font-size: clamp(1.8rem, 9vw, 3rem);
+    letter-spacing: 0.05em;
+    margin: 0 0 4px 0;
+  }
+
+  body.mobile .hud-area-banner-underline {
+    height: 4px;
+  }
+
+  body.mobile .hud-area-banner.show .hud-area-banner-underline {
+    animation: underlineExpandMobile 1.2s ease-out 0.8s forwards;
+  }
+
+  @keyframes underlineExpandMobile {
+    to { 
+      width: min(300px, 80vw); 
+      opacity: 1; 
     }
+  }
+
+  /* Death Overlay Mobile */
+  body.mobile .hud-death-content {
+    margin: 0 16px;
+    max-width: 90vw;
+  }
+
+  body.mobile .hud-death-title {
+    font-size: clamp(1.8rem, 9vw, 3.5rem);
+    margin: 0 0 4px 0;
+    letter-spacing: 0.05em;
+  }
+
+  body.mobile .hud-death-subtitle {
+    font-size: clamp(0.8rem, 4vw, 1rem);
+    margin: 0 0 10px 0;
+  }
 
-    .hud-death-respawn-btn {
-      font-size: 12px;
-      padding: 10px 20px;
-      min-width: 100px;
+  body.mobile .hud-death-underline {
+    margin: 0 auto 18px auto;
+    height: 3px;
+  }
+
+  body.mobile .hud-death-overlay.show .hud-death-underline {
+    animation: deathUnderlineExpandMobile 1.2s ease-out 0.8s forwards;
+  }
+
+  @keyframes deathUnderlineExpandMobile {
+    to { 
+      width: min(220px, 75vw); 
+      opacity: 1; 
     }
   }
 
+  body.mobile .hud-death-respawn-btn {
+    font-size: 12px;
+    padding: 10px 20px;
+    min-width: 100px;
+    border-radius: 8px;
+  }
+
   /* ============================================
      HIGH DPI DISPLAYS
      ============================================ */