Moksha | Devlog #9 | Added Tutorial Button

Devlog #9 of Moksha game brought a significant update - the addition of a "See Guru-Diksha" tutorial button on the start screen. This enhancement addresses an important user experience issue, ensuring players can revisit the tutorial without needing to manually clear their localStorage settings.

The tutorial system had previously consisted of an 8-step scripture-style walk-through, complete with Sanskrit shlokas. The TutorialManager system would check for a localStorage key named 'moksha_tutorial_seen' to determine if the tutorial had been seen before. If it hadn't, the tutorial would automatically trigger upon the player's next visit.

However, this posed a problem when new players missed out on the tutorial or intentionally wanted to review it again. There was no UI pathway for them to follow, as the tutorial could only be triggered through the R key within the game itself.

To rectify this UX gap, the following changes were implemented in commit f0ae956:

1. In index.html, a new "See Guru-Diksha" button was added, with a disabled attribute that would be enabled only after audio and fonts fully loaded. This consistent behavior was mirrored by the start-btn, ensuring both readiness-gated elements.

2. The readiness gate in src/audio.js was updated to include the tutorial-btn, ensuring it would also become enabled along with the start-btn when the game transitions into high/low mode.

3. In src/main.js, the tutorial button's logic was added. When the game decides on the player's mode, both buttons would be unlocked simultaneously. The tutorialBtn element was given an event listener to remove the localStorage key 'moksha_tutorial_seen', trigger the start of the game, and remove the start screen. A 600ms ghost-click guard was implemented, similar to the existing startBtn functionality.

4. style.css was updated to provide a secondary outlined visual style for the tutorial-btn, with color, border, border-radius, and transition properties to give it a distinct look while maintaining a cohesive design with the rest of the UI. The button was styled differently from the start-btn, with an outlined/secondary appearance to maintain clear visual hierarchy.

5. The language toggle functionality was extended to the tutorial button. If the tutorialBtn element exists, its textContent would be updated to the appropriate button text based on the player's language preferences, ensuring the button text adapts accordingly like the rest of the UI components.

6. Bonus fixes were also included in this commit, such as correcting typos in variable names and weird codes, ensuring overall code cleanliness and functionality.

The decision to make the tutorial optional, rather than forcing players to review it upon starting the game, was intentional. It allows new players to gain context before diving into the gameplay, while granting returning players the freedom to choose whether or not to revisit the tutorial. This aligns with the Vedic principle of "गुरु के पास जाना choice है — पर जो जाता है, उसे ज्ञान मिलता है," reinforcing the idea that the player's choice to seek knowledge is empowering and beneficial.