diff --git a/tgui/packages/tgui-panel/Notifications.js b/tgui/packages/tgui-panel/Notifications.js
deleted file mode 100644
index a64ddd8e306..00000000000
--- a/tgui/packages/tgui-panel/Notifications.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { Flex } from 'tgui/components';
-
-export const Notifications = props => {
- const { children } = props;
- return (
-
- {children}
-
- );
-};
-
-const NotificationsItem = props => {
- const {
- rightSlot,
- children,
- } = props;
- return (
-
-
- {children}
-
- {rightSlot && (
-
- {rightSlot}
-
- )}
-
- );
-};
-
-Notifications.Item = NotificationsItem;
diff --git a/tgui/packages/tgui-panel/Panel.js b/tgui/packages/tgui-panel/Panel.js
deleted file mode 100644
index d6cc9eb7efc..00000000000
--- a/tgui/packages/tgui-panel/Panel.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { Button, Section, Stack } from 'tgui/components';
-import { Pane } from 'tgui/layouts';
-import { NowPlayingWidget, useAudio } from './audio';
-import { ChatPanel, ChatTabs } from './chat';
-import { useGame } from './game';
-import { Notifications } from './Notifications';
-import { PingIndicator } from './ping';
-import { SettingsPanel, useSettings } from './settings';
-
-export const Panel = (props, context) => {
- // IE8-10: Needs special treatment due to missing Flex support
- if (Byond.IS_LTE_IE10) {
- return (
-
- );
- }
- const audio = useAudio(context);
- const settings = useSettings(context);
- const game = useGame(context);
- if (process.env.NODE_ENV !== 'production') {
- const { useDebug, KitchenSink } = require('tgui/debug');
- const debug = useDebug(context);
- if (debug.kitchenSink) {
- return (
-
- );
- }
- }
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {audio.visible && (
-
-
-
- )}
- {settings.visible && (
-
-
-
- )}
-
-
-
-
-
-
- {game.connectionLostAt && (
- Byond.command('.reconnect')}>
- Reconnect
-
- )}>
- You are either AFK, experiencing lag or the connection
- has closed.
-
- )}
- {game.roundRestartedAt && (
-
- The connection has been closed because the server is
- restarting. Please wait while you automatically reconnect.
-
- )}
-
-
-
-
-
- );
-};
-
-const HoboPanel = (props, context) => {
- const settings = useSettings(context);
- return (
-
-
-
- {settings.visible && (
-
- ) || (
-
- )}
-
-
- );
-};
diff --git a/tgui/packages/tgui-panel/audio/NowPlayingWidget.js b/tgui/packages/tgui-panel/audio/NowPlayingWidget.js
deleted file mode 100644
index e4fe04eed16..00000000000
--- a/tgui/packages/tgui-panel/audio/NowPlayingWidget.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { toFixed } from 'common/math';
-import { useDispatch, useSelector } from 'common/redux';
-import { Button, Flex, Knob } from 'tgui/components';
-import { useSettings } from '../settings';
-import { selectAudio } from './selectors';
-
-export const NowPlayingWidget = (props, context) => {
- const audio = useSelector(context, selectAudio);
- const dispatch = useDispatch(context);
- const settings = useSettings(context);
- const title = audio.meta?.title;
- return (
-
- {audio.playing && (
- <>
-
- Now playing:
-
-
- {title || 'Unknown Track'}
-
-
- ) || (
-
- Nothing to play.
-
- )}
- {audio.playing && (
-
-
- )}
-
- toFixed(value * 100) + '%'}
- onDrag={(e, value) => settings.update({
- adminMusicVolume: value,
- })} />
-
-
- );
-};
diff --git a/tgui/packages/tgui-panel/audio/hooks.js b/tgui/packages/tgui-panel/audio/hooks.js
deleted file mode 100644
index 17b29a95972..00000000000
--- a/tgui/packages/tgui-panel/audio/hooks.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { useSelector, useDispatch } from 'common/redux';
-import { selectAudio } from './selectors';
-
-export const useAudio = context => {
- const state = useSelector(context, selectAudio);
- const dispatch = useDispatch(context);
- return {
- ...state,
- toggle: () => dispatch({ type: 'audio/toggle' }),
- };
-};
diff --git a/tgui/packages/tgui-panel/audio/index.js b/tgui/packages/tgui-panel/audio/index.js
deleted file mode 100644
index ac7d4c2ca7f..00000000000
--- a/tgui/packages/tgui-panel/audio/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export { useAudio } from './hooks';
-export { audioMiddleware } from './middleware';
-export { NowPlayingWidget } from './NowPlayingWidget';
-export { audioReducer } from './reducer';
diff --git a/tgui/packages/tgui-panel/audio/middleware.js b/tgui/packages/tgui-panel/audio/middleware.js
deleted file mode 100644
index c9a409aa938..00000000000
--- a/tgui/packages/tgui-panel/audio/middleware.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { AudioPlayer } from './player';
-
-export const audioMiddleware = store => {
- const player = new AudioPlayer();
- player.onPlay(() => {
- store.dispatch({ type: 'audio/playing' });
- });
- player.onStop(() => {
- store.dispatch({ type: 'audio/stopped' });
- });
- return next => action => {
- const { type, payload } = action;
- if (type === 'audio/playMusic') {
- const { url, ...options } = payload;
- player.play(url, options);
- return next(action);
- }
- if (type === 'audio/stopMusic') {
- player.stop();
- return next(action);
- }
- if (type === 'settings/update' || type === 'settings/load') {
- const volume = payload?.adminMusicVolume;
- if (typeof volume === 'number') {
- player.setVolume(volume);
- }
- return next(action);
- }
- return next(action);
- };
-};
diff --git a/tgui/packages/tgui-panel/audio/player.js b/tgui/packages/tgui-panel/audio/player.js
deleted file mode 100644
index 7848533e845..00000000000
--- a/tgui/packages/tgui-panel/audio/player.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { createLogger } from 'tgui/logging';
-
-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');
- document.body.appendChild(this.node);
- // Set up other properties
- this.playing = false;
- this.volume = 1;
- this.options = {};
- this.onPlaySubscribers = [];
- this.onStopSubscribers = [];
- // Listen for playback start events
- this.node.addEventListener('canplaythrough', () => {
- logger.log('canplaythrough');
- this.playing = true;
- this.node.playbackRate = this.options.pitch || 1;
- this.node.currentTime = this.options.start || 0;
- this.node.volume = this.volume;
- this.node.play();
- for (let subscriber of this.onPlaySubscribers) {
- subscriber();
- }
- });
- // Listen for playback stop events
- this.node.addEventListener('ended', () => {
- logger.log('ended');
- this.stop();
- });
- // Listen for playback errors
- this.node.addEventListener('error', e => {
- if (this.playing) {
- logger.log('playback error', e.error);
- this.stop();
- }
- });
- // Check every second to stop the playback at the right time
- this.playbackInterval = setInterval(() => {
- if (!this.playing) {
- return;
- }
- const shouldStop = this.options.end > 0
- && this.node.currentTime >= this.options.end;
- if (shouldStop) {
- this.stop();
- }
- }, 1000);
- }
-
- destroy() {
- if (!this.node) {
- return;
- }
- this.node.stop();
- document.removeChild(this.node);
- clearInterval(this.playbackInterval);
- }
-
- play(url, options = {}) {
- if (!this.node) {
- return;
- }
- logger.log('playing', url, options);
- this.options = options;
- this.node.src = url;
- }
-
- stop() {
- if (!this.node) {
- return;
- }
- if (this.playing) {
- for (let subscriber of this.onStopSubscribers) {
- subscriber();
- }
- }
- logger.log('stopping');
- this.playing = false;
- this.node.src = '';
- }
-
- setVolume(volume) {
- if (!this.node) {
- return;
- }
- this.volume = volume;
- this.node.volume = volume;
- }
-
- onPlay(subscriber) {
- if (!this.node) {
- return;
- }
- this.onPlaySubscribers.push(subscriber);
- }
-
- onStop(subscriber) {
- if (!this.node) {
- return;
- }
- this.onStopSubscribers.push(subscriber);
- }
-}
diff --git a/tgui/packages/tgui-panel/audio/reducer.js b/tgui/packages/tgui-panel/audio/reducer.js
deleted file mode 100644
index 17684060ffb..00000000000
--- a/tgui/packages/tgui-panel/audio/reducer.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-const initialState = {
- visible: false,
- playing: false,
- track: null,
-};
-
-export const audioReducer = (state = initialState, action) => {
- const { type, payload } = action;
- if (type === 'audio/playing') {
- return {
- ...state,
- visible: true,
- playing: true,
- };
- }
- if (type === 'audio/stopped') {
- return {
- ...state,
- visible: false,
- playing: false,
- };
- }
- if (type === 'audio/playMusic') {
- return {
- ...state,
- meta: payload,
- };
- }
- if (type === 'audio/stopMusic') {
- return {
- ...state,
- visible: false,
- playing: false,
- meta: null,
- };
- }
- if (type === 'audio/toggle') {
- return {
- ...state,
- visible: !state.visible,
- };
- }
- return state;
-};
diff --git a/tgui/packages/tgui-panel/audio/selectors.js b/tgui/packages/tgui-panel/audio/selectors.js
deleted file mode 100644
index 156f509cd70..00000000000
--- a/tgui/packages/tgui-panel/audio/selectors.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export const selectAudio = state => state.audio;
diff --git a/tgui/packages/tgui-panel/chat/ChatPageSettings.js b/tgui/packages/tgui-panel/chat/ChatPageSettings.js
deleted file mode 100644
index ba045983d2f..00000000000
--- a/tgui/packages/tgui-panel/chat/ChatPageSettings.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { useDispatch, useSelector } from 'common/redux';
-import { Button, Collapsible, Divider, Input, Section, Stack } from 'tgui/components';
-import { removeChatPage, toggleAcceptedType, updateChatPage } from './actions';
-import { MESSAGE_TYPES } from './constants';
-import { selectCurrentChatPage } from './selectors';
-
-export const ChatPageSettings = (props, context) => {
- const page = useSelector(context, selectCurrentChatPage);
- const dispatch = useDispatch(context);
- return (
-
- );
-};
diff --git a/tgui/packages/tgui-panel/chat/ChatPanel.js b/tgui/packages/tgui-panel/chat/ChatPanel.js
deleted file mode 100644
index 0a5deaf9feb..00000000000
--- a/tgui/packages/tgui-panel/chat/ChatPanel.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { shallowDiffers } from 'common/react';
-import { Component, createRef } from 'inferno';
-import { Button } from 'tgui/components';
-import { chatRenderer } from './renderer';
-
-export class ChatPanel extends Component {
- constructor() {
- super();
- this.ref = createRef();
- this.state = {
- scrollTracking: true,
- };
- this.handleScrollTrackingChange = value => this.setState({
- scrollTracking: value,
- });
- }
-
- componentDidMount() {
- chatRenderer.mount(this.ref.current);
- chatRenderer.events.on('scrollTrackingChanged',
- this.handleScrollTrackingChange);
- this.componentDidUpdate();
- }
-
- componentWillUnmount() {
- chatRenderer.events.off('scrollTrackingChanged',
- this.handleScrollTrackingChange);
- }
-
- componentDidUpdate(prevProps) {
- requestAnimationFrame(() => {
- chatRenderer.ensureScrollTracking();
- });
- const shouldUpdateStyle = (
- !prevProps || shallowDiffers(this.props, prevProps)
- );
- if (shouldUpdateStyle) {
- chatRenderer.assignStyle({
- 'width': '100%',
- 'white-space': 'pre-wrap',
- 'font-size': this.props.fontSize,
- 'line-height': this.props.lineHeight,
- });
- }
- }
-
- render() {
- const {
- scrollTracking,
- } = this.state;
- return (
- <>
-
- {!scrollTracking && (
-
- )}
-
- );
- }
-}
diff --git a/tgui/packages/tgui-panel/chat/ChatTabs.js b/tgui/packages/tgui-panel/chat/ChatTabs.js
deleted file mode 100644
index a0e6cc59e52..00000000000
--- a/tgui/packages/tgui-panel/chat/ChatTabs.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { useDispatch, useSelector } from 'common/redux';
-import { Box, Tabs, Flex, Button } from 'tgui/components';
-import { changeChatPage, addChatPage } from './actions';
-import { selectChatPages, selectCurrentChatPage } from './selectors';
-import { openChatSettings } from '../settings/actions';
-
-const UnreadCountWidget = ({ value }) => (
-
- {Math.min(value, 99)}
-
-);
-
-export const ChatTabs = (props, context) => {
- const pages = useSelector(context, selectChatPages);
- const currentPage = useSelector(context, selectCurrentChatPage);
- const dispatch = useDispatch(context);
- return (
-
-
-
- {pages.map(page => (
- 0 && (
-
- )}
- onClick={() => dispatch(changeChatPage({
- pageId: page.id,
- }))}>
- {page.name}
-
- ))}
-
-
-
-
-
- );
-};
diff --git a/tgui/packages/tgui-panel/chat/actions.js b/tgui/packages/tgui-panel/chat/actions.js
deleted file mode 100644
index e9919fcfa2b..00000000000
--- a/tgui/packages/tgui-panel/chat/actions.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { createAction } from 'common/redux';
-import { createPage } from './model';
-
-export const loadChat = createAction('chat/load');
-export const rebuildChat = createAction('chat/rebuild');
-export const updateMessageCount = createAction('chat/updateMessageCount');
-export const addChatPage = createAction('chat/addPage', () => ({
- payload: createPage(),
-}));
-export const changeChatPage = createAction('chat/changePage');
-export const updateChatPage = createAction('chat/updatePage');
-export const toggleAcceptedType = createAction('chat/toggleAcceptedType');
-export const removeChatPage = createAction('chat/removePage');
-export const changeScrollTracking = createAction('chat/changeScrollTracking');
-export const saveChatToDisk = createAction('chat/saveToDisk');
diff --git a/tgui/packages/tgui-panel/chat/constants.js b/tgui/packages/tgui-panel/chat/constants.js
deleted file mode 100644
index d2e472dc071..00000000000
--- a/tgui/packages/tgui-panel/chat/constants.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export const MAX_VISIBLE_MESSAGES = 2500;
-export const MAX_PERSISTED_MESSAGES = 1000;
-export const MESSAGE_SAVE_INTERVAL = 10000;
-export const MESSAGE_PRUNE_INTERVAL = 60000;
-export const COMBINE_MAX_MESSAGES = 5;
-export const COMBINE_MAX_TIME_WINDOW = 5000;
-export const IMAGE_RETRY_DELAY = 250;
-export const IMAGE_RETRY_LIMIT = 10;
-export const IMAGE_RETRY_MESSAGE_AGE = 60000;
-
-// Default message type
-export const MESSAGE_TYPE_UNKNOWN = 'unknown';
-
-// Internal message type
-export const MESSAGE_TYPE_INTERNAL = 'internal';
-
-// Must match the set of defines in code/__DEFINES/chat.dm
-export const MESSAGE_TYPE_SYSTEM = 'system';
-export const MESSAGE_TYPE_LOCALCHAT = 'localchat';
-export const MESSAGE_TYPE_RADIO = 'radio';
-export const MESSAGE_TYPE_INFO = 'info';
-export const MESSAGE_TYPE_WARNING = 'warning';
-export const MESSAGE_TYPE_DEADCHAT = 'deadchat';
-export const MESSAGE_TYPE_OOC = 'ooc';
-export const MESSAGE_TYPE_ADMINPM = 'adminpm';
-export const MESSAGE_TYPE_COMBAT = 'combat';
-export const MESSAGE_TYPE_ADMINCHAT = 'adminchat';
-export const MESSAGE_TYPE_MODCHAT = 'modchat';
-export const MESSAGE_TYPE_EVENTCHAT = 'eventchat';
-export const MESSAGE_TYPE_ADMINLOG = 'adminlog';
-export const MESSAGE_TYPE_ATTACKLOG = 'attacklog';
-export const MESSAGE_TYPE_DEBUG = 'debug';
-
-// Metadata for each message type
-export const MESSAGE_TYPES = [
- // Always-on types
- {
- type: MESSAGE_TYPE_SYSTEM,
- name: 'System Messages',
- description: 'Messages from your client, always enabled',
- selector: '.boldannounce',
- important: true,
- },
- // Basic types
- {
- type: MESSAGE_TYPE_LOCALCHAT,
- name: 'Local',
- description: 'In-character local messages (say, emote, etc)',
- selector: '.say, .emote',
- },
- {
- type: MESSAGE_TYPE_RADIO,
- name: 'Radio',
- description: 'All departments of radio messages',
- selector: '.alert, .minorannounce, .syndradio, .centcomradio, .aiprivradio, .comradio, .secradio, .engradio, .medradio, .sciradio, .suppradio, .servradio, .radio, .deptradio, .binarysay, .newscaster, .resonate',
- },
- {
- type: MESSAGE_TYPE_INFO,
- name: 'Info',
- description: 'Non-urgent messages from the game and items',
- selector: '.notice:not(.pm), .adminnotice, .info, .sinister, .cult, .infoplain, .announce, .hear, .smallnotice, .holoparasite',
- },
- {
- type: MESSAGE_TYPE_WARNING,
- name: 'Warnings',
- description: 'Urgent messages from the game and items',
- selector: '.warning:not(.pm), .critical, .userdanger, .italics, .alertsyndie, .warningplain',
- },
- {
- type: MESSAGE_TYPE_DEADCHAT,
- name: 'Deadchat',
- description: 'All of deadchat',
- selector: '.deadsay, .ghostalert',
- },
- {
- type: MESSAGE_TYPE_OOC,
- name: 'OOC',
- description: 'The bluewall of global OOC messages',
- selector: '.ooc, .adminooc, .oocplain',
- },
- {
- type: MESSAGE_TYPE_ADMINPM,
- name: 'Admin PMs',
- description: 'Messages to/from admins (adminhelp)',
- selector: '.pm, .adminhelp',
- },
- {
- type: MESSAGE_TYPE_COMBAT,
- name: 'Combat Log',
- description: 'Urist McTraitor has stabbed you with a knife!',
- selector: '.danger',
- },
- {
- type: MESSAGE_TYPE_UNKNOWN,
- name: 'Unsorted',
- description: 'Everything we could not sort, always enabled',
- },
- // Admin stuff
- {
- type: MESSAGE_TYPE_ADMINCHAT,
- name: 'Admin Chat',
- description: 'ASAY messages',
- selector: '.admin_channel, .adminsay',
- admin: true,
- },
- {
- type: MESSAGE_TYPE_MODCHAT,
- name: 'Mod Chat',
- description: 'MSAY messages',
- selector: '.mod_channel',
- admin: true,
- },
- {
- type: MESSAGE_TYPE_ADMINLOG,
- name: 'Admin Log',
- description: 'ADMIN LOG: Urist McAdmin has jumped to coordinates X, Y, Z',
- selector: '.log_message',
- admin: true,
- },
- {
- type: MESSAGE_TYPE_ATTACKLOG,
- name: 'Attack Log',
- description: 'Urist McTraitor has shot John Doe',
- admin: true,
- },
- {
- type: MESSAGE_TYPE_DEBUG,
- name: 'Debug Log',
- description: 'DEBUG: SSPlanets subsystem Recover().',
- admin: true,
- },
-];
diff --git a/tgui/packages/tgui-panel/chat/index.js b/tgui/packages/tgui-panel/chat/index.js
deleted file mode 100644
index d5ad6fa9216..00000000000
--- a/tgui/packages/tgui-panel/chat/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export { ChatPageSettings } from './ChatPageSettings';
-export { ChatPanel } from './ChatPanel';
-export { ChatTabs } from './ChatTabs';
-export { chatMiddleware } from './middleware';
-export { chatReducer } from './reducer';
diff --git a/tgui/packages/tgui-panel/chat/middleware.js b/tgui/packages/tgui-panel/chat/middleware.js
deleted file mode 100644
index 88a896b9920..00000000000
--- a/tgui/packages/tgui-panel/chat/middleware.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import DOMPurify from 'dompurify';
-import { storage } from 'common/storage';
-import { loadSettings, updateSettings } from '../settings/actions';
-import { selectSettings } from '../settings/selectors';
-import { addChatPage, changeChatPage, changeScrollTracking, loadChat, rebuildChat, removeChatPage, saveChatToDisk, toggleAcceptedType, updateMessageCount } from './actions';
-import { MAX_PERSISTED_MESSAGES, MESSAGE_SAVE_INTERVAL } from './constants';
-import { createMessage, serializeMessage } from './model';
-import { chatRenderer } from './renderer';
-import { selectChat, selectCurrentChatPage } from './selectors';
-
-// List of blacklisted tags
-const FORBID_TAGS = [
- 'a',
- 'iframe',
- 'link',
- 'video',
-];
-
-const saveChatToStorage = async store => {
- const state = selectChat(store.getState());
- const fromIndex = Math.max(0,
- chatRenderer.messages.length - MAX_PERSISTED_MESSAGES);
- const messages = chatRenderer.messages
- .slice(fromIndex)
- .map(message => serializeMessage(message));
- storage.set('chat-state', state);
- storage.set('chat-messages', messages);
-};
-
-const loadChatFromStorage = async store => {
- const [state, messages] = await Promise.all([
- storage.get('chat-state'),
- storage.get('chat-messages'),
- ]);
- // Discard incompatible versions
- if (state && state.version <= 4) {
- store.dispatch(loadChat());
- return;
- }
- if (messages) {
- for (let message of messages) {
- if (message.html) {
- message.html = DOMPurify.sanitize(message.html, {
- FORBID_TAGS,
- });
- }
- }
- const batch = [
- ...messages,
- createMessage({
- type: 'internal/reconnected',
- }),
- ];
- chatRenderer.processBatch(batch, {
- prepend: true,
- });
- }
- store.dispatch(loadChat(state));
-};
-
-export const chatMiddleware = store => {
- let initialized = false;
- let loaded = false;
- chatRenderer.events.on('batchProcessed', countByType => {
- // Use this flag to workaround unread messages caused by
- // loading them from storage. Side effect of that, is that
- // message count can not be trusted, only unread count.
- if (loaded) {
- store.dispatch(updateMessageCount(countByType));
- }
- });
- chatRenderer.events.on('scrollTrackingChanged', scrollTracking => {
- store.dispatch(changeScrollTracking(scrollTracking));
- });
- setInterval(() => saveChatToStorage(store), MESSAGE_SAVE_INTERVAL);
- return next => action => {
- const { type, payload } = action;
- if (!initialized) {
- initialized = true;
- loadChatFromStorage(store);
- }
- if (type === 'chat/message') {
- // Normalize the payload
- const batch = Array.isArray(payload) ? payload : [payload];
- chatRenderer.processBatch(batch);
- return;
- }
- if (type === loadChat.type) {
- next(action);
- const page = selectCurrentChatPage(store.getState());
- chatRenderer.changePage(page);
- chatRenderer.onStateLoaded();
- loaded = true;
- return;
- }
- if (type === changeChatPage.type
- || type === addChatPage.type
- || type === removeChatPage.type
- || type === toggleAcceptedType.type) {
- next(action);
- const page = selectCurrentChatPage(store.getState());
- chatRenderer.changePage(page);
- return;
- }
- if (type === rebuildChat.type) {
- chatRenderer.rebuildChat();
- return next(action);
- }
- if (type === updateSettings.type || type === loadSettings.type) {
- next(action);
- const settings = selectSettings(store.getState());
- chatRenderer.setHighlight(
- settings.highlightText,
- settings.highlightColor);
- return;
- }
- if (type === 'roundrestart') {
- // Save chat as soon as possible
- saveChatToStorage(store);
- return next(action);
- }
- if (type === saveChatToDisk.type) {
- chatRenderer.saveToDisk();
- return;
- }
- return next(action);
- };
-};
diff --git a/tgui/packages/tgui-panel/chat/model.js b/tgui/packages/tgui-panel/chat/model.js
deleted file mode 100644
index 035bd0cf278..00000000000
--- a/tgui/packages/tgui-panel/chat/model.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { createUuid } from 'common/uuid';
-import { MESSAGE_TYPES, MESSAGE_TYPE_INTERNAL } from './constants';
-
-export const canPageAcceptType = (page, type) => (
- type.startsWith(MESSAGE_TYPE_INTERNAL) || page.acceptedTypes[type]
-);
-
-export const createPage = obj => ({
- id: createUuid(),
- name: 'New Tab',
- acceptedTypes: {},
- unreadCount: 0,
- createdAt: Date.now(),
- ...obj,
-});
-
-export const createMainPage = () => {
- const acceptedTypes = {};
- for (let typeDef of MESSAGE_TYPES) {
- acceptedTypes[typeDef.type] = true;
- }
- return createPage({
- name: 'Main',
- acceptedTypes,
- });
-};
-
-export const createMessage = payload => ({
- createdAt: Date.now(),
- ...payload,
-});
-
-export const serializeMessage = message => ({
- type: message.type,
- text: message.text,
- html: message.html,
- times: message.times,
- createdAt: message.createdAt,
-});
-
-export const isSameMessage = (a, b) => (
- typeof a.text === 'string' && a.text === b.text
- || typeof a.html === 'string' && a.html === b.html
-);
diff --git a/tgui/packages/tgui-panel/chat/reducer.js b/tgui/packages/tgui-panel/chat/reducer.js
deleted file mode 100644
index 6342e0012fc..00000000000
--- a/tgui/packages/tgui-panel/chat/reducer.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { addChatPage, changeChatPage, loadChat, removeChatPage, toggleAcceptedType, updateChatPage, updateMessageCount, changeScrollTracking } from './actions';
-import { canPageAcceptType, createMainPage } from './model';
-
-const mainPage = createMainPage();
-
-export const initialState = {
- version: 5,
- currentPageId: mainPage.id,
- scrollTracking: true,
- pages: [
- mainPage.id,
- ],
- pageById: {
- [mainPage.id]: mainPage,
- },
-};
-
-export const chatReducer = (state = initialState, action) => {
- const { type, payload } = action;
- if (type === loadChat.type) {
- // Validate version and/or migrate state
- if (payload?.version !== state.version) {
- return state;
- }
- // Reset page message counts
- // NOTE: We are mutably changing the payload on the assumption
- // that it is a copy that comes straight from the web storage.
- for (let id of Object.keys(payload.pageById)) {
- const page = payload.pageById[id];
- page.unreadCount = 0;
- }
- return {
- ...state,
- ...payload,
- };
- }
- if (type === changeScrollTracking.type) {
- const scrollTracking = payload;
- const nextState = {
- ...state,
- scrollTracking,
- };
- if (scrollTracking) {
- const pageId = state.currentPageId;
- const page = {
- ...state.pageById[pageId],
- unreadCount: 0,
- };
- nextState.pageById = {
- ...state.pageById,
- [pageId]: page,
- };
- }
- return nextState;
- }
- if (type === updateMessageCount.type) {
- const countByType = payload;
- const pages = state.pages.map(id => state.pageById[id]);
- const currentPage = state.pageById[state.currentPageId];
- const nextPageById = { ...state.pageById };
- for (let page of pages) {
- let unreadCount = 0;
- for (let type of Object.keys(countByType)) {
- // Message does not belong here
- if (!canPageAcceptType(page, type)) {
- continue;
- }
- // Current page is scroll tracked
- if (page === currentPage && state.scrollTracking) {
- continue;
- }
- // This page received the same message which we can read
- // on the current page.
- if (page !== currentPage && canPageAcceptType(currentPage, type)) {
- continue;
- }
- unreadCount += countByType[type];
- }
- if (unreadCount > 0) {
- nextPageById[page.id] = {
- ...page,
- unreadCount: page.unreadCount + unreadCount,
- };
- }
- }
- return {
- ...state,
- pageById: nextPageById,
- };
- }
- if (type === addChatPage.type) {
- return {
- ...state,
- currentPageId: payload.id,
- pages: [...state.pages, payload.id],
- pageById: {
- ...state.pageById,
- [payload.id]: payload,
- },
- };
- }
- if (type === changeChatPage.type) {
- const { pageId } = payload;
- const page = {
- ...state.pageById[pageId],
- unreadCount: 0,
- };
- return {
- ...state,
- currentPageId: pageId,
- pageById: {
- ...state.pageById,
- [pageId]: page,
- },
- };
- }
- if (type === updateChatPage.type) {
- const { pageId, ...update } = payload;
- const page = {
- ...state.pageById[pageId],
- ...update,
- };
- return {
- ...state,
- pageById: {
- ...state.pageById,
- [pageId]: page,
- },
- };
- }
- if (type === toggleAcceptedType.type) {
- const { pageId, type } = payload;
- const page = { ...state.pageById[pageId] };
- page.acceptedTypes = { ...page.acceptedTypes };
- page.acceptedTypes[type] = !page.acceptedTypes[type];
- return {
- ...state,
- pageById: {
- ...state.pageById,
- [pageId]: page,
- },
- };
- }
- if (type === removeChatPage.type) {
- const { pageId } = payload;
- const nextState = {
- ...state,
- pages: [...state.pages],
- pageById: {
- ...state.pageById,
- },
- };
- delete nextState.pageById[pageId];
- nextState.pages = nextState.pages.filter(id => id !== pageId);
- if (nextState.pages.length === 0) {
- nextState.pages.push(mainPage.id);
- nextState.pageById[mainPage.id] = mainPage;
- nextState.currentPageId = mainPage.id;
- }
- if (!nextState.currentPageId || nextState.currentPageId === pageId) {
- nextState.currentPageId = nextState.pages[0];
- }
- return nextState;
- }
- return state;
-};
diff --git a/tgui/packages/tgui-panel/chat/renderer.js b/tgui/packages/tgui-panel/chat/renderer.js
deleted file mode 100644
index 6fc9da74739..00000000000
--- a/tgui/packages/tgui-panel/chat/renderer.js
+++ /dev/null
@@ -1,488 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { EventEmitter } from 'common/events';
-import { classes } from 'common/react';
-import { createLogger } from 'tgui/logging';
-import { COMBINE_MAX_MESSAGES, COMBINE_MAX_TIME_WINDOW, IMAGE_RETRY_DELAY, IMAGE_RETRY_LIMIT, IMAGE_RETRY_MESSAGE_AGE, MAX_PERSISTED_MESSAGES, MAX_VISIBLE_MESSAGES, MESSAGE_PRUNE_INTERVAL, MESSAGE_TYPES, MESSAGE_TYPE_INTERNAL, MESSAGE_TYPE_UNKNOWN } from './constants';
-import { canPageAcceptType, createMessage, isSameMessage } from './model';
-import { highlightNode, linkifyNode } from './replaceInTextNode';
-
-const logger = createLogger('chatRenderer');
-
-// We consider this as the smallest possible scroll offset
-// that is still trackable.
-const SCROLL_TRACKING_TOLERANCE = 24;
-
-const findNearestScrollableParent = startingNode => {
- const body = document.body;
- let node = startingNode;
- while (node && node !== body) {
- // This definitely has a vertical scrollbar, because it reduces
- // scrollWidth of the element. Might not work if element uses
- // overflow: hidden.
- if (node.scrollWidth < node.offsetWidth) {
- return node;
- }
- node = node.parentNode;
- }
- return window;
-};
-
-const createHighlightNode = (text, color) => {
- const node = document.createElement('span');
- node.className = 'Chat__highlight';
- node.setAttribute('style', 'background-color:' + color);
- node.textContent = text;
- return node;
-};
-
-const createMessageNode = () => {
- const node = document.createElement('div');
- node.className = 'ChatMessage';
- return node;
-};
-
-const createReconnectedNode = () => {
- const node = document.createElement('div');
- node.className = 'Chat__reconnected';
- return node;
-};
-
-const handleImageError = e => {
- setTimeout(() => {
- /** @type {HTMLImageElement} */
- const node = e.target;
- const attempts = parseInt(node.getAttribute('data-reload-n'), 10) || 0;
- if (attempts >= IMAGE_RETRY_LIMIT) {
- logger.error(`failed to load an image after ${attempts} attempts`);
- return;
- }
- const src = node.src;
- node.src = null;
- node.src = src + '#' + attempts;
- node.setAttribute('data-reload-n', attempts + 1);
- }, IMAGE_RETRY_DELAY);
-};
-
-/**
- * Assigns a "times-repeated" badge to the message.
- */
-const updateMessageBadge = message => {
- const { node, times } = message;
- if (!node || !times) {
- // Nothing to update
- return;
- }
- const foundBadge = node.querySelector('.Chat__badge');
- const badge = foundBadge || document.createElement('div');
- badge.textContent = times;
- badge.className = classes([
- 'Chat__badge',
- 'Chat__badge--animate',
- ]);
- requestAnimationFrame(() => {
- badge.className = 'Chat__badge';
- });
- if (!foundBadge) {
- node.appendChild(badge);
- }
-};
-
-class ChatRenderer {
- constructor() {
- /** @type {HTMLElement} */
- this.loaded = false;
- /** @type {HTMLElement} */
- this.rootNode = null;
- this.queue = [];
- this.messages = [];
- this.visibleMessages = [];
- this.page = null;
- this.events = new EventEmitter();
- // Scroll handler
- /** @type {HTMLElement} */
- this.scrollNode = null;
- this.scrollTracking = true;
- this.handleScroll = type => {
- const node = this.scrollNode;
- const height = node.scrollHeight;
- const bottom = node.scrollTop + node.offsetHeight;
- const scrollTracking = (
- Math.abs(height - bottom) < SCROLL_TRACKING_TOLERANCE
- );
- if (scrollTracking !== this.scrollTracking) {
- this.scrollTracking = scrollTracking;
- this.events.emit('scrollTrackingChanged', scrollTracking);
- logger.debug('tracking', this.scrollTracking);
- }
- };
- this.ensureScrollTracking = () => {
- if (this.scrollTracking) {
- this.scrollToBottom();
- }
- };
- // Periodic message pruning
- setInterval(() => this.pruneMessages(), MESSAGE_PRUNE_INTERVAL);
- }
-
- isReady() {
- return this.loaded && this.rootNode && this.page;
- }
-
- mount(node) {
- // Mount existing root node on top of the new node
- if (this.rootNode) {
- node.appendChild(this.rootNode);
- }
- // Initialize the root node
- else {
- this.rootNode = node;
- }
- // Find scrollable parent
- this.scrollNode = findNearestScrollableParent(this.rootNode);
- this.scrollNode.addEventListener('scroll', this.handleScroll);
- setImmediate(() => {
- this.scrollToBottom();
- });
- // Flush the queue
- this.tryFlushQueue();
- }
-
- onStateLoaded() {
- this.loaded = true;
- this.tryFlushQueue();
- }
-
- tryFlushQueue() {
- if (this.isReady() && this.queue.length > 0) {
- this.processBatch(this.queue);
- this.queue = [];
- }
- }
-
- assignStyle(style = {}) {
- for (let key of Object.keys(style)) {
- this.rootNode.style.setProperty(key, style[key]);
- }
- }
-
- setHighlight(text, color) {
- if (!text || !color) {
- this.highlightRegex = null;
- this.highlightColor = null;
- return;
- }
- const allowedRegex = /^[a-z0-9_\-\s]+$/ig;
- const lines = String(text)
- .split(',')
- .map(str => str.trim())
- .filter(str => (
- // Must be longer than one character
- str && str.length > 1
- // Must be alphanumeric (with some punctuation)
- && allowedRegex.test(str)
- ));
- // Nothing to match, reset highlighting
- if (lines.length === 0) {
- this.highlightRegex = null;
- this.highlightColor = null;
- return;
- }
- this.highlightRegex = new RegExp('(' + lines.join('|') + ')', 'gi');
- this.highlightColor = color;
- }
-
- scrollToBottom() {
- // scrollHeight is always bigger than scrollTop and is
- // automatically clamped to the valid range.
- this.scrollNode.scrollTop = this.scrollNode.scrollHeight;
- }
-
- changePage(page) {
- if (!this.isReady()) {
- this.page = page;
- this.tryFlushQueue();
- return;
- }
- this.page = page;
- // Fast clear of the root node
- this.rootNode.textContent = '';
- this.visibleMessages = [];
- // Re-add message nodes
- const fragment = document.createDocumentFragment();
- let node;
- for (let message of this.messages) {
- if (canPageAcceptType(page, message.type)) {
- node = message.node;
- fragment.appendChild(node);
- this.visibleMessages.push(message);
- }
- }
- if (node) {
- this.rootNode.appendChild(fragment);
- node.scrollIntoView();
- }
- }
-
- getCombinableMessage(predicate) {
- const now = Date.now();
- const len = this.visibleMessages.length;
- const from = len - 1;
- const to = Math.max(0, len - COMBINE_MAX_MESSAGES);
- for (let i = from; i >= to; i--) {
- const message = this.visibleMessages[i];
- const matches = (
- // Is not an internal message
- !message.type.startsWith(MESSAGE_TYPE_INTERNAL)
- // Text payload must fully match
- && isSameMessage(message, predicate)
- // Must land within the specified time window
- && now < message.createdAt + COMBINE_MAX_TIME_WINDOW
- );
- if (matches) {
- return message;
- }
- }
- return null;
- }
-
- processBatch(batch, options = {}) {
- const {
- prepend,
- notifyListeners = true,
- } = options;
- const now = Date.now();
- // Queue up messages until chat is ready
- if (!this.isReady()) {
- if (prepend) {
- this.queue = [...batch, ...this.queue];
- }
- else {
- this.queue = [...this.queue, ...batch];
- }
- return;
- }
- // Insert messages
- const fragment = document.createDocumentFragment();
- const countByType = {};
- let node;
- for (let payload of batch) {
- const message = createMessage(payload);
- // Combine messages
- const combinable = this.getCombinableMessage(message);
- if (combinable) {
- combinable.times = (combinable.times || 1) + 1;
- updateMessageBadge(combinable);
- continue;
- }
- // Reuse message node
- if (message.node) {
- node = message.node;
- }
- // Reconnected
- else if (message.type === 'internal/reconnected') {
- node = createReconnectedNode();
- }
- // Create message node
- else {
- node = createMessageNode();
- // Payload is plain text
- if (message.text) {
- node.textContent = message.text;
- }
- // Payload is HTML
- else if (message.html) {
- node.innerHTML = message.html;
- }
- else {
- logger.error('Error: message is missing text payload', message);
- }
- // Highlight text
- if (!message.avoidHighlighting && this.highlightRegex) {
- const highlighted = highlightNode(node,
- this.highlightRegex,
- text => (
- createHighlightNode(text, this.highlightColor)
- ));
- if (highlighted) {
- node.className += ' ChatMessage--highlighted';
- }
- }
- // Linkify text
- const linkifyNodes = node.querySelectorAll('.linkify');
- for (let i = 0; i < linkifyNodes.length; ++i) {
- linkifyNode(linkifyNodes[i]);
- }
- // Assign an image error handler
- if (now < message.createdAt + IMAGE_RETRY_MESSAGE_AGE) {
- const imgNodes = node.querySelectorAll('img');
- for (let i = 0; i < imgNodes.length; i++) {
- const imgNode = imgNodes[i];
- imgNode.addEventListener('error', handleImageError);
- }
- }
- }
- // Store the node in the message
- message.node = node;
- // Query all possible selectors to find out the message type
- if (!message.type) {
- // IE8: Does not support querySelector on elements that
- // are not yet in the document.
- 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);
- if (!countByType[message.type]) {
- countByType[message.type] = 0;
- }
- countByType[message.type] += 1;
- // TODO: Detect duplicates
- this.messages.push(message);
- if (canPageAcceptType(this.page, message.type)) {
- fragment.appendChild(node);
- this.visibleMessages.push(message);
- }
- }
- if (node) {
- const firstChild = this.rootNode.childNodes[0];
- if (prepend && firstChild) {
- this.rootNode.insertBefore(fragment, firstChild);
- }
- else {
- this.rootNode.appendChild(fragment);
- }
- if (this.scrollTracking) {
- setImmediate(() => this.scrollToBottom());
- }
- }
- // Notify listeners that we have processed the batch
- if (notifyListeners) {
- this.events.emit('batchProcessed', countByType);
- }
- }
-
- pruneMessages() {
- if (!this.isReady()) {
- return;
- }
- // Delay pruning because user is currently interacting
- // with chat history
- if (!this.scrollTracking) {
- logger.debug('pruning delayed');
- return;
- }
- // Visible messages
- {
- const messages = this.visibleMessages;
- const fromIndex = Math.max(0,
- messages.length - MAX_VISIBLE_MESSAGES);
- if (fromIndex > 0) {
- this.visibleMessages = messages.slice(fromIndex);
- for (let i = 0; i < fromIndex; i++) {
- const message = messages[i];
- this.rootNode.removeChild(message.node);
- // Mark this message as pruned
- message.node = 'pruned';
- }
- // Remove pruned messages from the message array
- this.messages = this.messages.filter(message => (
- message.node !== 'pruned'
- ));
- logger.log(`pruned ${fromIndex} visible messages`);
- }
- }
- // All messages
- {
- const fromIndex = Math.max(0,
- this.messages.length - MAX_PERSISTED_MESSAGES);
- if (fromIndex > 0) {
- this.messages = this.messages.slice(fromIndex);
- logger.log(`pruned ${fromIndex} stored messages`);
- }
- }
- }
-
- rebuildChat() {
- if (!this.isReady()) {
- return;
- }
- // Make a copy of messages
- const fromIndex = Math.max(0,
- this.messages.length - MAX_PERSISTED_MESSAGES);
- const messages = this.messages.slice(fromIndex);
- // Remove existing nodes
- for (let message of messages) {
- message.node = undefined;
- }
- // Fast clear of the root node
- this.rootNode.textContent = '';
- this.messages = [];
- this.visibleMessages = [];
- // Repopulate the chat log
- this.processBatch(messages, {
- notifyListeners: false,
- });
- }
-
- saveToDisk() {
- // Allow only on IE11
- if (Byond.IS_LTE_IE10) {
- return;
- }
- // Compile currently loaded stylesheets as CSS text
- let cssText = '';
- const styleSheets = document.styleSheets;
- for (let i = 0; i < styleSheets.length; i++) {
- const cssRules = styleSheets[i].cssRules;
- for (let i = 0; i < cssRules.length; i++) {
- const rule = cssRules[i];
- cssText += rule.cssText + '\n';
- }
- }
- cssText += 'body, html { background-color: #141414 }\n';
- // Compile chat log as HTML text
- let messagesHtml = '';
- for (let message of this.visibleMessages) {
- if (message.node) {
- messagesHtml += message.node.outerHTML + '\n';
- }
- }
- // Create a page
- 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()
- .toISOString()
- .substring(0, 19)
- .replace(/[-:]/g, '')
- .replace('T', '-');
- window.navigator.msSaveBlob(blob, `ss13-chatlog-${timestamp}.html`);
- }
-}
-
-// Make chat renderer global so that we can continue using the same
-// instance after hot code replacement.
-if (!window.__chatRenderer__) {
- window.__chatRenderer__ = new ChatRenderer();
-}
-
-/** @type {ChatRenderer} */
-export const chatRenderer = window.__chatRenderer__;
diff --git a/tgui/packages/tgui-panel/chat/replaceInTextNode.js b/tgui/packages/tgui-panel/chat/replaceInTextNode.js
deleted file mode 100644
index 0db2b2193e8..00000000000
--- a/tgui/packages/tgui-panel/chat/replaceInTextNode.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-/**
- * Replaces text matching a regular expression with a custom node.
- */
-export const replaceInTextNode = (regex, createNode) => node => {
- const text = node.textContent;
- const textLength = text.length;
- let match;
- let lastIndex = 0;
- let fragment;
- let n = 0;
- // eslint-disable-next-line no-cond-assign
- while (match = regex.exec(text)) {
- n += 1;
- // Lazy init fragment
- if (!fragment) {
- fragment = document.createDocumentFragment();
- }
- const matchText = match[0];
- const matchLength = matchText.length;
- const matchIndex = match.index;
- // Insert previous unmatched chunk
- if (lastIndex < matchIndex) {
- fragment.appendChild(document.createTextNode(
- text.substring(lastIndex, matchIndex)));
- }
- lastIndex = matchIndex + matchLength;
- // Create a wrapper node
- fragment.appendChild(createNode(matchText));
- }
- if (fragment) {
- // Insert the remaining unmatched chunk
- if (lastIndex < textLength) {
- fragment.appendChild(document.createTextNode(
- text.substring(lastIndex, textLength)));
- }
- // Commit the fragment
- node.parentNode.replaceChild(fragment, node);
- }
- return n;
-};
-
-
-// Highlight
-// --------------------------------------------------------
-
-/**
- * Default highlight node.
- */
-const createHighlightNode = text => {
- const node = document.createElement('span');
- node.setAttribute('style',
- 'background-color:#fd4;color:#000');
- node.textContent = text;
- return node;
-};
-
-/**
- * Highlights the text in the node based on the provided regular expression.
- *
- * @param {Node} node Node which you want to process
- * @param {RegExp} regex Regular expression to highlight
- * @param {(text: string) => Node} createNode Highlight node creator
- * @returns {number} Number of matches
- */
-export const highlightNode = (
- node,
- regex,
- createNode = createHighlightNode,
-) => {
- if (!createNode) {
- createNode = createHighlightNode;
- }
- let n = 0;
- const childNodes = node.childNodes;
- for (let i = 0; i < childNodes.length; i++) {
- const node = childNodes[i];
- // Is a text node
- if (node.nodeType === 3) {
- n += replaceInTextNode(regex, createNode)(node);
- }
- else {
- n += highlightNode(node, regex, createNode);
- }
- }
- return n;
-};
-
-
-// Linkify
-// --------------------------------------------------------
-
-const URL_REGEX = /(?:(?:https?:\/\/)|(?:www\.))(?:[^ ]*?\.[^ ]*?)+[-A-Za-z0-9+&@#/%?=~_|$!:,.;()]+/ig;
-
-/**
- * Highlights the text in the node based on the provided regular expression.
- *
- * @param {Node} node Node which you want to process
- * @returns {number} Number of matches
- */
-export const linkifyNode = node => {
- let n = 0;
- const childNodes = node.childNodes;
- for (let i = 0; i < childNodes.length; i++) {
- const node = childNodes[i];
- const tag = String(node.nodeName).toLowerCase();
- // Is a text node
- if (node.nodeType === 3) {
- n += linkifyTextNode(node);
- }
- else if (tag !== 'a') {
- n += linkifyNode(node);
- }
- }
- return n;
-};
-
-const linkifyTextNode = replaceInTextNode(URL_REGEX, text => {
- const node = document.createElement('a');
- node.href = text;
- node.textContent = text;
- return node;
-});
diff --git a/tgui/packages/tgui-panel/chat/selectors.js b/tgui/packages/tgui-panel/chat/selectors.js
deleted file mode 100644
index 2bcc6531840..00000000000
--- a/tgui/packages/tgui-panel/chat/selectors.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { map } from 'common/collections';
-
-export const selectChat = state => state.chat;
-
-export const selectChatPages = state => (
- map(id => state.chat.pageById[id])(state.chat.pages)
-);
-
-export const selectCurrentChatPage = state => (
- state.chat.pageById[state.chat.currentPageId]
-);
-
-export const selectChatPageById = id => state => (
- state.chat.pageById[id]
-);
diff --git a/tgui/packages/tgui-panel/game/actions.js b/tgui/packages/tgui-panel/game/actions.js
deleted file mode 100644
index e40014c44b0..00000000000
--- a/tgui/packages/tgui-panel/game/actions.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { createAction } from 'common/redux';
-
-export const roundRestarted = createAction('roundrestart');
-export const connectionLost = createAction('game/connectionLost');
-export const connectionRestored = createAction('game/connectionRestored');
diff --git a/tgui/packages/tgui-panel/game/constants.js b/tgui/packages/tgui-panel/game/constants.js
deleted file mode 100644
index 9df3a58d294..00000000000
--- a/tgui/packages/tgui-panel/game/constants.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export const CONNECTION_LOST_AFTER = 15000;
diff --git a/tgui/packages/tgui-panel/game/hooks.js b/tgui/packages/tgui-panel/game/hooks.js
deleted file mode 100644
index e9567b916b4..00000000000
--- a/tgui/packages/tgui-panel/game/hooks.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { useSelector } from 'common/redux';
-import { selectGame } from './selectors';
-
-export const useGame = context => {
- return useSelector(context, selectGame);
-};
diff --git a/tgui/packages/tgui-panel/game/index.js b/tgui/packages/tgui-panel/game/index.js
deleted file mode 100644
index 3cca2e65577..00000000000
--- a/tgui/packages/tgui-panel/game/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export { useGame } from './hooks';
-export { gameMiddleware } from './middleware';
-export { gameReducer } from './reducer';
diff --git a/tgui/packages/tgui-panel/game/middleware.js b/tgui/packages/tgui-panel/game/middleware.js
deleted file mode 100644
index 854369dc54e..00000000000
--- a/tgui/packages/tgui-panel/game/middleware.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { pingSuccess } from '../ping/actions';
-import { connectionLost, connectionRestored, roundRestarted } from './actions';
-import { selectGame } from './selectors';
-import { CONNECTION_LOST_AFTER } from './constants';
-
-const withTimestamp = action => ({
- ...action,
- meta: {
- ...action.meta,
- now: Date.now(),
- },
-});
-
-export const gameMiddleware = store => {
- let lastPingedAt;
- setInterval(() => {
- const state = store.getState();
- if (!state) {
- return;
- }
- const game = selectGame(state);
- const pingsAreFailing = lastPingedAt
- && Date.now() >= lastPingedAt + CONNECTION_LOST_AFTER;
- if (!game.connectionLostAt && pingsAreFailing) {
- store.dispatch(withTimestamp(connectionLost()));
- }
- if (game.connectionLostAt && !pingsAreFailing) {
- store.dispatch(withTimestamp(connectionRestored()));
- }
- }, 1000);
- return next => action => {
- const { type, payload, meta } = action;
- if (type === pingSuccess.type) {
- lastPingedAt = meta.now;
- return next(action);
- }
- if (type === roundRestarted.type) {
- return next(withTimestamp(action));
- }
- return next(action);
- };
-};
diff --git a/tgui/packages/tgui-panel/game/reducer.js b/tgui/packages/tgui-panel/game/reducer.js
deleted file mode 100644
index 97535524c56..00000000000
--- a/tgui/packages/tgui-panel/game/reducer.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { connectionLost } from './actions';
-import { connectionRestored } from './actions';
-
-const initialState = {
- // TODO: This is where round info should be.
- roundId: null,
- roundTime: null,
- roundRestartedAt: null,
- connectionLostAt: null,
-};
-
-export const gameReducer = (state = initialState, action) => {
- const { type, payload, meta } = action;
- if (type === 'roundrestart') {
- return {
- ...state,
- roundRestartedAt: meta.now,
- };
- }
- if (type === connectionLost.type) {
- return {
- ...state,
- connectionLostAt: meta.now,
- };
- }
- if (type === connectionRestored.type) {
- return {
- ...state,
- connectionLostAt: null,
- };
- }
- return state;
-};
diff --git a/tgui/packages/tgui-panel/game/selectors.js b/tgui/packages/tgui-panel/game/selectors.js
deleted file mode 100644
index dc2d7040f9c..00000000000
--- a/tgui/packages/tgui-panel/game/selectors.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export const selectGame = state => state.game;
diff --git a/tgui/packages/tgui-panel/index.js b/tgui/packages/tgui-panel/index.js
deleted file mode 100644
index 721fa97fb50..00000000000
--- a/tgui/packages/tgui-panel/index.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-// Themes
-import './styles/main.scss';
-import './styles/themes/light.scss';
-
-import { perf } from 'common/perf';
-import { combineReducers } from 'common/redux';
-import { setupHotReloading } from 'tgui-dev-server/link/client.cjs';
-import { setupGlobalEvents } from 'tgui/events';
-import { captureExternalLinks } from 'tgui/links';
-import { createRenderer } from 'tgui/renderer';
-import { configureStore, StoreProvider } from 'tgui/store';
-import { audioMiddleware, audioReducer } from './audio';
-import { chatMiddleware, chatReducer } from './chat';
-import { gameMiddleware, gameReducer } from './game';
-import { setupPanelFocusHacks } from './panelFocus';
-import { pingMiddleware, pingReducer } from './ping';
-import { settingsMiddleware, settingsReducer } from './settings';
-import { telemetryMiddleware } from './telemetry';
-
-perf.mark('inception', window.performance?.timing?.navigationStart);
-perf.mark('init');
-
-const store = configureStore({
- reducer: combineReducers({
- audio: audioReducer,
- chat: chatReducer,
- game: gameReducer,
- ping: pingReducer,
- settings: settingsReducer,
- }),
- middleware: {
- pre: [
- chatMiddleware,
- pingMiddleware,
- telemetryMiddleware,
- settingsMiddleware,
- audioMiddleware,
- gameMiddleware,
- ],
- },
-});
-
-const renderApp = createRenderer(() => {
- const { Panel } = require('./Panel');
- return (
-
-
-
- );
-});
-
-const setupApp = () => {
- // Delay setup
- if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', setupApp);
- return;
- }
-
- setupGlobalEvents({
- ignoreWindowFocus: true,
- });
- setupPanelFocusHacks();
- captureExternalLinks();
-
- // Re-render UI on store updates
- store.subscribe(renderApp);
-
- // Dispatch incoming messages as store actions
- Byond.subscribe((type, payload) => store.dispatch({ type, payload }));
-
- // Unhide the panel
- Byond.winset('output', {
- 'is-visible': false,
- });
- Byond.winset('browseroutput', {
- 'is-visible': true,
- 'is-disabled': false,
- 'pos': '0x0',
- 'size': '0x0',
- });
-
- // Resize the panel to match the non-browser output
- Byond.winget('output').then(output => {
- Byond.winset('browseroutput', {
- 'size': output.size,
- });
- });
-
- // Enable hot module reloading
- if (module.hot) {
- setupHotReloading();
- module.hot.accept([
- './audio',
- './chat',
- './game',
- './Notifications',
- './Panel',
- './ping',
- './settings',
- './telemetry',
- ], () => {
- renderApp();
- });
- }
-};
-
-setupApp();
diff --git a/tgui/packages/tgui-panel/package.json b/tgui/packages/tgui-panel/package.json
deleted file mode 100644
index 347acc9a7fd..00000000000
--- a/tgui/packages/tgui-panel/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "private": true,
- "name": "tgui-panel",
- "version": "4.3.0",
- "dependencies": {
- "common": "workspace:*",
- "dompurify": "^2.3.8",
- "inferno": "^7.4.11",
- "tgui": "workspace:*",
- "tgui-dev-server": "workspace:*",
- "tgui-polyfill": "workspace:*"
- }
-}
diff --git a/tgui/packages/tgui-panel/panelFocus.js b/tgui/packages/tgui-panel/panelFocus.js
deleted file mode 100644
index 6922418c899..00000000000
--- a/tgui/packages/tgui-panel/panelFocus.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Basically, hacks from goonchat which try to keep the map focused at all
- * times, except for when some meaningful action happens o
- *
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { vecLength, vecSubtract } from 'common/vector';
-import { canStealFocus, globalEvents } from 'tgui/events';
-import { focusMap } from 'tgui/focus';
-
-// Empyrically determined number for the smallest possible
-// text you can select with the mouse.
-const MIN_SELECTION_DISTANCE = 10;
-
-const deferredFocusMap = () => setImmediate(() => focusMap());
-
-export const setupPanelFocusHacks = () => {
- let focusStolen = false;
- let clickStartPos = null;
- window.addEventListener('focusin', e => {
- focusStolen = canStealFocus(e.target);
- });
- window.addEventListener('mousedown', e => {
- clickStartPos = [e.screenX, e.screenY];
- });
- window.addEventListener('mouseup', e => {
- if (clickStartPos) {
- const clickEndPos = [e.screenX, e.screenY];
- const dist = vecLength(vecSubtract(clickEndPos, clickStartPos));
- if (dist >= MIN_SELECTION_DISTANCE) {
- focusStolen = true;
- }
- }
- if (!focusStolen) {
- deferredFocusMap();
- }
- });
- globalEvents.on('keydown', key => {
- if (key.isModifierKey()) {
- return;
- }
- deferredFocusMap();
- });
-};
diff --git a/tgui/packages/tgui-panel/ping/PingIndicator.js b/tgui/packages/tgui-panel/ping/PingIndicator.js
deleted file mode 100644
index b663cd3a180..00000000000
--- a/tgui/packages/tgui-panel/ping/PingIndicator.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { Color } from 'common/color';
-import { toFixed } from 'common/math';
-import { useSelector } from 'common/redux';
-import { Box } from 'tgui/components';
-import { selectPing } from './selectors';
-
-export const PingIndicator = (props, context) => {
- const ping = useSelector(context, selectPing);
- const color = Color.lookup(ping.networkQuality, [
- new Color(220, 40, 40),
- new Color(220, 200, 40),
- new Color(60, 220, 40),
- ]);
- const roundtrip = ping.roundtrip
- ? toFixed(ping.roundtrip)
- : '--';
- return (
-
-
- {roundtrip}
-
- );
-};
diff --git a/tgui/packages/tgui-panel/ping/actions.js b/tgui/packages/tgui-panel/ping/actions.js
deleted file mode 100644
index ba3582f131c..00000000000
--- a/tgui/packages/tgui-panel/ping/actions.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { createAction } from 'common/redux';
-
-export const pingSuccess = createAction(
- 'ping/success',
- ping => {
- const now = Date.now();
- const roundtrip = (now - ping.sentAt) * 0.5;
- return {
- payload: {
- lastId: ping.id,
- roundtrip,
- },
- meta: { now },
- };
- }
-);
-
-export const pingFail = createAction('ping/fail');
-export const pingReply = createAction('ping/reply');
diff --git a/tgui/packages/tgui-panel/ping/constants.js b/tgui/packages/tgui-panel/ping/constants.js
deleted file mode 100644
index 5d9a0472c5f..00000000000
--- a/tgui/packages/tgui-panel/ping/constants.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export const PING_INTERVAL = 2500;
-export const PING_TIMEOUT = 2000;
-export const PING_MAX_FAILS = 3;
-export const PING_QUEUE_SIZE = 8;
-export const PING_ROUNDTRIP_BEST = 50;
-export const PING_ROUNDTRIP_WORST = 200;
diff --git a/tgui/packages/tgui-panel/ping/index.js b/tgui/packages/tgui-panel/ping/index.js
deleted file mode 100644
index 1bbbe3ed344..00000000000
--- a/tgui/packages/tgui-panel/ping/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export { pingMiddleware } from './middleware';
-export { PingIndicator } from './PingIndicator';
-export { pingReducer } from './reducer';
diff --git a/tgui/packages/tgui-panel/ping/middleware.js b/tgui/packages/tgui-panel/ping/middleware.js
deleted file mode 100644
index 2d607c84174..00000000000
--- a/tgui/packages/tgui-panel/ping/middleware.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { pingFail, pingSuccess } from './actions';
-import { PING_INTERVAL, PING_QUEUE_SIZE, PING_TIMEOUT } from './constants';
-
-export const pingMiddleware = store => {
- let initialized = false;
- let index = 0;
- let interval;
- const pings = [];
- const sendPing = () => {
- for (let i = 0; i < PING_QUEUE_SIZE; i++) {
- const ping = pings[i];
- if (ping && Date.now() - ping.sentAt > PING_TIMEOUT) {
- pings[i] = null;
- store.dispatch(pingFail());
- }
- }
- const ping = { index, sentAt: Date.now() };
- pings[index] = ping;
- Byond.sendMessage('ping', { index });
- index = (index + 1) % PING_QUEUE_SIZE;
- };
- return next => action => {
- const { type, payload } = action;
- if (!initialized) {
- initialized = true;
- interval = setInterval(sendPing, PING_INTERVAL);
- sendPing();
- }
- if (type === 'roundrestart') {
- // Stop pinging because dreamseeker is currently reconnecting.
- // Topic calls in the middle of reconnect will crash the connection.
- clearInterval(interval);
- return next(action);
- }
- if (type === 'pingReply') {
- const { index } = payload;
- const ping = pings[index];
- // Received a timed out ping
- if (!ping) {
- return;
- }
- pings[index] = null;
- return next(pingSuccess(ping));
- }
- return next(action);
- };
-};
diff --git a/tgui/packages/tgui-panel/ping/reducer.js b/tgui/packages/tgui-panel/ping/reducer.js
deleted file mode 100644
index 22d146f8b81..00000000000
--- a/tgui/packages/tgui-panel/ping/reducer.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { clamp01, scale } from 'common/math';
-import { pingFail, pingSuccess } from './actions';
-import { PING_MAX_FAILS, PING_ROUNDTRIP_BEST, PING_ROUNDTRIP_WORST } from './constants';
-
-export const pingReducer = (state = {}, action) => {
- const { type, payload } = action;
- if (type === pingSuccess.type) {
- const { roundtrip } = payload;
- const prevRoundtrip = state.roundtripAvg || roundtrip;
- const roundtripAvg = Math.round(prevRoundtrip * 0.4 + roundtrip * 0.6);
- const networkQuality = 1 - scale(roundtripAvg,
- PING_ROUNDTRIP_BEST, PING_ROUNDTRIP_WORST);
- return {
- roundtrip,
- roundtripAvg,
- failCount: 0,
- networkQuality,
- };
- }
- if (type === pingFail.type) {
- const { failCount = 0 } = state;
- const networkQuality = clamp01(state.networkQuality
- - failCount / PING_MAX_FAILS);
- const nextState = {
- ...state,
- failCount: failCount + 1,
- networkQuality,
- };
- if (failCount > PING_MAX_FAILS) {
- nextState.roundtrip = undefined;
- nextState.roundtripAvg = undefined;
- }
- return nextState;
- }
- return state;
-};
diff --git a/tgui/packages/tgui-panel/ping/selectors.js b/tgui/packages/tgui-panel/ping/selectors.js
deleted file mode 100644
index cfbe95c2f32..00000000000
--- a/tgui/packages/tgui-panel/ping/selectors.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-export const selectPing = state => state.ping;
diff --git a/tgui/packages/tgui-panel/settings/SettingsPanel.js b/tgui/packages/tgui-panel/settings/SettingsPanel.js
deleted file mode 100644
index 46de4afc8fe..00000000000
--- a/tgui/packages/tgui-panel/settings/SettingsPanel.js
+++ /dev/null
@@ -1,177 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { toFixed } from 'common/math';
-import { useLocalState } from 'tgui/backend';
-import { useDispatch, useSelector } from 'common/redux';
-import { Box, Button, ColorBox, Divider, Dropdown, Flex, Input, LabeledList, NumberInput, Section, Stack, Tabs, TextArea } from 'tgui/components';
-import { ChatPageSettings } from '../chat';
-import { rebuildChat, saveChatToDisk } from '../chat/actions';
-import { THEMES } from '../themes';
-import { changeSettingsTab, updateSettings } from './actions';
-import { FONTS, SETTINGS_TABS } from './constants';
-import { selectActiveTab, selectSettings } from './selectors';
-
-export const SettingsPanel = (props, context) => {
- const activeTab = useSelector(context, selectActiveTab);
- const dispatch = useDispatch(context);
- return (
-
-
-
-
- {SETTINGS_TABS.map(tab => (
- dispatch(changeSettingsTab({
- tabId: tab.id,
- }))}>
- {tab.name}
-
- ))}
-
-
-
-
- {activeTab === 'general' && (
-
- )}
- {activeTab === 'chatPage' && (
-
- )}
-
-
- );
-};
-
-export const SettingsGeneral = (props, context) => {
- const {
- theme,
- fontFamily,
- fontSize,
- lineHeight,
- highlightText,
- highlightColor,
- } = useSelector(context, selectSettings);
- const dispatch = useDispatch(context);
- const [freeFont, setFreeFont] = useLocalState(context, "freeFont", false);
- return (
-