Moved Hud outside

🎮 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: 26 lines

Comments

[Alexander]

Decoupling the DOM-based HUD from the canvas container is a massive architectural win for web game performance. Delegating the UI layout to the browser native CSS engine is vastly more efficient than manually calculating text and box coordinates inside a render loop. Passing that HUD boundary back into the initialisation method keeps the gameplay physics neatly sandboxed without tightly coupling the two presentation layers.

[Weird Codes]

All good on desktop browser but still struggling to optimize the performance on mobile. I think it's compressing the canvas on the mobile screen and that is making the pixel cordinates harder to maintain in game loop on mobile or maybe some more things pending to fix that i don't know yet while learning it. Any suggestion ? If you got a look on it?