From 845c7cb457ff8f314e4c527cad20c46a9df240f2 Mon Sep 17 00:00:00 2001
From: KingRainbow44 <kobedo11@gmail.com>
Date: Thu, 6 Apr 2023 22:31:13 -0400
Subject: [PATCH] Implement the commands page

additionally, clean-up imports
---
 src/handbook/src/css/pages/CommandsPage.scss | 29 ++++++++++-
 src/handbook/src/css/widgets/Card.scss       | 44 +++++++++++++++++
 src/handbook/src/ui/App.tsx                  |  3 +-
 src/handbook/src/ui/pages/CommandsPage.tsx   | 26 +++++++---
 src/handbook/src/ui/pages/HomePage.tsx       |  2 +-
 src/handbook/src/ui/widgets/Card.tsx         | 52 ++++++++++++++++++++
 src/handbook/src/ui/widgets/Command.tsx      | 19 -------
 7 files changed, 146 insertions(+), 29 deletions(-)
 create mode 100644 src/handbook/src/css/widgets/Card.scss
 create mode 100644 src/handbook/src/ui/widgets/Card.tsx
 delete mode 100644 src/handbook/src/ui/widgets/Command.tsx

diff --git a/src/handbook/src/css/pages/CommandsPage.scss b/src/handbook/src/css/pages/CommandsPage.scss
index 5a0b9bc7c..147a20b1a 100644
--- a/src/handbook/src/css/pages/CommandsPage.scss
+++ b/src/handbook/src/css/pages/CommandsPage.scss
@@ -1,3 +1,30 @@
 .CommandsPage {
-    margin: 10px;
+    display: flex;
+    height: 100%;
+    width: 100%;
+
+    background-color: var(--background-color);
+    flex-direction: column;
+
+    padding: 24px;
+}
+
+.CommandsPage_Title {
+    max-width: 275px;
+    max-height: 60px;
+
+    font-size: 48px;
+    font-weight: bold;
+    text-align: center;
+
+    margin-bottom: 30px;
+}
+
+.CommandsPage_List {
+    display: flex;
+    flex-direction: column;
+
+    gap: 15px;
+    margin-bottom: 28px;
+    overflow-y: scroll;
 }
diff --git a/src/handbook/src/css/widgets/Card.scss b/src/handbook/src/css/widgets/Card.scss
new file mode 100644
index 000000000..282288110
--- /dev/null
+++ b/src/handbook/src/css/widgets/Card.scss
@@ -0,0 +1,44 @@
+.Card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    width: 100%;
+    max-width: 1510px;
+    max-height: 100px;
+
+    gap: 10px;
+    border-radius: 15px;
+    padding: 10px;
+    box-sizing: border-box;
+
+    background-color: var(--secondary-color);
+}
+
+.Card_Header {
+    display: flex;
+    flex-direction: row;
+
+    width: 100%;
+    height: 100%;
+    max-height: 40%;
+
+    gap: 15px;
+    align-items: center;
+}
+
+.Card_Title {
+    font-size: 32px;
+    font-weight: bold;
+}
+
+.Card_Alternate {
+    font-size: 24px;
+}
+
+.Card_Description {
+    color: var(--text-primary-color);
+
+    overflow-y: hidden;
+    max-height: 100%;
+}
diff --git a/src/handbook/src/ui/App.tsx b/src/handbook/src/ui/App.tsx
index e8f379f18..25f606907 100644
--- a/src/handbook/src/ui/App.tsx
+++ b/src/handbook/src/ui/App.tsx
@@ -4,11 +4,10 @@ import SideBar from "@views/SideBar";
 import Content from "@views/Content";
 
 import type { Page } from "@backend/types";
+import { isPage } 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.
diff --git a/src/handbook/src/ui/pages/CommandsPage.tsx b/src/handbook/src/ui/pages/CommandsPage.tsx
index 1e3b714b1..78fcc9191 100644
--- a/src/handbook/src/ui/pages/CommandsPage.tsx
+++ b/src/handbook/src/ui/pages/CommandsPage.tsx
@@ -1,16 +1,30 @@
 import React from "react";
 
+import Card from "@components/widgets/Card";
+
+import { listCommands } from "@backend/data";
+
 import "@css/pages/CommandsPage.scss";
 
-class CommandsPage extends React.Component<any, any> {
-    constructor(props: any) {
-        super(props);
-    }
-
+class CommandsPage extends React.PureComponent {
     render() {
         return (
             <div className={"CommandsPage"}>
-                <h1>Commands</h1>
+                <h1 className={"CommandsPage_Title"}>Commands</h1>
+
+                <div className={"CommandsPage_List"}>
+                    {
+                        listCommands().map(command => (
+                            <Card
+                                title={command.name[0]}
+                                alternate={command.name.length == 1 ? undefined :
+                                    `(aka /${command.name.slice(1).join(", /")})`}
+                                description={command.description}
+                                height={75}
+                            />
+                        ))
+                    }
+                </div>
             </div>
         );
     }
diff --git a/src/handbook/src/ui/pages/HomePage.tsx b/src/handbook/src/ui/pages/HomePage.tsx
index f10c0b2e0..94334fa2f 100644
--- a/src/handbook/src/ui/pages/HomePage.tsx
+++ b/src/handbook/src/ui/pages/HomePage.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import HomeButton from "@app/ui/widgets/HomeButton";
+import HomeButton from "@components/widgets/HomeButton";
 
 import { ReactComponent as DiscordLogo } from "@icons/discord.svg";
 
diff --git a/src/handbook/src/ui/widgets/Card.tsx b/src/handbook/src/ui/widgets/Card.tsx
new file mode 100644
index 000000000..a68ae151b
--- /dev/null
+++ b/src/handbook/src/ui/widgets/Card.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+import "@css/widgets/Card.scss";
+
+interface IProps {
+    title: string;
+    alternate?: string;
+    description?: string | string[];
+
+    height?: number | string;
+
+    onClick?: () => void;
+    onOver?: () => void;
+    onOut?: () => void;
+}
+
+class Card extends React.PureComponent<IProps> {
+    constructor(props: IProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div
+                className={"Card"}
+                onClick={this.props.onClick}
+                onMouseOver={this.props.onOver}
+                onMouseOut={this.props.onOut}
+                style={{ height: this.props.height }}
+            >
+                <div className={"Card_Header"}>
+                    <p className={"Card_Title"}>{this.props.title}</p>
+                    {this.props.alternate &&
+                        <p className={"Card_Alternate"}>{this.props.alternate}</p>}
+                </div>
+
+                <div style={{ height: "50%", 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>
+        );
+    }
+}
+
+export default Card;
diff --git a/src/handbook/src/ui/widgets/Command.tsx b/src/handbook/src/ui/widgets/Command.tsx
deleted file mode 100644
index d0f84dfac..000000000
--- a/src/handbook/src/ui/widgets/Command.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-interface IProps {
-
-}
-
-class Command extends React.PureComponent<IProps> {
-    constructor(props: IProps) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div>
-                <a>command</a>
-            </div>
-        );
-    }
-}