Add quests page (basic impl.)

src/handbook/src/backend/types.ts

@@ -1,4 +1,4 @@
-export type Page = "Home" | "Commands" | "Avatars" | "Items" | "Entities" | "Scenes";
+export type Page = "Home" | "Commands" | "Avatars" | "Items" | "Entities" | "Scenes" | "Quests" | "Achievements";
 export type Overlays = "None" | "ServerSettings";
 export type Days = "Sunday" | "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday";
 

src/handbook/src/css/pages/QuestsPage.scss

@@ -0,0 +1,14 @@
+.QuestsPage {
+    display: flex;
+    justify-content: space-between;
+
+    width: 100%;
+    height: 100%;
+}
+
+.QuestsPage_Selector {
+    display: flex;
+
+    width: 50%;
+    height: 100%;
+}

src/handbook/src/ui/pages/HomePage.tsx

@@ -33,8 +33,8 @@ class HomePage extends React.Component<any, any> {
                         <HomeButton name={"Items"} anchor={"Items"} icon={Icon_Inventory} />
                         <HomeButton name={"Entities"} anchor={"Entities"} icon={Icon_Tutorial_Monster} />
                         <HomeButton name={"Scenes"} anchor={"Scenes"} icon={Icon_Map} />
-                        <HomeButton name={"Quests"} anchor={"Home"} icon={Icon_Quests} />
+                        <HomeButton name={"Quests"} anchor={"Quests"} icon={Icon_Quests} />
-                        <HomeButton name={"Achievements"} anchor={"Home"} icon={Icon_Achievements} />
+                        <HomeButton name={"Achievements"} anchor={"Achievements"} icon={Icon_Achievements} />
                     </div>
                 </div>
 

src/handbook/src/ui/pages/QuestsPage.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import Tree, { RawNodeDatum } from "react-d3-tree";
+
+import PrimaryQuest from "@widgets/quest/PrimaryQuest";
+
+import "@css/pages/QuestsPage.scss";
+
+const defaultTree: RawNodeDatum = {
+    name: "No Quest Selected",
+    attributes: {
+        questId: -1
+    },
+    children: []
+};
+
+interface IState {
+    tree: RawNodeDatum | null;
+}
+
+class QuestsPage extends React.Component<{}, IState> {
+    constructor(props: {}) {
+        super(props);
+
+        this.state = {
+            tree: null
+        };
+    }
+
+    render() {
+        return (
+            <div className={"QuestsPage"}>
+                <div className={"QuestsPage_Selector"}>
+                    <PrimaryQuest quest={{
+                        id: 351,
+                        title: "Across the Sea"
+                    }} />
+                </div>
+
+                <div className={"QuestsPage_Tree"}>
+                    <Tree data={this.state.tree ?? defaultTree} />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default QuestsPage;

src/handbook/src/ui/views/Content.tsx

@@ -6,6 +6,7 @@ import AvatarsPage from "@pages/AvatarsPage";
 import ItemsPage from "@pages/ItemsPage";
 import EntitiesPage from "@pages/EntitiesPage";
 import ScenesPage from "@pages/ScenesPage";
+import QuestsPage from "@pages/QuestsPage";
 
 import type { Page } from "@backend/types";
 import { addNavListener, removeNavListener } from "@backend/events";
@@ -63,6 +64,8 @@ class Content extends React.Component<IProps, IState> {
                 return <EntitiesPage />;
             case "Scenes":
                 return <ScenesPage />;
+            case "Quests":
+                return <QuestsPage />;
         }
     }
 }

src/handbook/src/ui/views/SideBar.tsx

@@ -99,8 +99,8 @@ class SideBar extends React.Component<{}, IState> {
                         <SideBarButton name={"Items"} anchor={"Items"} icon={Icon_Inventory} />
                         <SideBarButton name={"Entities"} anchor={"Entities"} icon={Icon_Tutorial_Monster} />
                         <SideBarButton name={"Scenes"} anchor={"Scenes"} icon={Icon_Map} />
-                        <SideBarButton name={"Quests"} anchor={"Home"} icon={Icon_Quests} />
+                        <SideBarButton name={"Quests"} anchor={"Quests"} icon={Icon_Quests} />
-                        <SideBarButton name={"Achievements"} anchor={"Home"} icon={Icon_Achievements} />
+                        <SideBarButton name={"Achievements"} anchor={"Achievements"} icon={Icon_Achievements} />
                     </div>
 
                     <div className={"SideBar_Enter"}>