DEV Community

Cover image for Moved Hud outside
Weird Codes
Weird Codes

Posted on • Originally published at weirdcodes.itch.io

Moved Hud outside

#architecture #frontend #gamedev #ui

🎮 MOKSHA Devlog — Commit 175ee207

Author: Weird Codes

Date: August 8, 2026

Message: Moved Hud outside

📋 Summary

This commit restructures the MOKSHA UI layout by moving the HUD (Heads-Up Display) outside of the game container into a dedicated outer wrapper. This architectural change enables better scaling and visual separation between the HUD overlay and the canvas-based gameplay.

🔧 Changes Made

1. HTML Structure Refactoring (index.html)

  • Created a new #moksha-outer wrapper that contains both the HUD overlay and the game container
  • Moved HUD outside game container: The UI overlay (#ui-overlay) now sits above the canvas instead of being absolutely positioned within it
  • HUD rows reorganized:
    • Row 1: कर्म-त्रय (Karma trinity) — Punya (🌿), Paap (🥀), Prarabdha (📜)
    • Row 2: संग्रह (Gathered virtues) — Naama (ॐ), Kripa (✋), Shankha (🐚), Jyoti (🪔), Samarpita (🙏)
    • Row 3: यात्रा-स्थिति (Journey status) — Gatee (⚡), Swaansa (🌬️), Samaya (⏳)
    • Row 4: आत्म-स्थिति (Soul status) — Punarajanma (♻️), Chetana (😴), Drishti (☀️), Purnsamarpana (🤲)

2. Engine Initialization (src/engine.js)

  • Added HUD_TOP_Y parameter to init() method — marks the gameplay boundary
  • Updated star and tunnel sparkle generation to respect the HUD area
  • Fixed Bug 6: Prarabdha now applies a time penalty multiplier (×1.15 per level, capped at 3.0×) affecting how fast time drains — reflects the karmic burden in gameplay
  • Adjusted star respawn logic to prevent stars from appearing in HUD region

3. Karma System Fixes (src/karma.js)

  • Fixed Bug 5: Corrected pendingGoodKarma tracking in rebirth logic
    • Captured _hadPendingKarma before clearing to prevent missing prarabdha increments
    • Prevents false positive rebirth calculations
  • Updated Maya (obstacle) spawn positions to account for HUD offset

4. Rendering & Display (src/render.js)

  • Fixed Bug 4: Alert card stacking now counts only rendered cards (skips faded/warning cards)
    • Uses renderedCount instead of array index for proper layering
  • Corrected tunnel gradient stops (0, 0.25, 0.5, 0.75, 1.0) for smoother color transition
  • Added canvas clipping to respect HUD_TOP_Y boundary
  • Fixed title/subtitle display in alert boxes

5. Localization (src/i18n.js)

  • Added new alert strings for ashuvha (inauspicious karma strikes):
    • Hindi: 'पाप-प्रहार' / 'अशुभ कर्म से रथ आहत हुआ!'
    • English: 'Pāpa strikes' / 'The chariot was struck by inauspicious karma!'

6. Styling Updates (style.css)

  • Converted #ui-overlay from absolute positioning to relative positioning
    • Now part of normal document flow
    • Dark background (rgba(6,6,10,0.92)) with border
    • Seamlessly connects to game container below
  • Created #moksha-outer wrapper with flexbox column layout
  • Updated canvas positioning and clipping region
  • Improved visual hierarchy and border continuity

7. Game Logic Updates (src/main.js)

  • Set HUD_TOP_Y = 0 since HUD is now outside the canvas area
  • Fixed scaleGame() function to:
    • Calculate total height including HUD
    • Apply transform to #moksha-outer (not just gameContainer)
    • Ensures HUD and canvas scale uniformly
  • Improved audio pulse calculation (worldSwaansaPulse now matches render.js formula)
  • Stored RAF IDs properly for visibility API cleanup
  • Fixed Shastra scroll loop cleanup

🎯 Impact

✅ Better UI Architecture — HUD and gameplay canvas cleanly separated

✅ Unified Scaling — HUD + canvas scale together smoothly

✅ Bug Fixes — Prarabdha penalty, karma tracking, alert stacking corrected

✅ Mobile Friendly — Better viewport management with HUD offset

✅ Visual Polish — Smoother gradients and alert layering

📊 Stats

  • Files changed: 7
  • Total additions: 126 lines
  • Total deletions: 100 lines
  • Net change: +26 lines

Top comments (0)