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โฆ
In a recent commit, the MOKSHA game's UI layout underwent significant restructuring. The Heads-Up Display (HUD), responsible for displaying essential information, was moved outside the primary game container and placed within a dedicated outer wrapper. This architectural change enhances visual separation and facilitates better scaling of the HUD and gameplay elements.
The changes encompassed various aspects of the game's codebase. In the HTML structure, a new #moksha-outer wrapper was introduced, encompassing both the HUD overlay and the game container itself. The HUD rows were reorganized to present Karma trio (punya, paap, prarabdha), gathered virtues, journey status indicators, and soul status symbols in a clear and organized manner.
Engine initialization in src/engine.js saw the addition of HUD_TOP_Y parameter, marking the gameplay boundary. The star and tunnel sparkle generation were updated to accommodate the HUD area, and Bug 6 was fixed by applying a time penalty multiplier to the prarabdha feature based on the game level.
The karma system received several critical fixes, including the correction of pendingGoodKarma tracking in rebirth logic and the capture of _hadPendingKarma before clearing to prevent missing prarabdha increments. Additionally, the Maya obstacle spawn positions were adjusted to account for the HUD offset.
Rendering and display were improved in src/render.js, where Bug 4 was addressed by counting only rendered cards, skipping faded or warning cards. Tunnel gradient stops were corrected for a smoother color transition, and canvas clipping was added to respect the HUD_TOP_Y boundary. The title and subtitle display in alert boxes were also fixed.
Localization updates in src/i18n.js added new alert strings for ashuvha (inauspicious karma strikes) in both Hindi and English. Styling updates in style.css converted the #ui-overlay from absolute to relative positioning, integrating it seamlessly with the game container. The canvas positioning and clipping region were updated, and the visual hierarchy and border continuity were enhanced.
Lastly, in src/main.js, HUD_TOP_Y was set to 0, as the HUD was now positioned outside the canvas area. The scaleGame() function was modified to calculate the total height including the HUD and apply the transform to the #moksha-outer wrapper, ensuring uniform scaling for both HUD and canvas. The audio pulse calculation was adjusted, and RAF IDs were properly stored for visibility API cleanup. A Shastra scroll loop cleanup was also performed.
The impact of these changes includes a better UI architecture, unified scaling for HUD and gameplay canvas, bug fixes related to prarabdha penalty, karma tracking, and alert stacking, improved mobile friendliness, and visual polish with smoother gradients and alert layering. In total, 7 files were modified, with 126 lines added and 100 lines deleted, resulting in a net change of +26 lines.
Written by urgent.news from Dev.to's reporting โ not their text. Machine-written โ it may contain errors, so check the original before relying on it.