Crew Console + Operating Computer tgui-next (#47475)

* Crew Console + Operating Computer

build

near finished

no health vars

final crew console

operating computer

rebuild

less shitcodey

* updating fix

code/game/machinery/computer/Operating.dm

@@ -14,7 +14,6 @@
 	var/obj/structure/table/optable/table
 	var/list/advanced_surgeries = list()
 	var/datum/techweb/linked_techweb
-	var/menu = MENU_OPERATION
 	light_color = LIGHT_COLOR_BLUE
 	var/list/linked_stasisbeds
 
@@ -71,7 +70,6 @@
 /obj/machinery/computer/operating/ui_data(mob/user)
 	var/list/data = list()
 	data["table"] = table
-	data["menu"] = menu
 
 	var/list/surgeries = list()
 	for(var/X in advanced_surgeries)
@@ -82,8 +80,8 @@
 		surgeries += list(surgery)
 	data["surgeries"] = surgeries
 	if(table)
-		data["patient"] = list()
 		if(table.check_patient())
+			data["patient"] = list()
 			patient = table.patient
 			switch(patient.stat)
 				if(CONSCIOUS)
@@ -127,15 +125,14 @@
 						"alternative_step" = alternative_step,
 						"alt_chems_needed" = alt_chems_needed
 					))
+		else
+			data["patient"] = null
 	return data
 
 /obj/machinery/computer/operating/ui_act(action, params)
 	if(..())
 		return
 	switch(action)
-		if("change_menu")
-			menu = text2num(params["menu"])
-			. = TRUE
 		if("sync")
 			sync_surgeries()
 			. = TRUE

tgui-next/packages/tgui/components/Table.scss

@@ -1,4 +1,5 @@
 .Table {
+  width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
   margin: 0;

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

@@ -0,0 +1,150 @@
+import { toFixed } from 'common/math';
+import { decodeHtmlEntities } from 'common/string';
+import { Fragment } from 'inferno';
+import { act } from '../byond';
+import { Box, Button, LabeledList, Section, Table } from '../components';
+import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
+import { classes } from 'common/react';
+
+export const HealthIcon = props => {
+  const {level} = props;
+  const healthColorMap = [
+    "#17d568",
+    "#2ecc71",
+    "#e67e22",
+    "#ed5100",
+    "#e74c3c",
+    "#ed2814",
+  ];
+  return (
+    <Box
+      inline={1}
+      width="16px"
+      height="16px"
+      position="relative"
+      ml={2.5}
+      style={{ "background-color": healthColorMap[level], "vertical-align": "text-bottom" }}
+    />
+  );
+};
+
+export const CrewConsole = props => {
+  const { state } = props;
+  const { config, data } = state;
+  const { ref } = config;
+  const locked = data.locked && !data.siliconUser;
+  const isHead = function (jobId) {
+    return jobId % 10 === 0;
+  };
+  const deptClass = function (jobId) {
+    if (jobId === 0)	{ // captain
+      return "dept-cap";
+    }
+    else if	(jobId >= 10 && jobId < 20)	{ // security
+      return "dept-sec";
+    }
+    else if (jobId >= 20 && jobId < 30)	{ // medical
+      return "dept-med";
+    }
+    else if (jobId >= 30 && jobId < 40)	{ // science
+      return "dept-sci";
+    }
+    else if (jobId >= 40 && jobId < 50)	{ // engineering
+      return "dept-eng";
+    }
+    else if (jobId >= 50 && jobId < 60)	{ // cargo
+      return "dept-cargo";
+    }
+    else if (jobId >= 200 && jobId < 230)	{ // CentCom
+      return "dept-cent";
+    }
+    else { // other / unknown
+      return "dept-other";
+    }
+  };
+  const healthLevel = function (oxy, tox, burn, brute) {
+    const healthSum = oxy + tox + burn + brute;
+    return Math.min(Math.max(Math.ceil(healthSum / 25), 0), 5);
+  };
+  const sensors = data.sensors || [];
+  return (
+    <Section minHeight={90}>
+      <Table>
+        <Table.Row>
+          <Table.Cell bold width="40%">
+            Name
+          </Table.Cell>
+          <Table.Cell bold width="5%">
+            Status
+          </Table.Cell>
+          <Table.Cell bold width="20%" textAlign="center">
+            Vitals
+          </Table.Cell>
+          <Table.Cell bold>
+            Position
+          </Table.Cell>
+          {!!data.link_allowed && (
+            <Table.Cell bold>
+              Tracking
+            </Table.Cell>
+          )}
+        </Table.Row>
+        {sensors.map(sensor => (
+          <Table.Row key={sensor.name}>
+            <Table.Cell
+              bold={isHead(sensor.ijob)}
+              color={deptClass(sensor.ijob)}>
+              {sensor.name} ({sensor.assignment})
+            </Table.Cell>
+            <Table.Cell>
+              <HealthIcon
+                level={healthLevel(sensor.oxydam, sensor.toxdam, sensor.brutedam, sensor.brutedam)}
+              />
+            </Table.Cell>
+            <Table.Cell>
+              {sensor.oxydam !== null ? (
+                <Box textAlign="center">
+                  (
+                  <Box inline width={4} color="damage-oxy" textAlign="center">
+                    {sensor.oxydam}
+                  </Box>
+                  /
+                  <Box inline width={4} color="damage-toxin" textAlign="center">
+                    {sensor.toxdam}
+                  </Box>
+                  /
+                  <Box inline width={4} color="damage-burn" textAlign="center">
+                    {sensor.burndam}
+                  </Box>
+                  /
+                  <Box inline width={4} color="damage-brute" textAlign="center">
+                    {sensor.brutedam}
+                  </Box>
+                  )
+                </Box>
+              ) : (
+                sensor.life_status ? "Alive" : "Dead"
+              )}
+            </Table.Cell>
+            <Table.Cell>
+              {sensor.pos_x !== null ? (
+                sensor.area
+              ) : (
+                "N/A"
+              )}
+            </Table.Cell>
+            {!!data.link_allowed && (
+              <Table.Cell>
+                <Button
+                  content="Track"
+                  disabled={!sensor.can_track}
+                  onClick={() => act(ref, "select_person", {name: sensor.name})}
+                />
+              </Table.Cell>
+            )}
+          </Table.Row>
+        ))}
+      </Table>
+    </Section>
+  );
+};

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

@@ -0,0 +1,159 @@
+import { Fragment } from 'inferno';
+import { act } from '../byond';
+import { Button, LabeledList, Section, Tabs, NoticeBox, ProgressBar, AnimatedNumber } from '../components';
+
+export const OperatingComputer = props => {
+  const { state } = props;
+  const { config, data } = state;
+  const { ref } = config;
+  const damageTypes = [
+    {
+      label: "Brute",
+      type: "bruteLoss",
+    },
+    {
+      label: "Burn",
+      type: "fireLoss",
+    },
+    {
+      label: "Toxin",
+      type: "toxLoss",
+    },
+    {
+      label: "Respiratory",
+      type: "oxyLoss",
+    },
+  ];
+  const {
+    table,
+    surgeries = [],
+    procedures = [],
+    patient = {},
+  } = data;
+  return (
+    <Tabs>
+      <Tabs.Tab
+        key="state"
+        label="Patient State"
+      >
+        {!table && (
+          <NoticeBox>
+            No Table Detected
+          </NoticeBox>
+        )}
+        <Section>
+          <Section
+            title="Patient State"
+            level={2}
+          >
+            {patient ? (
+              <LabeledList>
+                <LabeledList.Item
+                  label="State"
+                  color={patient.statstate}
+                >
+                  {patient.stat}
+                </LabeledList.Item>
+                <LabeledList.Item label="Blood Type">
+                  {patient.blood_type}
+                </LabeledList.Item>
+                <LabeledList.Item label="Health">
+                  <ProgressBar
+                    value={(patient.health - patient.minHealth) / (patient.maxHealth - patient.minHealth)}
+                    color={patient.health >= 0 ? "good" : "average"}
+                    content={(
+                      <AnimatedNumber
+                        value={patient.health}
+                      />
+                    )}
+                  />
+                </LabeledList.Item>
+                {damageTypes.map(type => (
+                  <LabeledList.Item key={type.type} label={type.label}>
+                    <ProgressBar
+                      value={patient[type.type] / patient.maxHealth}
+                      color="bad"
+                      content={(
+                        <AnimatedNumber
+                          value={patient[type.type]}
+                        />
+                      )}
+                    />
+                  </LabeledList.Item>
+                ))}
+              </LabeledList>
+            ) : (
+              "No Patient Detected"
+            )}
+          </Section>
+          <Section
+            title="Initiated Procedures"
+            level={2}
+          >
+            {procedures.length ? (
+              procedures.map(procedure => (
+                <Section
+                  key={procedure.name}
+                  title={procedure.name}
+                  level={3}
+                >
+                  <LabeledList>
+                    <LabeledList.Item label="Next Step">
+                      {procedure.next_step}
+                      {procedure.chems_needed && (
+                        <Fragment>
+                          <b>
+                            Required Chemicals:
+                          </b>
+                          <br />
+                          {procedure.chems_needed}
+                        </Fragment>
+                      )}
+                    </LabeledList.Item>
+                    {!!data.alternative_step && (
+                      <LabeledList.Item label="Alternative Step">
+                        {procedure.alternative_step}
+                        {procedure.alt_chems_needed && (
+                          <Fragment>
+                            <b>
+                            Required Chemicals:
+                            </b>
+                            <br />
+                            {procedure.alt_chems_needed}
+                          </Fragment>
+                        )}
+                      </LabeledList.Item>
+                    )}
+                  </LabeledList>
+                </Section>
+              ))
+            ) : (
+              "No Active Procedures"
+            )}
+          </Section>
+        </Section>
+      </Tabs.Tab>
+      <Tabs.Tab
+        key="procedures"
+        label="Surgery Procedures"
+      >
+        <Section title="Advanced Surgery Procedures">
+          <Button
+            icon="download"
+            content="Sync Research Database"
+            onClick={() => act(ref, "sync")}
+          />
+          {surgeries.map(surgery => (
+            <Section
+              title={surgery.name}
+              key={surgery.name}
+              level={2}
+            >
+              {surgery.desc}
+            </Section>
+          ))}
+        </Section>
+      </Tabs.Tab>
+    </Tabs>
+  );
+};

tgui-next/packages/tgui/routes.js

@@ -25,6 +25,7 @@ import { Cryo } from './interfaces/Cryo';
 import { DisposalUnit } from './interfaces/DisposalUnit';
 import { KitchenSink } from './interfaces/KitchenSink';
 import { Mint } from './interfaces/Mint';
+import { OperatingComputer } from './interfaces/OperatingComputer';
 import { PortableGenerator } from './interfaces/PortableGenerator';
 import { ShuttleManipulator } from './interfaces/ShuttleManipulator';
 import { SmartVend } from './interfaces/SmartVend';
@@ -129,6 +130,10 @@ const ROUTES = {
     component: () => Crayon,
     scrollable: true,
   },
+  crew: {
+    component: () => CrewConsole,
+    scrollable: true,
+  },
   cryo: {
     component: () => Cryo,
     scrollable: false,
@@ -153,6 +158,10 @@ const ROUTES = {
     component: () => SmartVend,
     scrollable: true,
   },
+  operating_computer: {
+    component: () => OperatingComputer,
+    scrollable: true,
+  },
   thermomachine: {
     component: () => ThermoMachine,
     scrollable: false,

tgui-next/packages/tgui/styles/color-map.scss

@@ -36,12 +36,6 @@ $color-map: (
   'bad': $color-bad,
   'highlight': $color-highlight,
   'label': $pale-blue,
-  'health-0': $color-health-0,
-  'health-1': $color-health-1,
-  'health-2': $color-health-2,
-  'health-3': $color-health-3,
-  'health-4': $color-health-4,
-  'health-5': $color-health-5,
   'dept-cap': $color-dept-cap,
   'dept-sec': $color-dept-sec,
   'dept-med': $color-dept-med,

tgui-next/packages/tgui/styles/variables.scss

@@ -103,14 +103,6 @@ $input-color-background: $white;
 $tooltip-color-border: $dark-gray;
 $tooltip-color-background: $gray;
 
-// "health" indicator colors
-$color-health-0: #17d568;
-$color-health-1: #2ecc71;
-$color-health-2: #e67e22;
-$color-health-3: #ed5100;
-$color-health-4: #e74c3c;
-$color-health-5: #ed2814;
-
 // Department Colors
 $color-dept-cap: #c06616;
 $color-dept-sec: #e74c3c;