Lint Code [skip actions]

src/handbook/src/backend/data.ts

@@ -26,9 +26,9 @@ export function listCommands(): Command[] {
  * Fetches and casts all avatars in the file.
  */
 export function getAvatars(): AvatarDump {
-    const map: AvatarDump = {}; avatars.forEach(avatar => {
+    const map: AvatarDump = {};
-        const values = Object.values(avatar) as
+    avatars.forEach((avatar) => {
-            [string, string, string];
+        const values = Object.values(avatar) as [string, string, string];
         const id = parseInt(values[0]);
         map[id] = {
             id,
@@ -51,15 +51,14 @@ export function listAvatars(): Avatar[] {
  * Fetches and casts all items in the file.
  */
 export function getItems(): Item[] {
-    return items.map(item => {
+    return items.map((item) => {
-        const values = Object.values(item) as
+        const values = Object.values(item) as [string, string, string, string];
-            [string, string, string, string];
         const id = parseInt(values[0]);
         return {
             id,
             name: values[1],
             type: values[2] as ItemType,
             quality: values[3] as Quality
-        }
+        };
     });
 }

src/handbook/src/backend/types.ts

@@ -19,7 +19,7 @@ export type Item = {
     name: string;
     quality: Quality;
     type: ItemType;
-}
+};
 
 export enum Target {
     None = "NONE",

src/handbook/src/main.tsx

@@ -9,9 +9,8 @@ import App from "@components/App";
 events.setup();
 
 // Render the application.
-createRoot(document.getElementById(
+createRoot(document.getElementById("root") as HTMLElement).render(
-    "root") as HTMLElement).render(
+    <React.StrictMode>
-        <React.StrictMode>
+        <App />
-            <App />
+    </React.StrictMode>
-        </React.StrictMode>
 );

src/handbook/src/ui/pages/AvatarsPage.tsx

@@ -13,12 +13,9 @@ class AvatarsPage extends React.PureComponent {
                 <h1 className={"AvatarsPage_Title"}>Characters</h1>
 
                 <div className={"AvatarsPage_List"}>
-                    {
+                    {listAvatars().map((avatar) =>
-                        listAvatars().map(avatar => (
+                        avatar.id > 11000000 ? undefined : <Character key={avatar.id} data={avatar} />
-                            avatar.id > 11000000 ? undefined :
+                    )}
-                                <Character key={avatar.id} data={avatar} />
-                        ))
-                    }
                 </div>
             </div>
         );

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

@@ -13,18 +13,17 @@ class CommandsPage extends React.PureComponent {
                 <h1 className={"CommandsPage_Title"}>Commands</h1>
 
                 <div className={"CommandsPage_List"}>
-                    {
+                    {listCommands().map((command) => (
-                        listCommands().map(command => (
+                        <Card
-                            <Card
+                            key={command.name[0]}
-                                key={command.name[0]}
+                            title={command.name[0]}
-                                title={command.name[0]}
+                            alternate={
-                                alternate={command.name.length == 1 ? undefined :
+                                command.name.length == 1 ? undefined : `(aka /${command.name.slice(1).join(", /")})`
-                                    `(aka /${command.name.slice(1).join(", /")})`}
+                            }
-                                description={command.description}
+                            description={command.description}
-                                height={75}
+                            height={75}
-                            />
+                        />
-                        ))
+                    ))}
-                    }
                 </div>
             </div>
         );

src/handbook/src/ui/pages/ItemsPage.tsx

@@ -11,11 +11,9 @@ class ItemsPage extends React.PureComponent {
                 <h1 className={"ItemsPage_Title"}>Items</h1>
 
                 <div className={"ItemsPage_List"}>
-                    {
+                    {getItems().map((item) => (
-                        getItems().map(item => (
+                        <p key={item.id}>{item.name}</p>
-                            <p key={item.id}>{item.name}</p>
+                    ))}
-                        ))
-                    }
                 </div>
             </div>
         );

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

@@ -47,11 +47,16 @@ class Content extends React.Component<IProps, IState> {
 
     render() {
         switch (this.state.current) {
-            default: return undefined;
+            default:
-            case "Home": return <HomePage />;
+                return undefined;
-            case "Commands": return <CommandsPage />;
+            case "Home":
-            case "Avatars": return <AvatarsPage />;
+                return <HomePage />;
-            case "Items": return <ItemsPage />;
+            case "Commands":
+                return <CommandsPage />;
+            case "Avatars":
+                return <AvatarsPage />;
+            case "Items":
+                return <ItemsPage />;
         }
     }
 }

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

@@ -14,10 +14,7 @@ class SideBar extends React.Component<any, any> {
     render() {
         return (
             <div className={"SideBar"}>
-                <h1
+                <h1 className={"SideBar_Title"} onClick={() => navigate("Home")}>
-                    className={"SideBar_Title"}
-                    onClick={() => navigate("Home")}
-                >
                     The Ultimate Anime Game Handbook
                 </h1>
 

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

@@ -30,19 +30,21 @@ class Card extends React.PureComponent<IProps> {
             >
                 <div className={"Card_Header"}>
                     <p className={"Card_Title"}>{this.props.title}</p>
-                    {this.props.alternate &&
+                    {this.props.alternate && <p className={"Card_Alternate"}>{this.props.alternate}</p>}
-                        <p className={"Card_Alternate"}>{this.props.alternate}</p>}
                 </div>
 
                 <div style={{ height: "50%", alignItems: "center" }}>
-                    {
+                    {this.props.description ? (
-                        this.props.description ? (
+                        Array.isArray(this.props.description) ? (
-                            Array.isArray(this.props.description) ?
+                            this.props.description.map((line, index) => (
-                                this.props.description.map((line, index) => (
+                                <p className={"Card_Description"} key={index}>
-                                    <p className={"Card_Description"} key={index}>{line}</p>
+                                    {line}
-                                )) : <p className={"Card_Description"}>{this.props.description}</p>
+                                </p>
-                        ) : undefined
+                            ))
-                    }
+                        ) : (
+                            <p className={"Card_Description"}>{this.props.description}</p>
+                        )
+                    ) : undefined}
                 </div>
             </div>
         );

src/handbook/src/ui/widgets/Character.tsx

@@ -26,12 +26,12 @@ const ignored = [
 
 const refSwitch: { [key: number]: string } = {
     10000005: "traveler_anemo",
-    10000007: "traveler_geo",
+    10000007: "traveler_geo"
 };
 
 const nameSwitch: { [key: number]: string } = {
     10000005: "Lumine",
-    10000007: "Aether",
+    10000007: "Aether"
 };
 
 interface IProps {
@@ -48,14 +48,10 @@ class Character extends React.PureComponent<IProps> {
         const qualityColor = colorFor(quality);
 
         // Check if the avatar is blacklisted.
-        if (ignored.includes(id))
+        if (ignored.includes(id)) return undefined;
-            return undefined;
 
         return (
-            <div
+            <div className={"Character"} style={{ backgroundColor: `var(${qualityColor})` }}>
-                className={"Character"}
-                style={{ backgroundColor: `var(${qualityColor})` }}
-            >
                 <img
                     className={"Character_Icon"}
                     alt={name}

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

@@ -25,15 +25,8 @@ class HomeButton extends React.PureComponent<IProps> {
 
     render() {
         return (
-            <div
+            <div className={"HomeButton"} onClick={() => this.redirect()}>
-                className={"HomeButton"}
+                <img className={"HomeButton_Icon"} src={"https://dummyimage.com/128x128"} alt={this.props.name} />
-                onClick={() => this.redirect()}
-            >
-                <img
-                    className={"HomeButton_Icon"}
-                    src={"https://dummyimage.com/128x128"}
-                    alt={this.props.name}
-                />
 
                 <p className={"HomeButton_Label"}>{this.props.name}</p>
             </div>

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

@@ -25,15 +25,8 @@ class SideBarButton extends React.PureComponent<IProps> {
 
     render() {
         return (
-            <div
+            <div className={"SideBarButton"} onClick={() => this.redirect()}>
-                className={"SideBarButton"}
+                <img className={"SideBarButton_Icon"} src={"https://dummyimage.com/128x128"} alt={this.props.name} />
-                onClick={() => this.redirect()}
-            >
-                <img
-                    className={"SideBarButton_Icon"}
-                    src={"https://dummyimage.com/128x128"}
-                    alt={this.props.name}
-                />
 
                 <p className={"SideBarButton_Label"}>{this.props.name}</p>
             </div>

src/handbook/src/utils.ts

@@ -7,11 +7,17 @@ import { Quality } from "@backend/types";
  */
 export function colorFor(quality: Quality): string {
     switch (quality) {
-        default: return "--legendary-color";
+        default:
-        case "EPIC": return "--epic-color";
+            return "--legendary-color";
-        case "RARE": return "--rare-color";
+        case "EPIC":
-        case "UNCOMMON": return "--uncommon-color";
+            return "--epic-color";
-        case "COMMON": return "--common-color";
+        case "RARE":
-        case "UNKNOWN": return "--unknown-color";
+            return "--rare-color";
+        case "UNCOMMON":
+            return "--uncommon-color";
+        case "COMMON":
+            return "--common-color";
+        case "UNKNOWN":
+            return "--unknown-color";
     }
 }