From 64ff3e6d439958dbd5b139910b048e40424446ed Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Sat, 9 Oct 2021 16:57:42 +1000 Subject: [PATCH 1/3] refactor: updated tutorial styles --- fableous-fe/src/constant.ts | 18 ++++++++++++++++++ .../src/containers/ControllerCanvasPage.tsx | 8 ++------ 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/fableous-fe/src/constant.ts b/fableous-fe/src/constant.ts index fb3d33f0..10b1b9cc 100644 --- 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 index 22984d9f..87c8184c 100644 --- 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 { @@ -439,11 +439,7 @@ export default function ControllerCanvasPage() { floaterProps={{ disableAnimation: true, }} - styles={{ - options: { - zIndex: 10000, - }, - }} + styles={TUTORIAL_STYLE} />
Date: Sun, 10 Oct 2021 12:31:36 +1000 Subject: [PATCH 2/3] refactor: updated story tutorial style --- fableous-fe/src/containers/StoryDetailPage.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/fableous-fe/src/containers/StoryDetailPage.tsx b/fableous-fe/src/containers/StoryDetailPage.tsx index ef38e689..5362e1db 100644 --- 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() { @@ -201,11 +202,7 @@ export default function StoryDetailPage() { floaterProps={{ disableAnimation: true, }} - styles={{ - options: { - zIndex: 10000, - }, - }} + styles={TUTORIAL_STYLE} />
Date: Sun, 10 Oct 2021 13:07:43 +1000 Subject: [PATCH 3/3] feat: updated tutorial texts, added help and done button tutorial steps --- .../src/containers/ControllerCanvasPage.tsx | 78 +++++++++++++++---- .../src/containers/StoryDetailPage.tsx | 14 ++-- fableous-fe/src/tutorialTargetIds.ts | 2 + 3 files changed, 70 insertions(+), 24 deletions(-) diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index 87c8184c..195eccd7 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -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,7 +254,7 @@ 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, @@ -262,7 +262,7 @@ export default function ControllerCanvasPage() { { 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 @@ -788,17 +831,20 @@ export default function ControllerCanvasPage() { chips={[ `Page ${currentPageIdx} of ${storyDetails?.pages || "-"}`, , { + id: TutorialTargetId.HelpButton, icon: pan_tool, label: "Help", onClick: handleHelp, disabled: helpCooldown, } as ChipProps, { + id: TutorialTargetId.DoneButton, icon: ( [ { 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 @@ -121,30 +121,29 @@ export default function StoryDetailPage() { }, { 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, @@ -152,7 +151,6 @@ export default function StoryDetailPage() { ], [] ); - const tutorialSteps = commonTutorialSteps; useEffect(() => { executeGetClassroomDetail(); diff --git a/fableous-fe/src/tutorialTargetIds.ts b/fableous-fe/src/tutorialTargetIds.ts index 076e22a5..0fd95134 100644 --- 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", }