Tutorial Working

src/pages/protected/GamePage.tsx

@@ -1,33 +1,39 @@
+import DangerMessage from "@/components/message/DangerMessage";
 import TabGroup, { Tab } from "@/components/tab/TabGroup";
+import TutorialComponent from "@/components/TutorialComponent";
 import { useGetGame } from "@/hooks/GameHooks";
+import { TutorialStatus } from "@/interface/AccountTutorialStatus";
 import { Game } from "@/interface/Game";
+import { useAuth } from "@/providers/AuthProvider";
 import GameCalendarDisplay from "@/ui/calendar/GameCalendarDisplay";
 import GameHeader from "@/ui/game/GameHeader";
 import GameClassDisplay from "@/ui/gameClass/GameClassDisplay";
 import RaidGroupsByGameDisplay from "@/ui/raidGroup/RaidGroupsByGameDisplay";
+import { gameTutorialSteps } from "@/util/TutorialUtil";
 import { useEffect, useState } from "react";
 import { Navigate, useParams } from "react-router";
 
 
 export default function GamePage(){
 	const { gameId } = useParams();
-	const tabs: Tab[] = [
-		{
-			tabHeader: "Calendar",
-			tabContent: <GameCalendarDisplay gameId={gameId!}/>
-		},
-		{
-			tabHeader: "Raid Groups",
-			tabContent: <RaidGroupsByGameDisplay gameId={gameId!}/>
-		},
-		{
-			tabHeader: "Classes",
-			tabContent: <GameClassDisplay gameId={gameId!}/>
-		}
-	];
-
 	const [ game, setGame ] = useState<Game>();
+	const { tutorialsStatus, setTutorialsStatus } = useAuth();
+
 	const gameQuery = useGetGame(gameId ?? "", false);
+
+
+	const updateGameTutorialStatus = () => {
+		const newTutorialsStatus = { ...tutorialsStatus };
+		if(tutorialsStatus.gameTutorialStatus === TutorialStatus.COMPLETED){
+			newTutorialsStatus.gameTutorialStatus = TutorialStatus.NOT_COMPLETED;
+		}
+		else if(tutorialsStatus.gameTutorialStatus === TutorialStatus.NOT_COMPLETED){
+			newTutorialsStatus.gameTutorialStatus = TutorialStatus.COMPLETED;
+		}
+		setTutorialsStatus(newTutorialsStatus);
+	}
+
+
 	useEffect(() => {
 		if(gameQuery.status === "success"){
 			setGame(gameQuery.data);
@@ -42,7 +48,7 @@ export default function GamePage(){
 	}
 	else if(gameQuery.status === "error"){
 		return (
-			<div>Error</div>
+			<DangerMessage>Error: {gameQuery.error.message}</DangerMessage>
 		);
 	}
 	else if(gameQuery.status === "success" && gameQuery.data === undefined){
@@ -51,10 +57,39 @@ export default function GamePage(){
 		);
 	}
 	else if(game){
+		const tabs: Tab[] = [
+			{
+				tabId: "calendarTab",
+				tabHeader: "Calendar",
+				tabContent: <GameCalendarDisplay gameId={gameId!}/>
+			},
+			{
+				tabId: "raidGroupsTab",
+				tabHeader: "Raid Groups",
+				tabContent: <RaidGroupsByGameDisplay gameId={gameId!}/>
+			},
+			{
+				tabId: "gameClassesTab",
+				tabHeader: "Classes",
+				tabContent: <GameClassDisplay gameId={gameId!}/>
+			}
+		];
+
+
 		return (
 			<main
 				className="flex flex-col items-center justify-center"
 			>
+				{/* Tutorials */}
+				<TutorialComponent
+					steps={gameTutorialSteps}
+					run={tutorialsStatus.gameTutorialStatus === TutorialStatus.NOT_COMPLETED}
+					showProgress={true}
+					showSkipButton={true}
+					continuous={true}
+					disableScrolling={true}
+					updateFunction={updateGameTutorialStatus}
+				/>
 				<GameHeader
 					game={game}
 				/>