Implement handbook teleporting

also a few formatting changes and sort data by logical sense

src/handbook/src/backend/commands.ts

@@ -17,6 +17,21 @@ function basicGive(item: number, amount = 1): string {
     return `/give ${item} x${amount}`;
 }
 
+/**
+ * Generates a basic teleport command.
+ * This creates a relative teleport command.
+ */
+function teleport(scene: number): string {
+    // Validate the number.
+    if (invalid(scene)) return "Invalid arguments.";
+
+    return `/teleport ~ ~ ~ ${scene}`;
+}
+
 export const give = {
     basic: basicGive
 };
+
+export const action = {
+    teleport: teleport
+};

src/handbook/src/backend/data.ts

@@ -70,7 +70,9 @@ export function getCommands(): CommandDump {
  * Fetches and lists all the commands in the file.
  */
 export function listCommands(): Command[] {
-    return Object.values(getCommands());
+    return Object.values(getCommands())
+        .sort((a, b) =>
+            a.name[0].localeCompare(b.name[0]));
 }
 
 /**
@@ -110,22 +112,26 @@ export function getAvatars(): AvatarDump {
  * Fetches and lists all the avatars in the file.
  */
 export function listAvatars(): Avatar[] {
-    return Object.values(getAvatars());
+    return Object.values(getAvatars())
+        .sort((a, b) =>
+            a.name.localeCompare(b.name));
 }
 
 /**
  * Fetches and casts all scenes in the file.
  */
 export function getScenes(): Scene[] {
-    return scenes.map((entry) => {
-        const values = Object.values(entry) as string[];
-        const id = parseInt(values[0]);
-        return {
-            id,
-            identifier: values[1],
-            type: values[2] as SceneType
-        };
-    });
+    return scenes
+        .map((entry) => {
+            const values = Object.values(entry) as string[];
+            const id = parseInt(values[0]);
+            return {
+                id,
+                identifier: values[1],
+                type: values[2] as SceneType
+            };
+        })
+        .sort((a, b) => a.id - b.id);
 }
 
 /**

src/handbook/src/backend/server.ts

@@ -77,3 +77,21 @@ export async function giveItem(item: number, amount = 1): Promise<CommandRespons
         })
     }).then((res) => res.json());
 }
+
+/**
+ * Teleports the player to a new scene.
+ *
+ * @param scene The scene's ID.
+ */
+export async function teleportTo(scene: number): Promise<CommandResponse> {
+    // Validate the number.
+    if (isNaN(scene) || scene < 1) return { status: -1, message: "Invalid scene." };
+
+    return await fetch(`https://localhost:443/handbook/teleport`, {
+        method: "POST",
+        body: JSON.stringify({
+            player: targetPlayer.toString(),
+            scene: scene.toString()
+        })
+    }).then((res) => res.json());
+}

src/handbook/src/css/widgets/Character.scss

@@ -10,11 +10,11 @@
     width: 100%;
 
     overflow: hidden;
+    box-sizing: border-box;
 }
 
 .Character :hover {
     cursor: pointer;
-    box-shadow: 1px 1px black;
 }
 
 .Character_Icon {

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

@@ -4,6 +4,9 @@ import Card from "@widgets/Card";
 
 import { SceneType } from "@backend/types";
 import { getScenes } from "@backend/data";
+import { connected, teleportTo } from "@backend/server";
+import { action } from "@backend/commands";
+import { copyToClipboard } from "@app/utils";
 
 import "@css/pages/ScenesPage.scss";
 
@@ -38,8 +41,12 @@ class ScenesPage extends React.PureComponent {
      * Teleports the player to the specified scene.
      * @private
      */
-    private async teleport(): Promise<void> {
-        // TODO: Implement teleporting.
+    private async teleport(scene: number): Promise<void> {
+        if (connected) {
+            await teleportTo(scene);
+        } else {
+            await copyToClipboard(action.teleport(scene))
+        }
     }
 
     render() {
@@ -48,13 +55,15 @@ class ScenesPage extends React.PureComponent {
                 <h1 className={"ScenesPage_Title"}>Scenes</h1>
 
                 <div className={"ScenesPage_List"}>
-                    {getScenes().map((command) => (
+                    {getScenes().map((scene) => (
                         <Card
-                            key={command.identifier}
-                            title={command.identifier}
-                            alternate={`ID: ${command.id} | ${sceneTypeToString(command.type)}`}
+                            key={scene.id}
+                            title={scene.identifier}
+                            alternate={`ID: ${scene.id} | ${sceneTypeToString(scene.type)}`}
                             button={
-                                <button className={"ScenesPage_Button"} onClick={this.teleport.bind(this)}>
+                                <button className={"ScenesPage_Button"}
+                                        onClick={() => this.teleport(scene.id)}
+                                >
                                     Teleport
                                 </button>
                             }