From 0878625181a72e99e596d687c572bceb54e946f3 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sat, 28 Aug 2021 00:25:23 -0300
Subject: [PATCH] Avatar editor disabled items fix

---
 package.json                                   | 18 ++++++------------
 .../card/grid/item/NitroCardGridItemView.scss  | 11 +++++++++--
 .../card/grid/item/NitroCardGridItemView.tsx   |  6 ++++--
 .../grid/item/NitroCardGridItemView.types.ts   |  1 +
 .../common/AvatarEditorGridPartItem.ts         |  2 +-
 .../AvatarEditorFigureSetItemView.tsx          |  2 +-
 6 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index b0eda902..41bf39f4 100644
--- a/package.json
+++ b/package.json
@@ -50,22 +50,17 @@
       "keyword-spacing": [
         "error",
         {
-          "overrides":
-          {
-            "if":
-            {
+          "overrides": {
+            "if": {
               "after": false
             },
-            "for":
-            {
+            "for": {
               "after": false
             },
-            "while":
-            {
+            "while": {
               "after": false
             },
-            "switch":
-            {
+            "switch": {
               "after": false
             }
           }
@@ -96,8 +91,7 @@
       "@typescript-eslint/ban-types": [
         "error",
         {
-          "types":
-          {
+          "types": {
             "String": true,
             "Boolean": true,
             "Number": true,
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.scss b/src/layout/card/grid/item/NitroCardGridItemView.scss
index b2959864..666b8bbd 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.scss
+++ b/src/layout/card/grid/item/NitroCardGridItemView.scss
@@ -9,8 +9,6 @@
         position: relative;
         width: 100%;
         height: 100%;
-        background-position: center;
-        background-repeat: no-repeat;
         overflow: hidden;
 
         &.theme-default {
@@ -69,6 +67,15 @@
             background-position-y: 12px !important;
         }
 
+        .background {
+            background-position: center;
+            background-repeat: no-repeat;
+
+            &.disabled {
+                opacity: 0.5;
+            }
+        }
+
         .trade-button {
             position: absolute;
             bottom: 2px;
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx
index a1e4b253..7abf615c 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.tsx
+++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { FC } from 'react';
 import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
 import { useNitroCardGridContext } from '../context';
@@ -6,14 +7,15 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
 
 export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, children = null, ...rest } = props;
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, backgroundDisabled = false, children = null, ...rest } = props;
     const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext();
 
     const imageUrl = `url(${ itemImage })`;
 
     return (
         <div className={ `${ columns === undefined ? 'col' : ('col-' + columns) } pb-1 grid-item-container` }>
-            <div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) } { ...rest }>
+            <div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } { ...rest }>
+                <div className={'background position-absolute w-100 h-100' + classNames({ ' disabled': backgroundDisabled })} style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) }></div>
                 { (itemCount > 1) &&
                     <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
                 { itemUnique && 
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.types.ts b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
index bf005811..385101e4 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.types.ts
+++ b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
@@ -10,4 +10,5 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
     columns?: number;
+    backgroundDisabled?: boolean;
 }
diff --git a/src/views/avatar-editor/common/AvatarEditorGridPartItem.ts b/src/views/avatar-editor/common/AvatarEditorGridPartItem.ts
index dbfa097a..19a96784 100644
--- a/src/views/avatar-editor/common/AvatarEditorGridPartItem.ts
+++ b/src/views/avatar-editor/common/AvatarEditorGridPartItem.ts
@@ -209,7 +209,7 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener
             this._isSellable    = false;
         }
 
-        if(this._isDisabled) this.setAlpha(container, 0.2);
+        //if(this._isDisabled) this.setAlpha(container, 0.2);
 
         this._imageUrl = TextureUtils.generateImageUrl(container);
         
diff --git a/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx b/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx
index c79dc0a7..db7fcd7e 100644
--- a/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx
+++ b/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx
@@ -24,7 +24,7 @@ export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProp
     })
 
     return (
-        <NitroCardGridItemView itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ () => onClick(partItem) }>
+        <NitroCardGridItemView backgroundDisabled={ partItem.isDisabled } itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ () => onClick(partItem) }>
             { partItem.isHC && <CurrencyIcon className="position-absolute end-1 bottom-1" type={ 'hc' } /> }
             { partItem.isClear && <i className="icon clear-icon" /> }
             { partItem.isSellable && <i className="position-absolute icon sellable-icon end-1 bottom-1" /> }