App tour video

sadanandpai · Mar 30, 2024 · e45a492 · e45a492
1 parent 4ac37a9
commit e45a492
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 50 deletions.
diff --git a/public/assets/maze.mp4 b/public/assets/maze.mp4
diff --git a/public/assets/path.mp4 b/public/assets/path.mp4
diff --git a/src/apps/path-finder/components/app-tour/app-tour.tsx b/src/apps/path-finder/components/app-tour/app-tour.tsx
@@ -1,5 +1,7 @@
 import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
 import { useSetState } from 'react-use';
+import mazeVideo from '/assets/maze.mp4';
+import pathVideo from '/assets/path.mp4';
 
 interface State {
   run: boolean;
@@ -11,39 +13,51 @@ function AppTour() {
     run: false,
     steps: [
       {
-        content: <h2>Let`&apos;s begin our journey!</h2>,
+        content: (
+          <>
+            <h2>
+              You can click on the boxes or drag to add walls & clear them. Move
+              the start/end as per your wish
+            </h2>
+            <video autoPlay loop muted>
+              <source src={mazeVideo} type="video/mp4" />
+            </video>
+          </>
+        ),
         locale: { skip: <strong aria-label="skip">SKIP</strong> },
         placement: 'center',
         target: 'body',
       },
       {
-        content: <h2>Select the alogrithm to make patterns</h2>,
-        placement: 'right',
-        target: '.selectMaze',
-      },
-      {
-        content: <h2>Choose the speed</h2>,
-        target: '.selectSpeed',
-      },
-      {
-        content: <h2>It will Start making pattern</h2>,
-        target: '.buildPattern',
+        content: (
+          <h2>
+            Or you can select the alogrithm to generate mazes.
+            <br />
+            Customize the speed & play/reset as many times you wish.
+          </h2>
+        ),
+        placement: 'bottom',
+        target: '.select-maze',
       },
       {
         content: <h2>Choose the alogrithm for finding the path</h2>,
-        target: '.selectAlgo',
+        target: '.execution',
       },
       {
-        content: <h2>It will show visited cells</h2>,
-        target: '.visitedCell',
+        content: <h2>Analyse the path search details & compare</h2>,
+        target: '.path-info',
       },
       {
-        content: <h2>It will show the path length count</h2>,
-        target: '.pathLength',
-      },
-      {
-        content: <h2>It will show time taken by Algorithm</h2>,
-        target: '.timeTaken',
+        content: (
+          <>
+            <h2>You can move the start/end after search to see live results</h2>
+            <video autoPlay loop muted>
+              <source src={pathVideo} type="video/mp4" />
+            </video>
+          </>
+        ),
+        placement: 'center',
+        target: 'body',
       },
     ],
   });
@@ -67,25 +81,27 @@ function AppTour() {
 
   return (
     <>
-      <Joyride
-        callback={handleJoyrideCallback}
-        continuous
-        hideCloseButton
-        run={run}
-        showProgress
-        showSkipButton
-        steps={steps}
-        styles={{
-          options: {
-            zIndex: 100,
-            width: '300px',
-          },
-        }}
-      />
+      <div className="hidden">
+        <Joyride
+          callback={handleJoyrideCallback}
+          continuous
+          hideCloseButton
+          run={run}
+          showProgress
+          showSkipButton
+          steps={steps}
+          styles={{
+            options: {
+              zIndex: 100,
+              width: '300px',
+            },
+          }}
+        />
+      </div>
 
       <button
         onClick={handleClickStart}
-        className="border border-gray-400 rounded px-1 mx-2 hover:border-gray-500 hidden"
+        className="border border-gray-400 rounded px-1 mx-2 hover:border-gray-500"
       >
         Take Tour
       </button>

diff --git a/src/apps/path-finder/components/controller/execution.tsx b/src/apps/path-finder/components/controller/execution.tsx
@@ -83,9 +83,9 @@ function Execution({ defaultSpeed }: Props) {
   );
 
   return (
-    <div className={classes.execution}>
+    <div className={classes.execution + ' execution'}>
       <select
-        className={`${classes.pathFinder} selectAlgo`}
+        className={classes.pathFinder}
         name="path-finder"
         id="path-finder"
         value={pathFinder}

diff --git a/src/apps/path-finder/components/controller/operations.tsx b/src/apps/path-finder/components/controller/operations.tsx
@@ -45,13 +45,13 @@ function Operations({ defaultSpeed }: Props) {
     dispatch(setPathLength(0));
   }
   return (
-    <div className={classes.operation}>
+    <div className={classes.operation + ' select-maze'}>
       <select
         name="maze"
         id="maze"
         value={maze}
         onChange={handleChange}
-        className={`${classes.mazeSelector} selectMaze`}
+        className={classes.mazeSelector}
         disabled={disabled}
       >
         <option value="" disabled>
@@ -65,7 +65,7 @@ function Operations({ defaultSpeed }: Props) {
       </select>
 
       <select
-        className={`${classes.speed} selectSpeed`}
+        className={classes.speed}
         name="speed"
         id="speed"
         value={speed}
@@ -80,7 +80,7 @@ function Operations({ defaultSpeed }: Props) {
       </select>
 
       <button
-        className={`${classes.play} buildPattern`}
+        className={classes.play}
         data-testid="generate-maze"
         onClick={() => mazeClickHandler()}
         data-tooltip="Play"

diff --git a/src/apps/path-finder/components/controller/path-info.tsx b/src/apps/path-finder/components/controller/path-info.tsx
@@ -36,20 +36,20 @@ function PathInfo() {
   }, [status, startTimer, stopTimer, isRunning, resetTimer, dispatch]);
 
   return (
-    <div className={classes.pathInfo}>
-      <p className="visitedCell">
+    <div className={classes.pathInfo + ' path-info'}>
+      <p>
         Visits:{' '}
         <span className={classes.highlight} data-testid="visits">
           {visitedCellCount}
         </span>
       </p>
-      <p className="pathLength">
+      <p>
         Path:{' '}
         <span className={classes.highlight} data-testid="path">
           {pathLength}
         </span>
       </p>
-      <p className="timeTaken">
+      <p>
         Time:{' '}
         <span className={classes.highlight} data-testid="time">
           {time}

diff --git a/src/apps/path-finder/components/navbar/navbar.tsx b/src/apps/path-finder/components/navbar/navbar.tsx
@@ -1,7 +1,7 @@
-import classes from './navbar.module.scss';
-import CellInfo from '@pathFinder/components/cell-info/cell-info';
-import AppTour from '../app-tour/app-tour';
 import Title from '@/lib/components/title/title';
+import AppTour from '@pathFinder/components/app-tour/app-tour';
+import CellInfo from '@pathFinder/components/cell-info/cell-info';
+import classes from './navbar.module.scss';
 
 export interface Props {
   title: string;