+
-
+ {!!theme && (
-
-
+ )}
+
+ {!!theme && (
+
+ )}
@@ -351,7 +368,13 @@ export class TguiSay extends Component<{}, State> {
}
}
-const Dragzone = ({ theme, position }: { theme: string; position: string }) => {
+const Dragzone = ({
+ theme,
+ position,
+}: {
+ readonly theme: string;
+ readonly position: string;
+}) => {
// Horizontal or vertical?
const location =
position === 'left' || position === 'right' ? 'vertical' : 'horizontal';
diff --git a/tgui/packages/tgui-say/helpers.ts b/tgui/packages/tgui-say/helpers.ts
index 100e3c03668..04e2b3a41e2 100644
--- a/tgui/packages/tgui-say/helpers.ts
+++ b/tgui/packages/tgui-say/helpers.ts
@@ -5,8 +5,8 @@ import { WINDOW_SIZES } from './constants';
* Once byond signals this via keystroke, it
* ensures window size, visibility, and focus.
*/
-export const windowOpen = (channel: Channel) => {
- setWindowVisibility(true);
+export const windowOpen = (channel: Channel, scale: boolean) => {
+ setWindowVisibility(true, scale);
Byond.sendMessage('open', { channel });
};
@@ -14,8 +14,8 @@ export const windowOpen = (channel: Channel) => {
* Resets the state of the window and hides it from user view.
* Sending "close" logs it server side.
*/
-export const windowClose = () => {
- setWindowVisibility(false);
+export const windowClose = (scale: boolean) => {
+ setWindowVisibility(false, scale);
Byond.winset('map', {
focus: true,
});
@@ -25,22 +25,34 @@ export const windowClose = () => {
/**
* Modifies the window size.
*/
-export const windowSet = (size = WINDOW_SIZES.small) => {
- let sizeStr = `${WINDOW_SIZES.width}x${size}`;
+export const windowSet = (size = WINDOW_SIZES.small, scale: boolean) => {
+ const pixelRatio = scale ? window.devicePixelRatio : 1;
- Byond.winset('tgui_say.browser', {
+ const sizeStr = `${WINDOW_SIZES.width * pixelRatio}x${size * pixelRatio}`;
+
+ Byond.winset('tgui_say', {
size: sizeStr,
});
- Byond.winset('tgui_say', {
+ Byond.winset('tgui_say.browser', {
size: sizeStr,
});
};
/** Helper function to set window size and visibility */
-const setWindowVisibility = (visible: boolean) => {
+const setWindowVisibility = (visible: boolean, scale: boolean) => {
+ const pixelRatio = scale ? window.devicePixelRatio : 1;
+
+ const sizeString = `${WINDOW_SIZES.width * pixelRatio}x${
+ WINDOW_SIZES.small * pixelRatio
+ }`;
+
Byond.winset('tgui_say', {
'is-visible': visible,
- size: `${WINDOW_SIZES.width}x${WINDOW_SIZES.small}`,
+ size: sizeString,
+ });
+
+ Byond.winset('tgui_say.browser', {
+ size: sizeString,
});
};
diff --git a/tgui/packages/tgui-say/styles/button.scss b/tgui/packages/tgui-say/styles/button.scss
index 202a69f7018..b6dc59ba065 100644
--- a/tgui/packages/tgui-say/styles/button.scss
+++ b/tgui/packages/tgui-say/styles/button.scss
@@ -2,18 +2,19 @@
@use './colors.scss';
.button {
- align-items: center;
background-color: colors.$button;
- border-radius: 0.3rem;
border: thin solid;
- display: flex;
- flex-grow: 1;
- font-family: inherit;
- font-size: 0.9rem;
+ border-radius: 2px;
+ color: colors.$background;
+ font-family: 'Consolas', monospace;
font-weight: bold;
- justify-content: center;
+ font-size: 0.9rem;
+ height: 100%;
padding: 0;
- width: 2.6rem;
+ text-align: center;
+ vertical-align: middle;
+ width: 5rem;
+
&:hover {
background-color: lighten(colors.$button, 10%);
}
@@ -30,6 +31,7 @@
background-color: colors.$lightBorder;
border: none;
color: black;
+
&:hover {
background-color: colors.$lightHover;
}
diff --git a/tgui/packages/tgui-say/styles/colors.scss b/tgui/packages/tgui-say/styles/colors.scss
index fd898427a52..024018f6138 100644
--- a/tgui/packages/tgui-say/styles/colors.scss
+++ b/tgui/packages/tgui-say/styles/colors.scss
@@ -13,6 +13,7 @@ $say: #a4bad6;
$radio: #1ecc43;
$me: #5975da;
$ooc: #cca300;
+$looc: #e362b4;
////////////////////////////////////////////////
// Subchannel chat colors
@@ -31,12 +32,15 @@ $service: #7fc732;
$supply: #c09141;
$hail: #8b4cd8;
$ent: #cfcfcf;
+$cling: #376340;
$_channel_map: (
'Say': $say,
'Comm': $radio,
+ 'Radio': $radio,
'Me': $me,
'OOC': $ooc,
+ 'LOOC': $looc,
'AI': $ai,
'io': $binary,
'Cmd': $command,
@@ -44,11 +48,14 @@ $_channel_map: (
'Med': $medical,
'Sci': $science,
'Sec': $security,
+ 'Merc': $syndicate,
'Synd': $syndicate,
+ 'Pen': $syndicate,
'Svc': $service,
'Supp': $supply,
'Hail': $hail,
'Ent': $ent,
+ 'Cling': $cling,
);
$channel_keys: map.keys($_channel_map) !default;
diff --git a/tgui/packages/tgui-say/styles/content.scss b/tgui/packages/tgui-say/styles/content.scss
index 91f4fe136d7..27ff9ede19e 100644
--- a/tgui/packages/tgui-say/styles/content.scss
+++ b/tgui/packages/tgui-say/styles/content.scss
@@ -10,5 +10,4 @@
flex: 1 1 0;
height: 100%;
width: 100%;
- font-family: 'Consolas', monospace;
}
diff --git a/tgui/packages/tgui-say/styles/dragzone.scss b/tgui/packages/tgui-say/styles/dragzone.scss
index 314b57c4e49..b06c5abfe98 100644
--- a/tgui/packages/tgui-say/styles/dragzone.scss
+++ b/tgui/packages/tgui-say/styles/dragzone.scss
@@ -1,27 +1,42 @@
@use 'sass:color';
@use './colors.scss';
-$dragSize: 0.6rem;
-$borderSize: 0.2rem;
+// Remove conditionals with 516
+@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
+ $dragSize: 0.3rem;
+}
+
+// Remove with 516
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ $dragSize: 0.6rem;
+}
+
+$dragSize: 0.3rem;
+$borderSize: 2px;
.dragzone-horizontal {
border-left: $borderSize solid;
border-right: $borderSize solid;
color: transparent;
- width: 100%;
height: $dragSize;
+ width: 100%;
}
+
.dragzone-left {
border-left: $borderSize solid;
+ left: 0;
}
.dragzone-right {
border-right: $borderSize solid;
+ right: 0;
}
.dragzone-vertical {
color: transparent;
height: 100%;
+ position: absolute;
+ top: 0;
width: $dragSize;
}
diff --git a/tgui/packages/tgui-say/styles/textarea.scss b/tgui/packages/tgui-say/styles/textarea.scss
index d33c4a9939f..135da37e017 100644
--- a/tgui/packages/tgui-say/styles/textarea.scss
+++ b/tgui/packages/tgui-say/styles/textarea.scss
@@ -1,11 +1,51 @@
+@use 'sass:color';
+@use './colors.scss';
+
+@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
+ * {
+ &::-webkit-scrollbar {
+ width: 0.8rem;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: color.scale(
+ colors.$button,
+ $lightness: -25% * colors.$scrollbar-color-multiplier
+ );
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: color.scale(
+ colors.$button,
+ $lightness: 10% * colors.$scrollbar-color-multiplier
+ );
+ }
+ }
+}
+
.textarea {
- align-items: center;
background: transparent;
border: none;
- display: flex;
- flex-grow: 4;
font-family: inherit;
font-size: 1.1rem;
- overflow: hidden;
- margin: 0.1rem 0 0 0.4rem;
+}
+
+// Remove conditionals with 516
+@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
+ .textarea {
+ flex-grow: 8;
+ outline: none;
+ resize: none;
+ }
+}
+
+// Remove with 516
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .textarea {
+ align-items: center;
+ display: flex;
+ flex-grow: 4;
+ overflow: hidden;
+ margin: 0.1rem 0 0 0.4rem;
+ }
}
diff --git a/tgui/packages/tgui-say/styles/window.scss b/tgui/packages/tgui-say/styles/window.scss
index 9936cfe9bcf..9d3db1cd8de 100644
--- a/tgui/packages/tgui-say/styles/window.scss
+++ b/tgui/packages/tgui-say/styles/window.scss
@@ -6,15 +6,28 @@
display: flex;
flex-direction: column;
max-width: 380px;
- height: 100%;
- width: 100%;
overflow: hidden;
}
+// Remove with 516
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .window {
+ height: 100%;
+ width: 100%;
+ }
+}
+
.window-lightMode {
background-color: colors.$lightMode;
}
+.window__content {
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ padding: 1px 0 1px 5px;
+}
+
/** Window sizes */
.window-30 {
height: 30px;
diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
index fb77a61e3cd..0501de0c1b8 100644
--- a/tgui/packages/tgui/backend.ts
+++ b/tgui/packages/tgui/backend.ts
@@ -244,6 +244,7 @@ type BackendState
= {
size: [number, number];
fancy: boolean;
locked: boolean;
+ scale: boolean;
};
client: {
ckey: string;
diff --git a/tgui/packages/tgui/drag.ts b/tgui/packages/tgui/drag.ts
index 4b6f82e1207..e17303cdcd2 100644
--- a/tgui/packages/tgui/drag.ts
+++ b/tgui/packages/tgui/drag.ts
@@ -42,14 +42,14 @@ export const getWindowSize = (): [number, number] => [
const setWindowPosition = (vec: [number, number]) => {
const byondPos = vecAdd(vec, screenOffset);
return Byond.winset(Byond.windowId, {
- pos: byondPos[0] + ',' + byondPos[1],
+ pos: `${byondPos[0]},${byondPos[1]}`,
});
};
// Set window size
const setWindowSize = (vec: [number, number]) => {
return Byond.winset(Byond.windowId, {
- size: vec[0] + 'x' + vec[1],
+ size: `${vec[0]}x${vec[1]}`,
});
};
@@ -120,6 +120,7 @@ export const recallWindowGeometry = async (
pos?: [number, number];
size?: [number, number];
locked?: boolean;
+ scale?: boolean;
} = {}
) => {
const geometry = options.fancy && (await storage.get(windowKey));
@@ -130,9 +131,22 @@ export const recallWindowGeometry = async (
let pos = geometry?.pos || options.pos;
let size = options.size;
// Convert size from css-pixels to display-pixels
- if (size) {
+ if (options.scale && size) {
size = [size[0] * pixelRatio, size[1] * pixelRatio];
}
+ if (!options.scale) {
+ document.body.style.setProperty(
+ 'zoom',
+ `${100 / window.devicePixelRatio}%`
+ );
+ document.documentElement.style.setProperty(
+ '--scaling-amount',
+ window.devicePixelRatio.toString()
+ );
+ } else {
+ document.body.style.setProperty('zoom', '');
+ document.documentElement.style.setProperty('--scaling-amount', null);
+ }
// Wait until screen offset gets resolved
await screenOffsetPromise;
const areaAvailable = getScreenSize();
@@ -166,7 +180,7 @@ export const recallWindowGeometry = async (
// Setup draggable window
export const setupDrag = async () => {
// Calculate screen offset caused by the windows taskbar
- let windowPosition = getWindowPosition();
+ const windowPosition = getWindowPosition();
screenOffsetPromise = Byond.winget(Byond.windowId, 'pos').then((pos) => [
pos.x - windowPosition[0],
@@ -207,7 +221,7 @@ export const dragStartHandler = (event: MouseEvent) => {
logger.log('drag start');
dragging = true;
dragPointOffset = vecSubtract(
- [event.screenX, event.screenY],
+ [event.screenX * pixelRatio, event.screenY * pixelRatio],
getWindowPosition()
);
// Focus click target
@@ -234,7 +248,10 @@ const dragMoveHandler = (event: MouseEvent) => {
}
event.preventDefault();
setWindowPosition(
- vecSubtract([event.screenX, event.screenY], dragPointOffset)
+ vecSubtract(
+ [event.screenX * pixelRatio, event.screenY * pixelRatio],
+ dragPointOffset
+ ) as [number, number]
);
};
@@ -245,7 +262,7 @@ export const resizeStartHandler =
logger.log('resize start', resizeMatrix);
resizing = true;
dragPointOffset = vecSubtract(
- [event.screenX, event.screenY],
+ [event.screenX * pixelRatio, event.screenY * pixelRatio],
getWindowPosition()
);
initialSize = getWindowSize();
@@ -273,7 +290,7 @@ const resizeMoveHandler = (event: MouseEvent) => {
}
event.preventDefault();
const currentOffset = vecSubtract(
- [event.screenX, event.screenY],
+ [event.screenX * pixelRatio, event.screenY * pixelRatio],
getWindowPosition()
);
const delta = vecSubtract(currentOffset, dragPointOffset);
diff --git a/tgui/packages/tgui/events.ts b/tgui/packages/tgui/events.ts
index 670f03e808b..e3a5fa7fe55 100644
--- a/tgui/packages/tgui/events.ts
+++ b/tgui/packages/tgui/events.ts
@@ -201,9 +201,9 @@ export class KeyEvent {
if (this.code >= 48 && this.code <= 90) {
this._str += String.fromCharCode(this.code);
} else if (this.code >= KEY_F1 && this.code <= KEY_F12) {
- this._str += 'F' + (this.code - 111);
+ this._str += `F${this.code - 111}`;
} else {
- this._str += '[' + this.code + ']';
+ this._str += `[${this.code}]`;
}
return this._str;
}
diff --git a/tgui/packages/tgui/styles/components/Input.scss b/tgui/packages/tgui/styles/components/Input.scss
index c2e779529f9..0e8e509df0b 100644
--- a/tgui/packages/tgui/styles/components/Input.scss
+++ b/tgui/packages/tgui/styles/components/Input.scss
@@ -10,6 +10,7 @@ $text-color: base.$color-fg !default;
$background-color: #0a0a0a !default;
$border-color: #88bfff !default;
$border-radius: base.$border-radius !default;
+$font-family: Verdana, sans-serif !default;
.Input {
position: relative;
@@ -51,11 +52,17 @@ $border-radius: base.$border-radius !default;
height: base.em(17px);
margin: 0;
padding: 0 0.5em;
- font-family: Verdana, sans-serif;
+ font-family: $font-family;
background-color: transparent;
color: $text-color;
color: inherit;
+ &::placeholder {
+ font-style: italic;
+ color: #777;
+ color: rgba(255, 255, 255, 0.45);
+ }
+
&:-ms-input-placeholder {
font-style: italic;
color: #777;
diff --git a/tgui/packages/tgui/styles/components/TextArea.scss b/tgui/packages/tgui/styles/components/TextArea.scss
index fa45857ed9b..ec8e0c7a317 100644
--- a/tgui/packages/tgui/styles/components/TextArea.scss
+++ b/tgui/packages/tgui/styles/components/TextArea.scss
@@ -65,6 +65,12 @@ $border-radius: Input.$border-radius !default;
word-wrap: break-word;
overflow: hidden;
+ &::placeholder {
+ font-style: italic;
+ color: #777;
+ color: rgba(255, 255, 255, 0.45);
+ }
+
&:-ms-input-placeholder {
font-style: italic;
color: #777;
diff --git a/tgui/packages/tgui/styles/functions.scss b/tgui/packages/tgui/styles/functions.scss
index 1c8d65e3a17..28185755e88 100644
--- a/tgui/packages/tgui/styles/functions.scss
+++ b/tgui/packages/tgui/styles/functions.scss
@@ -76,3 +76,9 @@
color.alpha($color-rgba) * 100%
);
}
+
+// Multiplies our viewport units by the DPI scaling amount
+// to ensure that they display correctly when using differently-scaled windows
+@function vp($viewportUnit) {
+ @return calc(var(--scaling-amount) * $viewportUnit);
+}
diff --git a/tgui/packages/tgui/styles/main.scss b/tgui/packages/tgui/styles/main.scss
index 65733596167..5c5b9e2777e 100644
--- a/tgui/packages/tgui/styles/main.scss
+++ b/tgui/packages/tgui/styles/main.scss
@@ -69,3 +69,8 @@
background-position: center;
background-repeat: no-repeat;
}
+
+// A default, in case someone uses the vp() function outside of a
+:root {
+ --scaling-amount: 1;
+}