fixes missing icons in abductor console (tgstation#87759)

## About The Pull Request grabs the icon for the item correctly. also typescripts the interface because blessed type safety would've prevented it being missing in the first place. and clears some random deprecations ## Why It's Good For The Game pretty icons 👍 loading icons 👎 ![image](https://github.com/user-attachments/assets/ec524a52-fff5-4c67-b3fb-88fbfd5988af) ## Changelog :cl: fix: the abductor console now correctly loads images of equipment /:cl: closes tgstation#87565
Das15 · Nov 9, 2024 · 263a693 · 263a693
1 parent 18a1148
commit 263a693
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 18 deletions.
diff --git a/code/modules/antagonists/abductor/machinery/console.dm b/code/modules/antagonists/abductor/machinery/console.dm
@@ -94,10 +94,19 @@
 			"items" = (category == selected_cat ? list() : null))
 		for(var/gear in possible_gear[category])
 			var/datum/abductor_gear/AG = possible_gear[category][gear]
+
+			var/atom/gear_path
+			if(!length(AG.build_path))
+				continue
+
+			gear_path = AG.build_path[1]
+
 			cat["items"] += list(list(
 				"name" = AG.name,
 				"cost" = AG.cost,
 				"desc" = AG.description,
+				"icon" = gear_path::icon,
+				"icon_state" = gear_path::icon_state,
 			))
 		data["categories"] += list(cat)
 	return data

diff --git a/...kages/tgui/interfaces/AbductorConsole.jsx → ...kages/tgui/interfaces/AbductorConsole.tsx b/...kages/tgui/interfaces/AbductorConsole.jsx → ...kages/tgui/interfaces/AbductorConsole.tsx
@@ -5,10 +5,33 @@ import {
   Section,
   Tabs,
 } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
 
 import { useBackend, useSharedState } from '../backend';
 import { Window } from '../layouts';
-import { GenericUplink } from './Uplink/GenericUplink';
+import { GenericUplink, Item } from './Uplink/GenericUplink';
+
+type AbductorConsoleData = {
+  categories: { name: string; items: ConsoleItem[] }[];
+
+  compactMode: BooleanLike;
+  experiment: BooleanLike;
+  points?: number;
+  credits?: number;
+  pad: BooleanLike;
+  gizmo: BooleanLike;
+  vest: BooleanLike;
+  vest_mode?: number;
+  vest_lock?: BooleanLike;
+};
+
+type ConsoleItem = {
+  name: string;
+  cost: number;
+  desc: string;
+  icon: string;
+  icon_state: string;
+};
 
 export const AbductorConsole = (props) => {
   const [tab, setTab] = useSharedState('tab', 1);
@@ -47,15 +70,15 @@ export const AbductorConsole = (props) => {
 };
 
 const Abductsoft = (props) => {
-  const { act, data } = useBackend();
+  const { act, data } = useBackend<AbductorConsoleData>();
   const { experiment, points, credits, categories } = data;
 
   if (!experiment) {
     return <NoticeBox danger>No Experiment Machine Detected</NoticeBox>;
   }
 
-  const categoriesList = [];
-  const items = [];
+  const categoriesList: string[] = [];
+  const items: Item[] = [];
   for (let i = 0; i < categories.length; i++) {
     const category = categories[i];
     categoriesList.push(category.name);
@@ -67,7 +90,9 @@ const Abductsoft = (props) => {
         category: category.name,
         cost: `${item.cost} Credits`,
         desc: item.desc,
-        disabled: credits < item.cost,
+        disabled: (credits || 0) < item.cost,
+        icon: item.icon,
+        icon_state: item.icon_state,
       });
     }
   }
@@ -92,7 +117,7 @@ const Abductsoft = (props) => {
 };
 
 const EmergencyTeleporter = (props) => {
-  const { act, data } = useBackend();
+  const { act, data } = useBackend<AbductorConsoleData>();
   const { pad, gizmo } = data;
 
   if (!pad) {
@@ -115,18 +140,19 @@ const EmergencyTeleporter = (props) => {
         <LabeledList.Item label="Mark Retrieval">
           <Button
             icon={gizmo ? 'user-plus' : 'user-slash'}
-            content={gizmo ? 'Retrieve' : 'No Mark'}
             disabled={!gizmo}
             onClick={() => act('teleporter_retrieve')}
-          />
+          >
+            {gizmo ? 'Retrieve' : 'No Mark'}
+          </Button>
         </LabeledList.Item>
       </LabeledList>
     </Section>
   );
 };
 
 const VestSettings = (props) => {
-  const { act, data } = useBackend();
+  const { act, data } = useBackend<AbductorConsoleData>();
   const { vest, vest_mode, vest_lock } = data;
 
   if (!vest) {
@@ -139,25 +165,25 @@ const VestSettings = (props) => {
       buttons={
         <Button
           icon={vest_lock ? 'lock' : 'unlock'}
-          content={vest_lock ? 'Locked' : 'Unlocked'}
           onClick={() => act('toggle_vest')}
-        />
+        >
+          {vest_lock ? 'Locked' : 'Unlocked'}
+        </Button>
       }
     >
       <LabeledList>
         <LabeledList.Item label="Mode">
           <Button
             icon={vest_mode === 1 ? 'eye-slash' : 'fist-raised'}
-            content={vest_mode === 1 ? 'Stealth' : 'Combat'}
             onClick={() => act('flip_vest')}
-          />
+          >
+            {vest_mode === 1 ? 'Stealth' : 'Combat'}
+          </Button>
         </LabeledList.Item>
         <LabeledList.Item label="Disguise">
-          <Button
-            icon="user-secret"
-            content="Select"
-            onClick={() => act('select_disguise')}
-          />
+          <Button icon="user-secret" onClick={() => act('select_disguise')}>
+            Select
+          </Button>
         </LabeledList.Item>
       </LabeledList>
     </Section>