Add system for setting handbook address and port

src/handbook/index.html

@@ -7,6 +7,11 @@
 
     <script>
       window["hide"] = ["quests", "achievements"];
+      window["details"] = {
+        address: "{{DETAILS_ADDRESS}}",
+        port: "{{DETAILS_PORT}}",
+        disable: "{{DETAILS_DISABLE}}"
+      };
     </script>
   </head>
 

src/handbook/src/backend/server.ts

@@ -1,12 +1,14 @@
 import type { CommandResponse } from "@backend/types";
 import emitter from "@backend/events";
 
+import { getWindowDetails } from "@app/utils";
+
 let playerToken: string | null = null; // The session token for the player.
 export let targetPlayer = 0; // The UID of the target player.
 
 // The server's address and port.
-export let address: string = "127.0.0.1",
-    port: string = "443";
+export let address: string = getWindowDetails().address,
+    port: string = getWindowDetails().port.toString();
 export let encrypted: boolean = true;
 
 export let lockedPlayer = false; // Whether the UID field is locked.
@@ -16,6 +18,9 @@ export let connected = false; // Whether the server is connected.
  * Loads the server details from local storage.
  */
 export function setup(): void {
+    // Check if the server is disabled.
+    if (getWindowDetails().disable) return;
+
     // Load the server details from local storage.
     const storedAddress = localStorage.getItem("address");
     const storedPort = localStorage.getItem("port");

src/handbook/src/backend/types.ts

@@ -135,6 +135,12 @@ export type CommandResponse = {
     message: string;
 };
 
+export type WindowDetails = {
+    address: string,
+    port: number,
+    disable: boolean
+};
+
 /**
  * Checks if a string is a page.
  *

src/handbook/src/ui/widgets/ServerSettings.tsx

@@ -4,6 +4,7 @@ import emitter from "@backend/events";
 import { targetPlayer, address, port, setServerDetails, url, setTargetPlayer } from "@backend/server";
 
 import "@css/widgets/ServerSettings.scss";
+import { getWindowDetails } from "@app/utils";
 
 interface IState {
     webview: boolean;
@@ -97,6 +98,8 @@ class ServerSettings extends React.Component<{}, IState> {
     }
 
     render() {
+        const { disable } = getWindowDetails();
+
         return (
             <div className={"ServerSettings"}>
                 {this.state.webview ? (
@@ -109,7 +112,14 @@ class ServerSettings extends React.Component<{}, IState> {
                         <div className={"ServerSettings_Content ServerSettings_Top"}>
                             <h1 className={"ServerSettings_Title"}>Server Settings</h1>
 
-                            <div className={"ServerSettings_Details"}>
+                            <div
+                                className={"ServerSettings_Details"}
+                                style={{
+                                    opacity: disable ? 0.5 : 1,
+                                    cursor: disable ? "not-allowed" : "default",
+                                    userSelect: disable ? "none" : "auto"
+                                }}
+                            >
                                 <div>
                                     <p>Address:</p>
                                     <input
@@ -121,6 +131,10 @@ class ServerSettings extends React.Component<{}, IState> {
 
                                             this.setState({ address: value });
                                         }}
+                                        disabled={disable}
+                                        style={{
+                                            cursor: disable ? "not-allowed" : "text"
+                                        }}
                                     />
                                 </div>
 
@@ -139,6 +153,10 @@ class ServerSettings extends React.Component<{}, IState> {
 
                                             this.setState({ port: Number(value) });
                                         }}
+                                        disabled={disable}
+                                        style={{
+                                            cursor: disable ? "not-allowed" : "text"
+                                        }}
                                     />
                                 </div>
                             </div>

src/handbook/src/utils.ts

@@ -1,4 +1,4 @@
-import type { Entity, Item, EntityInfo, ItemInfo } from "@backend/types";
+import type { Entity, Item, EntityInfo, ItemInfo, WindowDetails } from "@backend/types";
 import { ItemType, Quality } from "@backend/types";
 
 /**
@@ -165,3 +165,20 @@ export function notNaN(value: number | string): string {
     const number = parseInt(value.toString());
     return isNaN(number) ? "" : number.toString();
 }
+
+/**
+ * Extracts the server details out of the window.
+ */
+export function getWindowDetails(): WindowDetails {
+    const details = (window as any).details;
+    const { address, port, disable } = details;
+
+    return {
+        address: address == "{{DETAILS_ADDRESS}}" ?
+            "127.0.0.1" : address,
+        port: port == "{{DETAILS_PORT}}" ?
+            443 : parseInt(port),
+        disable: disable == "{{DETAILS_DISABLE}}" ?
+            false : disable == "true"
+    };
+}