12. JavaScript Architecture

12.1 Role of main.js

main.js powers the interactive elements after the page loads. It queries DOM nodes and attaches the click handlers for tabs, buttons, and other UI widgets.

12.2 Loading Data

The script uses the Fetch API to load JSON files and build the dungeon list. If you are new to Promises, review the basics of async/await first—it makes the code easier to follow.

12.3 Frequently Used Functions

• renderWorldButtons(): Creates the world buttons.
• renderDungeonDetails(): Populates the detail card for the selected dungeon.
• setupTabs(): Initialises tab switching behaviour.

12.4 Suggested Reading Order

1. Start with the constants defined at the top of main.js.
2. Review where event listeners are registered.
3. Step into the functions that those listeners call.

12.5 Debugging Tips

• Use console.log() to inspect variable values.
• Set breakpoints to trace execution flow.
• Adopt a linter to catch issues early.