106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
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 [ 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);
|
|
}
|
|
}, [ gameQuery ]);
|
|
|
|
|
|
if(gameQuery.status === "pending"){
|
|
return (
|
|
<div>Loading...</div>
|
|
);
|
|
}
|
|
else if(gameQuery.status === "error"){
|
|
return (
|
|
<DangerMessage>Error: {gameQuery.error.message}</DangerMessage>
|
|
);
|
|
}
|
|
else if(gameQuery.status === "success" && gameQuery.data === undefined){
|
|
return (
|
|
<Navigate to="/game"/>
|
|
);
|
|
}
|
|
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 */}
|
|
{
|
|
tutorialsStatus.gameTutorialStatus === TutorialStatus.NOT_COMPLETED &&
|
|
<TutorialComponent
|
|
steps={gameTutorialSteps}
|
|
run={tutorialsStatus.gameTutorialStatus === TutorialStatus.NOT_COMPLETED}
|
|
showProgress={true}
|
|
showSkipButton={true}
|
|
continuous={true}
|
|
disableScrolling={true}
|
|
updateFunction={updateGameTutorialStatus}
|
|
/>
|
|
}
|
|
<GameHeader
|
|
game={game}
|
|
/>
|
|
<TabGroup
|
|
tabs={tabs}
|
|
/>
|
|
</main>
|
|
);
|
|
}
|
|
}
|