cyberpresidentvanellope/CHOMPStation2
1
0
Fork 0
mirror of https://github.com/CHOMPStation2/CHOMPStation2.git synced 2026-01-03 05:52:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

[MIRROR] centers any kind of nanomap (#11010)

Browse Source 
Co-authored-by: Kashargul <144968721+Kashargul@users.noreply.github.com>
Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>
This commit is contained in:
CHOMPStation2StaffMirrorBot
2025-06-05 05:46:58 -07:00
committed by GitHub
parent 8e5962ec90
commit 366b18d44b
10 changed files with 55 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
code/controllers/subsystems/lobby_monitor.dm
View File

@@ -21,7 +21,7 @@ SUBSYSTEM_DEF(lobby_monitor)
continue continue
log_tgui(player, "Reinitialized [player.client.ckey]'s lobby window: [ui ? "ui" : "no ui"], status: [player.lobby_window?.status].", "lobby_monitor/Fire") log_tgui(player, "Reinitialized [player.client.ckey]'s lobby window: [ui ? "ui" : "no ui"], status: [player.lobby_window?.status].", "lobby_monitor/Fire")
INVOKE_ASYNC(player, TYPE_PROC_REF(/mob/new_player, initialize_lobby_screen)) addtimer(CALLBACK(src, PROC_REF(do_reinit), player), 0.5 SECONDS)
var/initialize_queue = list() var/initialize_queue = list()
for(var/mob/new_player/player as anything in new_players) for(var/mob/new_player/player as anything in new_players)
@@ -39,6 +39,12 @@ SUBSYSTEM_DEF(lobby_monitor)
to_reinitialize = initialize_queue to_reinitialize = initialize_queue
/datum/controller/subsystem/lobby_monitor/proc/do_reinit(var/mob/new_player/player)
var/datum/tgui/ui = SStgui.get_open_ui(player, player)
if(ui && player.lobby_window && player.lobby_window.status > TGUI_WINDOW_CLOSED)
return
player.initialize_lobby_screen()
/datum/controller/subsystem/lobby_monitor/Shutdown() /datum/controller/subsystem/lobby_monitor/Shutdown()
var/datum/asset/our_asset = get_asset_datum(/datum/asset/simple/restart_animation) var/datum/asset/our_asset = get_asset_datum(/datum/asset/simple/restart_animation)
var/to_send = "<!DOCTYPE html><html lang='en'><head><meta http-equiv='X-UA-Compatible' content='IE=edge' /></head><body style='overflow: hidden;padding: 0 !important;margin: 0 !important'><div style='background-image: url([our_asset.get_url_mappings()["loading"]]);background-position:center;background-size:cover;position:absolute;width:100%;height:100%'></body></html>" var/to_send = "<!DOCTYPE html><html lang='en'><head><meta http-equiv='X-UA-Compatible' content='IE=edge' /></head><body style='overflow: hidden;padding: 0 !important;margin: 0 !important'><div style='background-image: url([our_asset.get_url_mappings()["loading"]]);background-position:center;background-size:cover;position:absolute;width:100%;height:100%'></body></html>"

1
code/modules/tgui/modules/atmos_control.dm
View File

@@ -67,7 +67,6 @@
"y" = alarm.y, "y" = alarm.y,
"z" = alarm.z) "z" = alarm.z)
.["alarms"] = alarms .["alarms"] = alarms
.["zoomScale"] = world.maxx + world.maxy
/datum/tgui_module/atmos_control/tgui_data(mob/user) /datum/tgui_module/atmos_control/tgui_data(mob/user)
var/list/data = list() var/list/data = list()

4
code/modules/tgui/modules/crew_monitor.dm
View File

@@ -47,10 +47,6 @@
ui.autoupdate = TRUE ui.autoupdate = TRUE
ui.open() ui.open()
/datum/tgui_module/crew_monitor/tgui_static_data(mob/user)
. = ..()
.["zoomScale"] = world.maxx + world.maxy
/datum/tgui_module/crew_monitor/tgui_data(mob/user) /datum/tgui_module/crew_monitor/tgui_data(mob/user)
var/data[0] var/data[0]

4
code/modules/tgui/tgui.dm
View File

@@ -281,6 +281,10 @@
//"refreshing" = refreshing, //"refreshing" = refreshing,
"refreshing" = FALSE, "refreshing" = FALSE,
"mapZLevel" = map_z_level, "mapZLevel" = map_z_level,
"mapInfo" = list(
"maxx" = world.maxx,
"maxy" = world.maxy,
),
"window" = list( "window" = list(
"key" = window_key, "key" = window_key,
"size" = window_size, "size" = window_size,

4
tgui/packages/tgui/backend.ts
View File

@@ -269,6 +269,10 @@ type BackendState<TData> = {
refreshing: boolean; refreshing: boolean;
map: string; // Vorestation Add map: string; // Vorestation Add
mapZLevel: number; // Vorestation Add mapZLevel: number; // Vorestation Add
mapInfo: {
maxx: number; // Vorestation Add
maxy: number; // Vorestation Add
}; // Vorestation Add
window: { window: {
key: string; key: string;
size: [number, number]; size: [number, number];

58
tgui/packages/tgui/components/NanoMap.tsx
View File

@@ -13,8 +13,6 @@ import {
import type { KeyEvent } from 'tgui-core/events'; import type { KeyEvent } from 'tgui-core/events';
import { KEY } from 'tgui-core/keys'; import { KEY } from 'tgui-core/keys';
import { logger } from '../logging';
const pauseEvent = (e) => { const pauseEvent = (e) => {
if (e.stopPropagation) { if (e.stopPropagation) {
e.stopPropagation(); e.stopPropagation();
@@ -28,7 +26,6 @@ const pauseEvent = (e) => {
}; };
type Props = PropsWithChildren<{ type Props = PropsWithChildren<{
zoomScale: number;
onZoom?: (zoom: number) => void; onZoom?: (zoom: number) => void;
}>; }>;
@@ -61,16 +58,25 @@ export class NanoMap extends Component<Props, State> {
document.removeEventListener('wheel', this.handleWheel); document.removeEventListener('wheel', this.handleWheel);
} }
setZoom(zoom: number) { getWxH = (zoom: number) => {
const { config } = useBackend();
return [config.mapInfo.maxx * 2 * zoom, config.mapInfo.maxy * 2 * zoom];
};
setZoom(zoom: number, mouseX: number, mouseY: number) {
const newZoom = Math.min(Math.max(zoom, 1), 8); const newZoom = Math.min(Math.max(zoom, 1), 8);
this.setState((state) => { this.setState((state) => {
const zoomDifference = -(state.zoom - newZoom); const oldWxH = this.getWxH(state.zoom);
const newWxH = this.getWxH(newZoom);
const newOffsetX = const scaleX = newWxH[0] / oldWxH[0];
state.offsetX - (this.props.zoomScale / 2) * zoomDifference; const scaleY = newWxH[1] / oldWxH[1];
const newOffsetY = const viewMouseX = mouseX - state.offsetX;
state.offsetY - (this.props.zoomScale / 2) * zoomDifference; const viewMouseY = mouseY - state.offsetY;
const newOffsetX = mouseX - viewMouseX * scaleX;
const newOffsetY = mouseY - viewMouseY * scaleY;
return { return {
...state, ...state,
@@ -145,30 +151,34 @@ export class NanoMap extends Component<Props, State> {
this.handleWheel = (e: WheelEvent) => { this.handleWheel = (e: WheelEvent) => {
if (e.deltaY > 0) { if (e.deltaY > 0) {
this.setZoom(this.state.zoom + 1); this.setZoom(this.state.zoom - 1, e.clientX, e.clientY);
} else if (e.deltaY < 0) { } else if (e.deltaY < 0) {
this.setZoom(this.state.zoom - 1); this.setZoom(this.state.zoom + 1, e.clientX, e.clientY);
} }
}; };
this.handleZoom = (_e: Event, value: number) => { this.handleZoom = (_e: Event, value: number) => {
this.setZoom(value); this.setZoom(value, window.innerWidth / 2, window.innerHeight / 2);
}; };
this.handleKey = (e: KeyEvent) => { this.handleKey = (e: KeyEvent) => {
switch (e.event.key) { switch (e.event.key) {
case KEY.Up: case KEY.Up:
case KEY.W: { case KEY.W: {
this.setZoom(this.state.zoom + 1); this.setZoom(
this.state.zoom + 1,
window.innerWidth / 2,
window.innerHeight / 2,
);
break; break;
} }
case KEY.Down: case KEY.Down:
case KEY.S: { case KEY.S: {
this.setZoom(this.state.zoom - 1); this.setZoom(
break; this.state.zoom - 1,
} window.innerWidth / 2,
case KEY.E: { window.innerHeight / 2,
logger.log(this.state.offsetX, this.state.offsetY); );
break; break;
} }
} }
@@ -180,12 +190,12 @@ export class NanoMap extends Component<Props, State> {
const { dragging, offsetX, offsetY, zoom = 1 } = this.state; const { dragging, offsetX, offsetY, zoom = 1 } = this.state;
const { children } = this.props; const { children } = this.props;
const WxH = this.getWxH(zoom);
const mapUrl = resolveAsset('minimap_' + config.mapZLevel + '.png'); const mapUrl = resolveAsset('minimap_' + config.mapZLevel + '.png');
// (x * zoom), x Needs to be double the turf- map size. (for virgo, 140x140)
const mapSize = this.props.zoomScale * zoom + 'px';
const newStyle: {} = { const newStyle: {} = {
width: mapSize, width: WxH[0] + 'px',
height: mapSize, height: WxH[1] + 'px',
'margin-top': offsetY + 'px', 'margin-top': offsetY + 'px',
'margin-left': offsetX + 'px', 'margin-left': offsetX + 'px',
overflow: 'hidden', overflow: 'hidden',
@@ -234,8 +244,8 @@ const NanoMapMarker = (props: NanoMapMarkerProps) => {
} }
}; };
const rx = x * 2 * zoom - zoom - 3; const rx = x * 2 * zoom - zoom;
const ry = y * 2 * zoom - zoom - 3; const ry = y * 2 * zoom - zoom;
return ( return (
<Tooltip content={tooltip}> <Tooltip content={tooltip}>
<Box <Box

3
tgui/packages/tgui/interfaces/AtmosControl.tsx
View File

@@ -15,7 +15,6 @@ type alarm = {
type Data = { type Data = {
alarms: alarm[]; alarms: alarm[];
zoomScale: number;
}; };
export const AtmosControl = (props) => { export const AtmosControl = (props) => {
@@ -59,7 +58,7 @@ export const AtmosControlContent = (props) => {
// and change the @for scss to match. // and change the @for scss to match.
tab[1] = ( tab[1] = (
<Box height="526px" mb="0.5rem" overflow="hidden"> <Box height="526px" mb="0.5rem" overflow="hidden">
<NanoMap zoomScale={data.zoomScale} onZoom={(v) => setZoom(v)}> <NanoMap onZoom={(v) => setZoom(v)}>
{alarms {alarms
.filter((x) => ~~x.z === ~~config.mapZLevel) .filter((x) => ~~x.z === ~~config.mapZLevel)
.map((cm) => ( .map((cm) => (

4
tgui/packages/tgui/interfaces/CrewMonitor/CrewMonitorMapView.tsx
View File

@@ -11,11 +11,11 @@ export const CrewMonitorMapView = (props: {
}) => { }) => {
const { config, data } = useBackend<Data>(); const { config, data } = useBackend<Data>();
const { zoomScale, crewmembers } = data; const { crewmembers } = data;
return ( return (
<Box height="526px" mb="0.5rem" overflow="hidden"> <Box height="526px" mb="0.5rem" overflow="hidden">
<NanoMap zoomScale={zoomScale} onZoom={(v: number) => props.onZoom(v)}> <NanoMap onZoom={(v: number) => props.onZoom(v)}>
{crewmembers {crewmembers
.filter( .filter(
(x) => x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel, (x) => x.sensor_type === 3 && ~~x.realZ === ~~config.mapZLevel,

1
tgui/packages/tgui/interfaces/CrewMonitor/types.ts
View File

@@ -1,7 +1,6 @@
import type { BooleanLike } from 'tgui-core/react'; import type { BooleanLike } from 'tgui-core/react';
export type Data = { export type Data = {
zoomScale: number;
isAI: BooleanLike; isAI: BooleanLike;
map_levels: number[]; map_levels: number[];
crewmembers: crewmember[]; crewmembers: crewmember[];

3
tgui/packages/tgui/styles/components/NanoMap.scss
View File

@@ -8,6 +8,9 @@
z-index: 10; z-index: 10;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
// this is like this because byond's coordinates are from bottom left so we want to place the
// dot at the bottom left corner of it's x/y
transform: translate(-50%, 50%);
} }
.NanoMap__zoomer { .NanoMap__zoomer {