Skip to content

Commit

Permalink
Fix: Atmos nanomap markers (#749)
Browse files Browse the repository at this point in the history 
<!-- Пишите **НИЖЕ** заголовков и **ВЫШЕ** комментариев, иначе что то
может пойти не так. -->
<!-- Вы можете прочитать Contributing.MD, если хотите узнать больше. -->

## Что этот PR делает
Возвращает маркеры на наномапу атмосов.
Чистит говно которое я притащил, когда портировал наномапу на камеры -
#213
Теперь файлы гораздо меньше модифицированны.

<!-- Вкратце опишите изменения, которые вносите. -->
<!-- Опишите **все** изменения, так как противное может сказаться на
рассмотрении этого PR'а! -->
<!-- Если вы исправляете Issue, добавьте "Fixes #1234" (где 1234 - номер
Issue) где-нибудь в описании PR'а. Это автоматически закроет Issue после
принятия PR'а. -->

## Почему это хорошо для игры
Странный вопрос
Fix: #653 

![image](https://github.com/ss220club/Paradise-SS220/assets/69762909/b6116da7-64d4-4ede-8cb6-a7308c70e2da)

<!-- Опишите, почему, по вашему, следует добавить эти изменения в игру.
-->

## Изображения изменений
Слегка подредактировал интерфейс камер, он был кривой, сейчас менее
кривой но всё ещё кривой

![image](https://github.com/ss220club/Paradise-SS220/assets/69762909/0875ede2-8898-4fc7-82ad-8b0b0b86fb35)


![image](https://github.com/ss220club/Paradise-SS220/assets/69762909/1c85c798-f305-4a4b-a06c-5d2c6aa85b0b)


<!-- Если вы не меняли карту или спрайты, можете опустить эту секцию.
Если хотите, можете вставить видео. -->

## Тестирование
<!-- Как вы тестировали свой PR, если делали это вовсе? -->

## Changelog

:cl:
fix: Карта в центральном компе атмосов, вернула маркеры, ура.
/:cl:

<!-- Оба :cl:'а должны быть на месте, что-бы чейнджлог работал! Вы
можете написать свой ник справа от первого :cl:, если хотите. Иначе
будет использован ваш ник на ГитХабе. -->
<!-- Вы можете использовать несколько записей с одинаковым префиксом
(Они используются только для иконки в игре) и удалить ненужные. Помните,
что чейнджлог должен быть понятен обычным игроком. -->
<!-- Если чейнджлог не влияет на игроков(например, это рефактор), вы
можете исключить всю секцию. -->
  • Loading branch information
@AyIong
AyIong authored Nov 25, 2023
1 parent f77bb73 commit 35d8770
Show file tree
Hide file tree
Showing 7 changed files with 73 additions and 70 deletions.
3 changes: 1 addition & 2 deletions tgui/packages/tgui/components/ByondUi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,7 @@ window.addEventListener('beforeunload', () => {
/**
* Get the bounding box of the DOM element.
*/
export const getBoundingBox = (element) => {
// SS220 EDIT - ORIGINAL: const getBoundingBox = element => {
const getBoundingBox = (element) => {
const rect = element.getBoundingClientRect();
return {
pos: [rect.left, rect.top],
Expand Down
78 changes: 32 additions & 46 deletions tgui/packages/tgui/components/NanoMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Box, Icon, Tooltip, Button } from '.';
import { useBackend } from '../backend';
import { LabeledList } from './LabeledList';
import { Slider } from './Slider';
import { getBoundingBox } from './ByondUi';

const pauseEvent = (e) => {
if (e.stopPropagation) {
Expand All @@ -22,12 +21,12 @@ export class NanoMap extends Component {
super(props);

// Auto center based on window size
const Xcenter = 0;
const Xcenter = window.innerWidth / 2 - 256;
const Ycenter = window.innerHeight / 2 - 256;

this.state = {
offsetX: Xcenter,
offsetY: Ycenter,
offsetX: 128,
offsetY: 48,
transform: 'none',
dragging: false,
originX: null,
Expand Down Expand Up @@ -80,22 +79,10 @@ export class NanoMap extends Component {
this.handleZoom = (_e, value) => {
this.setState((state) => {
const newZoom = Math.min(Math.max(value, 1), 8);
const zoomDiff = newZoom / state.zoom;
if (zoomDiff === 1) {
return;
}

let zoomDiff = (newZoom - state.zoom) * 1.5;
state.zoom = newZoom;

const container = document.getElementsByClassName('NanoMap__container');
if (container.length) {
const bounds = getBoundingBox(container[0]);
const currentCenterX = bounds.size[0] / 2 - state.offsetX;
const currentCenterY = bounds.size[1] / 2 - state.offsetY;
state.offsetX += currentCenterX - currentCenterX * zoomDiff;
state.offsetY += currentCenterY - currentCenterY * zoomDiff;
}

state.offsetX = state.offsetX - 262 * zoomDiff;
state.offsetY = state.offsetY - 256 * zoomDiff;
if (props.onZoom) {
props.onZoom(state.zoom);
}
Expand Down Expand Up @@ -145,8 +132,8 @@ export class NanoMap extends Component {
}
}

const NanoMapMarker = (props) => {
const { x, y, zoom = 1, icon, tooltip, color, onClick, size = 6 } = props;
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 (
Expand All @@ -157,15 +144,37 @@ const NanoMapMarker = (props) => {
lineHeight="0"
bottom={ry + 'px'}
left={rx + 'px'}
onClick={onClick}
>
<Icon name={icon} color={color} fontSize={size + '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;

let ActiveButton;
class NanoButton extends Component {
constructor(props) {
Expand All @@ -192,7 +201,6 @@ class NanoButton extends Component {
render() {
let rx = this.props.x * 2 * this.props.zoom - this.props.zoom - 3;
let ry = this.props.y * 2 * this.props.zoom - this.props.zoom - 3;

return (
<Button
key={this.props.key}
Expand All @@ -211,25 +219,3 @@ class NanoButton extends Component {
}
}
NanoMap.NanoButton = NanoButton;
NanoMap.Marker = NanoMapMarker;

const NanoMapZoomer = (props) => {
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;
2 changes: 1 addition & 1 deletion tgui/packages/tgui/interfaces/AtmosControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const AtmosControlMapView = (_properties, context) => {
<Box height="526px" mb="0.5rem" overflow="hidden">
<NanoMap onZoom={(v) => setZoom(v)}>
{alarms
.filter((a) => a.z === 2)
.filter((a) => a.z === 3) // SS220 EDIT - ORIGIN: 2
.map((aa) => (
// The AA means air alarm, and nothing else
<NanoMap.Marker
Expand Down
8 changes: 4 additions & 4 deletions tgui/packages/tgui/interfaces/CameraConsole220.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,14 @@ export const CameraConsole220 = (props, context) => {
<Tabs>
<Tabs.Tab
key="Map"
selected={0 === tabIndex}
selected={tabIndex === 0}
onClick={() => setTabIndex(0)}
>
<Icon name="map-marked-alt" /> Карта
</Tabs.Tab>
<Tabs.Tab
key="List"
selected={1 === tabIndex}
selected={tabIndex === 1}
onClick={() => setTabIndex(1)}
>
<Icon name="table" /> Список
Expand Down Expand Up @@ -119,9 +119,9 @@ export const CameraConsoleMapContent = (props, context) => {
))}
</NanoMap>
</Box>
<Box height="100%" resizable className="CameraConsole__new__right">
<Box height="96%" resizable className="CameraConsole__right_map">
<div className="CameraConsole__header">
<div className="CameraConsole__title">
<div className="CameraConsole__toolbar">
<b>Камера: </b>
{(activeCamera && activeCamera.name) || '—'}
</div>
Expand Down
2 changes: 1 addition & 1 deletion tgui/packages/tgui/public/tgui.bundle.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions tgui/packages/tgui/public/tgui.bundle.js
View file

Large diffs are not rendered by default.

46 changes: 32 additions & 14 deletions tgui/packages/tgui/styles/interfaces/CameraConsole.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ $color-background: rgba(0, 0, 0, 0.33) !default;

.CameraConsole__left {
position: absolute;
top: 23px;
top: 25px;
bottom: 0;
left: 0;
width: 220px;
Expand All @@ -17,29 +17,47 @@ $color-background: rgba(0, 0, 0, 0.33) !default;
background-color: $color-background;
}

.CameraConsole__new__right {
position: relative;
display: flex;
flex: 1;
height: 90%;
flex-direction: column;
background-color: $color-background;
.CameraConsole__toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 24px;
line-height: 24px;
margin: 3px 12px 0;
// background-color: #0a0;
}

.CameraConsole__header {
display: flex;
justify-content: space-between;
.CameraConsole__toolbarRight {
position: absolute;
top: 0;
right: 0;
height: 24px;
line-height: 24px;
margin: 4px 6px 0;
// background-color: #aa0;
}

.CameraConsole__map {
display: flex;
overflow: hidden;
background-color: #00a;
position: absolute;
top: 26px;
bottom: 0;
left: 0;
right: 0;
// background-color: #00a;
margin: 6px;
text-align: center;

.NoticeBox {
margin-top: calc(50% - 24px);
}
}

.CameraConsole__right_map {
position: relative;
display: flex;
flex: 1;
height: 90%;
flex-direction: column;
background-color: $color-background;
}

0 comments on commit 35d8770

Please sign in to comment.