diff --git a/src/handbook/package.json b/src/handbook/package.json index 94073bf07..e95b73b3f 100644 --- a/src/handbook/package.json +++ b/src/handbook/package.json @@ -2,7 +2,6 @@ "name": "handbook", "description": "The ultimate anime game handbook!", "version": "0.1.0", - "private": true, "type": "module", "scripts": { diff --git a/src/handbook/src/css/views/PlainText.scss b/src/handbook/src/css/views/PlainText.scss new file mode 100644 index 000000000..bb0fef0bf --- /dev/null +++ b/src/handbook/src/css/views/PlainText.scss @@ -0,0 +1,9 @@ +.PlainText { + margin: 12px 5px 0 12px; + overflow-y: scroll; + overflow-x: scroll; + + p { + color: black; + } +} diff --git a/src/handbook/src/ui/App.tsx b/src/handbook/src/ui/App.tsx index eba12dc40..e6e04d4df 100644 --- a/src/handbook/src/ui/App.tsx +++ b/src/handbook/src/ui/App.tsx @@ -2,6 +2,7 @@ import React from "react"; import SideBar from "@views/SideBar"; import Content from "@views/Content"; +import PlainText from "@views/PlainText"; import type { Page } from "@backend/types"; import { isPage } from "@backend/types"; @@ -14,6 +15,7 @@ import "@css/Text.scss"; interface IState { initial: Page | null; + plain: boolean; } class App extends React.Component<{}, IState> { @@ -33,7 +35,8 @@ class App extends React.Component<{}, IState> { } this.state = { - initial: targetPage as Page | null + initial: targetPage as Page | null, + plain: false }; } @@ -41,7 +44,11 @@ class App extends React.Component<{}, IState> { return (
{`${command.name[0]} : ${command.description}`}
) + } + > + ); + } + + /** + * Creates a paragraph of avatars. + * @private + */ + private getAvatars(): React.ReactNode { + return ( + <> + { + listAvatars() + .sort((a, b) => a.id - b.id) + .map((avatar) => +{`${avatar.id} : ${avatar.name}`}
) + } + > + ); + } + + /** + * Creates a paragraph of items. + * @private + */ + private getItems(): React.ReactNode { + return ( + <> + { + getItems() + .sort((a, b) => a.id - b.id) + .map((item) => +{`${item.id} : ${item.name}`}
) + } + > + ); + } + + /** + * Creates a paragraph of monsters. + * @private + */ + private getMonsters(): React.ReactNode { + return ( + <> + { + getEntities() + .sort((a, b) => a.id - b.id) + .map((entity) => +{`${entity.id} : ${entity.name}`}
) + } + > + ); + } + + /** + * Creates a paragraph of scenes. + * @private + */ + private getScenes(): React.ReactNode { + return ( + <> + { + getScenes() + .sort((a, b) => a.id - b.id) + .map((scene) => +{`${scene.id} : ${scene.identifier} [${scene.type}]`}
) + } + > + ); + } + + render() { + return ( +
+ // Grasscutter 3.6.0 GM Handbook
+ // Generated by the HTML GM Handbook.
+
+
+ // Commands
+
+
+
+ // Avatars
+
+
+
+ // Items
+
+
+
+ // Monsters
+
+
+
+ // Scenes
+