Playing around with a new equipment idea

package.json

@@ -86,6 +86,7 @@
         "rpg-awesome": "^0.2.0",
         "styled-components": "^6.1.8",
         "tailwindcss-classnames": "^3.0.2",
+        "ts-pattern": "^5.6.0",
         "tsyringe": "^4.8.0"
     },
     "type": "module"

resources/js/dts/vite.d.ts

@@ -3,7 +3,6 @@
 
 interface ImportMetaEnv {
     readonly VITE_BASE_URL: string;
-    // Add other environment variables here as needed
 }
 
 interface ImportMeta {

resources/js/game/components/items/item-name/item-name-coloration-text.tsx

@@ -35,10 +35,6 @@ export default class ItemNameColorationText extends React.Component<
             return "text-amber-600 dark:text-amber-500";
         }
 
-        if (item.is_mythic) {
-            return "text-amber-600 dark:text-amber-500";
-        }
-
         if (item.is_unique) {
             return "text-green-700 dark:text-green-600";
         }

resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/enums/equipment-position-paths.ts

@@ -0,0 +1,159 @@
+import { EquipmentTypes } from "./equipment-types";
+import { defaultPositionImage, Position } from "./position-paths";
+
+const basePath: string = import.meta.env.VITE_BASE_IMAGE_URL;
+const equipmentSection: string = `${basePath}/pixel-art/equipped-sections`;
+
+export const positionEquipmentPaths: Record<
+    Position,
+    Record<EquipmentTypes, string>
+> = {
+    [Position.HELMET]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/helmet/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/helmet/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/helmet/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/helmet/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/helmet/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/helmet/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/helmet/cosmic.png`,
+    },
+    [Position.BODY]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/body/body-armour-normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/body/body-armour-one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/body/body-armour-two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/body/body-armour-holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/body/body-armour-unique.gif`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/body/body-armour-mythical.gif`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/body/body-armour-cosmic.gif`,
+    },
+    [Position.SLEEVES_LEFT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/sleeves_left/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/sleeves_left/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/sleeves_left/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/sleeves_left/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/sleeves_left/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/sleeves_left/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/sleeves_left/cosmic.png`,
+    },
+    [Position.SLEEVES_RIGHT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/sleeves_right/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/sleeves_right/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/sleeves_right/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/sleeves_right/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/sleeves_right/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/sleeves_right/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/sleeves_right/cosmic.png`,
+    },
+    [Position.LEGGINGS]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/leggings/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/leggings/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/leggings/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/leggings/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/leggings/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/leggings/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/leggings/cosmic.png`,
+    },
+    [Position.FEET]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/feet/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/feet/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/feet/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/feet/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/feet/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/feet/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/feet/cosmic.png`,
+    },
+    [Position.GLOVES_RIGHT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/gloves_right/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/gloves_right/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/gloves_right/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/gloves_right/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/gloves_right/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/gloves_right/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/gloves_right/cosmic.png`,
+    },
+    [Position.GLOVES_LEFT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/gloves_left/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/gloves_left/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/gloves_left/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/gloves_left/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/gloves_left/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/gloves_left/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/gloves_left/cosmic.png`,
+    },
+    [Position.WEAPON_LEFT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/weapon_left/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/weapon_left/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/weapon_left/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/weapon_left/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/weapon_left/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/weapon_left/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/weapon_left/cosmic.png`,
+    },
+    [Position.WEAPON_RIGHT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/weapon_right/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/weapon_right/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/weapon_right/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/weapon_right/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/weapon_right/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/weapon_right/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/weapon_right/cosmic.png`,
+    },
+    [Position.SPELL_LEFT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/spell_left/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/spell_left/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/spell_left/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/spell_left/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/spell_left/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/spell_left/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/spell_left/cosmic.png`,
+    },
+    [Position.SPELL_RIGHT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/spell_right/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/spell_right/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/spell_right/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/spell_right/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/spell_right/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/spell_right/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/spell_right/cosmic.png`,
+    },
+    [Position.RING_LEFT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/ring_left/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/ring_left/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/ring_left/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/ring_left/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/ring_left/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/ring_left/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/ring_left/cosmic.png`,
+    },
+    [Position.RING_RIGHT]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/ring_right/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/ring_right/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/ring_right/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/ring_right/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/ring_right/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/ring_right/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/ring_right/cosmic.png`,
+    },
+    [Position.TRINKET]: {
+        [EquipmentTypes.NORMAL]: `${equipmentSection}/trinket/normal.png`,
+        [EquipmentTypes.ONE_ENCHANT]: `${equipmentSection}/trinket/one-enchant.png`,
+        [EquipmentTypes.TWO_ENCHANTS]: `${equipmentSection}/trinket/two-enchants.png`,
+        [EquipmentTypes.HOLY]: `${equipmentSection}/trinket/holy.png`,
+        [EquipmentTypes.UNIQUE]: `${equipmentSection}/trinket/unique.png`,
+        [EquipmentTypes.MYTHICAL]: `${equipmentSection}/trinket/mythical.png`,
+        [EquipmentTypes.COSMIC]: `${equipmentSection}/trinket/cosmic.png`,
+    },
+};
+
+export const getEquipmentImagePath = (
+    position: Position,
+    equipmentType: EquipmentTypes,
+): string => {
+    const equipmentPaths = positionEquipmentPaths[position];
+
+    if (equipmentPaths && equipmentPaths[equipmentType]) {
+        return equipmentPaths[equipmentType];
+    }
+
+    return defaultPositionImage[position];
+};

resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/enums/equipment-types.ts

@@ -0,0 +1,43 @@
+import { ItemForColorizationDefinition } from "../../../../../../../components/items/item-name/types/item-name-coloration-text-props";
+import ItemDetails from "../../../../modals/components/item-details";
+import InventoryDetails from "../../../../../../../lib/game/character-sheet/types/inventory/inventory-details";
+
+export enum EquipmentTypes {
+    NORMAL = "normal",
+    ONE_ENCHANT = "one_enchant",
+    TWO_ENCHANTS = "two_enchants",
+    HOLY = "holy",
+    UNIQUE = "unique",
+    MYTHICAL = "mythical",
+    COSMIC = "cosmic",
+}
+
+export const determineEquipmentType = (
+    item: InventoryDetails,
+): EquipmentTypes => {
+    if (item.is_cosmic) {
+        return EquipmentTypes.COSMIC;
+    }
+
+    if (item.is_mythic) {
+        return EquipmentTypes.MYTHICAL;
+    }
+
+    if (item.is_unique) {
+        return EquipmentTypes.UNIQUE;
+    }
+
+    if (item.has_holy_stacks_applied > 0) {
+        return EquipmentTypes.HOLY;
+    }
+
+    if (item.attached_affixes_count > 1) {
+        return EquipmentTypes.TWO_ENCHANTS;
+    }
+
+    if (item.attached_affixes_count > 0) {
+        return EquipmentTypes.ONE_ENCHANT;
+    }
+
+    return EquipmentTypes.NORMAL;
+};

resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/enums/position-paths.ts

@@ -0,0 +1,74 @@
+const basePath: string = import.meta.env.VITE_BASE_IMAGE_URL;
+const equipmentSection: string = `${basePath}/pixel-art/equipment-section`;
+
+export enum Position {
+    HELMET = "HELMET",
+    SLEEVES_LEFT = "SLEEVES_LEFT",
+    SLEEVES_RIGHT = "SLEEVES_RIGHT",
+    GLOVES_LEFT = "GLOVES_LEFT",
+    GLOVES_RIGHT = "GLOVES_RIGHT",
+    LEGGINGS = "LEGGINGS",
+    BODY = "BODY",
+    FEET = "FEET",
+    WEAPON_RIGHT = "WEAPON_RIGHT",
+    WEAPON_LEFT = "WEAPON_LEFT",
+    RING_RIGHT = "RING_RIGHT",
+    RING_LEFT = "RING_LEFT",
+    SPELL_RIGHT = "SPELL_RIGHT",
+    SPELL_LEFT = "SPELL_LEFT",
+    TRINKET = "TRINKET",
+}
+
+export const defaultPositionImage: Record<Position, string> = {
+    [Position.HELMET]: `${equipmentSection}/head.png`,
+    [Position.BODY]: `${equipmentSection}/body.png`,
+    [Position.SLEEVES_LEFT]: `${equipmentSection}/left-arm.png`,
+    [Position.SLEEVES_RIGHT]: `${equipmentSection}/right-arm.png`,
+    [Position.LEGGINGS]: `${equipmentSection}/leggings.png`,
+    [Position.FEET]: `${equipmentSection}/feet.png`,
+    [Position.GLOVES_RIGHT]: `${equipmentSection}/right-hand.png`,
+    [Position.GLOVES_LEFT]: `${equipmentSection}/left-hand.png`,
+    [Position.WEAPON_LEFT]: `${equipmentSection}/nothing-equipped.png`,
+    [Position.WEAPON_RIGHT]: `${equipmentSection}/nothing-equipped.png`,
+    [Position.SPELL_LEFT]: `${equipmentSection}/nothing-equipped.png`,
+    [Position.SPELL_RIGHT]: `${equipmentSection}/nothing-equipped.png`,
+    [Position.RING_LEFT]: `${equipmentSection}/nothing-equipped.png`,
+    [Position.RING_RIGHT]: `${equipmentSection}/nothing-equipped.png`,
+    [Position.TRINKET]: `${equipmentSection}/nothing-equipped.png`,
+};
+
+export const defaultPositionImageAlt: Record<Position, string> = {
+    [Position.HELMET]: "Helmet",
+    [Position.BODY]: "Body",
+    [Position.SLEEVES_LEFT]: "Left Sleeves",
+    [Position.SLEEVES_RIGHT]: "Right Sleeves",
+    [Position.GLOVES_LEFT]: "Left Gloves",
+    [Position.GLOVES_RIGHT]: "Right Gloves",
+    [Position.LEGGINGS]: "Leggings",
+    [Position.FEET]: "Feet",
+    [Position.WEAPON_RIGHT]: "Right Weapon",
+    [Position.WEAPON_LEFT]: "Left Weapon",
+    [Position.SPELL_RIGHT]: "Right Spell",
+    [Position.SPELL_LEFT]: "Left Spell",
+    [Position.RING_RIGHT]: "Right Ring",
+    [Position.RING_LEFT]: "Left Ring",
+    [Position.TRINKET]: "Trinket",
+};
+
+export const positionTypeMap: Record<Position, string> = {
+    [Position.HELMET]: "helmet",
+    [Position.BODY]: "body",
+    [Position.SLEEVES_LEFT]: "sleeves",
+    [Position.SLEEVES_RIGHT]: "sleeves",
+    [Position.GLOVES_LEFT]: "gloves",
+    [Position.GLOVES_RIGHT]: "gloves",
+    [Position.LEGGINGS]: "leggings",
+    [Position.FEET]: "feet",
+    [Position.WEAPON_RIGHT]: "weapon",
+    [Position.WEAPON_LEFT]: "weapon",
+    [Position.SPELL_RIGHT]: "spell-one",
+    [Position.SPELL_LEFT]: "spell-two",
+    [Position.RING_RIGHT]: "ring-one",
+    [Position.RING_LEFT]: "ring-two",
+    [Position.TRINKET]: "trinket",
+};

resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/styles/border-styles.ts

@@ -0,0 +1,26 @@
+import { EquipmentTypes } from "../enums/equipment-types";
+import { match } from "ts-pattern";
+
+export const borderStyles = (equipmentType: EquipmentTypes): string => {
+    return match(equipmentType)
+        .with(EquipmentTypes.NORMAL, () => "")
+        .with(EquipmentTypes.ONE_ENCHANT, () => "border-blue-500")
+        .with(
+            EquipmentTypes.TWO_ENCHANTS,
+            () => "border-fuchsia-800 dark:border-fuchsia-300",
+        )
+        .with(EquipmentTypes.HOLY, () => "border-sky-700 dark:border-sky-300")
+        .with(
+            EquipmentTypes.UNIQUE,
+            () => "border-green-700 dark:border-green-600",
+        )
+        .with(
+            EquipmentTypes.MYTHICAL,
+            () => "border-amber-600 dark:border-amber-500",
+        )
+        .with(
+            EquipmentTypes.COSMIC,
+            () => "border-cosmic-colors-700 dark:border-cosmic-colors-60",
+        )
+        .otherwise(() => "");
+};