Joyride Tour

client/package.json

@@ -24,6 +24,7 @@
     "react-bootstrap-icons": "^1.10.3",
     "react-dom": "^18.2.0",
     "react-drawio": "^0.1.7",
+    "react-joyride": "^2.9.3",
     "react-json-editor-ajrm": "^2.5.14",
     "react-markdown": "^9.0.1",
     "react-remark": "^2.1.0",

client/src/components/AppShell.tsx

@@ -3,17 +3,22 @@ import NavigationBar from "./NavigationBar.tsx";
 import Footer from "./Footer.tsx";
 import { Navigate, useLocation } from "react-router-dom";
 import { Container } from "react-bootstrap";
+import { TourProvider } from "../context/TourContext";
+import { LandingTour } from "./LandingTour";
 
 function AppShell() {
   const location = useLocation();
   return (
-    <Container fluid className={"d-flex flex-column min-vh-100 p-0"}>
+    <TourProvider>
+      <LandingTour />
       <NavigationBar />
-      <Container className={"flex-grow-1 p-0"}>
-        {location.pathname === "/" ? <Navigate to={"/home"} /> : <Outlet />}
+      <Container fluid className={"d-flex flex-column min-vh-100 p-0"}>
+        <Container className={"flex-grow-1 p-0"}>
+          {location.pathname === "/" ? <Navigate to={"/home"} /> : <Outlet />}
+        </Container>
+        <Footer />
       </Container>
-      <Footer />
-    </Container>
+    </TourProvider>
   );
 }
 

client/src/components/EditorTour.tsx

@@ -0,0 +1,111 @@
+import { Step } from "react-joyride";
+import React from "react";
+import Joyride from "react-joyride";
+import { useTour } from "../context/TourContext";
+
+export const editorTourSteps: Step[] = [
+  {
+    target: "section.p-3",
+    content:
+      "Here's your challenge description. Make sure to read it carefully to understand what you need to implement.",
+    placement: "right",
+    disableScrolling: true,
+    disableBeacon: true,
+  },
+  {
+    target: ".react-flow",
+    content:
+      "This is your UML diagram workspace. Here, you can add nodes and connect them with edges.",
+    placement: "left",
+    disableScrolling: true,
+    disableBeacon: true,
+  },
+  {
+    target: ".add-node-buttons",
+    content:
+      "Add new class or interface nodes to your diagram by clicking on or dragging from these buttons.",
+    placement: "right",
+    disableScrolling: true,
+    disableBeacon: true,
+  },
+  {
+    target: "#arrowType",
+    content:
+      "Choose different relationship types for the edges you draw, and draw edges by clicking and dragging from the nodes.",
+    placement: "right",
+    disableScrolling: true,
+    disableBeacon: true,
+  },
+  {
+    target: ".delete-button",
+    content:
+      "Select an existing edge then click here or press the delete key to remove the edges from your diagram.",
+    placement: "right",
+    disableScrolling: true,
+    disableBeacon: true,
+  },
+  {
+    target: ".post-button",
+    content:
+      "Press this to submit your solution when ready. Your work is automatically saved so you can leave and come back any time.",
+    placement: "right",
+    disableScrolling: true,
+    disableBeacon: true,
+  },
+  {
+    target: ".reset-button",
+    content:
+      "This button allows you to clear the workspace to start over again.",
+    placement: "right",
+    disableScrolling: true,
+    disableBeacon: true,
+  },
+];
+
+interface EditorTourProps {
+  runTour: boolean;
+  setRunTour: (run: boolean) => void;
+}
+
+export const EditorTour: React.FC<EditorTourProps> = ({
+  runTour,
+  setRunTour,
+}) => {
+  const { tourType } = useTour();
+
+  const shouldRun = runTour && tourType === "editor";
+
+  return (
+    <Joyride
+      steps={editorTourSteps}
+      run={shouldRun}
+      continuous={true}
+      showProgress={true}
+      showSkipButton={true}
+      hideCloseButton={true}
+      styles={{
+        options: {
+          primaryColor: "#007bff",
+          zIndex: 1000,
+        },
+        tooltip: {
+          width: 450,
+        },
+      }}
+      floaterProps={{
+        disableAnimation: true,
+      }}
+      callback={(data) => {
+        const { status, action } = data;
+        if (
+          status === "finished" ||
+          status === "skipped" ||
+          action === "close"
+        ) {
+          setRunTour(false);
+        }
+      }}
+      disableScrolling={true}
+    />
+  );
+};

client/src/components/LandingTour.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import Joyride, { CallBackProps, STATUS, EVENTS } from "react-joyride";
+import { landingTourSteps } from "../config/landingTourSteps";
+import { useTour } from "../context/TourContext";
+
+export const LandingTour: React.FC = () => {
+  const navigate = useNavigate();
+  const { runTour, setRunTour, stepIndex, setStepIndex, tourType } = useTour();
+
+  const shouldRun = runTour && tourType === "landing";
+
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { status, type, index, action } = data;
+
+    if (type === EVENTS.STEP_AFTER) {
+      const nextStep = landingTourSteps[index + 1];
+      if (nextStep?.navPage) {
+        setTimeout(() => {
+          navigate(nextStep.navPage);
+        }, 300);
+      }
+      setStepIndex(index + 1);
+    }
+
+    if (
+      [STATUS.FINISHED, STATUS.SKIPPED].includes(status) ||
+      action === "close"
+    ) {
+      setRunTour(false);
+      setStepIndex(0);
+      navigate("/");
+    }
+  };
+
+  return (
+    <Joyride
+      steps={landingTourSteps}
+      run={shouldRun}
+      stepIndex={stepIndex}
+      continuous={true}
+      showProgress={true}
+      showSkipButton={true}
+      hideCloseButton={true}
+      styles={{
+        options: {
+          primaryColor: "#007bff",
+          zIndex: 1000,
+        },
+      }}
+      callback={handleJoyrideCallback}
+      disableScrolling={true}
+    />
+  );
+};

client/src/components/NavigationBar.tsx

@@ -1,18 +1,18 @@
-import { useState , useEffect} from 'react';
+import { useState, useEffect } from "react";
 import { Container, Nav, Navbar } from "react-bootstrap";
 import { useLocation, useNavigate } from "react-router-dom";
 import { PersonCircle } from "react-bootstrap-icons";
 import { NAV_CONFIG } from "../App.tsx";
-import NewUserPopup from './NewUserPopup'; // Make sure this path is correct
+import NewUserPopup from "./NewUserPopup"; // Make sure this path is correct
 import { QuestionCircle } from "react-bootstrap-icons";
-import { UserData } from '../types/UserData';
-import { useQuery } from '../hooks/useQuery.tsx';
+import { UserData } from "../types/UserData";
+import { useQuery } from "../hooks/useQuery.tsx";
 
 function NavigationBar() {
   const [showNewUserPopup, setShowNewUserPopup] = useState(false);
   const location = useLocation().pathname;
   const [username, setUsername] = useState<string | null>(null);
-  const [userRole, setUserRole] = useState<string | null>(null); 
+  const [userRole, setUserRole] = useState<string | null>(null);
   const navigate = useNavigate();
   const query = useQuery();
 
@@ -23,16 +23,19 @@ function NavigationBar() {
         if (!response.ok) {
           throw new Error(response.statusText);
         }
-        return response.json() as Promise<{username: string, role: string}>;
+        return response.json() as Promise<{ username: string; role: string }>;
       })
       .then((data) => {
         console.log("Fetched username: " + data.username);
         console.log("Fetched role: " + data.role);
         setUsername(data.username);
         setUserRole(data.role);
       })
-      .catch((err: Error) => { // Add the error type 'Error'
-        console.error("Failed fetching the username\nError message: " + err.message);
+      .catch((err: Error) => {
+        // Add the error type 'Error'
+        console.error(
+          "Failed fetching the username\nError message: " + err.message
+        );
       });
   }, [username]);
 
@@ -46,7 +49,7 @@ function NavigationBar() {
 
   return (
     <>
-      <Navbar expand="lg" className="bg-body-tertiary">
+      <Navbar expand="lg" className="bg-body-tertiary navbar">
         <Container>
           <Navbar.Brand href={"/"}>{NAV_CONFIG.brand}</Navbar.Brand>
           <Navbar.Toggle aria-controls="basic-navbar-nav" />
@@ -61,33 +64,62 @@ function NavigationBar() {
                   {route.name}
                 </Nav.Link>
               ))}
-              {
-                userRole === "admin" && 
-                  <>
-                    <Nav.Link
-                      onClick={() => navigate('/admin')}
-                      className={location === '/admin' ? 'text-primary' : ''}
-                    >
-                      Admin
-                    </Nav.Link>
-                    <Nav.Link onClick={() => {navigate("/challenges/add")}} className={location === "/challenges/add" ? "text-primary" : ""}>
-                      Add Challenge
-                    </Nav.Link>
-                    <Nav.Link onClick={() => {navigate("challenges/?hidden=true")}} className={(location === "/challenges/" && query.get("hidden") === "true") ? "text-primary" : ""}>
-                      Hidden Challenges  
-                    </Nav.Link> 
-                  </>
-
-              }
-            </Nav>
-            <Nav className="align-items-center">
-              {/* "NewUserPopup" button */}
-              <QuestionCircle size={20} onClick={toggleNewUserPopup} style={{ cursor: 'pointer' }} />
-              {/* Profile button */}
-              <Nav.Link onClick={handleProfileClick} className="d-flex align-items-center">
-                <PersonCircle size={20} className={location === NAV_CONFIG.profile.href ? "text-primary" : ""} />
-              </Nav.Link>
+              {userRole === "admin" && (
+                <>
+                  <Nav.Link
+                    onClick={() => navigate("/admin")}
+                    className={location === "/admin" ? "text-primary" : ""}
+                  >
+                    Admin
+                  </Nav.Link>
+                  <Nav.Link
+                    onClick={() => {
+                      navigate("/challenges/add");
+                    }}
+                    className={
+                      location === "/challenges/add" ? "text-primary" : ""
+                    }
+                  >
+                    Add Challenge
+                  </Nav.Link>
+                  <Nav.Link
+                    onClick={() => {
+                      navigate("challenges/?hidden=true");
+                    }}
+                    className={
+                      location === "/challenges/" &&
+                      query.get("hidden") === "true"
+                        ? "text-primary"
+                        : ""
+                    }
+                  >
+                    Hidden Challenges
+                  </Nav.Link>
+                </>
+              )}
             </Nav>
+            <div className="user-controls">
+              <Nav className="align-items-center">
+                {/* "NewUserPopup" button */}
+                <QuestionCircle
+                  size={20}
+                  onClick={toggleNewUserPopup}
+                  style={{ cursor: "pointer" }}
+                />
+                {/* Profile button */}
+                <Nav.Link
+                  onClick={handleProfileClick}
+                  className="d-flex align-items-center"
+                >
+                  <PersonCircle
+                    size={20}
+                    className={
+                      location === NAV_CONFIG.profile.href ? "text-primary" : ""
+                    }
+                  />
+                </Nav.Link>
+              </Nav>
+            </div>
           </Navbar.Collapse>
         </Container>
       </Navbar>