+
+ );
+ }
+}
+
+export default App;
diff --git a/src/handbook/src/ui/components/VirtualizedGrid.tsx b/src/handbook/src/ui/components/VirtualizedGrid.tsx
new file mode 100644
index 000000000..631c53fc9
--- /dev/null
+++ b/src/handbook/src/ui/components/VirtualizedGrid.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+
+import { List as _List, ListProps, ListRowProps } from "react-virtualized/dist/es/List";
+import { AutoSizer as _AutoSizer, AutoSizerProps } from "react-virtualized/dist/es/AutoSizer";
+
+const List = _List as unknown as React.FC
+ {items.map((item, index) => (
+
+ );
+ }
+
+ render() {
+ const { list, itemHeight, itemsPerRow } = this.props;
+
+ return (
+ {item}
+ ))}
+
+ - this.setState({ scrollTop: e.scrollTop })}
+ />
+ )}
+
+
+ );
+ }
+}
+
+export default AvatarsPage;
diff --git a/src/handbook/src/ui/pages/CommandsPage.tsx b/src/handbook/src/ui/pages/CommandsPage.tsx
new file mode 100644
index 000000000..6c5416ace
--- /dev/null
+++ b/src/handbook/src/ui/pages/CommandsPage.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import Card from "@widgets/Card";
+
+import { listCommands } from "@backend/data";
+
+import "@css/pages/CommandsPage.scss";
+
+class CommandsPage extends React.PureComponent {
+ render() {
+ return (
+ Characters
+ +
+ {listAvatars().map((avatar) =>
+ avatar.id > 11000000 ? undefined : (
+
+
+
+ );
+ }
+}
+
+export default CommandsPage;
diff --git a/src/handbook/src/ui/pages/EntitiesPage.tsx b/src/handbook/src/ui/pages/EntitiesPage.tsx
new file mode 100644
index 000000000..f0dbe96da
--- /dev/null
+++ b/src/handbook/src/ui/pages/EntitiesPage.tsx
@@ -0,0 +1,153 @@
+import React, { ChangeEvent } from "react";
+
+import MiniCard from "@widgets/MiniCard";
+import VirtualizedGrid from "@components/VirtualizedGrid";
+
+import { Entity, ItemCategory } from "@backend/types";
+import type { Entity as EntityType, EntityInfo } from "@backend/types";
+import { getEntities } from "@backend/data";
+import { entityIcon, fetchEntityData } from "@app/utils";
+
+import "@css/pages/EntitiesPage.scss";
+import EntityCard from "@widgets/EntityCard";
+
+interface IState {
+ filters: ItemCategory[];
+ search: string;
+
+ selected: EntityType | null;
+ selectedInfo: EntityInfo | null;
+}
+
+class EntitiesPage extends React.Component<{}, IState> {
+ constructor(props: {}) {
+ super(props);
+
+ this.state = {
+ filters: [],
+ search: "",
+
+ selected: null,
+ selectedInfo: null
+ };
+ }
+
+ /**
+ * Should the entity be shown?
+ *
+ * @param entity The entity.
+ * @private
+ */
+ private showEntity(entity: Entity): boolean {
+ // Check if the entity's name starts with N/A.
+ if (entity.name.includes("[N/A]")) return false;
+
+ return entity.id > 0;
+ }
+
+ /**
+ * Gets the items to render.
+ * @private
+ */
+ private getEntities(): EntityType[] {
+ let entities: EntityType[] = [];
+
+ // Add items based on filters.
+ const filters = this.state.filters;
+ if (filters.length == 0) {
+ entities = getEntities();
+ } else {
+ for (const filter of filters) {
+ // Remove duplicate items.
+ entities = entities.filter((item, index) => {
+ return entities.indexOf(item) == index;
+ });
+ }
+ }
+
+ // Filter out items that don't match the search.
+ const search = this.state.search.toLowerCase();
+ if (search != "") {
+ entities = entities.filter((item) => {
+ return item.name.toLowerCase().includes(search);
+ });
+ }
+
+ return entities;
+ }
+
+ /**
+ * Invoked when the search input changes.
+ *
+ * @param event The event.
+ * @private
+ */
+ private onChange(event: ChangeEventCommands
+ +
+ {listCommands().map((command) => (
+
+
+
+ );
+ }
+}
+
+export default EntitiesPage;
diff --git a/src/handbook/src/ui/pages/HomePage.tsx b/src/handbook/src/ui/pages/HomePage.tsx
new file mode 100644
index 000000000..d25bfe4d6
--- /dev/null
+++ b/src/handbook/src/ui/pages/HomePage.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+
+import HomeButton from "@widgets/HomeButton";
+
+import { ReactComponent as DiscordLogo } from "@icons/discord.svg";
+
+import "@css/pages/HomePage.scss";
+
+class HomePage extends React.Component
+ this.showEntity(entity))}
+ itemHeight={64}
+ itemsPerRow={18}
+ gap={5}
+ itemGap={5}
+ render={(entity) => (
+ this.setSelectedItem(entity)}
+ />
+ )}
+ />
+ ) : undefined}
+
+
+
+
+
+ {entities.length > 0 ? (
+ Monsters
+ +
+
+
+
+
+
+
+ );
+ }
+}
+
+export default HomePage;
diff --git a/src/handbook/src/ui/pages/ItemsPage.tsx b/src/handbook/src/ui/pages/ItemsPage.tsx
new file mode 100644
index 000000000..1f4096737
--- /dev/null
+++ b/src/handbook/src/ui/pages/ItemsPage.tsx
@@ -0,0 +1,157 @@
+import React, { ChangeEvent } from "react";
+
+import MiniCard from "@widgets/MiniCard";
+import ItemCard from "@widgets/ItemCard";
+import VirtualizedGrid from "@components/VirtualizedGrid";
+
+import { ItemCategory } from "@backend/types";
+import type { Item as ItemType, ItemInfo } from "@backend/types";
+import { getItems, sortedItems } from "@backend/data";
+import { fetchItemData, itemIcon } from "@app/utils";
+
+import "@css/pages/ItemsPage.scss";
+
+interface IState {
+ filters: ItemCategory[];
+ search: string;
+
+ selected: ItemType | null;
+ selectedInfo: ItemInfo | null;
+}
+
+class ItemsPage extends React.Component<{}, IState> {
+ constructor(props: {}) {
+ super(props);
+
+ this.state = {
+ filters: [],
+ search: "",
+
+ selected: null,
+ selectedInfo: null
+ };
+ }
+
+ /**
+ * Gets the items to render.
+ * @private
+ */
+ private getItems(): ItemType[] {
+ let items: ItemType[] = [];
+
+ // Add items based on filters.
+ const filters = this.state.filters;
+ if (filters.length == 0) {
+ items = getItems();
+ } else {
+ for (const filter of filters) {
+ // Add items from the category.
+ items = items.concat(sortedItems[filter]);
+ // Remove duplicate items.
+ items = items.filter((item, index) => {
+ return items.indexOf(item) == index;
+ });
+ }
+ }
+
+ // Filter out items that don't match the search.
+ const search = this.state.search.toLowerCase();
+ if (search != "") {
+ items = items.filter((item) => {
+ return item.name.toLowerCase().includes(search);
+ });
+ }
+
+ return items;
+ }
+
+ /**
+ * Invoked when the search input changes.
+ *
+ * @param event The event.
+ * @private
+ */
+ private onChange(event: ChangeEvent
+
+
+ Welcome back, Traveler~
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ This tool is not affiliated with HoYoverse.
+Genshin Impact, game content and materials are
+trademarks and copyrights of HoYoverse.
+
+
+ Join the Community!
+
+
+
+
+
+
+ Credits
+(hover to see info)
+
+
+ );
+ }
+}
+
+export default ItemsPage;
diff --git a/src/handbook/src/ui/pages/ScenesPage.tsx b/src/handbook/src/ui/pages/ScenesPage.tsx
new file mode 100644
index 000000000..4d8686128
--- /dev/null
+++ b/src/handbook/src/ui/pages/ScenesPage.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+import Card from "@widgets/Card";
+
+import { SceneType } from "@backend/types";
+import { getScenes } from "@backend/data";
+
+import "@css/pages/ScenesPage.scss";
+
+/**
+ * Converts a scene type to a string.
+ *
+ * @param type The scene type.
+ */
+function sceneTypeToString(type: SceneType): string {
+ switch (type) {
+ default:
+ return "Unknown";
+ case SceneType.None:
+ return "None";
+ case SceneType.World:
+ return "World";
+ case SceneType.Activity:
+ return "Activity";
+ case SceneType.Dungeon:
+ return "Dungeon";
+ case SceneType.Room:
+ return "Room";
+ case SceneType.HomeRoom:
+ return "Home Room";
+ case SceneType.HomeWorld:
+ return "Home World";
+ }
+}
+
+class ScenesPage extends React.PureComponent {
+ /**
+ * Teleports the player to the specified scene.
+ * @private
+ */
+ private async teleport(): Promise
+ this.showItem(item))}
+ itemHeight={64}
+ itemsPerRow={18}
+ gap={5}
+ itemGap={5}
+ render={(item) => (
+ this.setSelectedItem(item)}
+ />
+ )}
+ />
+ ) : undefined}
+
+
+
+
+
+ {items.length > 0 ? (
+ Items
+ +
+
+
+
+
+
+
+ );
+ }
+}
+
+export default ScenesPage;
diff --git a/src/handbook/src/ui/views/Content.tsx b/src/handbook/src/ui/views/Content.tsx
new file mode 100644
index 000000000..eaa4ececa
--- /dev/null
+++ b/src/handbook/src/ui/views/Content.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+import HomePage from "@pages/HomePage";
+import CommandsPage from "@pages/CommandsPage";
+import AvatarsPage from "@pages/AvatarsPage";
+import ItemsPage from "@pages/ItemsPage";
+import EntitiesPage from "@pages/EntitiesPage";
+import ScenesPage from "@pages/ScenesPage";
+
+import type { Page } from "@backend/types";
+import { addNavListener, removeNavListener } from "@backend/events";
+
+import "@css/views/Content.scss";
+
+interface IProps {
+ initial?: Page | null;
+}
+
+interface IState {
+ current: Page;
+}
+
+class Content extends React.ComponentScenes
+ +
+ {getScenes().map((command) => (
+
+ Teleport
+
+ }
+ rightOffset={13}
+ height={75}
+ />
+ ))}
+
+
+
+ );
+ }
+}
+
+export default SideBar;
diff --git a/src/handbook/src/ui/widgets/Card.tsx b/src/handbook/src/ui/widgets/Card.tsx
new file mode 100644
index 000000000..c8308bbcd
--- /dev/null
+++ b/src/handbook/src/ui/widgets/Card.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+import "@css/widgets/Card.scss";
+
+interface IProps {
+ title: string;
+ alternate?: string;
+ description?: string | string[];
+
+ height?: number | string;
+ button?: React.ReactNode;
+ rightOffset?: number;
+
+ onClick?: () => void;
+ onOver?: () => void;
+ onOut?: () => void;
+}
+
+class Card extends React.PureComponentnavigate("Home")}> + The Ultimate Anime Game Handbook +
+ +
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Card;
diff --git a/src/handbook/src/ui/widgets/Character.tsx b/src/handbook/src/ui/widgets/Character.tsx
new file mode 100644
index 000000000..c2b2a8fa1
--- /dev/null
+++ b/src/handbook/src/ui/widgets/Character.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+
+import type { Avatar } from "@backend/types";
+import { colorFor, formatAvatarName } from "@app/utils";
+
+import "@css/widgets/Character.scss";
+
+// Image base URL: https://paimon.moe/images/characters/(name).png
+
+const ignored = [
+ 10000001 // Kate
+];
+
+const nameSwitch: { [key: number]: string } = {
+ 10000005: "Lumine",
+ 10000007: "Aether"
+};
+
+interface IProps {
+ data: Avatar;
+
+ onClick?: () => void;
+}
+
+class Character extends React.PureComponent
+
+
+ {this.props.button ? (
+
+
+
+ {this.props.title}
+ {this.props.alternate &&{this.props.alternate}
} +
+ {this.props.description ? (
+ Array.isArray(this.props.description) ? (
+ this.props.description.map((line, index) => (
+
+ + {line} +
+ )) + ) : ( +{this.props.description}
+ ) + ) : undefined} +
+ {this.props.button}
+
+ ) : undefined}
+
+ 
+
+
+ );
+ }
+}
+
+export default Character;
diff --git a/src/handbook/src/ui/widgets/EntityCard.tsx b/src/handbook/src/ui/widgets/EntityCard.tsx
new file mode 100644
index 000000000..0e3829a45
--- /dev/null
+++ b/src/handbook/src/ui/widgets/EntityCard.tsx
@@ -0,0 +1,162 @@
+import React from "react";
+
+import type { Entity as EntityType, EntityInfo } from "@backend/types";
+import { entityIcon } from "@app/utils";
+
+import "@css/widgets/ItemCard.scss";
+
+/**
+ * Converts a description string into a list of paragraphs.
+ *
+ * @param description The description to convert.
+ */
+function toDescription(description: string | undefined): JSX.Element[] {
+ if (!description) return [];
+
+ return description.split("\\n").map((line, index) => {
+ return
+
+
+
+ {nameSwitch[id] ?? name}
+{line}
; + }); +} + +interface IProps { + entity: EntityType | null; + info: EntityInfo | null; +} + +interface IState { + icon: boolean; + count: number | string; +} + +const defaultState = { + icon: true, + count: 1 +}; + +class EntityCard extends React.Component
+
+ ) : undefined;
+ }
+}
+
+export default EntityCard;
diff --git a/src/handbook/src/ui/widgets/HomeButton.tsx b/src/handbook/src/ui/widgets/HomeButton.tsx
new file mode 100644
index 000000000..dabc31563
--- /dev/null
+++ b/src/handbook/src/ui/widgets/HomeButton.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+import type { Page } from "@backend/types";
+import { navigate } from "@backend/events";
+
+import "@css/widgets/HomeButton.scss";
+
+interface IProps {
+ name: string;
+ anchor: Page;
+}
+
+class HomeButton extends React.PureComponent
+
+
+
+ })
this.setState({ icon: false })}
+ />
+ )}
+
+
+
+
+
+ {this.state.icon && (
+ {data?.name ?? entity.name}
+{data?.type ?? ""}
+{toDescription(data?.description)}
+
+
+
+
+
+
+ this.addCount(false, false)}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ this.addCount(false, true);
+ }}
+ className={"ItemCard_Operation"}
+ >
+ -
+
+ {
+ if (this.state.count == "") {
+ this.setState({ count: 1 });
+ }
+ }}
+ />
+ this.addCount(true, false)}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ this.addCount(true, true);
+ }}
+ className={"ItemCard_Operation"}
+ >
+ +
+
+ this.redirect()}>
+ ![{this.props.name}]({"https://dummyimage.com/128x128"})
+
+
+ );
+ }
+}
+
+export default HomeButton;
diff --git a/src/handbook/src/ui/widgets/ItemCard.tsx b/src/handbook/src/ui/widgets/ItemCard.tsx
new file mode 100644
index 000000000..af42dd7fe
--- /dev/null
+++ b/src/handbook/src/ui/widgets/ItemCard.tsx
@@ -0,0 +1,167 @@
+import React from "react";
+
+import type { Item as ItemType, ItemInfo } from "@backend/types";
+import { itemTypeToString } from "@backend/types";
+import { itemIcon } from "@app/utils";
+import { giveItem } from "@backend/server";
+
+import "@css/widgets/ItemCard.scss";
+
+/**
+ * Converts a description string into a list of paragraphs.
+ *
+ * @param description The description to convert.
+ */
+function toDescription(description: string | undefined): JSX.Element[] {
+ if (!description) return [];
+
+ return description.split("\\n").map((line, index) => {
+ return {this.props.name}
+{line}
; + }); +} + +interface IProps { + item: ItemType | null; + info: ItemInfo | null; +} + +interface IState { + icon: boolean; + count: number | string; +} + +const defaultState = { + icon: true, + count: 1 +}; + +class ItemCard extends React.Component
+
+ ) : undefined;
+ }
+}
+
+export default ItemCard;
diff --git a/src/handbook/src/ui/widgets/MiniCard.tsx b/src/handbook/src/ui/widgets/MiniCard.tsx
new file mode 100644
index 000000000..a286e1530
--- /dev/null
+++ b/src/handbook/src/ui/widgets/MiniCard.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+
+import { itemIcon } from "@app/utils";
+
+import "@css/widgets/MiniCard.scss";
+
+interface IProps {
+ data: { name: string };
+ icon: string;
+
+ onClick?: () => void;
+}
+
+interface IState {
+ popout: boolean;
+ icon: boolean;
+ loaded: boolean;
+}
+
+class MiniCard extends React.Component
+
+
+
+ })
this.setState({ icon: false })}
+ />
+ )}
+
+
+
+
+
+ {this.state.icon && (
+ {data?.name ?? item.name}
+{data?.type ?? itemTypeToString(item.type)}
+{toDescription(data?.description)}
+
+
+
+
+
+
+ this.addCount(false, false)}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ this.addCount(false, true);
+ }}
+ className={"ItemCard_Operation"}
+ >
+ -
+
+ {
+ if (this.state.count == "") {
+ this.setState({ count: 1 });
+ }
+ }}
+ />
+ this.addCount(true, false)}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ this.addCount(true, true);
+ }}
+ className={"ItemCard_Operation"}
+ >
+ +
+
+
+
+ );
+ }
+}
+
+export default MiniCard;
diff --git a/src/handbook/src/ui/widgets/SideBarButton.tsx b/src/handbook/src/ui/widgets/SideBarButton.tsx
new file mode 100644
index 000000000..5a16af4c5
--- /dev/null
+++ b/src/handbook/src/ui/widgets/SideBarButton.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+import type { Page } from "@backend/types";
+import { navigate } from "@backend/events";
+
+import "@css/widgets/SideBarButton.scss";
+
+interface IProps {
+ name: string;
+ anchor: Page;
+}
+
+class SideBarButton extends React.PureComponent
+ {this.state.icon && (
+ 
this.setState({ loaded: true })}
+ />
+ )}
+
+ {(!this.state.loaded || !this.state.icon) && (
+
+ {this.props.data.name}
+ )} + this.redirect()}>
+
+
+
+ );
+ }
+}
+
+export default SideBarButton;
diff --git a/src/handbook/src/utils.ts b/src/handbook/src/utils.ts
new file mode 100644
index 000000000..5ec928217
--- /dev/null
+++ b/src/handbook/src/utils.ts
@@ -0,0 +1,136 @@
+import type { Entity, Item, EntityInfo, ItemInfo } from "@backend/types";
+import { ItemType, Quality } from "@backend/types";
+
+/**
+ * Fetches the name of the CSS variable for the quality.
+ *
+ * @param quality The quality of the item.
+ */
+export function colorFor(quality: Quality): string {
+ switch (quality) {
+ default:
+ return "--legendary-color";
+ case "EPIC":
+ return "--epic-color";
+ case "RARE":
+ return "--rare-color";
+ case "UNCOMMON":
+ return "--uncommon-color";
+ case "COMMON":
+ return "--common-color";
+ case "UNKNOWN":
+ return "--unknown-color";
+ }
+}
+
+/**
+ * Checks if a value is between two numbers.
+ *
+ * @param value The value to check.
+ * @param min The minimum value.
+ * @param max The maximum value.
+ */
+export function inRange(value: number, min: number, max: number): boolean {
+ return value >= min && value <= max;
+}
+
+/**
+ * Gets the path to the icon for an item.
+ * Uses the Project Amber API to get the icon.
+ *
+ * @param item The item to get the icon for.
+ */
+export function itemIcon(item: Item): string {
+ // Check if the item matches a special case.
+ if (inRange(item.id, 1001, 1099)) {
+ return `https://paimon.moe/images/characters/${formatAvatarName(item.name, item.id)}.png`;
+ }
+
+ switch (item.type) {
+ default:
+ return `https://api.ambr.top/assets/UI/UI_${item.icon}.png`;
+ case ItemType.Furniture:
+ return `https://api.ambr.top/assets/UI/furniture/UI_${item.icon}.png`;
+ case ItemType.Reliquary:
+ return `https://api.ambr.top/assets/UI/reliquary/UI_${item.icon}.png`;
+ }
+}
+
+/**
+ * Gets the path to the icon for an entity.
+ * Uses the Project Amber API to get the icon.
+ *
+ * @param entity The entity to get the icon for. Project Amber data required.
+ */
+export function entityIcon(entity: Entity): string {
+ return `https://api.ambr.top/assets/UI/monster/UI_MonsterIcon_${entity.internal}.png`;
+}
+
+/**
+ * Formats a character's name to fit with the reference name.
+ * Example: Hu Tao -> hu_tao
+ *
+ * @param name The character's name.
+ * @param id The character's ID.
+ */
+export function formatAvatarName(name: string, id: number): string {
+ // Check if a different name is used for the character.
+ if (refSwitch[id]) name = refSwitch[id];
+ return name.toLowerCase().replace(" ", "_");
+}
+
+const refSwitch: { [key: number]: string } = {
+ 10000005: "traveler_anemo",
+ 10000007: "traveler_geo"
+};
+
+/**
+ * Gets the route for an item type.
+ *
+ * @param type The type of the item.
+ */
+export function typeToRoute(type: ItemType): string {
+ switch (type) {
+ default:
+ return "material";
+ case ItemType.Furniture:
+ return "furniture";
+ case ItemType.Reliquary:
+ return "reliquary";
+ case ItemType.Weapon:
+ return "weapon";
+ }
+}
+
+/**
+ * Fetches the data for an item.
+ * Uses the Project Amber API to get the data.
+ *
+ * @route GET https://api.ambr.top/v2/EN/{type}/{id}
+ * @param item The item to fetch the data for.
+ */
+export async function fetchItemData(item: Item): Promise{this.props.name}
+