diff --git a/package.json b/package.json index 40fb82507..960f5451f 100755 --- a/package.json +++ b/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" diff --git a/public/pixel-art/equipment-section/body.png b/public/pixel-art/equipment-section/body.png new file mode 100644 index 000000000..74ca33d7e Binary files /dev/null and b/public/pixel-art/equipment-section/body.png differ diff --git a/public/pixel-art/equipment-section/feet.png b/public/pixel-art/equipment-section/feet.png new file mode 100644 index 000000000..524034871 Binary files /dev/null and b/public/pixel-art/equipment-section/feet.png differ diff --git a/public/pixel-art/equipment-section/head.png b/public/pixel-art/equipment-section/head.png new file mode 100644 index 000000000..16921beab Binary files /dev/null and b/public/pixel-art/equipment-section/head.png differ diff --git a/public/pixel-art/equipment-section/left-arm.png b/public/pixel-art/equipment-section/left-arm.png new file mode 100644 index 000000000..9629bea80 Binary files /dev/null and b/public/pixel-art/equipment-section/left-arm.png differ diff --git a/public/pixel-art/equipment-section/left-hand.png b/public/pixel-art/equipment-section/left-hand.png new file mode 100644 index 000000000..52021f884 Binary files /dev/null and b/public/pixel-art/equipment-section/left-hand.png differ diff --git a/public/pixel-art/equipment-section/leggings.png b/public/pixel-art/equipment-section/leggings.png new file mode 100644 index 000000000..fe4a94775 Binary files /dev/null and b/public/pixel-art/equipment-section/leggings.png differ diff --git a/public/pixel-art/equipment-section/nothing-equipped.png b/public/pixel-art/equipment-section/nothing-equipped.png new file mode 100644 index 000000000..d6ad8626a Binary files /dev/null and b/public/pixel-art/equipment-section/nothing-equipped.png differ diff --git a/public/pixel-art/equipment-section/right-arm.png b/public/pixel-art/equipment-section/right-arm.png new file mode 100644 index 000000000..8fde96a0b Binary files /dev/null and b/public/pixel-art/equipment-section/right-arm.png differ diff --git a/public/pixel-art/equipment-section/right-hand.png b/public/pixel-art/equipment-section/right-hand.png new file mode 100644 index 000000000..c57643280 Binary files /dev/null and b/public/pixel-art/equipment-section/right-hand.png differ diff --git a/public/pixel-art/equipped-sections/body/body-armour-cosmic.gif b/public/pixel-art/equipped-sections/body/body-armour-cosmic.gif new file mode 100644 index 000000000..4b0c9e704 Binary files /dev/null and b/public/pixel-art/equipped-sections/body/body-armour-cosmic.gif differ diff --git a/public/pixel-art/equipped-sections/body/body-armour-holy.png b/public/pixel-art/equipped-sections/body/body-armour-holy.png new file mode 100644 index 000000000..ff5bf7436 Binary files /dev/null and b/public/pixel-art/equipped-sections/body/body-armour-holy.png differ diff --git a/public/pixel-art/equipped-sections/body/body-armour-mythical.gif b/public/pixel-art/equipped-sections/body/body-armour-mythical.gif new file mode 100644 index 000000000..d5cc94f7c Binary files /dev/null and b/public/pixel-art/equipped-sections/body/body-armour-mythical.gif differ diff --git a/public/pixel-art/equipped-sections/body/body-armour-normal.png b/public/pixel-art/equipped-sections/body/body-armour-normal.png new file mode 100644 index 000000000..1ff19ab82 Binary files /dev/null and b/public/pixel-art/equipped-sections/body/body-armour-normal.png differ diff --git a/public/pixel-art/equipped-sections/body/body-armour-one-enchant.png b/public/pixel-art/equipped-sections/body/body-armour-one-enchant.png new file mode 100644 index 000000000..4df501d6c Binary files /dev/null and b/public/pixel-art/equipped-sections/body/body-armour-one-enchant.png differ diff --git a/public/pixel-art/equipped-sections/body/body-armour-two-enchants.png b/public/pixel-art/equipped-sections/body/body-armour-two-enchants.png new file mode 100644 index 000000000..5bbddff50 Binary files /dev/null and b/public/pixel-art/equipped-sections/body/body-armour-two-enchants.png differ diff --git a/public/pixel-art/equipped-sections/body/body-armour-unique.gif b/public/pixel-art/equipped-sections/body/body-armour-unique.gif new file mode 100644 index 000000000..1981d8d0d Binary files /dev/null and b/public/pixel-art/equipped-sections/body/body-armour-unique.gif differ diff --git a/resources/js/dts/vite.d.ts b/resources/js/dts/vite.d.ts index e9783143a..122bb504e 100644 --- a/resources/js/dts/vite.d.ts +++ b/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 { diff --git a/resources/js/game/components/items/item-name/item-name-coloration-text.tsx b/resources/js/game/components/items/item-name/item-name-coloration-text.tsx index e7219d21f..374747be1 100755 --- a/resources/js/game/components/items/item-name/item-name-coloration-text.tsx +++ b/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"; } diff --git a/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/enums/equipment-position-paths.ts b/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/enums/equipment-position-paths.ts new file mode 100644 index 000000000..8e5da3a42 --- /dev/null +++ b/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 +> = { + [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]; +}; diff --git a/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/enums/equipment-types.ts b/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/enums/equipment-types.ts new file mode 100644 index 000000000..4d523bbb1 --- /dev/null +++ b/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; +}; diff --git a/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/enums/position-paths.ts b/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/enums/position-paths.ts new file mode 100644 index 000000000..3252008a8 --- /dev/null +++ b/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.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.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.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", +}; diff --git a/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/styles/border-styles.ts b/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-section/styles/border-styles.ts new file mode 100644 index 000000000..ba8037fd6 --- /dev/null +++ b/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(() => ""); +}; diff --git a/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-table.tsx b/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-table.tsx index 67a9771b0..61408ea85 100755 --- a/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-table.tsx +++ b/resources/js/game/sections/character-sheet/components/tabs/inventory-tabs/equipped-table.tsx @@ -1,20 +1,22 @@ -import React, { Fragment, ReactNode } from "react"; -import Table from "../../../../../components/ui/data-tables/table"; -import { BuildInventoryTableColumns } from "../../../../../lib/game/character-sheet/helpers/inventory/build-inventory-table-columns"; +import React, { ReactNode } from "react"; import InventoryDetails from "../../../../../lib/game/character-sheet/types/inventory/inventory-details"; import ActionsInterface from "../../../../../lib/game/character-sheet/helpers/inventory/actions-interface"; import DangerButton from "../../../../../components/ui/buttons/danger-button"; -import DropDown from "../../../../../components/ui/drop-down/drop-down"; -import LoadingProgressBar from "../../../../../components/ui/progress-bars/loading-progress-bar"; import Ajax from "../../../../../lib/ajax/ajax"; import { AxiosError, AxiosResponse } from "axios"; import { isEqual } from "lodash"; import EquippedInventoryTabProps from "../../../../../lib/game/character-sheet/types/tabs/equipped-inventory-tab-props"; import EquippedTableState from "../../../../../lib/game/character-sheet/types/tables/equipped-table-state"; -import SuccessAlert from "../../../../../components/ui/alerts/simple-alerts/success-alert"; import UsableItemsDetails from "../../../../../lib/game/character-sheet/types/inventory/usable-items-details"; -import InventoryUseDetails from "../../modals/inventory-item-details"; -import DangerAlert from "../../../../../components/ui/alerts/simple-alerts/danger-alert"; +import { + defaultPositionImage, + defaultPositionImageAlt, + Position, + positionTypeMap, +} from "./equipped-section/enums/position-paths"; +import { determineEquipmentType } from "./equipped-section/enums/equipment-types"; +import { getEquipmentImagePath } from "./equipped-section/enums/equipment-position-paths"; +import { borderStyles } from "./equipped-section/styles/border-styles"; export default class EquippedTable extends React.Component @@ -275,106 +277,94 @@ export default class EquippedTable ); } + handleClick(itemName: string) { + console.log(itemName); + } + + renderSlot(name: string, position: Position) { + let path = defaultPositionImage[position]; + const altText = defaultPositionImageAlt[position]; + + const itemType = positionTypeMap[position]; + + console.log(itemType); + + const item = this.state.data.find((item: InventoryDetails) => { + return item.type === itemType; + }); + + let itemName = "Sample"; + + if (!item) { + return ( +
this.handleClick(itemName)} + onMouseOver={(e: React.MouseEvent) => { + e.currentTarget.title = `${name}: ${itemName}`; + }} + aria-label={`${name}: ${itemName}`} + > + {altText} +
+ ); + } + + const itemEquipmentType = determineEquipmentType(item); + + path = getEquipmentImagePath(position, itemEquipmentType); + itemName = item.item_name; + + const borderClasses = borderStyles(itemEquipmentType); + + return ( +
this.handleClick(itemName)} + onMouseOver={(e: React.MouseEvent) => { + e.currentTarget.title = `${name}: ${itemName}`; + }} + aria-label={`${name}: ${itemName}`} + > + {altText} +
+ ); + } + render() { + console.log(this.state.data); return ( - - {this.state.success_message !== null ? ( - - {this.state.success_message} - - ) : null} - - {this.state.error_message !== null ? ( - - {this.state.error_message} - - ) : null} -
-
-
- +
+
+
+
{this.renderSlot("Head", Position.HELMET)}
+ +
+ {this.renderSlot("Sleeves", Position.SLEEVES_LEFT)} + {this.renderSlot("Body", Position.BODY)} + {this.renderSlot("Sleeves", Position.SLEEVES_RIGHT)}
- {this.hasEmptySet() && ( -
- -
- )} - - {this.props.is_set_equipped && ( -
- Set Equipped. -
- )} - -
- +
+ {this.renderSlot("Gloves", Position.GLOVES_LEFT)} + {this.renderSlot("Leggings", Position.LEGGINGS)} + {this.renderSlot("Gloves", Position.GLOVES_RIGHT)}
-
- {this.state.loading ? ( - - ) : null} -
+
{this.renderSlot("Feet", Position.FEET)}
+
- {this.state.view_item && this.state.item_id !== null ? ( - - ) : null} - -
- +
+ {this.renderSlot("Weapon", Position.WEAPON_LEFT)} + {this.renderSlot("Weapon", Position.WEAPON_RIGHT)} + {this.renderSlot("Ring", Position.RING_LEFT)} + {this.renderSlot("Ring", Position.RING_RIGHT)} + {this.renderSlot("Spell", Position.SPELL_LEFT)} + {this.renderSlot("Spell", Position.SPELL_RIGHT)} + {this.renderSlot("Trinket", Position.TRINKET)} +
- + ); } } diff --git a/tailwind.config.js b/tailwind.config.js index ae2d77d13..b67dc2892 100755 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,7 @@ import tailwindcssDir from "tailwindcss-dir"; export default { mode: 'jit', content: [ - './resources/**/*.{js,vue,blade.php,jsx,tsx}', + './resources/**/*.{js,vue,blade.php,jsx,tsx,ts}', './app/Flare/View/Livewire/**/*.php', './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php' ], diff --git a/yarn.lock b/yarn.lock index 21586ec52..8f8144031 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6359,6 +6359,11 @@ ts-loader@9.5.1: semver "^7.3.4" source-map "^0.7.4" +ts-pattern@^5.6.0: + version "5.6.0" + resolved "https://registry.yarnpkg.com/ts-pattern/-/ts-pattern-5.6.0.tgz#831516bbb9041499c5525e8976d8fc6b68ac8bb9" + integrity sha512-SL8u60X5+LoEy9tmQHWCdPc2hhb2pKI6I1tU5Jue3v8+iRqZdcT3mWPwKKJy1fMfky6uha82c8ByHAE8PMhKHw== + ts-toolbelt@^9.6.0: version "9.6.0" resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz#50a25426cfed500d4a09bd1b3afb6f28879edfd5"