Improved Tutorial and Animation Features #640

tomkoevoets · 2024-06-15T15:27:21Z

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 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.

Updated Tutorial.tsx: - added html element animation within the useLayoutEffect to highlight the tutorial steps - added the logic to delete the animation with each step Updated TutorialSteps.ts: - added new animationclass property as HighlightSelector - added highlighting to the first two steps

Updated Tutorial.tsx: - improved code efficiency in the useLayoutEffect - moved the css styling from inline to the animations.less file Updated TutorialSteps.ts: - updated the tutorial box for the 2nd step - updated highlighted element in the 2nd step Updated animations.less: - added the css for the glow animation for the tutorial highlighting

- added logic within the useLayoutEffect to delete the higlight effect when closing the tutorial

Improved tutorial/animation

Tutorial.tsx: - added logic to not immediately continue to the next step when a user executes the correct step Encounter.ts: - added NotifyTutorialOfAction import - added code to register to the tutorial that a creature is added TutorialSteps.ts: - deleted unused step - added await action to 1st step

steplogic hotfix: - a user can now click next when there is no mandatory action

TutorialSteps.ts: - added highlight, RaiseSelector and AwaitAction to step 3 - added comments for step clarity Encounter.ts - added NotifyTutorialOfAction to AddCombatantFromPersistentCharacter fun

LibraryReferencePanes: - added NotifyTutorialOfAction to register the encounter and spell tab beeing clicked. TutorialSteps: - added step 4,5,6,7 for the encounter and spell tab

- added step 10 and 11

- added logic to register the combatant-click to the tutorial for the AwaitAction fun

- added step 12 and 13

- added step 14, 15 , 16, 17 - added highlighting to all the tutorial elements

Improved tutorial/tutorial steps

- cleaned up the code of unnecessary comments and spaces

- picked the standard orange/yellow like color from a D&D statblock for the highlight color

…al-cleanup Improved tutorial/final tutorial cleanup

cynicaloptimist · 2024-06-16T07:39:28Z

client/Layout/SelectedCombatants.tsx

+
+  useEffect(() => {
+    if (selectedCombatants.length > 0) {
+      NotifyTutorialOfAction("combatant-click");


This should be switched to a CamelCased string, maybe something like "CombatantSelected"

cynicaloptimist · 2024-06-17T21:11:44Z

client/Tutorial/TutorialSteps.ts

+  // step 4 - select encounters tab
+  {
+    Message:
+      "Select the <strong>Encounters</strong> tab at the top of the library.",
+    RaiseSelector: ".c-tab:nth-child(3)",
+    AwaitAction: "SelectEncountersTab",
+    CalculatePosition: elements => {
+      const element = _.last(elements);
+      const location = getLocation(element);
+      const left = location.left + location.width + 10;
+      const top = location.top + 5;
+      return { left, top };
+    },
+    HighlightSelector: ".c-tab:nth-child(3)",
+  },
+  // step 5 - encounter tab explanation
+  {
+    Message:
+      "The Encounters tab is where you can <strong>save and load</strong> encounters.",
+    RaiseSelector: ".left-column",
+    CalculatePosition: elements => {
+      const element = _.last(elements);
+      const location = getLocation(element);
+      const left = location.left + location.width + 10;
+      const top = location.top + 5;
+      return { left, top };
+    },
+    HighlightSelector: ".libraries",
+  },
+  // step 6 - select spells tab
+  {
+    Message:
+      "Select the <strong>Spells</strong> tab at the top of the library.",
+    RaiseSelector: ".c-tab:nth-child(4)",
+    AwaitAction: "SelectSpellsTab",
+    CalculatePosition: elements => {
+      const element = _.last(elements);
+      const location = getLocation(element);
+      const left = location.left + location.width + 10;
+      const top = location.top + 5;
+      return { left, top };
+    },
+    HighlightSelector: ".c-tab:nth-child(4)",
+  },
+  // step 7 - spell tab explanation
+  {
+    Message:
+      "The Spells tab is where you can <strong>select and view</strong> spell information.",
+    RaiseSelector: ".left-column",
+    CalculatePosition: elements => {
+      const element = _.last(elements);
+      const location = getLocation(element);
+      const left = location.left + location.width + 10;
+      const top = location.top + 5;
+      return { left, top };
+    },
+    HighlightSelector: ".libraries",
  },


I don't think these steps need to be included in the basic tutorial. They may be distracting from the core functionality that we want to teach the users.

cynicaloptimist · 2024-06-17T21:14:14Z

client/Tutorial/Tutorial.tsx

  useEffect(() => {
    const subscription = NotifyTutorialOfAction.subscribe(action => {
      if (step.AwaitAction === action) {
-        advance();


Because we no longer auto-advance, this can lead to a soft lock in some cases. For instance, if you get to the ShowInitiativeDialog step, and the user dismisses the Initiative dialog before continuing to the next step, they'll soft lock on CompleteInitiativeRolls.

It might be good to add an AutoAdvance optional property to TutorialStep, that would apply the hold behavior (immediately advance). This would work for steps like "Click the Characters Tab" or "Click the Roll Initiative button"

cynicaloptimist · 2024-06-17T21:19:42Z

client/Tutorial/TutorialSteps.ts

+  // step 14 - view remove from encounter button
+  {
+    Message:
+      "The next button in the combatant action menu is the <strong>Remove from Encounter</strong> button. This button will remove the <strong>selected combatants</strong> from the encounter.",


Instead of 'The next button', you could just write 'This is the ...' since the UI is already drawing their attention here.

cynicaloptimist

I ran through the tutorial flow a couple of times, feels pretty good, I think this is overall an improvement! There are places where the HighlightSelector feels redundant with the RaiseSelector, like when we're looking at libraries. Consider scoping the HighlightSelector in a bit closer, or just removing it in this cases.

Excellent work, I think this is pretty close to ready. Consider applying my feedback here, feel free to open a conversation on anything you disagree with.

tomkoevoets and others added 16 commits June 11, 2024 18:08

Update Tutorial.tsx

63ec818

- added logic within the useLayoutEffect to delete the higlight effect when closing the tutorial

Merge pull request #1 from tomkoevoets/improved-tutorial/animation

19ba9eb

Improved tutorial/animation

Update Tutorial.tsx

7ef14bc

steplogic hotfix: - a user can now click next when there is no mandatory action

Update tutorial steps

b7ae6a5

TutorialSteps.ts: - added highlight, RaiseSelector and AwaitAction to step 3 - added comments for step clarity Encounter.ts - added NotifyTutorialOfAction to AddCombatantFromPersistentCharacter fun

Update tutorial steps

032fd08

LibraryReferencePanes: - added NotifyTutorialOfAction to register the encounter and spell tab beeing clicked. TutorialSteps: - added step 4,5,6,7 for the encounter and spell tab

Update TutorialSteps.ts

3c5ae6e

- added step 10 and 11

Update SelectedCombatants.tsx

63ab7d6

- added logic to register the combatant-click to the tutorial for the AwaitAction fun

Update TutorialSteps.ts

2bec36c

- added step 12 and 13

Finished tutorial steps

3d92cf2

- added step 14, 15 , 16, 17 - added highlighting to all the tutorial elements

Merge pull request #2 from tomkoevoets/improved-tutorial/tutorial-steps

894ca6e

Improved tutorial/tutorial steps

Update Tutorial classes

016ff3e

- cleaned up the code of unnecessary comments and spaces

Update animations.less

202bb35

- picked the standard orange/yellow like color from a D&D statblock for the highlight color

Merge pull request #3 from tomkoevoets/improved-tutorial/final-tutori…

be0e959

…al-cleanup Improved tutorial/final tutorial cleanup

cynicaloptimist reviewed Jun 16, 2024

View reviewed changes

cynicaloptimist reviewed Jun 17, 2024

View reviewed changes

cynicaloptimist requested changes Jun 17, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improved Tutorial and Animation Features #640

Improved Tutorial and Animation Features #640

tomkoevoets commented Jun 15, 2024

Uh oh!

cynicaloptimist Jun 16, 2024

Uh oh!

cynicaloptimist Jun 17, 2024

Uh oh!

cynicaloptimist Jun 17, 2024

Uh oh!

cynicaloptimist Jun 17, 2024

Uh oh!

cynicaloptimist Jun 17, 2024

Uh oh!

cynicaloptimist left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Improved Tutorial and Animation Features #640

Are you sure you want to change the base?

Improved Tutorial and Animation Features #640

Conversation

tomkoevoets commented Jun 15, 2024

Improved Tutorial and Animation Features 🚀

Key Enhancements:

Detailed Changes:

Updated Files:

Conclusion:

Uh oh!

cynicaloptimist Jun 16, 2024

Choose a reason for hiding this comment

Uh oh!

cynicaloptimist Jun 17, 2024

Choose a reason for hiding this comment

Uh oh!

cynicaloptimist Jun 17, 2024

Choose a reason for hiding this comment

Uh oh!

cynicaloptimist Jun 17, 2024

Choose a reason for hiding this comment

Uh oh!

cynicaloptimist Jun 17, 2024

Choose a reason for hiding this comment

Uh oh!

cynicaloptimist left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants