Add quest data dumping for the handbook

src/handbook/data/README.md

@@ -2,10 +2,12 @@
 Use Grasscutter's dumpers to generate the data to put here.
 
 ## Files Required
+- `mainquests.csv'
 - `commands.json`
 - `entities.csv`
 - `avatars.csv`
 - `scenes.csv`
+- `quests.csv`
 - `items.csv`
 
 # Item Icon Notes

src/handbook/src/backend/data.ts

@@ -1,17 +1,21 @@
+import mainQuests from "@data/mainquests.csv";
 import commands from "@data/commands.json";
 import entities from "@data/entities.csv";
 import avatars from "@data/avatars.csv";
 import scenes from "@data/scenes.csv";
+import quests from "@data/quests.csv";
 import items from "@data/items.csv";
 
 import { Quality, ItemType, ItemCategory, SceneType } from "@backend/types";
-import type { Command, Avatar, Item, Scene, Entity } from "@backend/types";
+import type { MainQuest, Command, Avatar, Item, Scene, Entity, Quest } from "@backend/types";
 
 import { inRange } from "@app/utils";
 
 type AvatarDump = { [key: number]: Avatar };
 type CommandDump = { [key: string]: Command };
 type TaggedItems = { [key: number]: Item[] };
+type QuestDump = { [key: number]: Quest };
+type MainQuestDump = { [key: number]: MainQuest };
 
 /**
  * @see {@file src/handbook/data/README.md}
@@ -27,6 +31,8 @@ export const sortedItems: TaggedItems = {
     [ItemCategory.Miscellaneous]: []
 };
 
+export let allMainQuests: MainQuestDump = {};
+
 /**
  * Setup function for this file.
  * Sorts all items into their respective categories.
@@ -57,6 +63,8 @@ export function setup(): void {
             sortedItems[ItemCategory.Avatar].push(item);
         }
     });
+
+    allMainQuests = getMainQuests();
 }
 
 /**
@@ -148,3 +156,56 @@ export function getItems(): Item[] {
         };
     });
 }
+
+/**
+ * Fetches and casts all quests in the file.
+ */
+export function getQuests(): QuestDump {
+    const map: QuestDump = {};
+    quests.forEach((quest: Quest) => {
+        quest.description = quest.description
+            .replaceAll("\\", ",");
+        map[quest.id] = quest;
+    });
+
+    return map;
+}
+
+/**
+ * Fetches and lists all the quests in the file.
+ */
+export function listQuests(): Quest[] {
+    return Object.values(getQuests())
+        .sort((a, b) => a.id - b.id);
+}
+
+/**
+ * Fetches and casts all quests in the file.
+ */
+export function getMainQuests(): MainQuestDump {
+    const map: MainQuestDump = {};
+    mainQuests.forEach((quest: MainQuest) => {
+        quest.title = quest.title
+            .replaceAll("\\", ",");
+        map[quest.id] = quest;
+    });
+
+    return map;
+}
+
+/**
+ * Fetches and lists all the quests in the file.
+ */
+export function listMainQuests(): MainQuestDump[] {
+    return Object.values(allMainQuests)
+        .sort((a, b) => a.id - b.id);
+}
+
+/**
+ * Fetches a quest by its ID.
+ *
+ * @param quest The quest ID.
+ */
+export function getMainQuestFor(quest: Quest): MainQuest {
+    return allMainQuests[quest.mainId];
+}

src/handbook/src/backend/types.ts

@@ -2,6 +2,11 @@ export type Page = "Home" | "Commands" | "Avatars" | "Items" | "Entities" | "Sce
 export type Overlays = "None" | "ServerSettings";
 export type Days = "Sunday" | "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday";
 
+export type MainQuest = {
+    id: number;
+    title: string;
+};
+
 export type Command = {
     name: string[];
     description: string;
@@ -36,6 +41,12 @@ export type Entity = {
     internal: string;
 };
 
+export type Quest = {
+    id: number;
+    description: string;
+    mainId: number;
+};
+
 // Exported from Project Amber.
 export type ItemInfo = {
     response: number | 200 | 404;

src/handbook/src/css/views/PlainText.scss

@@ -4,6 +4,6 @@
     overflow-x: scroll;
 
     p {
-        color: black;
+        color: white;
     }
 }

src/handbook/src/ui/views/PlainText.tsx

@@ -1,6 +1,14 @@
 import React from "react";
 
-import { listCommands, listAvatars, getItems, getEntities, getScenes } from "@backend/data";
+import {
+    listCommands,
+    listAvatars,
+    getItems,
+    getEntities,
+    getScenes,
+    listQuests,
+    getMainQuestFor
+} from "@backend/data";
 
 import "@css/views/PlainText.scss";
 
@@ -13,7 +21,7 @@ class PlainText extends React.PureComponent {
         return (
             <>
                 {listCommands().map((command) => (
-                    <p>{`${command.name[0]} : ${command.description}`}</p>
+                    <p key={command.name[0]}>{`${command.name[0]} : ${command.description}`}</p>
                 ))}
             </>
         );
@@ -29,7 +37,7 @@ class PlainText extends React.PureComponent {
                 {listAvatars()
                     .sort((a, b) => a.id - b.id)
                     .map((avatar) => (
-                        <p>{`${avatar.id} : ${avatar.name}`}</p>
+                        <p key={avatar.id}>{`${avatar.id} : ${avatar.name}`}</p>
                     ))}
             </>
         );
@@ -45,7 +53,7 @@ class PlainText extends React.PureComponent {
                 {getItems()
                     .sort((a, b) => a.id - b.id)
                     .map((item) => (
-                        <p>{`${item.id} : ${item.name}`}</p>
+                        <p key={item.id}>{`${item.id} : ${item.name}`}</p>
                     ))}
             </>
         );
@@ -61,7 +69,7 @@ class PlainText extends React.PureComponent {
                 {getEntities()
                     .sort((a, b) => a.id - b.id)
                     .map((entity) => (
-                        <p>{`${entity.id} : ${entity.name}`}</p>
+                        <p key={entity.id}>{`${entity.id} : ${entity.name}`}</p>
                     ))}
             </>
         );
@@ -77,7 +85,23 @@ class PlainText extends React.PureComponent {
                 {getScenes()
                     .sort((a, b) => a.id - b.id)
                     .map((scene) => (
-                        <p>{`${scene.id} : ${scene.identifier} [${scene.type}]`}</p>
+                        <p key={scene.id}>{`${scene.id} : ${scene.identifier} [${scene.type}]`}</p>
+                    ))}
+            </>
+        );
+    }
+
+    /**
+     * Creates a paragraph of quests.
+     * @private
+     */
+    private getQuests(): React.ReactNode {
+        return (
+            <>
+                {listQuests()
+                    .sort((a, b) => a.id - b.id)
+                    .map((quest) => (
+                        <p key={quest.id}>{`${quest.id} : ${getMainQuestFor(quest)?.title ?? "Unknown"} - ${quest.description}`}</p>
                     ))}
             </>
         );
@@ -129,6 +153,14 @@ class PlainText extends React.PureComponent {
                 </p>
 
                 {this.getScenes()}
+
+                <p>
+                    <br />
+                    <br />
+                    // Quests
+                </p>
+
+                {this.getQuests()}
             </div>
         );
     }