Electropack UI

code/game/objects/items/devices/radio/electropack.dm

@@ -10,23 +10,25 @@
 	slot_flags = ITEM_SLOT_BACK
 	w_class = WEIGHT_CLASS_HUGE
 	custom_materials = list(/datum/material/iron=10000, /datum/material/glass=2500)
+	var/ui_x = 200
+	var/ui_y = 200
 	var/on = TRUE
 	var/code = 2
 	var/frequency = FREQ_ELECTROPACK
-	var/shock_cooldown = 0
-
-/obj/item/electropack/suicide_act(mob/user)
-	user.visible_message("<span class='suicide'>[user] hooks [user.p_them()]self to the electropack and spams the trigger! It looks like [user.p_theyre()] trying to commit suicide!</span>")
-	return (FIRELOSS)
+	var/shock_cooldown = FALSE
 
 /obj/item/electropack/Initialize()
 	. = ..()
-	SSradio.add_object(src, frequency, RADIO_SIGNALER)
+	set_frequency(frequency)
 
 /obj/item/electropack/Destroy()
 	SSradio.remove_object(src, frequency)
 	return ..()
 
+/obj/item/electropack/suicide_act(mob/user)
+	user.visible_message("<span class='suicide'>[user] hooks [user.p_them()]self to the electropack and spams the trigger! It looks like [user.p_theyre()] trying to commit suicide!</span>")
+	return (FIRELOSS)
+
 //ATTACK HAND IGNORING PARENT RETURN VALUE
 /obj/item/electropack/attack_hand(mob/user)
 	if(iscarbon(user))
@@ -56,55 +58,15 @@
 	else
 		return ..()
 
-/obj/item/electropack/Topic(href, href_list)
-	//..()
-	var/mob/living/carbon/C = usr
-	if(usr.stat || usr.restrained() || C.back == src)
-		return
-	if((ishuman(usr) && usr.contents.Find(src)) || usr.contents.Find(master) || (in_range(src, usr) && isturf(loc)))
-		usr.set_machine(src)
-		if(href_list["freq"])
-			SSradio.remove_object(src, frequency)
-			frequency = sanitize_frequency(frequency + text2num(href_list["freq"]))
-			SSradio.add_object(src, frequency, RADIO_SIGNALER)
-		else
-			if(href_list["code"])
-				code += text2num(href_list["code"])
-				code = round(code)
-				code = min(100, code)
-				code = max(1, code)
-			else
-				if(href_list["power"])
-					on = !( on )
-					icon_state = "electropack[on]"
-		if(!( master ))
-			if(ismob(loc))
-				attack_self(loc)
-			else
-				for(var/mob/M in viewers(1, src))
-					if(M.client)
-						attack_self(M)
-		else
-			if(ismob(master.loc))
-				attack_self(master.loc)
-			else
-				for(var/mob/M in viewers(1, master))
-					if(M.client)
-						attack_self(M)
-	else
-		usr << browse(null, "window=radio")
-		return
-	return
-
 /obj/item/electropack/receive_signal(datum/signal/signal)
 	if(!signal || signal.data["code"] != code)
 		return
 
 	if(isliving(loc) && on)
-		if(shock_cooldown != 0)
+		if(shock_cooldown)
 			return
-		shock_cooldown = 1
-		addtimer(VARSET_CALLBACK(src, shock_cooldown, 0), 100)
+		shock_cooldown = TRUE
+		addtimer(VARSET_CALLBACK(src, shock_cooldown, FALSE), 100)
 		var/mob/living/L = loc
 		step(L, pick(GLOB.cardinals))
 
@@ -117,28 +79,46 @@
 
 	if(master)
 		master.receive_signal()
-	return
 
-/obj/item/electropack/attack_self(mob/user)
+/obj/item/electropack/proc/set_frequency(new_frequency)
+	SSradio.remove_object(src, frequency)
+	frequency = new_frequency
+	SSradio.add_object(src, frequency, RADIO_SIGNALER)
 
-	if(!ishuman(user))
+/obj/item/electropack/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, \
+									datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
+	if(!ui)
+		ui = new(user, src, ui_key, "electropack", name, ui_x, ui_y, master_ui, state)
+		ui.open()
+
+/obj/item/electropack/ui_data(mob/user)
+	var/list/data = list()
+	data["power"] = on
+	data["frequency"] = frequency
+	data["code"] = code
+	data["minFrequency"] = MIN_FREE_FREQ
+	data["maxFrequency"] = MAX_FREE_FREQ
+	return data
+
+/obj/item/electropack/ui_act(action, params)
+	if(..())
 		return
-	user.set_machine(src)
-	var/dat = {"<TT>Turned [on ? "On" : "Off"] -
-<A href='?src=[REF(src)];power=1'>Toggle</A><BR>
-<B>Frequency/Code</B> for electropack:<BR>
-Frequency:
-<A href='byond://?src=[REF(src)];freq=-10'>-</A>
-<A href='byond://?src=[REF(src)];freq=-2'>-</A> [format_frequency(frequency)]
-<A href='byond://?src=[REF(src)];freq=2'>+</A>
-<A href='byond://?src=[REF(src)];freq=10'>+</A><BR>
 
-Code:
-<A href='byond://?src=[REF(src)];code=-5'>-</A>
-<A href='byond://?src=[REF(src)];code=-1'>-</A> [code]
-<A href='byond://?src=[REF(src)];code=1'>+</A>
-<A href='byond://?src=[REF(src)];code=5'>+</A><BR>
-</TT>"}
-	user << browse(dat, "window=radio")
-	onclose(user, "radio")
-	return
+	switch(action)
+		if("power")
+			on = !on
+			icon_state = "electropack[on]"
+			. = TRUE
+		if("freq")
+			var/value = unformat_frequency(params["freq"])
+			if(value)
+				frequency = sanitize_frequency(value, TRUE)
+				set_frequency(frequency)
+				. = TRUE
+		if("code")
+			var/value = text2num(params["code"])
+			if(value)
+				value = round(value)
+				code = clamp(value, 1, 100)
+				. = TRUE

tgui/packages/tgui/interfaces/Electropack.js

@@ -0,0 +1,66 @@
+import { Grid, NumberInput, Button, Section, LabeledList } from '../components';
+import { useBackend } from '../backend';
+import { toFixed } from 'common/math';
+
+export const Electropack = props => {
+  const { act, data } = useBackend(props);
+  const {
+    power,
+    code,
+    frequency,
+    minFrequency,
+    maxFrequency,
+  } = data;
+
+  return (
+    <Section>
+      <LabeledList>
+        <LabeledList.Item label="Power">
+          <Button
+            icon={power ? 'power-off' : 'times'}
+            content={power ? 'On' : 'Off'}
+            selected={power}
+            onClick={() => act('power')} />
+        </LabeledList.Item>
+      </LabeledList>
+      <Grid>
+        <Grid.Column size={1.4} color="label">
+          Frequency:
+        </Grid.Column>
+        <Grid.Column>
+          <NumberInput
+            animate
+            unit="kHz"
+            step={0.2}
+            stepPixelSize={6}
+            minValue={minFrequency / 10}
+            maxValue={maxFrequency / 10}
+            value={frequency / 10}
+            format={value => toFixed(value, 1)}
+            width={13}
+            onDrag={(e, value) => act('freq', {
+              freq: value,
+            })} />
+        </Grid.Column>
+      </Grid>
+      <Grid mt={0.6}>
+        <Grid.Column size={1.4} color="label">
+          Code:
+        </Grid.Column>
+        <Grid.Column>
+          <NumberInput
+            animate
+            step={1}
+            stepPixelSize={6}
+            minValue={1}
+            maxValue={100}
+            value={code}
+            width={13}
+            onDrag={(e, value) => act('code', {
+              code: value,
+            })} />
+        </Grid.Column>
+      </Grid>
+    </Section>
+  );
+};

tgui/packages/tgui/routes.js

@@ -38,6 +38,7 @@ import { DecalPainter } from './interfaces/DecalPainter';
 import { DisposalUnit } from './interfaces/DisposalUnit';
 import { DnaVault } from './interfaces/DnaVault';
 import { EightBallVote } from './interfaces/EightBallVote';
+import { Electropack } from './interfaces/Electropack';
 import { EmergencyShuttleConsole } from './interfaces/EmergencyShuttleConsole';
 import { EngravedMessage } from './interfaces/EngravedMessage';
 import { Gps } from './interfaces/Gps';
@@ -287,6 +288,10 @@ const ROUTES = {
     component: () => EightBallVote,
     scrollable: false,
   },
+  electropack: {
+    component: () => Electropack,
+    scrollable: false,
+  },
   emergency_shuttle_console: {
     component: () => EmergencyShuttleConsole,
     scrollable: false,