mirror of
https://github.com/Grasscutters/Grasscutter.git
synced 2025-02-09 10:12:54 +08:00
Add quests page (basic impl.)
This commit is contained in:
parent
900d7fa200
commit
d9d7bff8f3
@ -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";
|
||||
|
||||
|
14
src/handbook/src/css/pages/QuestsPage.scss
Normal file
14
src/handbook/src/css/pages/QuestsPage.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.QuestsPage {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.QuestsPage_Selector {
|
||||
display: flex;
|
||||
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
@ -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={"Achievements"} anchor={"Home"} icon={Icon_Achievements} />
|
||||
<HomeButton name={"Quests"} anchor={"Quests"} icon={Icon_Quests} />
|
||||
<HomeButton name={"Achievements"} anchor={"Achievements"} icon={Icon_Achievements} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
48
src/handbook/src/ui/pages/QuestsPage.tsx
Normal file
48
src/handbook/src/ui/pages/QuestsPage.tsx
Normal file
@ -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;
|
@ -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 />;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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={"Achievements"} anchor={"Home"} icon={Icon_Achievements} />
|
||||
<SideBarButton name={"Quests"} anchor={"Quests"} icon={Icon_Quests} />
|
||||
<SideBarButton name={"Achievements"} anchor={"Achievements"} icon={Icon_Achievements} />
|
||||
</div>
|
||||
|
||||
<div className={"SideBar_Enter"}>
|
||||
|
Loading…
Reference in New Issue
Block a user