Implement the scenes page

src/handbook/src/backend/types.ts

@@ -1,4 +1,5 @@
-export type Page = "Home" | "Commands" | "Avatars" | "Items";
+export type Page = "Home" | "Commands" | "Avatars" | "Items"
+    | "Scenes";
 export type Days = "Sunday" | "Monday" | "Tuesday"
     | "Wednesday" | "Thursday" | "Friday" | "Saturday";
 
@@ -18,7 +19,7 @@ export type Avatar = {
 
 export type Scene = {
     identifier: string;
-    type: string;
+    type: SceneType;
     id: number;
 };
 

src/handbook/src/css/pages/ScenesPage.scss

@@ -0,0 +1,44 @@
+.ScenesPage {
+    display: flex;
+    height: 100%;
+    width: 100%;
+
+    background-color: var(--background-color);
+    flex-direction: column;
+
+    padding: 24px;
+}
+
+.ScenesPage_Title {
+    max-width: 180px;
+    max-height: 60px;
+
+    font-size: 48px;
+    font-weight: bold;
+    text-align: center;
+
+    margin-bottom: 30px;
+}
+
+.ScenesPage_List {
+    display: flex;
+    flex-direction: column;
+
+    gap: 15px;
+    margin-bottom: 28px;
+    overflow-y: scroll;
+}
+
+.ScenesPage_Button {
+    width: 94px;
+    height: 34px;
+
+    margin: 0;
+    border-radius: 10px;
+    border: transparent;
+
+    font-size: 20px;
+
+    color: var(--text-primary-color);
+    background-color: var(--background-color);
+}

src/handbook/src/css/widgets/Card.scss

@@ -1,6 +1,6 @@
 .Card {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: space-between;
 
     width: 100%;
@@ -14,6 +14,12 @@
     background-color: var(--secondary-color);
 }
 
+.Card_Content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
 .Card_Header {
     display: flex;
     flex-direction: row;
@@ -40,3 +46,11 @@
     overflow-y: scroll;
     max-height: 24px;
 }
+
+.Card_Button {
+    display: flex;
+    margin-right: 13px;
+
+    align-self: center;
+    justify-content: center;
+}

src/handbook/src/ui/pages/HomePage.tsx

@@ -22,7 +22,7 @@ class HomePage extends React.Component<any, any> {
                         <HomeButton name={"Characters"} anchor={"Avatars"} />
                         <HomeButton name={"Items"} anchor={"Items"} />
                         <HomeButton name={"Entities"} anchor={"Home"} />
-                        <HomeButton name={"Scenes"} anchor={"Home"} />
+                        <HomeButton name={"Scenes"} anchor={"Scenes"} />
                     </div>
 
                     <div className={"HomePage_Buttons"}>

src/handbook/src/ui/pages/ScenesPage.tsx

@@ -0,0 +1,62 @@
+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<void> {
+        // TODO: Implement teleporting.
+    }
+
+    render() {
+        return (
+            <div className={"ScenesPage"}>
+                <h1 className={"ScenesPage_Title"}>Scenes</h1>
+
+                <div className={"ScenesPage_List"}>
+                    {getScenes().map((command) => (
+                        <Card
+                            key={command.identifier}
+                            title={command.identifier}
+                            alternate={`ID: ${command.id} | ${sceneTypeToString(command.type)}`}
+                            button={(
+                                <button className={"ScenesPage_Button"}
+                                        onClick={this.teleport.bind(this)}
+                                >Teleport</button>
+                            )} rightOffset={13}
+                            height={75}
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ScenesPage;

src/handbook/src/ui/views/Content.tsx

@@ -4,6 +4,7 @@ import HomePage from "@pages/HomePage";
 import CommandsPage from "@pages/CommandsPage";
 import AvatarsPage from "@pages/AvatarsPage";
 import ItemsPage from "@pages/ItemsPage";
+import ScenesPage from "@pages/ScenesPage";
 
 import type { Page } from "@backend/types";
 import { addNavListener, removeNavListener } from "@backend/events";
@@ -57,6 +58,8 @@ class Content extends React.Component<IProps, IState> {
                 return <AvatarsPage />;
             case "Items":
                 return <ItemsPage />;
+            case "Scenes":
+                return <ScenesPage />;
         }
     }
 }

src/handbook/src/ui/views/SideBar.tsx

@@ -51,7 +51,7 @@ class SideBar extends React.Component<{}, IState> {
                         <SideBarButton name={"Characters"} anchor={"Avatars"} />
                         <SideBarButton name={"Items"} anchor={"Items"} />
                         <SideBarButton name={"Entities"} anchor={"Home"} />
-                        <SideBarButton name={"Scenes"} anchor={"Home"} />
+                        <SideBarButton name={"Scenes"} anchor={"Scenes"} />
                         <SideBarButton name={"Quests"} anchor={"Home"} />
                         <SideBarButton name={"Achievements"} anchor={"Home"} />
                     </div>

src/handbook/src/ui/widgets/Card.tsx

@@ -8,6 +8,8 @@ interface IProps {
     description?: string | string[];
 
     height?: number | string;
+    button?: React.ReactNode;
+    rightOffset?: number;
 
     onClick?: () => void;
     onOver?: () => void;
@@ -28,24 +30,34 @@ class Card extends React.PureComponent<IProps> {
                 onMouseOut={this.props.onOut}
                 style={{ height: this.props.height }}
             >
-                <div className={"Card_Header"}>
+                <div className={"Card_Content"}>
-                    <p className={"Card_Title"}>{this.props.title}</p>
+                    <div className={"Card_Header"}>
-                    {this.props.alternate && <p className={"Card_Alternate"}>{this.props.alternate}</p>}
+                        <p className={"Card_Title"}>{this.props.title}</p>
+                        {this.props.alternate && <p className={"Card_Alternate"}>{this.props.alternate}</p>}
+                    </div>
+
+                    <div style={{ alignItems: "center" }}>
+                        {this.props.description ? (
+                            Array.isArray(this.props.description) ? (
+                                this.props.description.map((line, index) => (
+                                    <p className={"Card_Description"} key={index}>
+                                        {line}
+                                    </p>
+                                ))
+                            ) : (
+                                <p className={"Card_Description"}>{this.props.description}</p>
+                            )
+                        ) : undefined}
+                    </div>
                 </div>
 
-                <div style={{ alignItems: "center" }}>
+                {this.props.button ? (
-                    {this.props.description ? (
+                    <div className={"Card_Button"}
-                        Array.isArray(this.props.description) ? (
+                         style={{ marginRight: this.props.rightOffset ?? 0 }}
-                            this.props.description.map((line, index) => (
+                    >
-                                <p className={"Card_Description"} key={index}>
+                        {this.props.button}
-                                    {line}
+                    </div>
-                                </p>
+                ) : undefined}
-                            ))
-                        ) : (
-                            <p className={"Card_Description"}>{this.props.description}</p>
-                        )
-                    ) : undefined}
-                </div>
             </div>
         );
     }