tgui: Interface improvements (#990)

Co-authored-by: Arkatos1 <43862960+Arkatos1@users.noreply.github.com>
Co-authored-by: Azarak <azarak10@gmail.com>

code/game/objects/items/stacks/stack.dm

@@ -179,12 +179,6 @@
 				return TRUE
 	return FALSE
 
-/obj/item/stack/attack_self(mob/user)
-	interact(user)
-
-/obj/item/stack/interact(mob/user)
-	ui_interact(user)
-
 /obj/item/stack/ui_state(mob/user)
 	return GLOB.hands_state
 

code/modules/mining/laborcamp/laborshuttle.dm

@@ -13,19 +13,16 @@
 	circuit = /obj/item/circuitboard/computer/labor_shuttle/one_way
 	req_access = list( )
 
-/obj/machinery/computer/shuttle/labor/one_way/ui_act(action, params)
-	if(!allowed(usr))
-		to_chat(usr, "<span class='danger'>Access denied.</span>")
-		return
-
-	switch(action)
-		if("move")
-			var/obj/docking_port/mobile/M = SSshuttle.getShuttle("laborcamp")
-			if(!M)
-				to_chat(usr, "<span class='warning'>Cannot locate shuttle!</span>")
-				return
-			var/obj/docking_port/stationary/S = M.get_docked()
-			if(S?.name == "laborcamp_away")
-				to_chat(usr, "<span class='warning'>Shuttle is already at the outpost!</span>")
-				return
-	return ..()
+/obj/machinery/computer/shuttle/labor/one_way/launch_check(mob/user)
+	. = ..()
+	if(!.)
+		return FALSE
+	var/obj/docking_port/mobile/M = SSshuttle.getShuttle("laborcamp")
+	if(!M)
+		to_chat(user, "<span class='warning'>Cannot locate shuttle!</span>")
+		return FALSE
+	var/obj/docking_port/stationary/S = M.get_docked()
+	if(S?.name == "laborcamp_away")
+		to_chat(user, "<span class='warning'>Shuttle is already at the outpost!</span>")
+		return FALSE
+	return TRUE

code/modules/shuttle/computer.dm

@@ -49,6 +49,8 @@
 				data["status"] = "Igniting"
 			if(SHUTTLE_IDLE)
 				data["status"] = "Idle"
+			if(SHUTTLE_RECHARGING)
+				data["status"] = "Recharging"
 			else
 				data["status"] = "In Transit"
 	for(var/obj/docking_port/stationary/S in SSshuttle.stationary)
@@ -70,6 +72,15 @@
 		data["status"] = "Locked"
 	return data
 
+/**
+  * Checks if we are allowed to launch the shuttle, for special cases
+  *
+  * Arguments:
+  * * user - The mob trying to initiate the launch
+  */
+/obj/machinery/computer/shuttle/proc/launch_check(mob/user)
+	return TRUE
+
 /obj/machinery/computer/shuttle/ui_act(action, params)
 	. = ..()
 	if(.)
@@ -80,6 +91,8 @@
 
 	switch(action)
 		if("move")
+			if(!launch_check(usr))
+				return
 			var/obj/docking_port/mobile/M = SSshuttle.getShuttle(shuttleId)
 			if(M.launch_status == ENDGAME_LAUNCHED)
 				to_chat(usr, "<span class='warning'>You've already escaped. Never going back to that place again!</span>")

code/modules/shuttle/shuttle.dm

@@ -740,8 +740,6 @@
 			else
 				dst = destination
 			return "In transit to [dst?.name || "unknown location"]"
-	else if(mode == SHUTTLE_RECHARGING)
-		return "[docked_at], recharging [getTimerStr()]"
 	else
 		return docked_at
 

code/modules/shuttle/syndicate.dm

@@ -17,23 +17,16 @@
 		return FALSE
 	return ..()
 
-/obj/machinery/computer/shuttle/syndicate/ui_act(action, params)
-	if(!allowed(usr))
-		to_chat(usr, "<span class='danger'>Access denied.</span>")
-		return
-
-	switch(action)
-		if("move")
-			if(istype(src, /obj/machinery/computer/shuttle/syndicate/drop_pod))
-				if(!is_centcom_level(z))
-					to_chat(usr, "<span class='warning'>Pods are one way!</span>")
-					return
-			var/obj/item/circuitboard/computer/syndicate_shuttle/board = circuit
-			if(board?.challenge && world.time < SYNDICATE_CHALLENGE_TIMER)
-				to_chat(usr, "<span class='warning'>You've issued a combat challenge to the station! You've got to give them at least [DisplayTimeText(SYNDICATE_CHALLENGE_TIMER - world.time)] more to allow them to prepare.</span>")
-				return
-			board.moved = TRUE
-	return ..()
+/obj/machinery/computer/shuttle/syndicate/launch_check(mob/user)
+	. = ..()
+	if(!.)
+		return FALSE
+	var/obj/item/circuitboard/computer/syndicate_shuttle/board = circuit
+	if(board?.challenge && world.time < SYNDICATE_CHALLENGE_TIMER)
+		to_chat(user, "<span class='warning'>You've issued a combat challenge to the station! You've got to give them at least [DisplayTimeText(SYNDICATE_CHALLENGE_TIMER - world.time)] more to allow them to prepare.</span>")
+		return FALSE
+	board.moved = TRUE
+	return TRUE
 
 /obj/machinery/computer/shuttle/syndicate/recall
 	name = "syndicate shuttle recall terminal"
@@ -50,6 +43,15 @@
 	shuttleId = "steel_rain"
 	possible_destinations = null
 
+/obj/machinery/computer/shuttle/syndicate/drop_pod/launch_check(mob/user)
+	. = ..()
+	if(!.)
+		return FALSE
+	if(!is_centcom_level(z))
+		to_chat(user, "<span class='warning'>Pods are one way!</span>")
+		return FALSE
+	return TRUE
+
 /obj/machinery/computer/camera_advanced/shuttle_docker/syndicate
 	name = "syndicate shuttle navigation computer"
 	desc = "Used to designate a precise transit location for the syndicate shuttle."

tgui/packages/tgui/interfaces/ExosuitControlConsole.js

@@ -28,7 +28,7 @@ export const ExosuitControlConsole = (props, context) => {
               <Fragment>
                 <Button
                   icon="envelope"
-                  content="Send Message"
+                  content="Message"
                   disabled={!mech.pilot}
                   onClick={() => act('send_message', {
                     tracker_ref: mech.tracker_ref,
@@ -76,7 +76,14 @@ export const ExosuitControlConsole = (props, context) => {
                 ) || 'Not Equipped'}
               </LabeledList.Item>
               <LabeledList.Item label="Pilot">
-                {mech.pilot || 'None'}
+                {mech.pilot.length > 0 && (
+                  mech.pilot.map(pilot => (
+                    <Box
+                      key={pilot}
+                      inline>
+                      {pilot}{mech.pilot.length > 1 ? '|' : ''}
+                    </Box>
+                  ))) || 'None'}
               </LabeledList.Item>
               <LabeledList.Item label="Location">
                 {mech.location || 'Unknown'}

tgui/packages/tgui/interfaces/Holopad.js

@@ -68,8 +68,8 @@ const HolopadContent = (props, context) => {
           <Button
             icon="bell"
             content={on_cooldown
-              ? "AI Presence Requested"
-              : "Request AI Presence"}
+              ? "AI's Presence Requested"
+              : "Request AI's Presence"}
             disabled={!on_network || on_cooldown}
             onClick={() => act('AIrequest')} />
         )} >

tgui/packages/tgui/interfaces/ParticleAccelerator.js

@@ -1,64 +0,0 @@
-import { Fragment } from 'inferno';
-import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section } from '../components';
-import { Window } from '../layouts';
-
-export const ParticleAccelerator = (props, context) => {
-  const { act, data } = useBackend(context);
-  const {
-    assembled,
-    power,
-    strength,
-  } = data;
-  return (
-    <Window
-      width={350}
-      height={185}>
-      <Window.Content>
-        <Section>
-          <LabeledList>
-            <LabeledList.Item
-              label="Status"
-              buttons={(
-                <Button
-                  icon={"sync"}
-                  content={"Run Scan"}
-                  onClick={() => act('scan')} />
-              )}>
-              <Box color={assembled ? "good" : "bad"}>
-                {assembled
-                  ? "Ready - All parts in place"
-                  : "Unable to detect all parts"}
-              </Box>
-            </LabeledList.Item>
-          </LabeledList>
-        </Section>
-        <Section title="Particle Accelerator Controls">
-          <LabeledList>
-            <LabeledList.Item label="Power">
-              <Button
-                icon={power ? 'power-off' : 'times'}
-                content={power ? 'On' : 'Off'}
-                selected={power}
-                disabled={!assembled}
-                onClick={() => act('power')} />
-            </LabeledList.Item>
-            <LabeledList.Item label="Particle Strength">
-              <Button
-                icon="backward"
-                disabled={!assembled}
-                onClick={() => act('remove_strength')} />
-              {' '}
-              {String(strength).padStart(1, '0')}
-              {' '}
-              <Button
-                icon="forward"
-                disabled={!assembled}
-                onClick={() => act('add_strength')} />
-            </LabeledList.Item>
-          </LabeledList>
-        </Section>
-      </Window.Content>
-    </Window>
-  );
-};

tgui/packages/tgui/interfaces/ShuttleConsole.js

@@ -59,6 +59,16 @@ const getLocationIdByName = (locations, name) => {
   return locations?.find(location => location.name === name)?.id;
 };
 
+const STATUS_COLOR_KEYS = {
+  "In Transit": "good",
+  "Idle": "average",
+  "Igniting": "average",
+  "Recharging": "average",
+  "Missing": "bad",
+  "Unauthorized Access": "bad",
+  "Locked": "bad",
+};
+
 const ShuttleConsoleContent = (props, context) => {
   const { act, data } = useBackend(context);
   const {
@@ -90,13 +100,7 @@ const ShuttleConsoleContent = (props, context) => {
         </Box>
         <Box
           inline
-          color={status==="In Transit"
-            ? 'good'
-            : status==="Idle"
-              ? 'average'
-              : status==="Igniting"
-                ? 'average'
-                : 'bad'}
+          color={STATUS_COLOR_KEYS[status] || "bad"}
           ml={1}>
           {status || "Not Available"}
         </Box>
@@ -110,15 +114,20 @@ const ShuttleConsoleContent = (props, context) => {
           </LabeledList.Item>
           <LabeledList.Item label="Destination">
             {locations.length===0 && (
-              <Box color="bad">
+              <Box
+                mb={1.7}
+                color="bad">
                 Not Available
               </Box>
             ) || locations.length===1 &&(
-              <Box color="average">
+              <Box
+                mb={1.7}
+                color="average">
                 {getLocationNameById(locations, destination)}
               </Box>
             ) || (
               <Dropdown
+                mb={1.7}
                 over
                 width="240px"
                 options={locations.map(location => location.name)}
@@ -134,7 +143,6 @@ const ShuttleConsoleContent = (props, context) => {
           content="Depart"
           disabled={!getLocationNameById(locations, destination)
             || locked || authorization_required}
-          mt={1.5}
           icon="arrow-up"
           textAlign="center"
           onClick={() => act('move', {

tgui/packages/tgui/interfaces/Stack.js

@@ -1,6 +1,8 @@
+import { createSearch } from 'common/string';
+import { Fragment } from 'inferno';
 import { sortBy } from 'common/collections';
-import { useBackend } from "../backend";
-import { Box, Button, Section, Collapsible, Table } from "../components";
+import { useBackend, useLocalState } from "../backend";
+import { Box, Button, Input, NoticeBox, Section, Collapsible, Table } from "../components";
 import { Window } from "../layouts";
 
 export const Stack = (props, context) => {
@@ -8,10 +10,28 @@ export const Stack = (props, context) => {
 
   const {
     amount,
-    recipes,
+    recipes = [],
   } = data;
 
-  const height = Math.max(90 + Object.keys(recipes).length * 25, 250);
+  const [
+    searchText,
+    setSearchText,
+  ] = useLocalState(context, 'searchText', '');
+
+  const testSearch = createSearch(searchText, item => {
+    return item;
+  });
+
+  const items = searchText.length > 0
+   && Object.keys(recipes)
+     .filter(testSearch)
+     .reduce((obj, key) => {
+       obj[key] = recipes[key];
+       return obj;
+     }, {})
+    || recipes;
+
+  const height = Math.max(94 + Object.keys(recipes).length * 26, 250);
 
   return (
     <Window
@@ -19,8 +39,25 @@ export const Stack = (props, context) => {
       height={Math.min(height, 500)}
       resizable>
       <Window.Content scrollable>
-        <Section title={"Amount: " + amount}>
-          <RecipeList recipes={recipes} />
+        <Section
+          title={"Amount: " + amount}
+          buttons={(
+            <Fragment>
+              Search
+              <Input
+                autoFocus
+                value={searchText}
+                onInput={(e, value) => setSearchText(value)}
+                mx={1} />
+            </Fragment>
+          )}>
+          {items.length === 0 && (
+            <NoticeBox>
+              No recipes found.
+            </NoticeBox>
+          ) || (
+            <RecipeList recipes={items} />
+          )}
         </Section>
       </Window.Content>
     </Window>
@@ -141,7 +178,7 @@ const Recipe = (props, context) => {
   const maxMultiplier = buildMultiplier(recipe, amount);
 
   return (
-    <Box mb={0.8}>
+    <Box mb={1}>
       <Table>
         <Table.Row>
           <Table.Cell>

tgui/packages/tgui/interfaces/Teleporter.js

@@ -14,8 +14,8 @@ export const Teleporter = (props, context) => {
   } = data;
   return (
     <Window
-      width={470}
-      height={140}>
+      width={360}
+      height={130}>
       <Window.Content>
         <Section>
           {!power_station && (
@@ -28,29 +28,22 @@ export const Teleporter = (props, context) => {
             </Box>
           )) || (
             <LabeledList>
-              <LabeledList.Item label="Current Regime"
-                buttons={(
-                  <Button
-                    icon="tools"
-                    content="Change Regime"
-                    onClick={() => act('regimeset')} />
-                )}>
-                {regime_set}
+              <LabeledList.Item label="Regime">
+                <Button
+                  content={regime_set}
+                  onClick={() => act('regimeset')} />
               </LabeledList.Item>
-              <LabeledList.Item label="Current Target"
-                buttons={(
-                  <Button
-                    icon="tools"
-                    content="Set Target"
-                    onClick={() => act('settarget')} />
-                )}>
-                {target}
+              <LabeledList.Item label="Target">
+                <Button
+                  icon="edit"
+                  content={target}
+                  onClick={() => act('settarget')} />
               </LabeledList.Item>
               <LabeledList.Item label="Calibration"
                 buttons={(
                   <Button
                     icon="tools"
-                    content="Calibrate Hub"
+                    content="Calibrate"
                     onClick={() => act('calibrate')} />
                 )}>
                 {calibrating && (

tgui/packages/tgui/interfaces/TurretControl.js

@@ -14,7 +14,7 @@ export const TurretControl = (props, context) => {
   return (
     <Window
       width={305}
-      height={172}>
+      height={data.siliconUser ? 168 : 164}>
       <Window.Content>
         <InterfaceLockNoticeBox />
         <Section>