Lint Code [skip actions]

src/handbook/package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "handbook",
       "version": "0.1.0",
+      "hasInstallScript": true,
       "dependencies": {
         "events": "^3.3.0",
         "react": "^18.2.0",
@@ -16,7 +17,6 @@
       "devDependencies": {
         "@rollup/plugin-dsv": "^3.0.2",
         "@types/events": "^3.0.0",
-        "@types/node": "^18.15.11",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
         "@types/react-virtualized": "^9.21.21",
@@ -750,7 +750,9 @@
       "version": "18.15.11",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
       "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -4083,7 +4085,9 @@
       "version": "18.15.11",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
       "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "@types/parse-json": {
       "version": "4.0.0",

src/handbook/src/backend/data.ts

@@ -31,7 +31,7 @@ export const sortedItems: TaggedItems = {
  * Sorts all items into their respective categories.
  */
 export function setup(): void {
-    getItems().forEach(item => {
+    getItems().forEach((item) => {
         switch (item.type) {
             case ItemType.Weapon:
                 sortedItems[ItemCategory.Weapon].push(item);

src/handbook/src/ui/components/VirtualizedGrid.tsx

@@ -48,12 +48,17 @@ class VirtualizedGrid<T> extends React.Component<IProps<T>, IState> {
         }
 
         return (
-            <div key={props.key} style={{
+            <div
-                ...props.style,
+                key={props.key}
-                gap: this.props.itemGap ?? 0
+                style={{
-            }} className={"GridRow"}>
+                    ...props.style,
-                {items.map((item, index) =>
+                    gap: this.props.itemGap ?? 0
-                    <div key={index}>{item}</div>)}
+                }}
+                className={"GridRow"}
+            >
+                {items.map((item, index) => (
+                    <div key={index}>{item}</div>
+                ))}
                 <div style={{ height: this.props.gap ?? 0 }} />
             </div>
         );
@@ -65,12 +70,14 @@ class VirtualizedGrid<T> extends React.Component<IProps<T>, IState> {
         return (
             <AutoSizer>
                 {({ height, width }) => (
-                    <List height={height - 150} width={width}
+                    <List
-                          rowHeight={itemHeight + (this.props.gap ?? 0)}
+                        height={height - 150}
-                          rowCount={Math.ceil(list.length / (itemsPerRow ?? 10))}
+                        width={width}
-                          rowRenderer={this.rowRender.bind(this)}
+                        rowHeight={itemHeight + (this.props.gap ?? 0)}
-                          scrollTop={this.state.scrollTop}
+                        rowCount={Math.ceil(list.length / (itemsPerRow ?? 10))}
-                          onScroll={(e) => this.setState({ scrollTop: e.scrollTop })}
+                        rowRenderer={this.rowRender.bind(this)}
+                        scrollTop={this.state.scrollTop}
+                        onScroll={(e) => this.setState({ scrollTop: e.scrollTop })}
                     />
                 )}
             </AutoSizer>

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

@@ -91,23 +91,25 @@ class ItemsPage extends React.Component<{}, IState> {
                     <h1 className={"ItemsPage_Title"}>Items</h1>
 
                     <div className={"ItemsPage_Search"}>
-                        <input type={"text"}
+                        <input
-                               className={"ItemsPage_Input"}
+                            type={"text"}
-                               placeholder={"Search..."}
+                            className={"ItemsPage_Input"}
-                               onChange={this.onChange.bind(this)}
+                            placeholder={"Search..."}
+                            onChange={this.onChange.bind(this)}
                         />
                     </div>
                 </div>
 
-                {
+                {items.length > 0 ? (
-                    items.length > 0 ? (
+                    <VirtualizedGrid
-                        <VirtualizedGrid
+                        list={items.filter((item) => this.showItem(item))}
-                            list={items.filter(item => this.showItem(item))} itemHeight={64}
+                        itemHeight={64}
-                            itemsPerRow={20} gap={5} itemGap={5}
+                        itemsPerRow={20}
-                            render={(item) => <Item key={item.id} data={item} />}
+                        gap={5}
-                        />
+                        itemGap={5}
-                    ) : undefined
+                        render={(item) => <Item key={item.id} data={item} />}
-                }
+                    />
+                ) : undefined}
             </div>
         );
     }

src/handbook/src/ui/widgets/Item.tsx

@@ -37,8 +37,7 @@ class Item extends React.Component<IProps, IState> {
     }
 
     private forceReplace(): void {
-        if (!this.state.loaded)
+        if (!this.state.loaded) this.replaceIcon();
-            this.replaceIcon();
     }
 
     componentDidMount() {
@@ -54,21 +53,20 @@ class Item extends React.Component<IProps, IState> {
         return (
             <div className={"Item"}>
                 <div className={"Item_Background"}>
-                    { this.state.icon && <img
+                    {this.state.icon && (
-                        className={"Item_Icon"}
+                        <img
-                        alt={this.props.data.name}
+                            className={"Item_Icon"}
-                        src={itemIcon(this.props.data)}
+                            alt={this.props.data.name}
-                        onError={this.replaceIcon.bind(this)}
+                            src={itemIcon(this.props.data)}
-                        onLoad={() => this.setState({ loaded: true })}
+                            onError={this.replaceIcon.bind(this)}
-                    /> }
+                            onLoad={() => this.setState({ loaded: true })}
+                        />
+                    )}
 
-                    { (!this.state.loaded || !this.state.icon) &&
+                    {(!this.state.loaded || !this.state.icon) && <p className={"Item_Label"}>{this.props.data.name}</p>}
-                        <p className={"Item_Label"}>{this.props.data.name}</p> }
                 </div>
 
-                <div className={"Item_Info"}>
+                <div className={"Item_Info"}></div>
-
-                </div>
             </div>
         );
     }

src/handbook/src/utils.ts

@@ -47,9 +47,12 @@ export function itemIcon(item: Item): string {
     }
 
     switch (item.type) {
-        default: return `https://api.ambr.top/assets/UI/UI_${item.icon}.png`;
+        default:
-        case ItemType.Furniture: return `https://api.ambr.top/assets/UI/furniture/UI_${item.icon}.png`;
+            return `https://api.ambr.top/assets/UI/UI_${item.icon}.png`;
-        case ItemType.Reliquary: return `https://api.ambr.top/assets/UI/reliquary/UI_${item.icon}.png`;
+        case ItemType.Furniture:
+            return `https://api.ambr.top/assets/UI/furniture/UI_${item.icon}.png`;
+        case ItemType.Reliquary:
+            return `https://api.ambr.top/assets/UI/reliquary/UI_${item.icon}.png`;
     }
 }