This pull request introduces significant enhancements to the tutorial experience, focusing on animation improvements, step logic adjustments, and overall code cleanliness. The changes span across several components and one stylesheet, resulting in a more engaging and intuitive tutorial flow for users.
Key Enhancements:
Animation Improvements: Introduced HTML element animations within useLayoutEffect in Tutorial.tsx, enhancing the visual feedback for tutorial steps. These animations were defined in animations.less, ensuring consistency and maintainability across the project.
Step Logic Adjustments: Implemented logic to prevent immediate progression to the next step upon executing the correct action, improving the learning curve. This change was applied across various tutorial steps.
Code Cleanliness and Readability: Removed redundant comments and whitespace, and strategically added new comments where needed, significantly enhancing the codebase's maintainability and readability.
Expanded Tutorial Coverage: Introduced comprehensive steps for the encounter and spell tabs, as well as for the combat action menu, thereby broadening the tutorial's scope. Each step, including those for the combat action menu, offers detailed instructions and interactive elements to facilitate a smooth navigation through the application's features. Additionally, provided explanations for the active and selected combatant states to enhance user understanding.
Highlighting Enhancements: Applied consistent highlighting to tutorial elements, using a standardized color scheme inspired by D&D statblocks for a cohesive look and feel.
Detailed Changes:
Updated Files:
Tutorial.tsx:
Added logic for animation deletion on tutorial close.
Improved code efficiency within useLayoutEffect.
Integrated step logic to delay next-step progression until the correct action is executed.
TutorialSteps.ts:
Added new steps, covering advanced tutorial content.
Implemented highlighting for the steps.
Encounter.ts:
Registered actions such as adding a creature to the tutorial.
Integrated NotifyTutorialOfAction for relevant interactions.
SelectedCombatants.tsx:
Added combatant-click registration for the AwaitAction function.
LibraryReferencePanes.tsx:
Added click registration on the c-tabs (Characters, Encounters and Spells) for the AwaitAction function.
Animations.less:
Defined CSS for the glow animation, aligning with the chosen highlight color.
Conclusion:
These updates aim to elevate the tutorial experience by providing clearer guidance, more engaging visuals, and a cleaner codebase. I believe these changes will significantly enhance the onboarding process for new users, making it more enjoyable and informative.
Improved Tutorial and Animation Features 🚀
This pull request introduces significant enhancements to the tutorial experience, focusing on animation improvements, step logic adjustments, and overall code cleanliness. The changes span across several components and one stylesheet, resulting in a more engaging and intuitive tutorial flow for users.
Key Enhancements:
Animation Improvements: Introduced HTML element animations within
useLayoutEffectinTutorial.tsx, enhancing the visual feedback for tutorial steps. These animations were defined inanimations.less, ensuring consistency and maintainability across the project.Step Logic Adjustments: Implemented logic to prevent immediate progression to the next step upon executing the correct action, improving the learning curve. This change was applied across various tutorial steps.
Code Cleanliness and Readability: Removed redundant comments and whitespace, and strategically added new comments where needed, significantly enhancing the codebase's maintainability and readability.
Expanded Tutorial Coverage: Introduced comprehensive steps for the encounter and spell tabs, as well as for the combat action menu, thereby broadening the tutorial's scope. Each step, including those for the combat action menu, offers detailed instructions and interactive elements to facilitate a smooth navigation through the application's features. Additionally, provided explanations for the active and selected combatant states to enhance user understanding.
Highlighting Enhancements: Applied consistent highlighting to tutorial elements, using a standardized color scheme inspired by D&D statblocks for a cohesive look and feel.
Detailed Changes:
Updated Files:
Tutorial.tsx:
useLayoutEffect.TutorialSteps.ts:
Encounter.ts:
NotifyTutorialOfActionfor relevant interactions.SelectedCombatants.tsx:
AwaitActionfunction.LibraryReferencePanes.tsx:
AwaitActionfunction.Animations.less:
Conclusion:
These updates aim to elevate the tutorial experience by providing clearer guidance, more engaging visuals, and a cleaner codebase. I believe these changes will significantly enhance the onboarding process for new users, making it more enjoyable and informative.