Fixes to the Tutorial Card

#javascript #gamedev #webdev #tutorial

Devlog — commits 3b187b1…000 & 4319fe5…1de

Date: 2026-08-11

Author: pj90 (weirdcodesofficial)

Repo: weirdcodesofficial/MOKSHA — An HTML5 browser game based on Sanatan Shastras and Karmic philosophy.

Summary

UI/UX fixes for the tutorial card and renderer + lifecycle improvements.
Consolidated RAF loops and moved audio updates out of pure-render code.
Visual polish for resolved tutorial cards (green wash + progress).
Small i18n wording update for the “maya” tutorial.

Commits

1) 3b187b1b35ccfc62a2735a02ac7e2a77e6fc4000

Message: UI: Fixed position of Text content underneath the Close button on tutorial card. Closes #98

Date: 2026-08-11T21:13:28Z

Link: https://github.com/weirdcodesofficial/MOKSHA/commit/3b187b1b35ccfc62a2735a02ac7e2a77e6fc4000

Stats: +103 / -61 (total 164)

Files touched (high level):

src/main.js
- Removed duplicate gamepad assignment.
- Removed a separate RAF loop for continuous shaashtra scrolling and integrated shaashtra scroll updates into the main gameLoop (Fix A — closes redundant RAF, referenced Issue #64).
- Moved audio update calls (swaansa pulse, duck decay, ambient volumes) out of draw() into gameLoop so audio state updates run reliably each frame (Fix B).
src/render.js
- Added resolved-state visuals (subtle green wash, glow) for tutorial cards (Issue #92).
- Repositioned step counter and adjusted skip (✕) behavior: skip hidden/disabled while card is resolved.
- Reworked dismiss area: shows a ✓ label + countdown progress bar when card.resolved is true; otherwise shows the normal dismiss button.
- Visual polishing: shadows, rounded rects, layout tweaks.

Why it matters

Prevents tutorial text from being obscured by close/skip controls.
Removes extra RAF overhead and simplifies the update/render lifecycle.
Ensures audio-related state updates run even when visuals are paused or separated.
Makes the resolved tutorial state obvious and prevents accidental skipping.

2) 4319fe5591da3fd91793f7073889a238d6ef51de

Message: Tutorial: Updated tutorial text.

Date: 2026-08-11T21:28:52Z

Link: https://github.com/weirdcodesofficial/MOKSHA/commit/4319fe5591da3fd91793f7073889a238d6ef51de

Stats: +1 / -1 (total 2)

Files touched:

src/i18n.js
- Updated 'tutorial.maya.task' from:
- "ऊपर से गिरती वस्तु को स्पर्श करो.\nसुनहरी \"ॐ\" — नाम है, इसे ग्रहण करो।"
- to:
- "ऊपर से गिरती माया को समर्पित/संचित करो.\nसुनहरी \"ॐ\" — नाम है, इसे ग्रहण करो।"

Why it matters

Clarifies player action in the maya tutorial — from "touch falling object" to "dedicate/collect falling maya", aligning text with intended mechanics.

QA checklist / How to test

Tutorial card layout
- Open multiple tutorial cards at different resolutions; confirm text never overlaps Close/Skip controls.
Resolved flow
- Trigger a resolved tutorial card: confirm green wash + glow, ✓ label + countdown progress bar, and Skip hidden during resolve.
Shaashtra scroll
- Open the shaashtra panel and hold up/down: scrolling should be smooth and driven by the main gameLoop (no extra RAF).
Audio updates
- Pause the game visually and confirm swaansa pulse and ambient updates still run (audio state updates should remain consistent).
Regression checks
- Verify no new frame-rate or input regressions introduced by consolidating RAF and moving audio updates.

Notes on implementation details

shaashtraBody is cached and updated from inside gameLoop when engine.isShaashtraVisible is true.
Audio update calls:
- AM.setSwaansaPulse(...)
- AM.updateDuckDecay(...)
- AM.updateAmbientVolumes(...) are now executed each frame (outside the paused/blocked visual update block).
Renderer uses card.resolveProgress (0..1) to draw the resolved progress bar.