diff --git a/code/modules/asset_cache/assets/inventory.dm b/code/modules/asset_cache/assets/inventory.dm new file mode 100644 index 0000000000..0883dbd751 --- /dev/null +++ b/code/modules/asset_cache/assets/inventory.dm @@ -0,0 +1,20 @@ +/datum/asset/simple/inventory + assets = list( + "inventory-glasses.png" = 'icons/ui/inventory/glasses.png', + "inventory-head.png" = 'icons/ui/inventory/head.png', + "inventory-neck.png" = 'icons/ui/inventory/neck.png', + "inventory-mask.png" = 'icons/ui/inventory/mask.png', + "inventory-ears.png" = 'icons/ui/inventory/ears.png', + "inventory-uniform.png" = 'icons/ui/inventory/uniform.png', + "inventory-suit.png" = 'icons/ui/inventory/suit.png', + "inventory-gloves.png" = 'icons/ui/inventory/gloves.png', + "inventory-hand_l.png" = 'icons/ui/inventory/hand_l.png', + "inventory-hand_r.png" = 'icons/ui/inventory/hand_r.png', + "inventory-shoes.png" = 'icons/ui/inventory/shoes.png', + "inventory-suit_storage.png" = 'icons/ui/inventory/suit_storage.png', + "inventory-id.png" = 'icons/ui/inventory/id.png', + "inventory-belt.png" = 'icons/ui/inventory/belt.png', + "inventory-back.png" = 'icons/ui/inventory/back.png', + "inventory-pocket.png" = 'icons/ui/inventory/pocket.png', + "inventory-collar.png" = 'icons/ui/inventory/collar.png', + ) diff --git a/code/modules/mob/living/inventory.dm b/code/modules/mob/living/inventory.dm index 594967fccb..c6456d8d9a 100644 --- a/code/modules/mob/living/inventory.dm +++ b/code/modules/mob/living/inventory.dm @@ -311,6 +311,11 @@ return TRUE +/datum/inventory_panel/human/ui_assets(mob/user) + return list( + get_asset_datum(/datum/asset/simple/inventory) + ) + /datum/inventory_panel/human/tgui_data(mob/user, datum/tgui/ui, datum/tgui_state/state) var/list/data = list() // We don't inherit TGUI data because humans are soooo different. @@ -320,36 +325,37 @@ if(istype(H.w_uniform, /obj/item/clothing/under)) suit = H.w_uniform - var/list/slots = list() for(var/entry in H.species.hud.gear) var/list/slot_ref = H.species.hud.gear[entry] if((slot_ref["slot"] in list(slot_l_store, slot_r_store))) continue var/obj/item/thing_in_slot = H.get_equipped_item(slot_ref["slot"]) - slots.Add(list(list( + UNTYPED_LIST_ADD(slots, list( "name" = slot_ref["name"], "item" = thing_in_slot, + "icon" = thing_in_slot ? icon2base64(icon(thing_in_slot.icon, thing_in_slot.icon_state, frame = 1)) : null, "act" = "targetSlot", "params" = list("slot" = slot_ref["slot"]), - ))) + )) data["slots"] = slots - var/list/specialSlots = list() if(H.species.hud.has_hands) - specialSlots.Add(list(list( + UNTYPED_LIST_ADD(specialSlots, list( "name" = "Left Hand", "item" = H.l_hand, + "icon" = H.l_hand ? icon2base64(icon(H.l_hand.icon, H.l_hand.icon_state, frame = 1)) : null, "act" = "targetSlot", "params" = list("slot" = slot_l_hand), - ))) - specialSlots.Add(list(list( + )) + UNTYPED_LIST_ADD(specialSlots, list( "name" = "Right Hand", "item" = H.r_hand, + "icon" = H.r_hand ? icon2base64(icon(H.r_hand.icon, H.r_hand.icon_state, frame = 1)) : null, "act" = "targetSlot", "params" = list("slot" = slot_r_hand), - ))) + )) data["specialSlots"] = specialSlots data["internals"] = H.internals diff --git a/icons/ui/inventory/back.png b/icons/ui/inventory/back.png new file mode 100644 index 0000000000..e8226bc55e Binary files /dev/null and b/icons/ui/inventory/back.png differ diff --git a/icons/ui/inventory/belt.png b/icons/ui/inventory/belt.png new file mode 100644 index 0000000000..ef3e5586e4 Binary files /dev/null and b/icons/ui/inventory/belt.png differ diff --git a/icons/ui/inventory/collar.png b/icons/ui/inventory/collar.png new file mode 100644 index 0000000000..afee6e255b Binary files /dev/null and b/icons/ui/inventory/collar.png differ diff --git a/icons/ui/inventory/ears.png b/icons/ui/inventory/ears.png new file mode 100644 index 0000000000..19752ed10d Binary files /dev/null and b/icons/ui/inventory/ears.png differ diff --git a/icons/ui/inventory/glasses.png b/icons/ui/inventory/glasses.png new file mode 100644 index 0000000000..9c8b0950ab Binary files /dev/null and b/icons/ui/inventory/glasses.png differ diff --git a/icons/ui/inventory/gloves.png b/icons/ui/inventory/gloves.png new file mode 100644 index 0000000000..f5c9de27b8 Binary files /dev/null and b/icons/ui/inventory/gloves.png differ diff --git a/icons/ui/inventory/hand_l.png b/icons/ui/inventory/hand_l.png new file mode 100644 index 0000000000..8923d81b5b Binary files /dev/null and b/icons/ui/inventory/hand_l.png differ diff --git a/icons/ui/inventory/hand_r.png b/icons/ui/inventory/hand_r.png new file mode 100644 index 0000000000..b3b16b4e0c Binary files /dev/null and b/icons/ui/inventory/hand_r.png differ diff --git a/icons/ui/inventory/head.png b/icons/ui/inventory/head.png new file mode 100644 index 0000000000..650be20fe6 Binary files /dev/null and b/icons/ui/inventory/head.png differ diff --git a/icons/ui/inventory/id.png b/icons/ui/inventory/id.png new file mode 100644 index 0000000000..0505f38bc1 Binary files /dev/null and b/icons/ui/inventory/id.png differ diff --git a/icons/ui/inventory/mask.png b/icons/ui/inventory/mask.png new file mode 100644 index 0000000000..3690e6eca7 Binary files /dev/null and b/icons/ui/inventory/mask.png differ diff --git a/icons/ui/inventory/neck.png b/icons/ui/inventory/neck.png new file mode 100644 index 0000000000..a6018e149c Binary files /dev/null and b/icons/ui/inventory/neck.png differ diff --git a/icons/ui/inventory/pocket.png b/icons/ui/inventory/pocket.png new file mode 100644 index 0000000000..0d31594a5a Binary files /dev/null and b/icons/ui/inventory/pocket.png differ diff --git a/icons/ui/inventory/shoes.png b/icons/ui/inventory/shoes.png new file mode 100644 index 0000000000..170f81b5da Binary files /dev/null and b/icons/ui/inventory/shoes.png differ diff --git a/icons/ui/inventory/suit.png b/icons/ui/inventory/suit.png new file mode 100644 index 0000000000..e3122ed47d Binary files /dev/null and b/icons/ui/inventory/suit.png differ diff --git a/icons/ui/inventory/suit_storage.png b/icons/ui/inventory/suit_storage.png new file mode 100644 index 0000000000..f35bd3783f Binary files /dev/null and b/icons/ui/inventory/suit_storage.png differ diff --git a/icons/ui/inventory/uniform.png b/icons/ui/inventory/uniform.png new file mode 100644 index 0000000000..7f5951e3a0 Binary files /dev/null and b/icons/ui/inventory/uniform.png differ diff --git a/tgui/packages/tgui/interfaces/InventoryPanelHuman.tsx b/tgui/packages/tgui/interfaces/InventoryPanelHuman.tsx index 02924839b9..602c0bcfe0 100644 --- a/tgui/packages/tgui/interfaces/InventoryPanelHuman.tsx +++ b/tgui/packages/tgui/interfaces/InventoryPanelHuman.tsx @@ -1,8 +1,10 @@ import { useBackend } from 'tgui/backend'; import { Window } from 'tgui/layouts'; -import { Button, LabeledList, Section } from 'tgui-core/components'; +import { Box, Button, Image, Section, Stack } from 'tgui-core/components'; import type { BooleanLike } from 'tgui-core/react'; +import { resolveAsset } from '../assets'; + type Data = { slots: slot[]; specialSlots: slot[]; @@ -19,10 +21,158 @@ type Data = { type slot = { name: string; item: string; + icon: string; act: string; params: { slot: number }; }; +type GridInfo = { + gridRow: string; + gridColumn: string; +}; + +type SlotInfo = { + grid: GridInfo; + image: string; +}; + +const gridAt = (row: number, col: number): GridInfo => { + return { gridRow: `${row}`, gridColumn: `${col}` }; +}; + +const KNOWN_SLOTS: Record = { + // Row 1 + Glasses: { + grid: gridAt(1, 2), + image: 'inventory-glasses.png', + }, + Hat: { + grid: gridAt(1, 3), + image: 'inventory-head.png', + }, + 'Left Ear': { + grid: gridAt(1, 4), + image: 'inventory-ears.png', + }, + // Row 2 + Mask: { + grid: gridAt(2, 3), + image: 'inventory-mask.png', + }, + 'Right Ear': { + grid: gridAt(2, 4), + image: 'inventory-ears.png', + }, + // Row 3 + Uniform: { + grid: gridAt(3, 2), + image: 'inventory-uniform.png', + }, + Suit: { + grid: gridAt(3, 3), + image: 'inventory-suit.png', + }, + Gloves: { + grid: gridAt(3, 4), + image: 'inventory-gloves.png', + }, + 'Left Hand': { + grid: gridAt(3, 5), + image: 'inventory-hand_l.png', + }, + 'Right Hand': { + grid: gridAt(3, 6), + image: 'inventory-hand_r.png', + }, + // Row 4 + Shoes: { + grid: gridAt(4, 3), + image: 'inventory-shoes.png', + }, + // Row 5 + ID: { + grid: gridAt(5, 1), + image: 'inventory-id.png', + }, + 'Suit Storage': { + grid: gridAt(5, 2), + image: 'inventory-suit_storage.png', + }, + Belt: { + grid: gridAt(5, 3), + image: 'inventory-belt.png', + }, + Back: { + grid: gridAt(5, 4), + image: 'inventory-back.png', + }, +}; + +const getSlot = (slot: slot): SlotInfo => { + if (KNOWN_SLOTS[slot.name]) { + return KNOWN_SLOTS[slot.name]; + } + return { + grid: gridAt(1, 1), + image: 'inventory-pocket.png', + }; +}; + +export const SlotButton = (props: { slot: slot }) => { + const { slot } = props; + const { act } = useBackend(); + const data = getSlot(slot); + + return ( + + ); +}; + export const InventoryPanelHuman = (props) => { const { act, data } = useBackend(); @@ -39,38 +189,27 @@ export const InventoryPanelHuman = (props) => { } = data; return ( - +
- - {slots && - slots.length && - slots.map((slot) => ( - - - - ))} - - {specialSlots && - specialSlots.length && - specialSlots.map((slot) => ( - - - - ))} - + + {slots?.length + ? slots.map((slot) => ) + : null} + {specialSlots?.length + ? specialSlots.map((slot) => ( + + )) + : null} +