cyberpresidentvanellope/Paradise
1
0
Fork 0
mirror of https://github.com/ParadiseSS13/Paradise.git synced 2026-08-23 03:57:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14357 from dearmochi/my-nanomaps-cant-be-this-cute

Browse Source 
[TGUI] Crew Monitor and NanoMaps refactor
This commit is contained in:
AffectedArc07
2020-09-18 19:57:30 +01:00
committed by GitHub
parent ac4c0352be b02c41ba63
commit bf6485ff86
19 changed files with 393 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
code/datums/cache/crew.dm
Vendored
+13 -1
View File
@@ -1,5 +1,8 @@
GLOBAL_DATUM_INIT(crew_repository, /datum/repository/crew, new())
/datum/repository/crew
var/static/list/bold_jobs
/datum/repository/crew/New()
cache_data = list()
..()
@@ -18,6 +21,13 @@ GLOBAL_DATUM_INIT(crew_repository, /datum/repository/crew, new())
if(world.time < cache_entry.timestamp)
return cache_entry.data
// Initialize the jobs here because in New(), GLOB.command_positions may not be inited yet
if(!bold_jobs)
bold_jobs = list()
bold_jobs += GLOB.command_positions
bold_jobs += get_all_centcom_jobs()
bold_jobs += list("Nanotrasen Representative", "Blueshield", "Magistrate")
for(var/thing in GLOB.human_list)
var/mob/living/carbon/human/H = thing
var/obj/item/clothing/under/C = H.w_uniform
@@ -32,11 +42,13 @@ GLOBAL_DATUM_INIT(crew_repository, /datum/repository/crew, new())
crewmemberData["name"] = H.get_authentification_name(if_no_id="Unknown")
crewmemberData["rank"] = H.get_authentification_rank(if_no_id="Unknown", if_no_job="No Job")
crewmemberData["assignment"] = H.get_assignment(if_no_id="Unknown", if_no_job="No Job")
crewmemberData["is_command"] = (crewmemberData["assignment"] in bold_jobs)
if(C.sensor_mode >= SUIT_SENSOR_BINARY)
crewmemberData["dead"] = H.stat > UNCONSCIOUS
crewmemberData["dead"] = H.stat == DEAD
if(C.sensor_mode >= SUIT_SENSOR_VITAL)
crewmemberData["stat"] = H.stat
crewmemberData["oxy"] = round(H.getOxyLoss(), 1)
crewmemberData["tox"] = round(H.getToxLoss(), 1)
crewmemberData["fire"] = round(H.getFireLoss(), 1)
code/game/machinery/computer/camera.dm
+4
View File
@@ -130,6 +130,10 @@
// adding a template with the key "mapHeader" replaces the map header content
ui.add_template("mapHeader", "sec_camera_map_header.tmpl")
// Send nanomaps
var/datum/asset/nanomaps = get_asset_datum(/datum/asset/simple/nanomaps)
nanomaps.send(user)
ui.open()
/obj/machinery/computer/security/ui_data(mob/user, ui_key = "main", datum/topic_state/state = GLOB.default_state)
code/modules/client/asset_cache.dm
+11 -1
View File
@@ -262,7 +262,6 @@ GLOBAL_LIST_EMPTY(asset_datums)
var/list/common_dirs = list(
"nano/assets/",
"nano/codemirror/",
"nano/images/",
"nano/layouts/"
)
var/list/uncommon_dirs = list(
@@ -376,3 +375,14 @@ GLOBAL_LIST_EMPTY(asset_datums)
"font-awesome.css" = 'html/font-awesome/css/all.min.css',
"v4shim.css" = 'html/font-awesome/css/v4-shims.min.css'
)
// Nanomaps
/datum/asset/simple/nanomaps
// It REALLY doesnt matter too much if these arent up to date
// They are relatively big
verify = FALSE
assets = list(
"Cyberiad_nanomap_z1.png" = 'icons/_nanomaps/Cyberiad_nanomap_z1.png',
"Delta_nanomap_z1.png" = 'icons/_nanomaps/Delta_nanomap_z1.png',
"MetaStation_nanomap_z1.png" = 'icons/_nanomaps/MetaStation_nanomap_z1.png',
)
code/modules/client/client procs.dm
+3
View File
@@ -974,6 +974,9 @@
var/datum/asset/tgui_assets = get_asset_datum(/datum/asset/simple/tgui)
tgui_assets.register()
var/datum/asset/nanomaps = get_asset_datum(/datum/asset/simple/nanomaps)
nanomaps.register()
// Clear the user's cache so they get resent.
// This is not fully clearing their BYOND cache, just their assets sent from the server this round
cache = list()
code/modules/nano/modules/atmos_control.dm
+5
View File
@@ -34,6 +34,11 @@
ui = new(user, src, ui_key, "atmos_control.tmpl", src.name, 900, 800, state = state)
ui.add_template("mapContent", "atmos_control_map_content.tmpl")
ui.add_template("mapHeader", "atmos_control_map_header.tmpl")
// Send nanomaps
var/datum/asset/nanomaps = get_asset_datum(/datum/asset/simple/nanomaps)
nanomaps.send(user)
ui.set_show_map(1)
ui.open()
ui.set_auto_update(1)
code/modules/tgui/modules/crew_monitor.dm
+6 -3
View File
@@ -23,9 +23,12 @@
/datum/tgui_module/crew_monitor/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/tgui_state/state = GLOB.tgui_default_state)
ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
if(!ui)
// The 557 may seem random, but its the perfectsize for margins on the nanomap
ui = new(user, src, ui_key, "CrewMonitor", name, 1400, 557, master_ui, state)
ui.autoupdate = TRUE
ui = new(user, src, ui_key, "CrewMonitor", name, 800, 600, master_ui, state)
// Send nanomaps
var/datum/asset/nanomaps = get_asset_datum(/datum/asset/simple/nanomaps)
nanomaps.send(user)
ui.open()
icons/_nanomaps/Cyberiad_nanomap_z1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 714 KiB

icons/_nanomaps/Delta_nanomap_z1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 929 KiB

icons/_nanomaps/MetaStation_nanomap_z1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 661 KiB

nano/images/Cyberiad_nanomap_z1.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 MiB

nano/images/Delta_nanomap_z1.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 MiB

nano/images/MetaStation_nanomap_z1.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 MiB

tgui/packages/tgui/components/NanoMap.js
+162 -28
View File
@@ -1,45 +1,179 @@
import { Component } from 'inferno';
import { Box, Icon, Tooltip } from '.';
import { useBackend } from "../backend";
import { LabeledList } from './LabeledList';
import { Slider } from './Slider';
export const NanoMap = (props, context) => {
const { config } = useBackend(context);
const { onClick } = props;
return (
<Box className="NanoMap__container">
<Box
as="img"
src={config.map+"_nanomap_z1.png"}
style={{
width: '512px',
height: '512px',
}}
onClick={onClick} />
</Box>
);
const pauseEvent = e => {
if (e.stopPropagation) { e.stopPropagation(); }
if (e.preventDefault) { e.preventDefault(); }
e.cancelBubble = true;
e.returnValue = false;
return false;
};
const NanoMapMarker = props => {
export class NanoMap extends Component {
constructor(props) {
super(props);
// Auto center based on window size
const Xcenter = (window.innerWidth / 2) - 256;
const Ycenter = (window.innerHeight / 2) - 256;
this.state = {
offsetX: 128,
offsetY: 48,
transform: 'none',
dragging: false,
originX: null,
originY: null,
zoom: 1,
};
// Dragging
this.handleDragStart = e => {
this.ref = e.target;
this.setState({
dragging: false,
originX: e.screenX,
originY: e.screenY,
});
document.addEventListener('mousemove', this.handleDragMove);
document.addEventListener('mouseup', this.handleDragEnd);
pauseEvent(e);
};
this.handleDragMove = e => {
this.setState(prevState => {
const state = { ...prevState };
const newOffsetX = e.screenX - state.originX;
const newOffsetY = e.screenY - state.originY;
if (prevState.dragging) {
state.offsetX += newOffsetX;
state.offsetY += newOffsetY;
state.originX = e.screenX;
state.originY = e.screenY;
} else {
state.dragging = true;
}
return state;
});
pauseEvent(e);
};
this.handleDragEnd = e => {
this.setState({
dragging: false,
originX: null,
originY: null,
});
document.removeEventListener('mousemove', this.handleDragMove);
document.removeEventListener('mouseup', this.handleDragEnd);
pauseEvent(e);
};
this.handleZoom = (_e, value) => {
this.setState(state => {
const newZoom = Math.min(Math.max(value, 1), 8);
let zoomDiff = (newZoom - state.zoom) * 1.5;
state.zoom = newZoom;
state.offsetX = state.offsetX - 262 * zoomDiff;
state.offsetY = state.offsetY - 256 * zoomDiff;
if (props.onZoom) {
props.onZoom(state.zoom);
}
return state;
});
};
}
render() {
const { config } = useBackend(this.context);
const { dragging, offsetX, offsetY, zoom = 1 } = this.state;
const { children } = this.props;
const mapUrl = config.map + "_nanomap_z1.png?" + Date.now();
const mapSize = (510 * zoom) + 'px';
const newStyle = {
width: mapSize,
height: mapSize,
"margin-top": offsetY + "px",
"margin-left": offsetX + "px",
"overflow": "hidden",
"position": "relative",
"background-image": "url(" + mapUrl + ")",
"background-size": "cover",
"background-repeat": "no-repeat",
"text-align": "center",
"cursor": dragging ? "move" : "auto",
};
return (
<Box className="NanoMap__container">
<Box
style={newStyle}
textAlign="center"
onMouseDown={this.handleDragStart}>
<Box>
{children}
</Box>
</Box>
<NanoMapZoomer zoom={zoom} onZoom={this.handleZoom} />
</Box>
);
}
}
const NanoMapMarker = (props, context) => {
const {
x,
y,
zoom = 1,
icon,
tooltip,
color,
} = props;
const rx = ((x * 2 * zoom) - zoom) - 3;
const ry = ((y * 2 * zoom) - zoom) - 3;
return (
<Box
position="absolute"
className="NanoMap__marker"
top={(((255 - y) * 2) + 2) + 'px'}
left={((x * 2) + 2) + 'px'}>
<Icon
name={icon}
color={color}
size={0.5}
/>
<Tooltip content={tooltip} />
</Box>
<div>
<Box
position="absolute"
className="NanoMap__marker"
lineHeight="0"
bottom={ry + "px"}
left={rx + "px"}>
<Icon
name={icon}
color={color}
fontSize="6px"
/>
<Tooltip content={tooltip} />
</Box>
</div>
);
};
NanoMap.Marker = NanoMapMarker;
const NanoMapZoomer = (props, context) => {
return (
<Box className="NanoMap__zoomer">
<LabeledList>
<LabeledList.Item label="Zoom">
<Slider
minValue="1"
maxValue="8"
stepPixelSize="10"
format={v => v + "x"}
value={props.zoom}
onDrag={(e, v) => props.onZoom(e, v)}
/>
</LabeledList.Item>
</LabeledList>
</Box>
);
};
NanoMap.Zoomer = NanoMapZoomer;
tgui/packages/tgui/interfaces/CrewMonitor.js
+165 -87
View File
@@ -1,100 +1,178 @@
import { sortBy } from 'common/collections';
import { useBackend } from "../backend";
import { Box, Button, NanoMap, Table } from "../components";
import { createSearch } from 'common/string';
import { useBackend, useLocalState } from "../backend";
import { Box, Button, Icon, Input, NanoMap, Table, Tabs } from "../components";
import { TableCell } from '../components/Table';
import { COLORS } from '../constants.js';
import { Window } from "../layouts";
const getStatText = cm => {
if (cm.dead) {
return "Deceased";
}
if (parseInt(cm.stat, 10) === 1) { // Unconscious
return "Unconscious";
}
return "Living";
};
const getStatColor = cm => {
if (cm.dead) {
return "red";
}
if (parseInt(cm.stat, 10) === 1) { // Unconscious
return "orange";
}
return "green";
};
export const CrewMonitor = (props, context) => {
const { act, data } = useBackend(context);
const crew = sortBy(
crewmember => crewmember.name,
)(data.crewmembers || []);
const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
const decideTab = index => {
switch (index) {
case 0:
return <CrewMonitorDataView />;
case 1:
return <CrewMonitorMapView />;
default:
return "WE SHOULDN'T BE HERE!";
}
};
return (
<Window resizable>
<Window.Content className="Layout__content--noMargin">
<Box m={1}>
{crew.filter(x => x.sensor_type === 3).map(crewmember => (
<NanoMap.Marker
key={crewmember.ref}
x={crewmember.x}
y={crewmember.y}
icon="circle"
tooltip={crewmember.name}
color={crewmember.dead ? 'red' : 'green'}
/>
))}
<NanoMap />
</Box>
<Box className="NanoMap__contentOffset">
<Box bold m={2}>
<Table>
<Table.Row header>
<Table.Cell>
Name
</Table.Cell>
<Table.Cell>
Status
</Table.Cell>
<Table.Cell>
Location
</Table.Cell>
</Table.Row>
{crew.map(crewmember => (
<Table.Row key={crewmember.name}>
<TableCell>
{crewmember.name} ({crewmember.assignment})
</TableCell>
<TableCell>
<Box inline
color={crewmember.dead ? 'red' : 'green'}>
{crewmember.dead ? 'Deceased' : 'Living'}
</Box>
{crewmember.sensor_type >= 2 ? (
<Box inline>
{'('}
<Box inline
color="red">
{crewmember.brute}
</Box>
{'|'}
<Box inline
color="orange">
{crewmember.fire}
</Box>
{'|'}
<Box inline
color="green">
{crewmember.tox}
</Box>
{'|'}
<Box inline
color="blue">
{crewmember.oxy}
</Box>
{')'}
</Box>
) : null}
</TableCell>
<TableCell>
{crewmember.sensor_type === 3 ? (
data.isAI ? (
<Button fluid
content={crewmember.area+" ("
+crewmember.x+", "+crewmember.y+")"}
onClick={() => act('track', {
track: crewmember.ref,
})} />
) : (
crewmember.area+" ("+crewmember.x+", "+crewmember.y+")"
)
) : "Not Available"}
</TableCell>
</Table.Row>
))}
</Table>
</Box>
<Window.Content>
<Box fillPositionedParent>
<Tabs>
<Tabs.Tab
key="DataView"
selected={0 === tabIndex}
onClick={() => setTabIndex(0)}>
<Icon name="table" /> Data View
</Tabs.Tab>
<Tabs.Tab
key="MapView"
selected={1 === tabIndex}
onClick={() => setTabIndex(1)}>
<Icon name="map-marked-alt" /> Map View
</Tabs.Tab>
</Tabs>
{decideTab(tabIndex)}
</Box>
</Window.Content>
</Window>
);
};
const CrewMonitorDataView = (_properties, context) => {
const { act, data } = useBackend(context);
const crew = sortBy(
cm => cm.name,
)(data.crewmembers || []);
const [
search,
setSearch,
] = useLocalState(context, 'search', '');
const searcher = createSearch(search, cm => {
return cm.name + "|" + cm.assignment + "|" + cm.area;
});
return (
<Box>
<Input
placeholder="Search by name, assignment or location.."
width="100%"
onInput={(_e, value) => setSearch(value)}
/>
<Table m="0.5rem">
<Table.Row header>
<Table.Cell>
Name
</Table.Cell>
<Table.Cell>
Status
</Table.Cell>
<Table.Cell>
Location
</Table.Cell>
</Table.Row>
{crew.filter(searcher).map(cm => (
<Table.Row key={cm.name} bold={!!cm.is_command}>
<TableCell>
{cm.name} ({cm.assignment})
</TableCell>
<TableCell>
<Box inline
color={getStatColor(cm)}>
{getStatText(cm)}
</Box>
{cm.sensor_type >= 2 ? (
<Box inline>
{'('}
<Box inline
color={COLORS.damageType.oxy}>
{cm.oxy}
</Box>
{'|'}
<Box inline
color={COLORS.damageType.toxin}>
{cm.tox}
</Box>
{'|'}
<Box inline
color={COLORS.damageType.burn}>
{cm.fire}
</Box>
{'|'}
<Box inline
color={COLORS.damageType.brute}>
{cm.brute}
</Box>
{')'}
</Box>
) : null}
</TableCell>
<TableCell>
{cm.sensor_type === 3 ? (
data.isAI ? (
<Button fluid
icon="location-arrow"
content={
cm.area + " (" + cm.x + ", " + cm.y + ")"
}
onClick={() => act('track', {
track: cm.ref,
})} />
) : (
cm.area + " (" + cm.x + ", " + cm.y + ")"
)
) : "Not Available"}
</TableCell>
</Table.Row>
))}
</Table>
</Box>
);
};
const CrewMonitorMapView = (_properties, context) => {
const { data } = useBackend(context);
const [zoom, setZoom] = useLocalState(context, 'zoom', 1);
return (
<Box height="526px" mb="0.5rem" overflow="hidden">
<NanoMap onZoom={v => setZoom(v)}>
{data.crewmembers.filter(x => x.sensor_type === 3).map(cm => (
<NanoMap.Marker
key={cm.ref}
x={cm.x}
y={cm.y}
zoom={zoom}
icon="circle"
tooltip={cm.name + " (" + cm.assignment + ")"}
color={getStatColor(cm)}
/>
))}
</NanoMap>
</Box>
);
};
tgui/packages/tgui/public/tgui.bundle.css
+1 -1
View File
File diff suppressed because one or more lines are too long
tgui/packages/tgui/public/tgui.bundle.js
+3 -3
View File
File diff suppressed because one or more lines are too long
tgui/packages/tgui/styles/components/NanoMap.scss
+14 -11
View File
@@ -1,20 +1,23 @@
$color-background: rgba(0, 0, 0, 0.33) !default;
.NanoMap__contentOffset {
position: absolute;
top: 0;
bottom: 0;
left: 524px;
right: 0;
background-color: $color-background;
overflow-y: scroll;
}
.NanoMap__container {
position: absolute;
overflow: hiddden;
width: 100%;
z-index: 1;
}
.NanoMap__marker {
z-index: 10;
padding: 0px;
margin: 0px;
}
.NanoMap__zoomer {
z-index: 20;
background-color: $color-background;
position: absolute;
top: 30px;
left: 0;
padding: 0.5rem;
width: 20%;
}
tools/github-actions/nanomap-renderer
BIN
View File
Binary file not shown.
tools/github-actions/nanomap-renderer-invoker.sh
+6 -6
View File
@@ -1,14 +1,14 @@
#!/bin/bash
# Generate maps
tools/github-actions/nanomap-renderer minimap "./_maps/map_files/cyberiad/cyberiad.dmm"
tools/github-actions/nanomap-renderer minimap "./_maps/map_files/Delta/delta.dmm"
tools/github-actions/nanomap-renderer minimap "./_maps/map_files/MetaStation/MetaStation.v41A.II.dmm"
tools/github-actions/nanomap-renderer minimap -w 2040 -h 2040 "./_maps/map_files/cyberiad/cyberiad.dmm"
tools/github-actions/nanomap-renderer minimap -w 2040 -h 2040 "./_maps/map_files/Delta/delta.dmm"
tools/github-actions/nanomap-renderer minimap -w 2040 -h 2040 "./_maps/map_files/MetaStation/MetaStation.v41A.II.dmm"
# Move and rename files so the game understands them
cd "data/nanomaps"
mv "cyberiad_nanomap_z1.png" "Cyberiad_nanomap_z1.png"
mv "delta_nanomap_z1.png" "Delta_nanomap_z1.png"
mv "MetaStation.v41A.II_nanomap_z1.png" "MetaStation_nanomap_z1.png"
cd "../../"
cp "data/nanomaps/Cyberiad_nanomap_z1.png" "nano/images"
cp "data/nanomaps/Delta_nanomap_z1.png" "nano/images"
cp "data/nanomaps/MetaStation_nanomap_z1.png" "nano/images"
cp "data/nanomaps/Cyberiad_nanomap_z1.png" "icons/_nanomaps"
cp "data/nanomaps/Delta_nanomap_z1.png" "icons/_nanomaps"
cp "data/nanomaps/MetaStation_nanomap_z1.png" "icons/_nanomaps"