TGUI Telesci

code/modules/telesci/telesci_computer.dm

@@ -6,7 +6,7 @@
 	circuit = /obj/item/weapon/circuitboard/telesci_console
 	var/sending = 1
 	var/obj/machinery/telepad/telepad = null
-	var/temp_msg = "Telescience control console initialized.<BR>Welcome."
+	var/temp_msg = "Telescience control console initialized. Welcome."
 
 	// VARIABLES //
 	var/teles_left	// How many teleports left until it becomes uncalibrated
@@ -83,16 +83,21 @@
 /obj/machinery/computer/telescience/attack_hand(mob/user)
 	if(..())
 		return
-	ui_interact(user)
+	tgui_interact(user)
 
-/obj/machinery/computer/telescience/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	user.set_machine(src)
+/obj/machinery/computer/telescience/tgui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "TelesciConsole", name)
+		ui.open()
 
-	var/data[0]
+/obj/machinery/computer/telescience/tgui_data(mob/user, datum/tgui/ui, datum/tgui_state/state)
+	var/list/data = list()
 	if(!telepad)
 		in_use = 0     //Yeah so if you deconstruct teleporter while its in the process of shooting it wont disable the console
 		data["noTelepad"] = 1
 	else
+		data["noTelepad"] = 0
 		data["insertedGps"] = inserted_gps
 		data["rotation"] = rotation
 		data["currentZ"] = z_co
@@ -110,6 +115,7 @@
 		//We'll base our options on connected z's or overmap
 		data["sectorOptions"] = using_map.get_map_levels(z, TRUE, overmap_range)
 
+		data["lastTeleData"] = null
 		if(last_tele_data)
 			data["lastTeleData"] = list()
 			data["lastTeleData"]["src_x"] = last_tele_data.src_x
@@ -117,12 +123,61 @@
 			data["lastTeleData"]["distance"] = last_tele_data.distance
 			data["lastTeleData"]["time"] = last_tele_data.time
 
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, data, force_open)
-	if (!ui)
-		ui = new(user, src, ui_key, "telescience_console.tmpl", src.name, 400, 450)
-		ui.set_initial_data(data)
-		ui.open()
-		ui.set_auto_update(5)
+	return data
+
+/obj/machinery/computer/telescience/tgui_act(action, list/params, datum/tgui/ui, datum/tgui_state/state)
+	if(..())
+		return TRUE
+	if(!telepad || telepad.panel_open)
+		return TRUE
+
+	switch(action)
+		if("setrotation")
+			rotation = CLAMP(text2num(params["val"]), -900, 900)
+			rotation = round(rotation, 0.01)
+
+		if("setdistance")
+			distance = CLAMP(text2num(params["val"]), 1, get_max_allowed_distance())
+			distance = FLOOR(distance, 1)
+
+		if("setz")
+			var/new_z = text2num(params["setz"])
+			if(new_z in using_map.player_levels)
+				z_co = new_z
+
+		if("ejectGPS")
+			if(inserted_gps)
+				inserted_gps.forceMove(loc)
+				inserted_gps = null
+
+		if("setMemory")
+			if(last_target && inserted_gps)
+				// TODO - What was this even supposed to do??
+				//inserted_gps.locked_location = last_target
+				temp_msg = "Location saved."
+			else
+				temp_msg = "ERROR! No data was stored."
+
+		if("send")
+			sending = 1
+			teleport(usr)
+
+		if("receive")
+			sending = 0
+			teleport(usr)
+
+		if("recal")
+			recalibrate()
+			sparks()
+			temp_msg = "NOTICE: Calibration successful."
+
+		if("eject")
+			eject()
+			temp_msg = "NOTICE: Bluespace crystals ejected."
+		else
+			return FALSE
+
+	return TRUE
 
 /obj/machinery/computer/telescience/proc/sparks()
 	if(telepad)
@@ -198,7 +253,7 @@
 			playsound(telepad, 'sound/weapons/flash.ogg', 50, 1)
 			// Wait depending on the time the projectile took to get there
 			teleporting = 1
-			temp_msg = "Powering up bluespace crystals.<BR>Please wait."
+			temp_msg = "Powering up bluespace crystals. Please wait."
 
 		spawn(spawn_time) // in deciseconds
 			if(!telepad)
@@ -218,12 +273,12 @@
 
 			if(!A || (A.flags & BLUE_SHIELDED))
 				telefail()
-				temp_msg = "ERROR!<BR>Target is shielded from bluespace intersection!"
+				temp_msg = "ERROR! Target is shielded from bluespace intersection!"
 				return
 
-			temp_msg = "Teleport successful.<BR>"
+			temp_msg = "Teleport successful. "
 			if(teles_left < 10)
-				temp_msg += "Calibration required soon.<BR>"
+				temp_msg += "Calibration required soon. "
 			temp_msg += "Data printed below."
 
 			var/sparks = get_turf(target)
@@ -286,11 +341,11 @@
 /obj/machinery/computer/telescience/proc/teleport(mob/user)
 	distance = CLAMP(distance, 0, get_max_allowed_distance())
 	if(rotation == null || distance == null || z_co == null)
-		temp_msg = "ERROR!<BR>Set a distance, rotation and sector."
+		temp_msg = "ERROR! Set a distance, rotation and sector."
 		return
 	if(distance <= 0)
 		telefail()
-		temp_msg = "ERROR!<BR>No distance selected!"
+		temp_msg = "ERROR! No distance selected!"
 		return
 	if(!(z_co in using_map.player_levels))
 		telefail()
@@ -300,7 +355,7 @@
 		doteleport(user)
 	else
 		telefail()
-		temp_msg = "ERROR!<BR>Calibration required."
+		temp_msg = "ERROR! Calibration required."
 		return
 	return
 
@@ -310,64 +365,6 @@
 		crystals -= I
 	distance = 0
 
-/obj/machinery/computer/telescience/Topic(href, href_list)
-	if(..())
-		return
-	if(!telepad || telepad.panel_open)
-		updateDialog()
-		return
-
-	if(href_list["setrotation"])
-		var/new_rot = input("Please input desired bearing in degrees.", name, rotation) as num
-		if(..()) // Check after we input a value, as they could've moved after they entered something
-			return
-		rotation = CLAMP(new_rot, -900, 900)
-		rotation = round(rotation, 0.01)
-
-	if(href_list["setdistance"])
-		var/new_pow = input("Please input desired distance in meters.", name, rotation) as num
-		if(..()) // Check after we input a value, as they could've moved after they entered something
-			return
-		distance = CLAMP(new_pow, 1, get_max_allowed_distance())
-		distance = FLOOR(distance, 1)
-
-	if(href_list["setz"])
-		var/new_z = text2num(href_list["setz"])
-		if(new_z in using_map.player_levels)
-			z_co = new_z
-
-	if(href_list["ejectGPS"])
-		if(inserted_gps)
-			inserted_gps.forceMove(loc)
-			inserted_gps = null
-
-	if(href_list["setMemory"])
-		if(last_target && inserted_gps)
-			// TODO - What was this even supposed to do??
-			//inserted_gps.locked_location = last_target
-			temp_msg = "Location saved."
-		else
-			temp_msg = "ERROR!<BR>No data was stored."
-
-	if(href_list["send"])
-		sending = 1
-		teleport(usr)
-
-	if(href_list["receive"])
-		sending = 0
-		teleport(usr)
-
-	if(href_list["recal"])
-		recalibrate()
-		sparks()
-		temp_msg = "NOTICE:<BR>Calibration successful."
-
-	if(href_list["eject"])
-		eject()
-		temp_msg = "NOTICE:<BR>Bluespace crystals ejected."
-
-	updateDialog()
-
 /obj/machinery/computer/telescience/proc/recalibrate()
 	teles_left = rand(40, 50)
 	distance_off = rand(-4, 4)

nano/templates/telescience_console.tmpl

@@ -1,60 +0,0 @@
-<!-- 
-Title: Telescience Control UI 
-Used In File(s): \code\modules\telesci\telesci_computer.dm
- -->
-{{if data.noTelepad == 1}}
-	<div class='statusDisplay'>No telepad located. <BR>Please add telepad data.</div><BR>
-{{else}}
-	<div class='item'>{{:helper.link('Eject GPS', 'eject', {'ejectGPS' : 1}, null, (data.insertedGps ? '' : 'disabled'))}}</div>
-
-	{{if data.cooldown}}
-		<div class='statusDisplay'>Telepad is recharging.  Please wait {{:helper.round(data.cooldown)}} seconds.</div>
-	{{else}}
-		<div class='statusDisplay'>{{:data.tempMsg}}</div>
-	{{/if}}
-
-	<div class='item'>
-		<div class='itemLabel'>Bearing:</div>
-		<div class='itemContent'>{{:helper.link(data.rotation + '°', 'pencil', {'setrotation' : 1})}}</div>
-	</div>
-	<div class='item'>
-		<div class='itemLabel'>Distance:</div>
-		<div class='itemContent'>{{:helper.link(data.distance + ' m', 'pencil', {'setdistance' : 1})}}</div>
-	</div>
-	<div class='item'>
-		<div class='itemLabel'>Max Distance:</div>
-		<div class='itemContent'>{{:data.maxAllowedDistance}} m</div>
-	</div>
-	<div class='item'>
-		<div class='itemLabel'>Sector:</div>
-		<div class='itemContent'>
-		{{for data.sectorOptions}}
-			{{:helper.link(value, 'gear', {'setz' : value}, null, value == data.currentZ ? 'selected' : null)}}
-		{{/for}}
-	</div>
-	<div class="item">
-		<div class="itemLabel">Controls:</div>
-		<div class="itemContent">
-			{{:helper.link('Send', 'arrowreturnthick-1-n', {'send' : 1})}}
-			{{:helper.link('Receive', 'arrowreturnthick-1-s', {'receive' : 1})}}
-			{{:helper.link('Recalibrate', 'gear', {'recal' : 1})}}
-		</div>
-	</div>
-
-	{{if !data.lastTeleData}}
-		<div class='statusDisplay'>No teleport data found.</div>
-	{{else}}
-		<div class='item'>
-			<div class='itemLabel'>Telepad Location:</div>
-			<div class='itemContent'>{{:data.lastTeleData.src_x}}, {{:data.lastTeleData.src_y}}</div>
-		</div>
-		<div class='item'>
-			<div class='itemLabel'>Distance:</div>
-			<div class='itemContent'>{{:helper.fixed(data.lastTeleData.distance)}}m</div>
-		</div>
-		<div class='item'>
-			<div class='itemLabel'>Transit Time:</div>
-			<div class='itemContent'>{{:helper.fixed(data.lastTeleData.time)}} secs</div>
-		</div>
-	{{/if}}
-{{/if}}

tgui/packages/tgui/interfaces/TelesciConsole.js

@@ -0,0 +1,143 @@
+import { sortBy } from 'common/collections';
+import { Fragment } from 'inferno';
+import { useBackend } from "../backend";
+import { AnimatedNumber, Box, Button, Flex, Icon, LabeledList, NoticeBox, NumberInput, ProgressBar, Section } from "../components";
+import { Window } from "../layouts";
+
+export const TelesciConsole = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const {
+    noTelepad,
+  } = data;
+
+  return (
+    <Window width={400} height={450} resizable>
+      <Window.Content scrollable>
+        {noTelepad && <TelesciNoTelepadError /> || <TelesciConsoleContent />}
+      </Window.Content>
+    </Window>
+  );
+};
+
+const TelesciNoTelepadError = (props, context) => {
+  return (
+    <Section title="Error" color="bad">
+      No telepad located.<br />
+      Please add telepad data.
+    </Section>
+  );
+};
+
+export const TelesciConsoleContent = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const {
+    insertedGps,
+    rotation,
+    currentZ,
+    cooldown,
+    crystalCount,
+    maxCrystals,
+    maxPossibleDistance,
+    maxAllowedDistance,
+    distance,
+    tempMsg,
+    sectorOptions,
+    lastTeleData,
+  } = data;
+
+  return (
+    <Section title="Telepad Controls" buttons={
+      <Button
+        icon="eject"
+        disabled={!insertedGps}
+        onClick={() => act("ejectGPS")}
+        content="Eject GPS" />
+    }>
+      <NoticeBox info>
+        {cooldown && (
+          <Box>
+            Telepad is recharging. Please wait <AnimatedNumber value={cooldown} /> seconds.
+          </Box>
+        ) || (
+          <Box>
+            {tempMsg}
+          </Box>
+        )}
+      </NoticeBox>
+      <LabeledList>
+        <LabeledList.Item label="Bearing">
+          <NumberInput
+            fluid
+            value={rotation}
+            format={v => v + "°"}
+            step={1}
+            minValue={-900}
+            maxValue={900}
+            onDrag={(e, val) => act("setrotation", { val: val })} />
+        </LabeledList.Item>
+        <LabeledList.Item label="Distance">
+          <NumberInput
+            fluid
+            value={distance}
+            format={v => v + "/" + maxAllowedDistance + " m"}
+            minValue={0}
+            maxValue={maxAllowedDistance}
+            step={1}
+            stepPixelSize={4}
+            onDrag={(e, val) => act("setdistance", { val: val })} />
+        </LabeledList.Item>
+        <LabeledList.Item label="Sector">
+          {sortBy(v => Number(v))(sectorOptions).map(z => (
+            <Button
+              key={z}
+              icon="check-circle"
+              content={z}
+              selected={currentZ === z}
+              onClick={() => act("setz", { setz: z })} />
+          ))}
+        </LabeledList.Item>
+        <LabeledList.Item label="Controls">
+          <Button
+            icon="share"
+            iconRotation={-90}
+            onClick={() => act("send")}
+            content="Send" />
+          <Button
+            icon="share"
+            iconRotation={90}
+            onClick={() => act("receive")}
+            content="Receive" />
+          <Button
+            icon="sync"
+            iconRotation={90}
+            onClick={() => act("recal")}
+            content="Recalibrate" />
+        </LabeledList.Item>
+      </LabeledList>
+      {lastTeleData && (
+        <Section mt={1}>
+          <LabeledList>
+            <LabeledList.Item label="Telepad Location">
+              {lastTeleData.src_x}, {lastTeleData.src_y}
+            </LabeledList.Item>
+            <LabeledList.Item label="Distance">
+              {lastTeleData.distance}m
+            </LabeledList.Item>
+            <LabeledList.Item label="Transit Time">
+              {lastTeleData.time} secs
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+      ) || (
+        <Section mt={1}>
+          No teleport data found.
+        </Section>
+      )}
+      <Section>
+        Crystals: {crystalCount} / {maxCrystals}
+      </Section>
+    </Section>
+  );
+};