Fix initial issues with navigation system

src/handbook/src/backend/events.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "events";
-import { Page } from "@backend/types";
+import type { Page } from "@backend/types";
 
 const emitter = new EventEmitter();
 const navigation = new EventEmitter();
@@ -8,19 +8,12 @@ let navStack: Page[] = [];
 let currentPage: number | null = -1;
 
 /**
- * The initial setup function for this file.
+ * Sets up the event system.
  */
 export function setup(): void {
-    // Check if the window's href is a page.
-    const page = window.location.href.split("/").pop();
-    if (page == undefined) return;
-
-    // Convert the page to a Page type.
-    const pageName = page.charAt(0).toUpperCase() + page.slice(1);
-    const pageType = pageName as Page;
-
-    // Navigate to the page.
-    navigate(pageType, false);
+    window.onpopstate = (event) => {
+        navigate(event.state, false);
+    };
 }
 
 /**

src/handbook/src/backend/types.ts

@@ -1 +1,10 @@
-export type Page = "Home";
+export type Page = "Home" | "Commands";
+
+/**
+ * Checks if a string is a page.
+ *
+ * @param page The string to check.
+ */
+export function isPage(page: string): page is Page {
+    return ["Home", "Commands"].includes(page);
+}

src/handbook/src/ui/App.tsx

@@ -3,22 +3,44 @@ import React from "react";
 import SideBar from "@views/SideBar";
 import Content from "@views/Content";
 
+import type { Page } from "@backend/types";
+
 import "@css/App.scss";
 import "@css/Text.scss";
+import { isPage } from "@backend/types";
+
 
 // Based on the design at: https://www.figma.com/file/PDeAVDkTDF5vvUGGdaIZ39/GM-Handbook.
 // Currently designed by: Magix.
 
-class App extends React.Component<any, any> {
+interface IState {
+    initial: Page | null;
+}
+
+class App extends React.Component<{}, IState> {
     constructor(props: any) {
         super(props);
+
+        // Check if the window's href is a page.
+        let targetPage = null;
+        const page = window.location.href.split("/").pop();
+        if (page != undefined) {
+            // Convert the page to a Page type.
+            const pageName = page.charAt(0).toUpperCase() + page.slice(1);
+            // Check if the page is a valid page.
+            if (isPage(pageName)) targetPage = pageName as Page;
+        }
+
+        this.state = {
+            initial: targetPage as Page | null
+        };
     }
 
     render() {
         return (
             <div className={"App"}>
                 <SideBar />
-                <Content />
+                <Content initial={this.state.initial} />
             </div>
         );
     }

src/handbook/src/ui/pages/CommandsPage.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+class CommandsPage extends React.Component<any, any> {
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+                <h1>Commands</h1>
+            </div>
+        );
+    }
+}
+
+export default CommandsPage;

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

@@ -18,16 +18,16 @@ class HomePage extends React.Component<any, any> {
                     <h1 className={"HomePage_Title"}>Welcome back, Traveler~</h1>
 
                     <div className={"HomePage_Buttons"}>
-                        <HomeButton name={"Commands"} anchor={"commands"} />
-                        <HomeButton name={"Characters"} anchor={"avatars"} />
-                        <HomeButton name={"Items"} anchor={"items"} />
-                        <HomeButton name={"Entities"} anchor={"monsters"} />
-                        <HomeButton name={"Scenes"} anchor={"scenes"} />
+                        <HomeButton name={"Commands"} anchor={"Commands"} />
+                        <HomeButton name={"Characters"} anchor={"Home"} />
+                        <HomeButton name={"Items"} anchor={"Home"} />
+                        <HomeButton name={"Entities"} anchor={"Home"} />
+                        <HomeButton name={"Scenes"} anchor={"Home"} />
                     </div>
 
                     <div className={"HomePage_Buttons"}>
-                        <HomeButton name={"Quests"} anchor={"quests"} />
-                        <HomeButton name={"Achievements"} anchor={"achievements"} />
+                        <HomeButton name={"Quests"} anchor={"Home"} />
+                        <HomeButton name={"Achievements"} anchor={"Home"} />
                     </div>
                 </div>
 

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

@@ -1,6 +1,7 @@
 import React from "react";
 
 import HomePage from "@pages/HomePage";
+import CommandsPage from "@pages/CommandsPage";
 
 import type { Page } from "@backend/types";
 
@@ -8,7 +9,7 @@ import "@css/views/Content.scss";
 import { addNavListener, removeNavListener } from "@backend/events";
 
 interface IProps {
-    initial?: Page;
+    initial?: Page | null;
 }
 
 interface IState {
@@ -46,6 +47,7 @@ class Content extends React.Component<IProps, IState> {
         switch (this.state.current) {
             default: return undefined;
             case "Home": return <HomePage />;
+            case "Commands": return <CommandsPage />;
         }
     }
 }

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

@@ -14,13 +14,13 @@ class SideBar extends React.Component<any, any> {
                 <h1 className={"SideBar_Title"}>The Ultimate Anime Game Handbook</h1>
 
                 <div className={"SideBar_Buttons"}>
-                    <SideBarButton name={"Commands"} anchor={"commands"} />
-                    <SideBarButton name={"Characters"} anchor={"avatars"} />
-                    <SideBarButton name={"Items"} anchor={"items"} />
-                    <SideBarButton name={"Entities"} anchor={"monsters"} />
-                    <SideBarButton name={"Scenes"} anchor={"scenes"} />
-                    <SideBarButton name={"Quests"} anchor={"quests"} />
-                    <SideBarButton name={"Achievements"} anchor={"achievements"} />
+                    <SideBarButton name={"Commands"} anchor={"Commands"} />
+                    <SideBarButton name={"Characters"} anchor={"Home"} />
+                    <SideBarButton name={"Items"} anchor={"Home"} />
+                    <SideBarButton name={"Entities"} anchor={"Home"} />
+                    <SideBarButton name={"Scenes"} anchor={"Home"} />
+                    <SideBarButton name={"Quests"} anchor={"Home"} />
+                    <SideBarButton name={"Achievements"} anchor={"Home"} />
                 </div>
             </div>
         );

src/handbook/src/ui/widgets/HomeButton.tsx

@@ -1,10 +1,13 @@
 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: string;
+    anchor: Page;
 }
 
 class HomeButton extends React.PureComponent<IProps> {
@@ -17,8 +20,7 @@ class HomeButton extends React.PureComponent<IProps> {
      * @private
      */
     private redirect(): void {
-        // TODO: Implement navigator system.
-        window.location.href = `/${this.props.anchor}`;
+        navigate(this.props.anchor);
     }
 
     render() {

src/handbook/src/ui/widgets/SideBarButton.tsx

@@ -1,10 +1,13 @@
 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: string;
+    anchor: Page;
 }
 
 class SideBarButton extends React.PureComponent<IProps> {
@@ -17,8 +20,7 @@ class SideBarButton extends React.PureComponent<IProps> {
      * @private
      */
     private redirect(): void {
-        // TODO: Implement navigator system.
-        window.location.href = `/${this.props.anchor}`;
+        navigate(this.props.anchor);
     }
 
     render() {