tgui-next launchpad (#48536)

* remote launchpad + launchpad console

* fixes

* rebuild

code/game/machinery/computer/launchpad_control.dm

@@ -1,14 +1,13 @@
 /obj/machinery/computer/launchpad
-	name = "\improper launchpad control console"
+	name = "launchpad control console"
 	desc = "Used to teleport objects to and from a launchpad."
 	icon_screen = "teleport"
 	icon_keyboard = "teleport_key"
 	circuit = /obj/item/circuitboard/computer/launchpad_console
-	ui_x = 350
-	ui_y = 470
+	ui_x = 475
+	ui_y = 260
 
-	var/screen = "select" //current UI view
-	var/obj/machinery/launchpad/current_pad //current pad viewed on the screen
+	var/selected_id
 	var/list/obj/machinery/launchpad/launchpads
 	var/maximum_pads = 4
 
@@ -62,154 +61,66 @@
 
 /obj/machinery/computer/launchpad/ui_data(mob/user)
 	var/list/data = list()
-	if(!LAZYLEN(launchpads))
-		data["screen"] = "empty"
-		return data
-	else
-		data["screen"] = screen
-
-	if(screen == "select")
-		var/list/pad_list = list()
-		for(var/i in 1 to LAZYLEN(launchpads))
-			if(pad_exists(i))
-				var/obj/machinery/launchpad/pad = get_pad(i)
-				var/list/this_pad = list()
-				this_pad["name"] = pad.display_name
-				this_pad["id"] = i
-				if(pad.stat & NOPOWER)
-					this_pad["inactive"] = TRUE
-				pad_list += list(this_pad)
-			else
-				launchpads -= get_pad(i)
-		data["launchpads"] = pad_list
-	else if(screen == "control")
+	var/list/pad_list = list()
+	for(var/i in 1 to LAZYLEN(launchpads))
+		if(pad_exists(i))
+			var/obj/machinery/launchpad/pad = get_pad(i)
+			var/list/this_pad = list()
+			this_pad["name"] = pad.display_name
+			this_pad["id"] = i
+			if(pad.stat & NOPOWER)
+				this_pad["inactive"] = TRUE
+			pad_list += list(this_pad)
+		else
+			launchpads -= get_pad(i)
+	data["launchpads"] = pad_list
+	data["selected_id"] = selected_id
+	if(selected_id)
+		var/obj/machinery/launchpad/current_pad = launchpads[selected_id]
+		data["x"] = current_pad.x_offset
+		data["y"] = current_pad.y_offset
+		data["pad_name"] = current_pad.display_name
+		data["range"] = current_pad.range
+		data["selected_pad"] = current_pad
 		if(QDELETED(current_pad) || (current_pad.stat & NOPOWER))
 			data["pad_active"] = FALSE
 			return data
 		data["pad_active"] = TRUE
-		data["pad_name"] = current_pad.display_name
-		data["abs_x"] = abs(current_pad.x_offset)
-		data["abs_y"] = abs(current_pad.y_offset)
-		data["north_south"] = current_pad.y_offset > 0 ? "N":"S"
-		data["east_west"] = current_pad.x_offset > 0 ? "E":"W"
 
 	return data
 
 /obj/machinery/computer/launchpad/ui_act(action, params)
 	if(..())
 		return
+	var/obj/machinery/launchpad/current_pad = launchpads[selected_id]
 	switch(action)
-		if("return")
-			screen = "select"
-			. = TRUE
 		if("select_pad")
-			current_pad = get_pad(text2num(params["id"]))
-			screen = "control"
+			selected_id = text2num(params["id"])
 			. = TRUE
-		if("right")
-			if(!current_pad.teleporting)
-				if(current_pad.x_offset < current_pad.range)
-					current_pad.x_offset++
-					current_pad.update_indicator()
+		if("set_pos")
+			var/new_x = text2num(params["x"])
+			var/new_y = text2num(params["y"])
+			current_pad.set_offset(new_x, new_y)
 			. = TRUE
-
-		if("left")
-			if(!current_pad.teleporting)
-				if(current_pad.x_offset > (current_pad.range * -1))
-					current_pad.x_offset--
-					current_pad.update_indicator()
+		if("move_pos")
+			var/plus_x = text2num(params["x"])
+			var/plus_y = text2num(params["y"])
+			current_pad.set_offset(
+				x = current_pad.x_offset + plus_x,
+				y = current_pad.y_offset + plus_y
+			)
 			. = TRUE
-
-		if("up")
-			if(!current_pad.teleporting)
-				if(current_pad.y_offset < current_pad.range)
-					current_pad.y_offset++
-					current_pad.update_indicator()
-			. = TRUE
-
-		if("down")
-			if(!current_pad.teleporting)
-				if(current_pad.y_offset > (current_pad.range * -1))
-					current_pad.y_offset--
-					current_pad.update_indicator()
-			. = TRUE
-
-		if("up-right")
-			if(!current_pad.teleporting)
-				if(current_pad.y_offset < current_pad.range)
-					current_pad.y_offset++
-				if(current_pad.x_offset < current_pad.range)
-					current_pad.x_offset++
-				current_pad.update_indicator()
-			. = TRUE
-
-		if("up-left")
-			if(!current_pad.teleporting)
-				if(current_pad.y_offset < current_pad.range)
-					current_pad.y_offset++
-				if(current_pad.x_offset > (current_pad.range * -1))
-					current_pad.x_offset--
-				current_pad.update_indicator()
-			. = TRUE
-
-		if("down-right")
-			if(!current_pad.teleporting)
-				if(current_pad.y_offset > (current_pad.range * -1))
-					current_pad.y_offset--
-				if(current_pad.x_offset < current_pad.range)
-					current_pad.x_offset++
-				current_pad.update_indicator()
-			. = TRUE
-
-		if("down-left")
-			if(!current_pad.teleporting)
-				if(current_pad.y_offset > (current_pad.range * -1))
-					current_pad.y_offset--
-				if(current_pad.x_offset > (current_pad.range * -1))
-					current_pad.x_offset--
-				current_pad.update_indicator()
-			. = TRUE
-
-		if("reset")
-			if(!current_pad.teleporting)
-				current_pad.y_offset = 0
-				current_pad.x_offset = 0
-				current_pad.update_indicator()
-			. = TRUE
-
-		if("manual_x")
-			if(!current_pad.teleporting)
-				var/new_x = input("Set the X offset (Horizontal)","X Offset", current_pad.x_offset) as null|num
-				if(!isnull(new_x))
-					new_x = CLAMP(new_x, current_pad.range * -1, current_pad.range)
-				. = TRUE
-				current_pad.x_offset = new_x
-				current_pad.update_indicator()
-			. = TRUE
-
-		if("manual_y")
-			if(!current_pad.teleporting)
-				var/new_y = input("Set the Y offset (Vertical)","Y Offset", current_pad.y_offset) as null|num
-				if(!isnull(new_y))
-					new_y = CLAMP(new_y, current_pad.range * -1, current_pad.range)
-				. = TRUE
-				current_pad.y_offset = new_y
-				current_pad.update_indicator()
-			. = TRUE
-
 		if("rename")
 			. = TRUE
-			var/new_name = stripped_input(usr, "How do you want to rename the launchpad?", "Launchpad", current_pad.display_name, 15)
+			var/new_name = params["name"]
 			if(!new_name)
 				return
 			current_pad.display_name = new_name
-
 		if("remove")
-			. = TRUE
 			if(usr && alert(usr, "Are you sure?", "Unlink Launchpad", "I'm Sure", "Abort") != "Abort")
 				launchpads -= current_pad
-				current_pad = null
-
+				selected_id = null
+			. = TRUE
 		if("launch")
 			teleport(usr, current_pad, TRUE)
 			. = TRUE

code/game/machinery/launch_pad.dm

@@ -98,6 +98,15 @@
 	else
 		holder.icon_state = null
 
+/obj/machinery/launchpad/proc/set_offset(x, y)
+	if(teleporting)
+		return
+	if(!isnull(x))
+		x_offset = CLAMP(x, -range, range)
+	if(!isnull(y))
+		y_offset = CLAMP(y, -range, range)
+	update_indicator()
+
 /obj/machinery/launchpad/proc/doteleport(mob/user, sending)
 	if(teleporting)
 		to_chat(user, "<span class='warning'>ERROR: Launchpad busy.</span>")
@@ -315,7 +324,7 @@
 /obj/item/launchpad_remote/ui_interact(mob/user, ui_key = "launchpad_remote", 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, "launchpad_remote", "Briefcase Launchpad Remote", 550, 400, master_ui, state) //width, height
+		ui = new(user, src, ui_key, "launchpad_remote", "Briefcase Launchpad Remote", 300, 240, master_ui, state) //width, height
 		ui.set_style("syndicate")
 		ui.open()
 
@@ -330,10 +339,9 @@
 		return data
 
 	data["pad_name"] = pad.display_name
-	data["abs_x"] = abs(pad.x_offset)
-	data["abs_y"] = abs(pad.y_offset)
-	data["north_south"] = pad.y_offset > 0 ? "N":"S"
-	data["east_west"] = pad.x_offset > 0 ? "E":"W"
+	data["range"] = pad.range
+	data["x"] = pad.x_offset
+	data["y"] = pad.y_offset
 	return data
 
 /obj/item/launchpad_remote/proc/teleport(mob/user, obj/machinery/launchpad/pad)
@@ -349,94 +357,33 @@
 	if(..())
 		return
 	switch(action)
-		if("right")
-			if(!pad.teleporting)
-				if(pad.x_offset < pad.range)
-					pad.x_offset++
-					pad.update_indicator()
+		if("set_pos")
+			var/new_x = text2num(params["x"])
+			var/new_y = text2num(params["y"])
+			pad.set_offset(new_x, new_y)
 			. = TRUE
-
-		if("left")
-			if(!pad.teleporting)
-				if(pad.x_offset > (pad.range * -1))
-					pad.x_offset--
-					pad.update_indicator()
+		if("move_pos")
+			var/plus_x = text2num(params["x"])
+			var/plus_y = text2num(params["y"])
+			pad.set_offset(
+				x = pad.x_offset + plus_x,
+				y = pad.y_offset + plus_y
+			)
 			. = TRUE
-
-		if("up")
-			if(!pad.teleporting)
-				if(pad.y_offset < pad.range)
-					pad.y_offset++
-					pad.update_indicator()
-			. = TRUE
-
-		if("down")
-			if(!pad.teleporting)
-				if(pad.y_offset > (pad.range * -1))
-					pad.y_offset--
-					pad.update_indicator()
-			. = TRUE
-
-		if("up-right")
-			if(!pad.teleporting)
-				if(pad.y_offset < pad.range)
-					pad.y_offset++
-				if(pad.x_offset < pad.range)
-					pad.x_offset++
-				pad.update_indicator()
-			. = TRUE
-
-		if("up-left")
-			if(!pad.teleporting)
-				if(pad.y_offset < pad.range)
-					pad.y_offset++
-				if(pad.x_offset > (pad.range * -1))
-					pad.x_offset--
-				pad.update_indicator()
-			. = TRUE
-
-		if("down-right")
-			if(!pad.teleporting)
-				if(pad.y_offset > (pad.range * -1))
-					pad.y_offset--
-				if(pad.x_offset < pad.range)
-					pad.x_offset++
-				pad.update_indicator()
-			. = TRUE
-
-		if("down-left")
-			if(!pad.teleporting)
-				if(pad.y_offset > (pad.range * -1))
-					pad.y_offset--
-				if(pad.x_offset > (pad.range * -1))
-					pad.x_offset--
-				pad.update_indicator()
-			. = TRUE
-
-		if("reset")
-			if(!pad.teleporting)
-				pad.y_offset = 0
-				pad.x_offset = 0
-				pad.update_indicator()
-			. = TRUE
-
 		if("rename")
 			. = TRUE
-			var/new_name = stripped_input(usr, "How do you want to rename the launchpad?", "Launchpad", pad.display_name, 15)
+			var/new_name = params["name"]
 			if(!new_name)
 				return
 			pad.display_name = new_name
-
 		if("remove")
 			. = TRUE
 			if(usr && alert(usr, "Are you sure?", "Unlink Launchpad", "I'm Sure", "Abort") != "Abort")
 				pad = null
-
 		if("launch")
 			sending = TRUE
 			teleport(usr, pad)
 			. = TRUE
-
 		if("pull")
 			sending = FALSE
 			teleport(usr, pad)

tgui-next/README.md

@@ -610,6 +610,9 @@ dragging the input.
 - `stepPixelSize: number` (default: 1) - Screen distance mouse needs
 to travel to adjust value by one `step`.
 - `width: string|number` - Width of the element, in `Box` units or pixels.
+- `height: string|numer` - Height of the element, in `Box` units or pixels.
+- `lineHeight: string|number` - lineHeight of the element, in `Box` units or pixels.
+- `fontSize: string|number` - fontSize of the element, in `Box` units or pixels.
 - `format: value => value` - Format value using this function before
 displaying it.
 - `suppressFlicker: number` - A number in milliseconds, for which the input

tgui-next/packages/tgui/components/Button.js

@@ -21,6 +21,8 @@ export const Button = props => {
     tooltipPosition,
     ellipsis,
     content,
+    iconRotation,
+    iconSpin,
     children,
     onclick,
     onClick,
@@ -78,7 +80,7 @@ export const Button = props => {
       }}
       {...rest}>
       {icon && (
-        <Icon name={icon} />
+        <Icon name={icon} rotation={iconRotation} spin={iconSpin} />
       )}
       {content}
       {children}

tgui-next/packages/tgui/components/NumberInput.js

@@ -144,7 +144,10 @@ export class NumberInput extends Component {
       unit,
       minValue,
       maxValue,
+      height,
       width,
+      lineHeight,
+      fontSize,
       format,
       onChange,
       onDrag,
@@ -178,6 +181,9 @@ export class NumberInput extends Component {
           className,
         ])}
         minWidth={width}
+        minHeight={height}
+        lineHeight={lineHeight}
+        fontSize={fontSize}
         onMouseDown={this.handleDragStart}>
         <div className="NumberInput__barContainer">
           <div
@@ -194,6 +200,9 @@ export class NumberInput extends Component {
           className="NumberInput__input"
           style={{
             display: !editing ? 'none' : undefined,
+            height: height,
+            'line-height': lineHeight,
+            'font-size': fontSize,
           }}
           onBlur={e => {
             if (!editing) {

tgui-next/packages/tgui/interfaces/Launchpad.js

@@ -0,0 +1,278 @@
+import { Fragment } from 'inferno';
+import { useBackend } from '../backend';
+import { Button, LabeledList, Section, Grid, Box, Input, NoticeBox, Table, NumberInput } from '../components';
+
+export const LaunchpadButtonPad = props => {
+  const { act } = useBackend(props);
+
+  return (
+    <Grid width="1px">
+      <Grid.Column>
+        <Button
+          fluid
+          icon="arrow-left"
+          iconRotation={45}
+          mb={1}
+          onClick={() => act('move_pos', {
+            x: -1,
+            y: 1,
+          })} />
+        <Button
+          fluid
+          icon="arrow-left"
+          mb={1}
+          onClick={() => act('move_pos', {
+            x: -1,
+          })} />
+        <Button
+          fluid
+          icon="arrow-down"
+          iconRotation={45}
+          mb={1}
+          onClick={() => act('move_pos', {
+            x: -1,
+            y: -1,
+          })} />
+      </Grid.Column>
+      <Grid.Column>
+        <Button
+          fluid
+          icon="arrow-up"
+          mb={1}
+          onClick={() => act('move_pos', {
+            y: 1,
+          })} />
+        <Button
+          fluid
+          content="R"
+          mb={1}
+          onClick={() => act('set_pos', {
+            x: 0,
+            y: 0,
+          })} />
+        <Button
+          fluid
+          icon="arrow-down"
+          mb={1}
+          onClick={() => act('move_pos', {
+            y: -1,
+          })} />
+      </Grid.Column>
+      <Grid.Column>
+        <Button
+          fluid
+          icon="arrow-up"
+          iconRotation={45}
+          mb={1}
+          onClick={() => act('move_pos', {
+            x: 1,
+            y: 1,
+          })} />
+        <Button
+          fluid
+          icon="arrow-right"
+          mb={1}
+          onClick={() => act('move_pos', {
+            x: 1,
+          })} />
+        <Button
+          fluid
+          icon="arrow-right"
+          iconRotation={45}
+          mb={1}
+          onClick={() => act('move_pos', {
+            x: 1,
+            y: -1,
+          })} />
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export const LaunchpadControl = props => {
+  const { topLevel } = props;
+  const { act, data } = useBackend(props);
+
+  const {
+    x,
+    y,
+    pad_name,
+    range,
+  } = data;
+
+  return (
+    <Section
+      title={(
+        <Input
+          value={pad_name}
+          width="170px"
+          onChange={(e, value) => act('rename', {
+            name: value,
+          })}
+        />
+      )}
+      level={topLevel ? 1 : 2}
+      buttons={(
+        <Button
+          icon="times"
+          content="Remove"
+          color="bad"
+          onClick={() => act('remove')} />
+      )}>
+      <Grid>
+        <Grid.Column>
+          <Section title="Controls" level={2}>
+            <LaunchpadButtonPad state={props.state} />
+          </Section>
+        </Grid.Column>
+        <Grid.Column>
+          <Section title="Target" level={2}>
+            <Box fontSize="26px">
+              <Box mb={1}>
+                <Box
+                  inline
+                  bold
+                  mr={1}>
+                  X:
+                </Box>
+                <NumberInput
+                  value={x}
+                  minValue={-range}
+                  maxValue={range}
+                  lineHeight="30px"
+                  fontSize="26px"
+                  width="90px"
+                  height="30px"
+                  stepPixelSize={10}
+                  onChange={(e, value) => act('set_pos', {
+                    x: value,
+                  })}
+                />
+              </Box>
+              <Box>
+                <Box
+                  inline
+                  bold
+                  mr={1}>
+                Y:
+                </Box>
+                <NumberInput
+                  value={y}
+                  minValue={-range}
+                  maxValue={range}
+                  stepPixelSize={10}
+                  lineHeight="30px"
+                  fontSize="26px"
+                  width="90px"
+                  height="30px"
+                  onChange={(e, value) => act('set_pos', {
+                    y: value,
+                  })}
+                />
+              </Box>
+            </Box>
+          </Section>
+        </Grid.Column>
+      </Grid>
+      <Grid>
+        <Grid.Column>
+          <Button
+            fluid
+            icon="upload"
+            content="Launch"
+            textAlign="center"
+            onClick={() => act('launch')} />
+        </Grid.Column>
+        <Grid.Column>
+          <Button
+            fluid
+            icon="download"
+            content="Pull"
+            textAlign="center"
+            onClick={() => act('pull')} />
+        </Grid.Column>
+      </Grid>
+    </Section>
+  );
+};
+
+export const LaunchpadRemote = props => {
+  const { data } = useBackend(props);
+
+  const {
+    has_pad,
+    pad_closed,
+  } = data;
+
+  if (!has_pad) {
+    return (
+      <NoticeBox>
+        No Launchpad Connected
+      </NoticeBox>
+    );
+  }
+
+  if (pad_closed) {
+    return (
+      <NoticeBox>
+        Launchpad Closed
+      </NoticeBox>
+    );
+  }
+
+  return (
+    <LaunchpadControl topLevel state={props.state} />
+  );
+};
+
+export const LaunchpadConsole = props => {
+  const { act, data } = useBackend(props);
+
+  const {
+    launchpads = [],
+    selected_id,
+  } = data;
+
+  if (launchpads.length <= 0) {
+    return (
+      <NoticeBox>
+        No Pads Connected
+      </NoticeBox>
+    );
+  }
+
+  return (
+    <Section>
+      <Grid>
+        <Grid.Column size={0.6}>
+          <Box
+            style={{
+              'border-right': '2px solid rgba(255, 255, 255, 0.1)',
+            }}
+            minHeight="190px"
+            mr={1}>
+            {launchpads.map(launchpad => (
+              <Button
+                fluid
+                key={launchpad.name}
+                content={launchpad.name}
+                selected={selected_id === launchpad.id}
+                color="transparent"
+                onClick={() => act('select_pad', { id: launchpad.id })}
+              />
+            ))}
+          </Box>
+        </Grid.Column>
+        <Grid.Column>
+          {selected_id ? (
+            <LaunchpadControl state={props.state} />
+          ) : (
+            <Box>
+              Please select a pad
+            </Box>
+          )}
+        </Grid.Column>
+      </Grid>
+    </Section>
+  );
+};

tgui-next/packages/tgui/routes.js

@@ -48,6 +48,7 @@ import { Intellicard } from './interfaces/Intellicard';
 import { KeycardAuth } from './interfaces/KeycardAuth';
 import { LaborClaimConsole } from './interfaces/LaborClaimConsole';
 import { LanguageMenu } from './interfaces/LanguageMenu';
+import { LaunchpadConsole, LaunchpadRemote } from './interfaces/Launchpad';
 import { MechBayPowerConsole } from './interfaces/MechBayPowerConsole';
 import { MedicalKiosk } from './interfaces/MedicalKiosk';
 import { Mint } from './interfaces/Mint';
@@ -304,6 +305,15 @@ const ROUTES = {
     component: () => LanguageMenu,
     scrollable: true,
   },
+  launchpad_console: {
+    component: () => LaunchpadConsole,
+    scrollable: true,
+  },
+  launchpad_remote: {
+    component: () => LaunchpadRemote,
+    scrollable: false,
+    theme: 'syndicate',
+  },
   mech_bay_power_console: {
     component: () => MechBayPowerConsole,
     scrollable: false,

tgui-next/packages/tgui/styles/themes/syndicate.scss

@@ -25,13 +25,16 @@
     'color-danger': #9a9d00,
   ));
   @include meta.load-css('../components/Input.scss', $with: (
-    'border-color': colors.$primary,
+    'border-color': #87ce87,
   ));
   @include meta.load-css('../components/Layout.scss');
   @include meta.load-css('../components/NoticeBox.scss', $with: (
     'color-first': #750000,
     'color-second': #910101,
   ));
+  @include meta.load-css('../components/NumberInput.scss', $with: (
+    'border-color': #87ce87,
+  ));
   @include meta.load-css('../components/ProgressBar.scss', $with: (
     'color-background': rgba(0, 0, 0, 0.5),
   ));