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