🆙 Fix move avatar-editor to Tailwind

src/components/avatar-editor/AvatarEditorIcon.tsx

@@ -1,45 +1,81 @@
 import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
 import { classNames } from '../../layout';
 
-type AvatarIconType = 'male' | 'female' | 'clear' | 'sellable';
+import arrowLeftIcon from '../../assets/images/avatareditor/arrow-left-icon.png';
+import arrowRightIcon from '../../assets/images/avatareditor/arrow-right-icon.png';
+import caIcon from '../../assets/images/avatareditor/ca-icon.png';
+import caSelectedIcon from '../../assets/images/avatareditor/ca-selected-icon.png';
+import ccIcon from '../../assets/images/avatareditor/cc-icon.png';
+import ccSelectedIcon from '../../assets/images/avatareditor/cc-selected-icon.png';
+import chIcon from '../../assets/images/avatareditor/ch-icon.png';
+import chSelectedIcon from '../../assets/images/avatareditor/ch-selected-icon.png';
+import clearIcon from '../../assets/images/avatareditor/clear-icon.png';
+import cpIcon from '../../assets/images/avatareditor/cp-icon.png';
+import cpSelectedIcon from '../../assets/images/avatareditor/cp-selected-icon.png';
+import eaIcon from '../../assets/images/avatareditor/ea-icon.png';
+import eaSelectedIcon from '../../assets/images/avatareditor/ea-selected-icon.png';
+import faIcon from '../../assets/images/avatareditor/fa-icon.png';
+import faSelectedIcon from '../../assets/images/avatareditor/fa-selected-icon.png';
+import femaleIcon from '../../assets/images/avatareditor/female-icon.png';
+import femaleSelectedIcon from '../../assets/images/avatareditor/female-selected-icon.png';
+import haIcon from '../../assets/images/avatareditor/ha-icon.png';
+import haSelectedIcon from '../../assets/images/avatareditor/ha-selected-icon.png';
+import heIcon from '../../assets/images/avatareditor/he-icon.png';
+import heSelectedIcon from '../../assets/images/avatareditor/he-selected-icon.png';
+import hrIcon from '../../assets/images/avatareditor/hr-icon.png';
+import hrSelectedIcon from '../../assets/images/avatareditor/hr-selected-icon.png';
+import lgIcon from '../../assets/images/avatareditor/lg-icon.png';
+import lgSelectedIcon from '../../assets/images/avatareditor/lg-selected-icon.png';
+import maleIcon from '../../assets/images/avatareditor/male-icon.png';
+import maleSelectedIcon from '../../assets/images/avatareditor/male-selected-icon.png';
+import sellableIcon from '../../assets/images/avatareditor/sellable-icon.png';
+import shIcon from '../../assets/images/avatareditor/sh-icon.png';
+import shSelectedIcon from '../../assets/images/avatareditor/sh-selected-icon.png';
+import waIcon from '../../assets/images/avatareditor/wa-icon.png';
+import waSelectedIcon from '../../assets/images/avatareditor/wa-selected-icon.png';
+
+const ICON_MAP: Record<string, { normal: string; selected?: string }> = {
+    'arrow-left': { normal: arrowLeftIcon },
+    'arrow-right': { normal: arrowRightIcon },
+    'ca': { normal: caIcon, selected: caSelectedIcon },
+    'cc': { normal: ccIcon, selected: ccSelectedIcon },
+    'ch': { normal: chIcon, selected: chSelectedIcon },
+    'clear': { normal: clearIcon },
+    'cp': { normal: cpIcon, selected: cpSelectedIcon },
+    'ea': { normal: eaIcon, selected: eaSelectedIcon },
+    'fa': { normal: faIcon, selected: faSelectedIcon },
+    'female': { normal: femaleIcon, selected: femaleSelectedIcon },
+    'ha': { normal: haIcon, selected: haSelectedIcon },
+    'he': { normal: heIcon, selected: heSelectedIcon },
+    'hr': { normal: hrIcon, selected: hrSelectedIcon },
+    'lg': { normal: lgIcon, selected: lgSelectedIcon },
+    'male': { normal: maleIcon, selected: maleSelectedIcon },
+    'sellable': { normal: sellableIcon },
+    'sh': { normal: shIcon, selected: shSelectedIcon },
+    'wa': { normal: waIcon, selected: waSelectedIcon },
+};
 
 export const AvatarEditorIcon = forwardRef<HTMLDivElement, PropsWithChildren<{
-    icon: AvatarIconType;
+    icon: string;
     selected?: boolean;
 }> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
 {
-    const { icon = null, selected = false, className = null, ...rest } = props;
+    const { icon = null, selected = false, className = null, children, ...rest } = props;
 
-    /*
+    const iconEntry = icon ? ICON_MAP[icon] : null;
-    switch (icon)
-    {
-        case 'male':
 
+    if(!iconEntry) return null;
 
-            break;
+    const src = (selected && iconEntry.selected) ? iconEntry.selected : iconEntry.normal;
 
-        case 'arrow-left':
-
-            break;
-
-        default:
-            //statements; 
-            break;
-
-    }
-*/
     return (
         <div
             ref={ ref }
-
+            className={ classNames('flex items-center justify-center cursor-pointer', className) }
-            className={ classNames(
+            { ...rest }>
-                'nitro-avatar-editor-spritesheet',
+            <img src={ src } alt={ icon } className="h-[22px] w-auto object-contain pointer-events-none" draggable={ false } />
-                'cursor-pointer',
+            { children }
-                `${ icon }-icon`,
+        </div>
-                selected && 'selected',
-                className
-            ) }
-            { ...rest } />
     );
 });
 

src/css/index.css

@@ -447,219 +447,7 @@ body {
     }
 }
 
-.nitro-avatar-editor-spritesheet {
+/* Avatar editor icons are now rendered as <img> tags via AvatarEditorIcon.tsx */
-    background: url('@/assets/images/avatareditor/avatar-editor-spritesheet.png') transparent no-repeat;
-
-    &.arrow-left-icon {
-        width: 28px;
-        height: 21px;
-        background-position: -226px -131px;
-    }
-
-    &.arrow-right-icon {
-        width: 28px;
-        height: 21px;
-        background-position: -226px -162px;
-    }
-
-    &.ca-icon {
-        width: 25px;
-        height: 25px;
-        background-position: -226px -61px;
-
-        &.selected {
-            width: 25px;
-            height: 25px;
-            background-position: -226px -96px;
-        }
-    }
-
-    &.cc-icon {
-        width: 31px;
-        height: 29px;
-        background-position: -145px -5px;
-
-        &.selected {
-            width: 31px;
-            height: 29px;
-            background-position: -145px -44px;
-        }
-    }
-
-    &.ch-icon {
-        width: 29px;
-        height: 24px;
-        background-position: -186px -39px;
-
-        &.selected {
-            width: 29px;
-            height: 24px;
-            background-position: -186px -73px;
-        }
-    }
-
-    &.clear-icon {
-        width: 27px;
-        height: 27px;
-        background-position: -145px -157px;
-    }
-
-    &.cp-icon {
-        width: 30px;
-        height: 24px;
-        background-position: -145px -264px;
-
-        &.selected {
-            width: 30px;
-            height: 24px;
-            background-position: -186px -5px;
-        }
-    }
-
-
-    &.ea-icon {
-        width: 35px;
-        height: 16px;
-        background-position: -226px -193px;
-
-        &.selected {
-            width: 35px;
-            height: 16px;
-            background-position: -226px -219px;
-        }
-    }
-
-    &.fa-icon {
-        width: 27px;
-        height: 20px;
-        background-position: -186px -137px;
-
-        &.selected {
-            width: 27px;
-            height: 20px;
-            background-position: -186px -107px;
-        }
-    }
-
-    &.female-icon {
-        width: 18px;
-        height: 27px;
-        background-position: -186px -202px;
-
-        &.selected {
-            width: 18px;
-            height: 27px;
-            background-position: -186px -239px;
-        }
-    }
-
-    &.ha-icon {
-        width: 25px;
-        height: 22px;
-        background-position: -226px -245px;
-
-        &.selected {
-            width: 25px;
-            height: 22px;
-            background-position: -226px -277px;
-        }
-    }
-
-    &.he-icon {
-        width: 31px;
-        height: 27px;
-        background-position: -145px -83px;
-
-        &.selected {
-            width: 31px;
-            height: 27px;
-            background-position: -145px -120px;
-        }
-    }
-
-    &.hr-icon {
-        width: 29px;
-        height: 25px;
-        background-position: -145px -194px;
-
-        &.selected {
-            width: 29px;
-            height: 25px;
-            background-position: -145px -229px;
-        }
-    }
-
-    &.lg-icon {
-        width: 19px;
-        height: 20px;
-        background-position: -303px -45px;
-
-        &.selected {
-            width: 19px;
-            height: 20px;
-            background-position: -303px -75px;
-        }
-    }
-
-    &.loading-icon {
-        width: 21px;
-        height: 25px;
-        background-position: -186px -167px;
-    }
-
-
-    &.male-icon {
-        width: 21px;
-        height: 21px;
-        background-position: -186px -276px;
-
-        &.selected {
-            width: 21px;
-            height: 21px;
-            background-position: -272px -5px;
-        }
-    }
-
-
-    &.sellable-icon {
-        width: 17px;
-        height: 15px;
-        background-position: -303px -105px;
-    }
-
-
-    &.sh-icon {
-        width: 37px;
-        height: 10px;
-        background-position: -303px -5px;
-
-        &.selected {
-            width: 37px;
-            height: 10px;
-            background-position: -303px -25px;
-        }
-    }
-
-
-    &.spotlight-icon {
-        width: 130px;
-        height: 305px;
-        background-position: -5px -5px;
-    }
-
-
-    &.wa-icon {
-        width: 36px;
-        height: 18px;
-        background-position: -226px -5px;
-
-        &.selected {
-            width: 36px;
-            height: 18px;
-            background-position: -226px -33px;
-        }
-    }
-}
 
 .nitro-avatar-editor-wardrobe-figure-preview {
     background-color: #677181;
@@ -710,7 +498,7 @@ body {
 
 
     .category-item {
-        height: 40px;
+        height: 32px;
     }
 
     .figure-preview-container {