Makes the SD interface streamlined and adds timer to detonation (#12888)

* adds timer to sd interface and makes the interface more modern in general * TESTS NO WORK WHY * prettier please do stuff * me forgor unused vars
tgstation · May 6, 2023 · 4ffb411 · 4ffb411
1 parent dc2621d
commit 4ffb411
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 19 deletions.
diff --git a/code/game/objects/machinery/self_destruct.dm b/code/game/objects/machinery/self_destruct.dm
@@ -8,6 +8,7 @@
 	var/active_state = SELF_DESTRUCT_MACHINE_INACTIVE
 	///Whether only marines can activate this. left here in case of admins feeling nice or events
 	var/marine_only_activate = TRUE
+
 
 /obj/machinery/self_destruct/Initialize(mapload)
 	. = ..()
@@ -57,7 +58,16 @@
 		ui.open()
 
 /obj/machinery/self_destruct/console/ui_data(mob/user)
-	return list("dest_status" = active_state)
+	var/obj/machinery/self_destruct/rod/I = SSevacuation.dest_rods[SSevacuation.dest_index]
+
+	var/list/data = list()
+	data["dest_status"] = active_state
+	if(I.activate_time)
+		data["detonation_pcent"] = round(((world.time - I.activate_time)  / (SELF_DESTRUCT_ROD_STARTUP_TIME)), 0.01)  // percentage of time left to detonation
+		data["detonation_time"] = DisplayTimeText((SELF_DESTRUCT_ROD_STARTUP_TIME) - (world.time - I.activate_time), 10) //amount of time left to detonation
+	else
+		data["detonation_pcent"] = 0
+	return data
 
 
 /obj/machinery/self_destruct/console/ui_act(action, list/params)

diff --git a/tgui/packages/tgui/interfaces/SelfDestruct.js b/tgui/packages/tgui/interfaces/SelfDestruct.js
@@ -1,35 +1,55 @@
 import { useBackend } from '../backend';
-import { Button, LabeledList, Box } from '../components';
+import { Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
 
 export const SelfDestruct = (props, context) => {
   const { act, data } = useBackend(context);
+  const { dest_status, detonation_time, detonation_pcent } = data;
   return (
     <Window width={470} height={290}>
       <Window.Content>
-        <LabeledList>
-          <LabeledList.Item label="STATUS:">
-            {(data.dest_status === 0 && (
-              <span className="idle">DISARMED</span>
-            )) ||
-              (data.dest_status === 1 && (
-                <span className="average">AWAITING INPUT</span>
-              )) ||
-              (data.dest_status === 2 && (
-                <span className="good">ARMED</span>
-              )) || <span className="bad">ERROR</span>}
-          </LabeledList.Item>
-        </LabeledList>
-        <Box>
-          {(data.dest_status === 1 && (
+        <Section title="Overview">
+          <LabeledList>
+            <LabeledList.Item label="STATUS:">
+              {(dest_status === 0 && <span className="idle">DISARMED</span>) ||
+                (dest_status === 1 && (
+                  <span className="average">AWAITING INPUT</span>
+                )) ||
+                (dest_status === 2 && <span className="good">ARMED</span>) || (
+                  <span className="bad">ERROR</span>
+                )}
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+
+        {dest_status === 2 && (
+          <Section title="Time To Detonation">
+            <ProgressBar
+              value={detonation_pcent}
+              ranges={{
+                good: [1, Infinity],
+                average: [0.3, 0.7],
+                bad: [-Infinity, 0.3],
+              }}
+            />
+            <LabeledList>
+              <LabeledList.Item label="Time Left: ">
+                {detonation_time}
+              </LabeledList.Item>
+            </LabeledList>
+          </Section>
+        )}
+
+        <Section title="Control">
+          {(dest_status === 1 && (
             <Button
               icon="exclamation-triangle"
               content="ACTIVATE SYSTEM"
               color="yellow"
               onClick={() => act('dest_start')}
             />
           )) ||
-            (data.dest_status === 2 && (
+            (dest_status === 2 && (
               <>
                 <Button
                   icon="exclamation-triangle"
@@ -45,7 +65,7 @@ export const SelfDestruct = (props, context) => {
                 />
               </>
             )) || <span className="bad">ERROR</span>}
-        </Box>
+        </Section>
       </Window.Content>
     </Window>
   );