Add images to the Mining Vendor (ParadiseSS13#26952)

* Add images to the MIning Vendor * Fix lazarus belt icon * Update code/modules/mining/machine_vending.dm Co-authored-by: Henri215 <[email protected]> Signed-off-by: Aylong <[email protected]> --------- Signed-off-by: Aylong <[email protected]> Co-authored-by: Henri215 <[email protected]> Co-authored-by: S34N <[email protected]>
Burzah · Oct 22, 2024 · 955617f · 955617f
1 parent b4d1bd1
commit 955617f
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 38 deletions.
diff --git a/code/game/objects/items/weapons/storage/belt.dm b/code/game/objects/items/weapons/storage/belt.dm
@@ -568,7 +568,7 @@
 /obj/item/storage/belt/lazarus
 	name = "trainer's belt"
 	desc = "For the mining master, holds your lazarus capsules."
-	icon_state = "lazarusbelt"
+	icon_state = "lazarusbelt_0"
 	item_state = "lazbelt"
 	w_class = WEIGHT_CLASS_BULKY
 	max_w_class = WEIGHT_CLASS_TINY
@@ -582,7 +582,7 @@
 	update_icon()
 
 /obj/item/storage/belt/lazarus/update_icon_state()
-	icon_state = "[initial(icon_state)]_[length(contents)]"
+	icon_state = "lazarusbelt_[length(contents)]"
 
 /obj/item/storage/belt/lazarus/attackby(obj/item/I, mob/user)
 	var/amount = length(contents)

diff --git a/code/modules/mining/machine_vending.dm b/code/modules/mining/machine_vending.dm
@@ -154,7 +154,13 @@
 		var/list/cat_items = list()
 		for(var/prize_name in prize_list[cat])
 			var/datum/data/mining_equipment/prize = prize_list[cat][prize_name]
-			cat_items[prize_name] = list("name" = prize_name, "price" = prize.cost)
+			var/obj/item = prize.equipment_path
+			cat_items[prize_name] = list(
+				"name" = prize_name,
+				"price" = prize.cost,
+				"icon" = item.icon,
+				"icon_state" = item.icon_state
+			)
 		static_data["items"][cat] = cat_items
 
 	return static_data

diff --git a/tgui/packages/tgui/interfaces/MiningVendor.js b/tgui/packages/tgui/interfaces/MiningVendor.js
@@ -1,6 +1,6 @@
 import { createSearch } from 'common/string';
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Collapsible, Dropdown, Stack, Input, NoticeBox, Section } from '../components';
+import { Box, Button, Collapsible, Dropdown, Stack, Input, ImageButton, NoticeBox, Section } from '../components';
 import { Window } from '../layouts';
 
 const sortTypes = {
@@ -10,13 +10,14 @@ const sortTypes = {
 };
 
 export const MiningVendor = (_properties, _context) => {
+  const [gridLayout, setGridLayout] = useLocalState(_context, 'gridLayout', false);
   return (
-    <Window width={400} height={455}>
+    <Window width={400} height={525}>
       <Window.Content>
         <Stack fill vertical>
           <MiningVendorUser />
-          <MiningVendorSearch />
-          <MiningVendorItems />
+          <MiningVendorSearch gridLayout={gridLayout} setGridLayout={setGridLayout} />
+          <MiningVendorItems gridLayout={gridLayout} />
         </Stack>
       </Window.Content>
     </Window>
@@ -64,6 +65,7 @@ const MiningVendorUser = (_properties, context) => {
 const MiningVendorItems = (_properties, context) => {
   const { act, data } = useBackend(context);
   const { has_id, id, items } = data;
+  const { gridLayout } = _properties;
   // Search thingies
   const [searchText, _setSearchText] = useLocalState(context, 'search', '');
   const [sortOrder, _setSortOrder] = useLocalState(context, 'sort', 'Alphabetical');
@@ -89,7 +91,7 @@ const MiningVendorItems = (_properties, context) => {
     }
 
     has_contents = true;
-    return <MiningVendorItemsCategory key={kv[0]} title={kv[0]} items={items_in_cat} />;
+    return <MiningVendorItemsCategory key={kv[0]} title={kv[0]} items={items_in_cat} gridLayout={gridLayout} />;
   });
   return (
     <Stack.Item grow mt={0.5}>
@@ -101,6 +103,7 @@ const MiningVendorItems = (_properties, context) => {
 };
 
 const MiningVendorSearch = (_properties, context) => {
+  const { gridLayout, setGridLayout } = _properties;
   const [_searchText, setSearchText] = useLocalState(context, 'search', '');
   const [_sortOrder, setSortOrder] = useLocalState(context, 'sort', '');
   const [descending, setDescending] = useLocalState(context, 'descending', false);
@@ -115,6 +118,15 @@ const MiningVendorSearch = (_properties, context) => {
             onInput={(_e, value) => setSearchText(value)}
           />
         </Stack.Item>
+        <Stack.Item>
+          <Button
+            icon={gridLayout ? 'list' : 'table-cells-large'}
+            height={1.75}
+            tooltip={gridLayout ? 'Toggle List Layout' : 'Toggle Grid Layout'}
+            tooltipPosition="bottom-start"
+            onClick={() => setGridLayout(!gridLayout)}
+          />
+        </Stack.Item>
         <Stack.Item basis="30%">
           <Dropdown
             selected="Alphabetical"
@@ -126,7 +138,7 @@ const MiningVendorSearch = (_properties, context) => {
         <Stack.Item>
           <Button
             icon={descending ? 'arrow-down' : 'arrow-up'}
-            height="21px"
+            height={1.75}
             tooltip={descending ? 'Descending order' : 'Ascending order'}
             tooltipPosition="bottom-start"
             onClick={() => setDescending(!descending)}
@@ -139,43 +151,57 @@ const MiningVendorSearch = (_properties, context) => {
 
 const MiningVendorItemsCategory = (properties, context) => {
   const { act, data } = useBackend(context);
-  const { title, items, ...rest } = properties;
+  const { title, items, gridLayout, ...rest } = properties;
   return (
     <Collapsible open title={title} {...rest}>
-      {items.map((item) => (
-        <Box key={item.name}>
-          <Box
-            inline
-            verticalAlign="middle"
-            lineHeight="20px"
-            style={{
-              float: 'left',
-            }}
-          >
-            {item.name}
-          </Box>
-          <Button
+      {items.map((item) =>
+        gridLayout ? (
+          <ImageButton
+            key={item.name}
+            mb={0.5}
+            imageSize={57.5}
+            dmIcon={item.icon}
+            dmIconState={item.icon_state}
             disabled={!data.has_id || data.id.points < item.price}
-            content={item.price.toLocaleString('en-US')}
-            width="15%"
-            textAlign="center"
-            style={{
-              float: 'right',
-            }}
+            tooltip={item.name}
+            tooltipPosition="top"
             onClick={() =>
               act('purchase', {
                 cat: title,
                 name: item.name,
               })
             }
-          />
-          <Box
-            style={{
-              clear: 'both',
-            }}
-          />
-        </Box>
-      ))}
+          >
+            {item.price.toLocaleString('en-US')}
+          </ImageButton>
+        ) : (
+          <ImageButton
+            key={item.name}
+            fluid
+            mb={0.5}
+            imageSize={32}
+            dmIcon={item.icon}
+            dmIconState={item.icon_state}
+            buttons={
+              <Button
+                translucent
+                width={3.75}
+                disabled={!data.has_id || data.id.points < item.price}
+                onClick={() =>
+                  act('purchase', {
+                    cat: title,
+                    name: item.name,
+                  })
+                }
+              >
+                {item.price.toLocaleString('en-US')}
+              </Button>
+            }
+          >
+            <Box textAlign={'left'}>{item.name}</Box>
+          </ImageButton>
+        )
+      )}
     </Collapsible>
   );
 };
diff --git a/tgui/public/tgui.bundle.js b/tgui/public/tgui.bundle.js