[FAB-133] HiFi Canvas Tutorial

[nicolauscg]

features

• tutorial for canvas drawing screen, steps includes:
  • mention of tutorial button in navbar to access it again
  • drawing follows theme and student is assigned a specific role (chip row above canvas)
  • can only see own drawing, to view combined drawing, see hub screen
  • explain each tool available to story and drawing roles
• remember when tutorial is accessed and do not automatically show prompt again for 1 day
• hide login, register, profile, logout button for student pages i.e. when url is /join
• fableous logo in navbar not clickable when student on drawing session

bugs found

• on short screens, when canvas toolbar y-axis overflows to scroll, its scroll position does not align when tutorial is explaining the brush tool
  • tried all props related to scroll and does not seem to change any behavior, so since this is a minor bug only present on small screens, can consider leaving it
• manually starting tutorial through navbar button shows first step of tutorial, which is asking "do you want to go through the tutorial?", its kinda akward
• tutorial step with center placement causes scrollbar to appear on canvas drawing screen

out of scope

• matching UI of tooltip to prototype, could be taken by Will for his gallery tutorial task
• review and finalising tutorial steps, wording

[daystram]

We could also hide the profile and logout button, and disable the Fableous logo button when the user is in the canvas page.

[nicolauscg]

We could also hide the profile and logout button, and disable the Fableous logo button when the user is in the canvas page.

good idea, at the moment I only hid login register buttons, will do the rest in a moment

[daystram]

This is also an apparent bug, viewport scrolls when tooltip appears

[nicolauscg]

previous two comments by Dan have been addressed

[daystram]

Rename localStorage.ts to storage.ts?

[daystram]

For the IDs in tutorialTargetIds.ts, how about making them all enums?

[daystram]

Other than that, all G

[daystram]

I can't figure out why the spotlight on the eraser button has no padding while the other has.

[daystram]

I wonder if the transition animation could be made less jerky than this

Screen.Recording.2021-10-04.at.1.32.45.am.mov

[daystram]

The tutorial should also be cancelled when the page state changes. Currently, if the drawing finishes or resets back to the form page, the tutorial overlay remains

[nicolauscg]

• renamed localStorage.ts to storage.ts, function names are still kept the same
• combined ids to one enum in tutorialTargetIds.ts
• fixed eraser icon to have same size with the rest, the inconsistency before was because there is no eraser icon in material ui, so I used one found on the internet
• disabled animation for tutorial tooltip, yes it does look weird
• tutorial will correctly close when controllerState changes

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
6 Code Smells

No Coverage information
0.0% Duplication