Merge pull request #61 from deco-finter/feat/tutorial-style

Tutorial styles
deco-finter · Oct 10, 2021 · bef451f · bef451f
2 parents 54b20f2 + 7ba394d
commit bef451f
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 35 deletions.
diff --git a/fableous-fe/src/constant.ts b/fableous-fe/src/constant.ts
@@ -1,3 +1,5 @@
+import { Styles } from "react-joyride";
+import { colors } from "./colors";
 import { proto as pb } from "./proto/message_pb";
 
 export enum ToolMode {
@@ -35,3 +37,19 @@ export const ROLE_ICON = {
     text: "Background",
   },
 };
+
+export const TUTORIAL_STYLE: Styles = {
+  options: {
+    primaryColor: colors.orange.main,
+    zIndex: 10000,
+  },
+  buttonNext: {
+    borderRadius: 18,
+  },
+  tooltip: {
+    borderRadius: 24,
+  },
+  spotlight: {
+    borderRadius: 48,
+  },
+};
diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx
@@ -33,7 +33,7 @@ import {
   protoToAchievement,
 } from "../components/achievement/achievement";
 import AchievementButton from "../components/achievement/AchievementButton";
-import { ROLE_ICON, ToolMode } from "../constant";
+import { ROLE_ICON, ToolMode, TUTORIAL_STYLE } from "../constant";
 import { ImperativeCanvasRef, TextShapeMap } from "../components/canvas/data";
 import CanvasToolbar from "../components/canvas/CanvasToolbar";
 import {
@@ -240,12 +240,12 @@ export default function ControllerCanvasPage() {
     setIsDone(true);
   };
 
-  const commonTutorialSteps: Step[] = useMemo(
+  const commonPreTutorialSteps: Step[] = useMemo(
     () => [
       {
         target: `#${TutorialTargetId.NavbarTutorial}`,
         content:
-          "Do you want to go through the tutorial? You can access it anytime by clicking the help icon.",
+          "Do you want to go through the tutorial? You can access it anytime by clicking this Tutorial button.",
         placement: "bottom",
         disableBeacon: true,
         // wierdly, close behavior is like next step, unsure on how to fix it
@@ -254,15 +254,15 @@ export default function ControllerCanvasPage() {
       {
         target: `#${TutorialTargetId.ControllerTopChipRow}`,
         content:
-          "You will be assigned a role and collaboratively draw a story based on a theme.",
+          "You will be assigned a drawing role and collaboratively draw a story based on the given theme.",
         placement: "bottom",
         disableBeacon: true,
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.ControllerCanvas}`,
         content:
-          "You will only see your own drawing here, see teacher's hub screen for the combined drawing.",
+          "You will only see your own drawing here, look at the teacher's hub screen to see the combined drawing with the other roles.",
         placement: "center",
         disableBeacon: true,
         hideCloseButton: true,
@@ -275,35 +275,36 @@ export default function ControllerCanvasPage() {
     () => [
       {
         target: `#${TutorialTargetId.BrushTool}`,
-        content: "Use brush to draw",
+        content: "Use the Brush to draw. You can change the brush size too.",
         placement: "right",
         disableBeacon: true,
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.EraseTool}`,
-        content: "Use eraser to erase",
+        content: "Use the Eraser to erase your drawing.",
         placement: "right",
         disableBeacon: true,
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.FillTool}`,
-        content: "Use bucket to fill with selected colour",
+        content:
+          "Use the Bucket Tool to fill an area with the selected colour.",
         placement: "right",
         disableBeacon: true,
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.PaletteTool}`,
-        content: "Use palette to choose a colour",
+        content: "Use the Palette to select a colour.",
         placement: "right",
         disableBeacon: true,
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.UndoTool}`,
-        content: "Use undo to undo a recent action",
+        content: "Use Undo to revert the last action.",
         placement: "right",
         disableBeacon: true,
         hideCloseButton: true,
@@ -316,21 +317,23 @@ export default function ControllerCanvasPage() {
     () => [
       {
         target: `#${TutorialTargetId.TextTool}`,
-        content: "Use text to write a story using keyboard",
+        content:
+          "Use the Text Tool to write a story. Click on placed texts to edit them. You can also move the texts around by dragging them.",
         placement: "right",
         disableBeacon: true,
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.AudioTool}`,
-        content: "Use microphone to record a story",
+        content:
+          "Use the Microphone to record a story narration. Only your last recording will be used!",
         placement: "right",
         disableBeacon: true,
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.UndoTool}`,
-        content: "Use undo to undo a recent action",
+        content: "Use Undo to revert the last action.",
         placement: "right",
         disableBeacon: true,
         hideCloseButton: true,
@@ -339,12 +342,52 @@ export default function ControllerCanvasPage() {
     []
   );
 
+  const commonPostTutorialSteps: Step[] = useMemo(
+    () => [
+      {
+        target: `#${TutorialTargetId.AchievementButton}`,
+        content:
+          "You can see the story's achievement here. Try to achieve them all!",
+        placement: "top",
+        disableBeacon: true,
+        hideCloseButton: true,
+      },
+      {
+        target: `#${TutorialTargetId.HelpButton}`,
+        content:
+          "Click on the Help button if you need some help from your teacher.",
+        placement: "top",
+        disableBeacon: true,
+        hideCloseButton: true,
+      },
+      {
+        target: `#${TutorialTargetId.DoneButton}`,
+        content:
+          "Click on the Done button once you are done with your drawing.",
+        placement: "top",
+        disableBeacon: true,
+        hideCloseButton: true,
+      },
+    ],
+    []
+  );
+
   const tutorialSteps = useMemo(
     () =>
-      role === pb.ControllerRole.STORY
-        ? commonTutorialSteps.concat(storyTutorialSteps)
-        : commonTutorialSteps.concat(drawingTutorialSteps),
-    [role, commonTutorialSteps, storyTutorialSteps, drawingTutorialSteps]
+      commonPreTutorialSteps
+        .concat(
+          role === pb.ControllerRole.STORY
+            ? storyTutorialSteps
+            : drawingTutorialSteps
+        )
+        .concat(commonPostTutorialSteps),
+    [
+      role,
+      commonPreTutorialSteps,
+      commonPostTutorialSteps,
+      drawingTutorialSteps,
+      storyTutorialSteps,
+    ]
   );
 
   // setup event listeners on ws connection
@@ -439,11 +482,7 @@ export default function ControllerCanvasPage() {
         floaterProps={{
           disableAnimation: true,
         }}
-        styles={{
-          options: {
-            zIndex: 10000,
-          },
-        }}
+        styles={TUTORIAL_STYLE}
       />
       <div
         style={{
@@ -792,17 +831,20 @@ export default function ControllerCanvasPage() {
               chips={[
                 `Page ${currentPageIdx} of ${storyDetails?.pages || "-"}`,
                 <AchievementButton
+                  rootId={TutorialTargetId.AchievementButton}
                   achievements={achievements}
                   confetti
                   notify
                 />,
                 {
+                  id: TutorialTargetId.HelpButton,
                   icon: <Icon fontSize="small">pan_tool</Icon>,
                   label: "Help",
                   onClick: handleHelp,
                   disabled: helpCooldown,
                 } as ChipProps,
                 {
+                  id: TutorialTargetId.DoneButton,
                   icon: (
                     <Icon
                       fontSize="medium"

diff --git a/fableous-fe/src/containers/StoryDetailPage.tsx b/fableous-fe/src/containers/StoryDetailPage.tsx
@@ -34,6 +34,7 @@ import useContainRatio from "../hooks/useContainRatio";
 import { proto as pb } from "../proto/message_pb";
 import { TutorialTargetId } from "../tutorialTargetIds";
 import useTutorial from "../hooks/useTutorial";
+import { TUTORIAL_STYLE } from "../constant";
 
 const GALLERY_TUTORIAL_KEY = "galleryTutorial";
 export default function StoryDetailPage() {
@@ -107,51 +108,49 @@ export default function StoryDetailPage() {
     player.play();
   }, [audioPaths]);
 
-  const commonTutorialSteps: Step[] = useMemo(
+  const tutorialSteps: Step[] = useMemo(
     () => [
       {
         target: `#${TutorialTargetId.NavbarTutorial}`,
         content:
-          "Do you want to go through the tutorial? You can access it anytime by clicking the help icon.",
+          "Do you want to go through the tutorial? You can access it anytime by clicking this Tutorial button.",
         placement: "bottom",
         disableBeacon: true,
         // wierdly, close behavior is like next step, unsure on how to fix it
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.Image}`,
-        content: "You will see the result of tbe combined drawing here.",
+        content: "The combined drawing is shown here.",
         placement: "center",
         disableBeacon: true,
-        // wierdly, close behavior is like next step, unsure on how to fix it
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.ImageButton}`,
         content:
-          "You will see the list of the pages here, click on one to show larger version.",
+          "You will see the list of the pages here, click on one of them to jump to that page.",
         placement: "right",
         disableBeacon: true,
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.AchievementButton}`,
-        content: "You can see this story achievement here.",
+        content: "You can see the story's achievements here.",
         placement: "top",
         disableBeacon: true,
         hideCloseButton: true,
       },
       {
         target: `#${TutorialTargetId.AudioTool}`,
-        content: "You can access this story audio here.",
+        content: "You can play this story's narration audio here.",
         placement: "top",
         disableBeacon: true,
         hideCloseButton: true,
       },
     ],
     []
   );
-  const tutorialSteps = commonTutorialSteps;
 
   useEffect(() => {
     executeGetClassroomDetail();
@@ -201,11 +200,7 @@ export default function StoryDetailPage() {
         floaterProps={{
           disableAnimation: true,
         }}
-        styles={{
-          options: {
-            zIndex: 10000,
-          },
-        }}
+        styles={TUTORIAL_STYLE}
       />
       <div
         className="flex flex-col absolute w-full"

diff --git a/fableous-fe/src/tutorialTargetIds.ts b/fableous-fe/src/tutorialTargetIds.ts
@@ -13,4 +13,6 @@ export enum TutorialTargetId {
   ImageButton = "galleryImageList",
   Image = "imageDisplay",
   AchievementButton = "toolbarIcon-achievement",
+  HelpButton = "canvasToolbarIcon-help",
+  DoneButton = "canvasToolbarIcon-done",
 }