Add 'Add to Inventory' item card widget

src/handbook/src/css/widgets/ItemCard.scss

@@ -39,7 +39,7 @@
         font-size: 20px;
 
         max-width: 170px;
-        max-height: 40px;
+        max-height: 60px;
 
         color: var(--text-primary-color);
     }
@@ -69,3 +69,75 @@
         color: var(--text-primary-color);
     }
 }
+
+.ItemCard_Actions {
+    display: flex;
+    flex-direction: column;
+
+    gap: 5px;
+    padding-top: 10px;
+}
+
+.ItemCard_Counter {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    width: 100%;
+    height: 100%;
+    max-width: 260px;
+    max-height: 46px;
+
+    border-radius: 10px;
+    padding: 0 13px 0 13px;
+    box-sizing: border-box;
+
+    align-items: center;
+    background-color: var(--secondary-color);
+}
+
+.ItemCard_Operation {
+    user-select: none;
+    display: flex;
+
+    width: 30px;
+    height: 20px;
+
+    font-size: 24px;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-primary-color);
+
+    background-color: var(--background-color);
+}
+
+.ItemCard_Count {
+    max-width: 105px;
+    height: 48px;
+
+    font-size: 24px;
+    text-align: center;
+    background-color: transparent;
+    color: var(--text-primary-color);
+    border: transparent;
+}
+
+.ItemCard_Count:focus {
+    outline: none;
+}
+
+.ItemCard_Submit {
+    width: 100%;
+    height: 46px;
+    max-width: 260px;
+
+    border-radius: 10px;
+    text-align: center;
+    justify-content: center;
+
+    border: transparent;
+    font-size: 24px;
+
+    color: var(--text-primary-color);
+    background-color: var(--secondary-color);
+}

src/handbook/src/ui/widgets/ItemCard.tsx

@@ -27,15 +27,69 @@ interface IProps {
 
 interface IState {
     icon: boolean;
+    count: number | string;
 }
 
+const defaultState = {
+    icon: true,
+    count: 1
+};
+
 class ItemCard extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
 
-        this.state = {
+        this.state = defaultState;
-            icon: true
+    }
-        };
+
+    /**
+     * Updates the count of the item.
+     *
+     * @param event The change event.
+     * @private
+     */
+    private updateCount(event: React.ChangeEvent<HTMLInputElement>) {
+        const value = event.target.value;
+        if (isNaN(parseInt(value)) && value.length > 1) return;
+
+        this.setState({ count: value });
+    }
+
+    /**
+     * Adds to the count of the item.
+     *
+     * @param positive Is the count being added or subtracted?
+     * @param multiple Is the count being multiplied by 10?
+     * @private
+     */
+    private addCount(positive: boolean, multiple: boolean) {
+        let { count } = this.state;
+        if (count === "") count = 1;
+        if (typeof count == "string")
+            count = parseInt(count);
+        if (count < 1) count = 1;
+
+        let increment = 1;
+        if (!positive) increment = -1;
+        if (multiple) increment *= 10;
+
+        count = Math.max(1, count + increment);
+
+        this.setState({ count });
+    }
+
+    /**
+     * Adds the item to the player's connected inventory.
+     * @private
+     */
+    private async addToInventory(): Promise<void> {
+        // TODO: Implement server access.
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any) {
+        if (this.props.item != prevProps.item) {
+            this.setState(defaultState);
+        }
     }
 
     render() {
@@ -64,8 +118,36 @@ class ItemCard extends React.Component<IProps, IState> {
                     </div>
                 </div>
 
-                <div>
+                <div className={"ItemCard_Actions"}>
+                    <div className={"ItemCard_Counter"}>
+                        <div onClick={() => this.addCount(false, false)}
+                             onContextMenu={(e) => {
+                                 e.preventDefault();
+                                 this.addCount(false, true);
+                             }}
+                             className={"ItemCard_Operation"}>-</div>
+                        <input type={"text"}
+                               value={this.state.count}
+                               className={"ItemCard_Count"}
+                               onChange={this.updateCount.bind(this)}
+                               onBlur={() => {
+                                   if (this.state.count == "") {
+                                        this.setState({ count: 1 });
+                                   }
+                               }}
+                        />
+                        <div onClick={() => this.addCount(true, false)}
+                             onContextMenu={(e) => {
+                                 e.preventDefault();
+                                 this.addCount(true, true);
+                             }}
+                             className={"ItemCard_Operation"}>+</div>
+                    </div>
 
+                    <button
+                        className={"ItemCard_Submit"}
+                        onClick={this.addToInventory.bind(this)}
+                    >Add to Inventory</button>
                 </div>
             </div>
         ) : undefined;