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 (
- + { + this.state.plain ? + : + <Content initial={this.state.initial} /> + } </div> ); } diff --git a/src/handbook/src/ui/views/PlainText.tsx b/src/handbook/src/ui/views/PlainText.tsx new file mode 100644 index 000000000..21da22e8b --- /dev/null +++ b/src/handbook/src/ui/views/PlainText.tsx @@ -0,0 +1,141 @@ +import React from "react"; + +import { listCommands, listAvatars, getItems, getEntities, getScenes } from "@backend/data"; + +import "@css/views/PlainText.scss"; + +class PlainText extends React.PureComponent { + /** + * Creates a paragraph of commands. + * @private + */ + private getCommands(): React.ReactNode { + return ( + <> + { + listCommands() + .map((command) => + <p>{`${command.name[0]} : ${command.description}`}</p>) + } + </> + ); + } + + /** + * Creates a paragraph of avatars. + * @private + */ + private getAvatars(): React.ReactNode { + return ( + <> + { + listAvatars() + .sort((a, b) => a.id - b.id) + .map((avatar) => + <p>{`${avatar.id} : ${avatar.name}`}</p>) + } + </> + ); + } + + /** + * Creates a paragraph of items. + * @private + */ + private getItems(): React.ReactNode { + return ( + <> + { + getItems() + .sort((a, b) => a.id - b.id) + .map((item) => + <p>{`${item.id} : ${item.name}`}</p>) + } + </> + ); + } + + /** + * Creates a paragraph of monsters. + * @private + */ + private getMonsters(): React.ReactNode { + return ( + <> + { + getEntities() + .sort((a, b) => a.id - b.id) + .map((entity) => + <p>{`${entity.id} : ${entity.name}`}</p>) + } + </> + ); + } + + /** + * Creates a paragraph of scenes. + * @private + */ + private getScenes(): React.ReactNode { + return ( + <> + { + getScenes() + .sort((a, b) => a.id - b.id) + .map((scene) => + <p>{`${scene.id} : ${scene.identifier} [${scene.type}]`}</p>) + } + </> + ); + } + + render() { + return ( + <div className={"PlainText"}> + <p> + // Grasscutter 3.6.0 GM Handbook<br /> + // Generated by the HTML GM Handbook.<br /> + <br /> + <br /> + // Commands + </p> + + {this.getCommands()} + + <p> + <br /> + <br /> + // Avatars + </p> + + {this.getAvatars()} + + <p> + <br /> + <br /> + // Items + </p> + + {this.getItems()} + + <p> + <br /> + <br /> + // Monsters + </p> + + {this.getMonsters()} + + <p> + <br /> + <br /> + // Scenes + </p> + + {this.getScenes()} + </div> + ); + } +} + +export default PlainText;