Add support for 'plain text' mode

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": {

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;
+    }
+}

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 (
             <div className={"App"}>
                 <SideBar />
+                {
+                    this.state.plain ?
+                        <PlainText /> :
                         <Content initial={this.state.initial} />
+                }
             </div>
         );
     }

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;