feat(tutorials) #119
feat(tutorials) #119
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces an in-app tutorials feature that allows users to browse and load ANSI art tutorials from classic scene artists. Additionally, it rewrites the menu controller to use a button-triggered dropdown pattern instead of the previous inline approach, and updates the modal controller with a new loading() method for displaying loading messages.
Key changes:
- New tutorials modal showcasing 23 hand-picked ANSI art tutorials with metadata and preview images
- Menu controller rewritten to use separate button and menu elements with hide/show toggle
- Modal controller enhanced with
loading()method for customizable loading messages - Removal of dedicated websocket modal in favor of generic loading modal
- Event handler signature changes (onClick now passes event as first parameter)
Reviewed Changes
Copilot reviewed 40 out of 90 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.js | Adds ansi directory to build output for tutorial files |
| src/index.html | Moves menu lists outside buttons, adds comprehensive tutorials modal with 23 entries |
| src/css/style.css | Updates menu styling for new structure, removes websocket modal styles, adds tutorials modal styles |
| src/js/client/ui.js | Rewrites menu controller API, adds modal loading() method, adds backdrop click handler |
| src/js/client/main.js | Implements fetchTutorial function and tutorials modal interactions |
| src/js/client/state.js | Exposes loadingFromStorage state property |
| src/js/client/network.js | Updates to use loading() method instead of websocket modal |
| src/js/client/canvas.js | Updates to use loading() method with callback pattern |
| tests/* | Updates all tests for new menu controller API and event handler signatures |
| src/img/tutorials/*.png | 23 tutorial preview images (binary files) |
|
src/js/client/main.js line 505 const removers = items.map(el =>
onClick(el, (_, target) => {
const tut = target.dataset && target.dataset.ansi;
if (tut) {
fetchTutorial(tut);
}
}));
onClick($('tutorialsCancel'), _ => {
removers.forEach(remove => remove());
});The tutorials modal button click handler stores removers in an array but never calls them when the modal is closed via the backdrop or other means. The removers should be called in tutorialsCancel click handler as well, or better yet, stored in a scope where they can be cleaned up when the modal closes. please help me implement this fix |
This PR introduces an in-app tutorials feature that allows users to browse and load ANSI art tutorials from classic scene artists. Additionally, it rewrites the menu controller to use a button-triggered dropdown pattern instead of the previous inline approach, and updates the modal controller with a new loading() method for displaying loading messages.
Key changes:
Removal of dedicated websocket modal in favor of generic loading modal