Helm Control tgui - visual bearing and direction (#16892)

* a

* b

* c

* d

* e

* f

* g

* h

* data.locations

* fixed

* gui

* red roll buttons

* roll and turn switch positions

* stuff

* c

* a

* tgui lints

---------

Co-authored-by: DreamySkrell <>
This commit is contained in:
DreamySkrell
2023-07-30 18:31:02 +00:00
committed by GitHub
co-authored by DreamySkrell <>
parent 827db0bece
commit 516f920f1e
5 changed files with 244 additions and 15 deletions
+8 -4
View File
@@ -120,14 +120,15 @@
data["sector"] = current_sector ? current_sector.name : "Deep Space"
data["sector_info"] = current_sector ? current_sector.desc : "Not Available"
data["landed"] = connected.get_landed_info()
data["s_x"] = connected.x
data["s_y"] = connected.y
data["ship_coord_x"] = connected.x
data["ship_coord_y"] = connected.y
data["dest"] = dy && dx
data["d_x"] = dx
data["d_y"] = dy
data["autopilot_x"] = dx
data["autopilot_y"] = dy
data["speedlimit"] = speedlimit ? speedlimit*1000 : "Halted"
data["accel"] = get_acceleration()
data["heading"] = connected.get_heading() ? dir2angle(connected.get_heading()) : 0
data["direction"] = dir2angle(connected.dir)
data["autopilot"] = autopilot
data["manual_control"] = viewing_overmap(user)
data["canburn"] = connected.can_burn()
@@ -142,6 +143,9 @@
data["speed_slow"] = TRUE
if(connected.get_speed() > SHIP_SPEED_FAST)
data["speed_fast"] = TRUE
var/list/speed_xy = connected.get_speed_xy()
data["ship_speed_x"] = speed_xy[1]
data["ship_speed_y"] = speed_xy[2]
data["ETAnext"] = get_eta()
+4
View File
@@ -125,6 +125,10 @@ var/const/OVERMAP_SPEED_CONSTANT = (1 SECOND)
/obj/effect/overmap/visitable/ship/proc/get_speed()
return round(sqrt(speed[1] ** 2 + speed[2] ** 2), SHIP_MOVE_RESOLUTION)
// returns a two-item list with the speed of the ship on x and y axes
/obj/effect/overmap/visitable/ship/proc/get_speed_xy()
return list(round(speed[1], SHIP_MOVE_RESOLUTION), round(speed[2], SHIP_MOVE_RESOLUTION))
/obj/effect/overmap/visitable/ship/proc/get_heading()
var/res = 0
if(MOVING(speed[1]))
@@ -0,0 +1,41 @@
################################
# Example Changelog File
#
# Note: This file, and files beginning with ".", and files that don't end in ".yml" will not be read. If you change this file, you will look really dumb.
#
# Your changelog will be merged with a master changelog. (New stuff added only, and only on the date entry for the day it was merged.)
# When it is, any changes listed below will disappear.
#
# Valid Prefixes:
# bugfix
# wip (For works in progress)
# tweak
# soundadd
# sounddel
# rscadd (general adding of nice things)
# rscdel (general deleting of nice things)
# imageadd
# imagedel
# maptweak
# spellcheck (typo fixes)
# experiment
# balance
# admin
# backend
# security
# refactor
#################################
# Your name.
author: DreamySkrell
# Optional: Remove this file after generating master changelog. Useful for PR changelogs that won't get used again.
delete-after: True
# Any changes you've made. See valid prefix list above.
# INDENT WITH TWO SPACES. NOT TABS. SPACES.
# SCREW THIS UP AND IT WON'T WORK.
# Also, all entries are changed into a single [] after a master changelog generation. Just remove the brackets when you add new entries.
# Please surround your changes in double quotes ("), as certain characters otherwise screws up compiling. The quotes will not show up in the changelog.
changes:
- refactor: "Rewrites helm control from nanoui to tgui."
@@ -0,0 +1,41 @@
################################
# Example Changelog File
#
# Note: This file, and files beginning with ".", and files that don't end in ".yml" will not be read. If you change this file, you will look really dumb.
#
# Your changelog will be merged with a master changelog. (New stuff added only, and only on the date entry for the day it was merged.)
# When it is, any changes listed below will disappear.
#
# Valid Prefixes:
# bugfix
# wip (For works in progress)
# tweak
# soundadd
# sounddel
# rscadd (general adding of nice things)
# rscdel (general deleting of nice things)
# imageadd
# imagedel
# maptweak
# spellcheck (typo fixes)
# experiment
# balance
# admin
# backend
# security
# refactor
#################################
# Your name.
author: DreamySkrell
# Optional: Remove this file after generating master changelog. Useful for PR changelogs that won't get used again.
delete-after: True
# Any changes you've made. See valid prefix list above.
# INDENT WITH TWO SPACES. NOT TABS. SPACES.
# SCREW THIS UP AND IT WON'T WORK.
# Also, all entries are changed into a single [] after a master changelog generation. Just remove the brackets when you add new entries.
# Please surround your changes in double quotes ("), as certain characters otherwise screws up compiling. The quotes will not show up in the changelog.
changes:
- rscadd: "Adds a visual indication of vessel bearing and direction to helm control gui."
+150 -11
View File
@@ -1,20 +1,21 @@
import { BooleanLike } from '../../common/react';
import { useBackend } from '../backend';
import { Button, Section, Table } from '../components';
import { Box, Button, Section, Table } from '../components';
import { NtosWindow } from '../layouts';
export type HelmData = {
sector: string;
sector_info: string;
landed: string;
s_x: number;
s_y: number;
ship_coord_x: number;
ship_coord_y: number;
dest: BooleanLike;
d_x: number;
d_y: number;
autopilot_x: number;
autopilot_y: number;
speedlimit: string;
accel: number;
heading: number;
direction: number;
autopilot: BooleanLike;
manual_control: BooleanLike;
canburn: BooleanLike;
@@ -22,6 +23,8 @@ export type HelmData = {
cancombatturn: BooleanLike;
accellimit: number;
speed: number;
ship_speed_x: number;
ship_speed_y: number;
ETAnext: number;
locations: Location[];
};
@@ -33,6 +36,15 @@ type Location = {
reference: string;
};
const bearing_unbounded = function (x, y) {
let res = 0;
res = Math.atan2(x, y); // radians
res = (res * 180) / 3.14; // convert to degrees
res = (res + 360.0) % 360.0;
res = Math.round(res);
return res;
};
const FlightSection = function (act, data) {
return (
<Section title="Flight Data">
@@ -51,7 +63,13 @@ const FlightSection = function (act, data) {
</Table.Row>
<Table.Row>
<Table.Cell>Heading:</Table.Cell>
<Table.Cell>{data.heading}°</Table.Cell>
<Table.Cell>
{bearing_unbounded(data.ship_speed_x, data.ship_speed_y)}°
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Direction:</Table.Cell>
<Table.Cell>{data.direction}°</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Acceleration limiter:</Table.Cell>
@@ -67,6 +85,124 @@ const FlightSection = function (act, data) {
);
};
const BearingsSection = function (act, data) {
return (
<Section title="Heading and Direction">
<Box textAlign="center">
<svg height={100} width={100} viewBox="0 0 100 100">
<rect width="100" height="100" />
{data.speed ? (
<polygon
points="50,25 70,70 30,70"
fill="#3e6189"
transform={
'rotate(' +
bearing_unbounded(data.ship_speed_x, data.ship_speed_y) +
' 50 50)'
}
/>
) : (
''
)}
<polygon
points="50,35 60,60 40,60"
fill="#5c83b0"
stroke="white"
stroke-width="1"
transform={'rotate(' + data.direction + ' 50 50)'}
/>
<text
x="50"
y="10"
text-anchor="middle"
fill="white"
transform={'rotate(0 50 50)'}>
0
</text>
<text
x="50"
y="5"
text-anchor="middle"
fill="white"
transform={'rotate(45 50 50)'}>
45
</text>
<text
x="50"
y="10"
text-anchor="middle"
fill="white"
transform={'rotate(90 50 50)'}>
90
</text>
<text
x="50"
y="5"
text-anchor="middle"
fill="white"
transform={'rotate(135 50 50)'}>
135
</text>
<text
x="50"
y="10"
text-anchor="middle"
fill="white"
transform={'rotate(180 50 50)'}>
180
</text>
<text
x="50"
y="5"
text-anchor="middle"
fill="white"
transform={'rotate(225 50 50)'}>
225
</text>
<text
x="50"
y="10"
text-anchor="middle"
fill="white"
transform={'rotate(270 50 50)'}>
270
</text>
<text
x="50"
y="5"
text-anchor="middle"
fill="white"
transform={'rotate(315 50 50)'}>
315
</text>
</svg>
<svg height={20} width={20} />
<svg height={100} width={100} viewBox="0 0 100 100">
<rect width="100" height="100" />
<text x="50" y="10" text-anchor="middle" fill="white">
N
</text>
<text x="50" y="25" text-anchor="middle" fill="white">
{data.ship_speed_y}
</text>
<text x="95" y="43" text-anchor="end" fill="white">
{data.ship_speed_x} E
</text>
<text x="50" y="95" text-anchor="middle" fill="white">
S
</text>
<text x="50" y="80" text-anchor="middle" fill="white">
{-data.ship_speed_y}
</text>
<text x="5" y="57" text-anchor="start" fill="white">
W {-data.ship_speed_x}
</text>
</svg>
</Box>
</Section>
);
};
const ManualSection = function (act, data) {
return (
<Section title="Manual control">
@@ -110,7 +246,7 @@ const ManualSection = function (act, data) {
<Table.Cell title="Slow / Stop / Inertia Dampener">
<Button
icon="stop"
disabled={!data.canburn}
disabled={!data.canburn || data.speed === 0}
onClick={() => act('brake', { move: 1 })}
/>
</Table.Cell>
@@ -150,12 +286,12 @@ const AutopilotSection = function (act, data) {
<>
<Button
width="25%"
content={data.d_x}
content={data.autopilot_x}
onClick={() => act('setx', { setx: true })}
/>
<Button
width="25%"
content={data.d_y}
content={data.autopilot_y}
onClick={() => act('sety', { sety: true })}
/>
</>
@@ -205,7 +341,7 @@ const NavSection = function (act, data) {
<Table.Row>
<Table.Cell>Coordinates:</Table.Cell>
<Table.Cell>
{data.s_x} : {data.s_y}
{data.ship_coord_x} : {data.ship_coord_y}
</Table.Cell>
</Table.Row>
<Table.Row>
@@ -284,8 +420,11 @@ export const Helm = (props, context) => {
return (
<NtosWindow resizable>
<NtosWindow.Content scrollable>
{FlightSection(act, data)}
<Table>
<Table.Row>
<Table.Cell width="50%">{FlightSection(act, data)}</Table.Cell>
<Table.Cell width="50%">{BearingsSection(act, data)}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell width="50%">{ManualSection(act, data)}</Table.Cell>
<Table.Cell width="50%">{AutopilotSection(act, data)}</Table.Cell>