diff --git a/tgui/package.json b/tgui/package.json
index 7df2978a7f4..1953e25ccd2 100644
--- a/tgui/package.json
+++ b/tgui/package.json
@@ -29,7 +29,7 @@
"@babel/preset-typescript": "^7.23.3",
"@types/jest": "^29.5.10",
"@types/jsdom": "^21.1.6",
- "@types/node": "14.x",
+ "@types/node": "^14.x",
"@types/webpack": "^5.28.5",
"@types/webpack-env": "^1.18.4",
"@typescript-eslint/parser": "^5.62.0",
diff --git a/tgui/packages/tgui-panel/Notifications.jsx b/tgui/packages/tgui-panel/Notifications.tsx
similarity index 100%
rename from tgui/packages/tgui-panel/Notifications.jsx
rename to tgui/packages/tgui-panel/Notifications.tsx
diff --git a/tgui/packages/tgui-panel/Panel.jsx b/tgui/packages/tgui-panel/Panel.tsx
similarity index 81%
rename from tgui/packages/tgui-panel/Panel.jsx
rename to tgui/packages/tgui-panel/Panel.tsx
index 668fd8cbb19..04182f5eb6e 100644
--- a/tgui/packages/tgui-panel/Panel.jsx
+++ b/tgui/packages/tgui-panel/Panel.tsx
@@ -15,10 +15,6 @@ import { ReconnectButton } from './reconnect';
import { SettingsPanel, useSettings } from './settings';
export const Panel = (props) => {
- // IE8-10: Needs special treatment due to missing Flex support
- if (Byond.IS_LTE_IE10) {
- return ;
- }
const audio = useAudio();
const settings = useSettings();
const game = useGame();
@@ -29,6 +25,7 @@ export const Panel = (props) => {
return ;
}
}
+
return (
@@ -102,28 +99,3 @@ export const Panel = (props) => {
);
};
-
-const HoboPanel = (props) => {
- const settings = useSettings();
- return (
-
-
-
- {(settings.visible && ) || (
-
- )}
-
-
- );
-};
diff --git a/tgui/packages/tgui-panel/audio/hooks.js b/tgui/packages/tgui-panel/audio/hooks.ts
similarity index 100%
rename from tgui/packages/tgui-panel/audio/hooks.js
rename to tgui/packages/tgui-panel/audio/hooks.ts
diff --git a/tgui/packages/tgui-panel/audio/player.js b/tgui/packages/tgui-panel/audio/player.js
index f9dfa41cef9..50eccee16ba 100644
--- a/tgui/packages/tgui-panel/audio/player.js
+++ b/tgui/packages/tgui-panel/audio/player.js
@@ -10,10 +10,6 @@ const logger = createLogger('AudioPlayer');
export class AudioPlayer {
constructor() {
- // Doesn't support HTMLAudioElement
- if (Byond.IS_LTE_IE9) {
- return;
- }
// Set up the HTMLAudioElement node
this.node = document.createElement('audio');
this.node.style.setProperty('display', 'none');
diff --git a/tgui/packages/tgui-panel/audio/reducer.js b/tgui/packages/tgui-panel/audio/reducer.ts
similarity index 100%
rename from tgui/packages/tgui-panel/audio/reducer.js
rename to tgui/packages/tgui-panel/audio/reducer.ts
diff --git a/tgui/packages/tgui-panel/audio/selectors.js b/tgui/packages/tgui-panel/audio/selectors.ts
similarity index 100%
rename from tgui/packages/tgui-panel/audio/selectors.js
rename to tgui/packages/tgui-panel/audio/selectors.ts
diff --git a/tgui/packages/tgui-panel/chat/renderer.jsx b/tgui/packages/tgui-panel/chat/renderer.jsx
index d0c170c9354..e52007c5f72 100644
--- a/tgui/packages/tgui-panel/chat/renderer.jsx
+++ b/tgui/packages/tgui-panel/chat/renderer.jsx
@@ -317,15 +317,14 @@ class ChatRenderer {
const to = Math.max(0, len - COMBINE_MAX_MESSAGES);
for (let i = from; i >= to; i--) {
const message = this.visibleMessages[i];
- // prettier-ignore
- const matches = (
+
+ const matches =
// Is not an internal message
- !message.type.startsWith(MESSAGE_TYPE_INTERNAL)
+ !message.type.startsWith(MESSAGE_TYPE_INTERNAL) &&
// Text payload must fully match
- && isSameMessage(message, predicate)
+ isSameMessage(message, predicate) &&
// Must land within the specified time window
- && now < message.createdAt + COMBINE_MAX_TIME_WINDOW
- );
+ now < message.createdAt + COMBINE_MAX_TIME_WINDOW;
if (matches) {
return message;
}
@@ -457,11 +456,13 @@ class ChatRenderer {
if (!message.type) {
// IE8: Does not support querySelector on elements that
// are not yet in the document.
- // prettier-ignore
- const typeDef = !Byond.IS_LTE_IE8 && MESSAGE_TYPES
- .find(typeDef => (
- typeDef.selector && node.querySelector(typeDef.selector)
- ));
+
+ const typeDef =
+ !Byond.IS_LTE_IE8 &&
+ MESSAGE_TYPES.find(
+ (typeDef) =>
+ typeDef.selector && node.querySelector(typeDef.selector),
+ );
message.type = typeDef?.type || MESSAGE_TYPE_UNKNOWN;
}
updateMessageBadge(message);
@@ -516,10 +517,10 @@ class ChatRenderer {
message.node = 'pruned';
}
// Remove pruned messages from the message array
- // prettier-ignore
- this.messages = this.messages.filter(message => (
- message.node !== 'pruned'
- ));
+
+ this.messages = this.messages.filter(
+ (message) => message.node !== 'pruned',
+ );
logger.log(`pruned ${fromIndex} visible messages`);
}
}
@@ -586,19 +587,22 @@ class ChatRenderer {
}
}
// Create a page
- // prettier-ignore
- const pageHtml = '\n'
- + '\n'
- + '
\n'
- + 'SS13 Chat Log\n'
- + '\n'
- + '\n'
- + '\n'
- + '\n'
- + messagesHtml
- + '
\n'
- + '\n'
- + '\n';
+
+ const pageHtml =
+ '\n' +
+ '\n' +
+ '\n' +
+ 'SS13 Chat Log\n' +
+ '\n' +
+ '\n' +
+ '\n' +
+ '\n' +
+ messagesHtml +
+ '
\n' +
+ '\n' +
+ '\n';
// Create and send a nice blob
const blob = new Blob([pageHtml]);
const timestamp = new Date()
diff --git a/tgui/packages/tgui-panel/chat/replaceInTextNode.js b/tgui/packages/tgui-panel/chat/replaceInTextNode.js
index 5062b88831b..4c91b604dac 100644
--- a/tgui/packages/tgui-panel/chat/replaceInTextNode.js
+++ b/tgui/packages/tgui-panel/chat/replaceInTextNode.js
@@ -171,8 +171,8 @@ export const highlightNode = (
// Linkify
// --------------------------------------------------------
-// prettier-ignore
-const URL_REGEX = /(?:(?:https?:\/\/)|(?:www\.))(?:[^ ]*?\.[^ ]*?)+[-A-Za-z0-9+&@#/%?=~_|$!:,.;(){}]+/ig;
+const URL_REGEX =
+ /(?:(?:https?:\/\/)|(?:www\.))(?:[^ ]*?\.[^ ]*?)+[-A-Za-z0-9+&@#/%?=~_|$!:,.;(){}]+/gi;
/**
* Highlights the text in the node based on the provided regular expression.
diff --git a/tgui/packages/tgui-panel/chat/selectors.js b/tgui/packages/tgui-panel/chat/selectors.ts
similarity index 85%
rename from tgui/packages/tgui-panel/chat/selectors.js
rename to tgui/packages/tgui-panel/chat/selectors.ts
index 6352b7cddf0..2908f661264 100644
--- a/tgui/packages/tgui-panel/chat/selectors.js
+++ b/tgui/packages/tgui-panel/chat/selectors.ts
@@ -9,7 +9,7 @@ import { map } from 'common/collections';
export const selectChat = (state) => state.chat;
export const selectChatPages = (state) =>
- map((id) => state.chat.pageById[id])(state.chat.pages);
+ map((id: string) => state.chat.pageById[id])(state.chat.pages);
export const selectCurrentChatPage = (state) =>
state.chat.pageById[state.chat.currentPageId];
diff --git a/tgui/packages/tgui-panel/game/actions.js b/tgui/packages/tgui-panel/game/actions.ts
similarity index 100%
rename from tgui/packages/tgui-panel/game/actions.js
rename to tgui/packages/tgui-panel/game/actions.ts
diff --git a/tgui/packages/tgui-panel/game/hooks.js b/tgui/packages/tgui-panel/game/hooks.ts
similarity index 100%
rename from tgui/packages/tgui-panel/game/hooks.js
rename to tgui/packages/tgui-panel/game/hooks.ts
diff --git a/tgui/packages/tgui-panel/game/reducer.js b/tgui/packages/tgui-panel/game/reducer.ts
similarity index 94%
rename from tgui/packages/tgui-panel/game/reducer.js
rename to tgui/packages/tgui-panel/game/reducer.ts
index 97535524c56..c446db8f029 100644
--- a/tgui/packages/tgui-panel/game/reducer.js
+++ b/tgui/packages/tgui-panel/game/reducer.ts
@@ -16,7 +16,7 @@ const initialState = {
};
export const gameReducer = (state = initialState, action) => {
- const { type, payload, meta } = action;
+ const { type, meta } = action;
if (type === 'roundrestart') {
return {
...state,
diff --git a/tgui/packages/tgui-panel/game/selectors.js b/tgui/packages/tgui-panel/game/selectors.ts
similarity index 100%
rename from tgui/packages/tgui-panel/game/selectors.js
rename to tgui/packages/tgui-panel/game/selectors.ts
diff --git a/tgui/packages/tgui-panel/index.jsx b/tgui/packages/tgui-panel/index.tsx
similarity index 88%
rename from tgui/packages/tgui-panel/index.jsx
rename to tgui/packages/tgui-panel/index.tsx
index 8ef4b8bae59..32bb8fe6cce 100644
--- a/tgui/packages/tgui-panel/index.jsx
+++ b/tgui/packages/tgui-panel/index.tsx
@@ -85,7 +85,7 @@ const setupApp = () => {
});
// Resize the panel to match the non-browser output
- Byond.winget('output').then((output) => {
+ Byond.winget('output').then((output: { size: string }) => {
Byond.winset('browseroutput', {
size: output.size,
});
@@ -94,19 +94,22 @@ const setupApp = () => {
// Enable hot module reloading
if (module.hot) {
setupHotReloading();
- // prettier-ignore
- module.hot.accept([
- './audio',
- './chat',
- './game',
- './Notifications',
- './Panel',
- './ping',
- './settings',
- './telemetry',
- ], () => {
- renderApp();
- });
+
+ module.hot.accept(
+ [
+ './audio',
+ './chat',
+ './game',
+ './Notifications',
+ './Panel',
+ './ping',
+ './settings',
+ './telemetry',
+ ],
+ () => {
+ renderApp();
+ },
+ );
}
};
diff --git a/tgui/packages/tgui-panel/package.json b/tgui/packages/tgui-panel/package.json
index b1c4bb1786c..f020764a31b 100644
--- a/tgui/packages/tgui-panel/package.json
+++ b/tgui/packages/tgui-panel/package.json
@@ -1,9 +1,10 @@
{
"private": true,
"name": "tgui-panel",
- "version": "4.3.2",
+ "version": "5.0.0",
"dependencies": {
- "@types/react": "^18.2.39",
+ "@types/node": "^14.x",
+ "@types/react": "^18.2.42",
"common": "workspace:*",
"dompurify": "^2.4.4",
"react": "^18.2.0",
diff --git a/tgui/packages/tgui-panel/ping/actions.js b/tgui/packages/tgui-panel/ping/actions.ts
similarity index 100%
rename from tgui/packages/tgui-panel/ping/actions.js
rename to tgui/packages/tgui-panel/ping/actions.ts
diff --git a/tgui/packages/tgui-panel/ping/reducer.js b/tgui/packages/tgui-panel/ping/reducer.ts
similarity index 82%
rename from tgui/packages/tgui-panel/ping/reducer.js
rename to tgui/packages/tgui-panel/ping/reducer.ts
index 49b9522c06f..55d40eeb46f 100644
--- a/tgui/packages/tgui-panel/ping/reducer.js
+++ b/tgui/packages/tgui-panel/ping/reducer.ts
@@ -12,7 +12,14 @@ import {
PING_ROUNDTRIP_WORST,
} from './constants';
-export const pingReducer = (state = {}, action) => {
+type PingState = {
+ roundtrip: number | undefined;
+ roundtripAvg: number | undefined;
+ failCount: number;
+ networkQuality: number;
+};
+
+export const pingReducer = (state = {} as PingState, action) => {
const { type, payload } = action;
if (type === pingSuccess.type) {
@@ -34,7 +41,7 @@ export const pingReducer = (state = {}, action) => {
const networkQuality = clamp01(
state.networkQuality - failCount / PING_MAX_FAILS,
);
- const nextState = {
+ const nextState: PingState = {
...state,
failCount: failCount + 1,
networkQuality,
diff --git a/tgui/packages/tgui-panel/ping/selectors.js b/tgui/packages/tgui-panel/ping/selectors.ts
similarity index 100%
rename from tgui/packages/tgui-panel/ping/selectors.js
rename to tgui/packages/tgui-panel/ping/selectors.ts
diff --git a/tgui/packages/tgui-panel/settings/actions.js b/tgui/packages/tgui-panel/settings/actions.ts
similarity index 100%
rename from tgui/packages/tgui-panel/settings/actions.js
rename to tgui/packages/tgui-panel/settings/actions.ts
diff --git a/tgui/packages/tgui-panel/settings/hooks.js b/tgui/packages/tgui-panel/settings/hooks.ts
similarity index 100%
rename from tgui/packages/tgui-panel/settings/hooks.js
rename to tgui/packages/tgui-panel/settings/hooks.ts
diff --git a/tgui/packages/tgui-panel/settings/model.js b/tgui/packages/tgui-panel/settings/model.ts
similarity index 65%
rename from tgui/packages/tgui-panel/settings/model.js
rename to tgui/packages/tgui-panel/settings/model.ts
index b98d0d4fb6f..e689a676cf5 100644
--- a/tgui/packages/tgui-panel/settings/model.js
+++ b/tgui/packages/tgui-panel/settings/model.ts
@@ -3,7 +3,7 @@
*/
import { createUuid } from 'common/uuid';
-export const createHighlightSetting = (obj) => ({
+export const createHighlightSetting = (obj?: Record) => ({
id: createUuid(),
highlightText: '',
highlightColor: '#ffdd44',
@@ -13,7 +13,7 @@ export const createHighlightSetting = (obj) => ({
...obj,
});
-export const createDefaultHighlightSetting = (obj) =>
+export const createDefaultHighlightSetting = (obj?: Record) =>
createHighlightSetting({
id: 'default',
...obj,
diff --git a/tgui/packages/tgui-panel/settings/selectors.js b/tgui/packages/tgui-panel/settings/selectors.ts
similarity index 100%
rename from tgui/packages/tgui-panel/settings/selectors.js
rename to tgui/packages/tgui-panel/settings/selectors.ts
diff --git a/tgui/packages/tgui-panel/telemetry.js b/tgui/packages/tgui-panel/telemetry.js
index d1f7346af60..3b1eb9a9500 100644
--- a/tgui/packages/tgui-panel/telemetry.js
+++ b/tgui/packages/tgui-panel/telemetry.js
@@ -11,12 +11,10 @@ const logger = createLogger('telemetry');
const MAX_CONNECTIONS_STORED = 10;
-// prettier-ignore
-const connectionsMatch = (a, b) => (
- a.ckey === b.ckey
- && a.address === b.address
- && a.computer_id === b.computer_id
-);
+const connectionsMatch = (a, b) =>
+ a.ckey === b.ckey &&
+ a.address === b.address &&
+ a.computer_id === b.computer_id;
export const telemetryMiddleware = (store) => {
let telemetry;
@@ -58,9 +56,10 @@ export const telemetryMiddleware = (store) => {
}
// Append a connection record
let telemetryMutated = false;
- // prettier-ignore
- const duplicateConnection = telemetry.connections
- .find(conn => connectionsMatch(conn, client));
+
+ const duplicateConnection = telemetry.connections.find((conn) =>
+ connectionsMatch(conn, client),
+ );
if (!duplicateConnection) {
telemetryMutated = true;
telemetry.connections.unshift(client);
diff --git a/tgui/packages/tgui-panel/themes.js b/tgui/packages/tgui-panel/themes.ts
similarity index 99%
rename from tgui/packages/tgui-panel/themes.js
rename to tgui/packages/tgui-panel/themes.ts
index 63fb2774849..d8f0ce50b79 100644
--- a/tgui/packages/tgui-panel/themes.js
+++ b/tgui/packages/tgui-panel/themes.ts
@@ -10,7 +10,7 @@ const COLOR_DARK_BG = '#202020';
const COLOR_DARK_BG_DARKER = '#171717';
const COLOR_DARK_TEXT = '#a4bad6';
-let setClientThemeTimer = null;
+let setClientThemeTimer: NodeJS.Timeout;
/**
* Darkmode preference, originally by Kmc2000.
diff --git a/tgui/yarn.lock b/tgui/yarn.lock
index c6d2faf08c2..9d790343db5 100644
--- a/tgui/yarn.lock
+++ b/tgui/yarn.lock
@@ -2487,10 +2487,10 @@ __metadata:
languageName: node
linkType: hard
-"@types/node@npm:14.x":
- version: 14.18.36
- resolution: "@types/node@npm:14.18.36"
- checksum: da7f479b3fc996d585e60b8329987c6e310ddbf051e14f2d900ce04f7768f42fa7b760f0eb376008d3eca130ce9431018fb5c9e44027dcb7bb139c547e44b9c5
+"@types/node@npm:^14.x":
+ version: 14.18.63
+ resolution: "@types/node@npm:14.18.63"
+ checksum: be909061a54931778c71c49dc562586c32f909c4b6197e3d71e6dac726d8bd9fccb9f599c0df99f52742b68153712b5097c0f00cac4e279fa894b0ea6719a8fd
languageName: node
linkType: hard
@@ -2521,6 +2521,17 @@ __metadata:
languageName: node
linkType: hard
+"@types/react@npm:^18.2.42":
+ version: 18.2.42
+ resolution: "@types/react@npm:18.2.42"
+ dependencies:
+ "@types/prop-types": "*"
+ "@types/scheduler": "*"
+ csstype: ^3.0.2
+ checksum: d2019afdf48303a3a598a97cc9dd2284e3c04b369e791f6ba3c33232b7f8645daff97b093a19f8b3ce75ac8a261b47552cb4513226ab16d843eb9443b0f91844
+ languageName: node
+ linkType: hard
+
"@types/scheduler@npm:*":
version: 0.16.8
resolution: "@types/scheduler@npm:0.16.8"
@@ -10131,7 +10142,8 @@ __metadata:
version: 0.0.0-use.local
resolution: "tgui-panel@workspace:packages/tgui-panel"
dependencies:
- "@types/react": ^18.2.39
+ "@types/node": ^14.x
+ "@types/react": ^18.2.42
common: "workspace:*"
dompurify: ^2.4.4
react: ^18.2.0
@@ -10178,7 +10190,7 @@ __metadata:
"@babel/preset-typescript": ^7.23.3
"@types/jest": ^29.5.10
"@types/jsdom": ^21.1.6
- "@types/node": 14.x
+ "@types/node": ^14.x
"@types/webpack": ^5.28.5
"@types/webpack-env": ^1.18.4
"@typescript-eslint/parser": ^5.62.0