} */
+ this.dbPromise = new Promise((resolve, reject) => {
+ const indexedDB = window.indexedDB || window.msIndexedDB;
+ const req = indexedDB.open(INDEXED_DB_NAME, INDEXED_DB_VERSION);
+ req.onupgradeneeded = () => {
+ try {
+ req.result.createObjectStore(INDEXED_DB_STORE_NAME);
+ }
+ catch (err) {
+ reject(new Error('Failed to upgrade IDB: ' + req.error));
+ }
+ };
+ req.onsuccess = () => resolve(req.result);
+ req.onerror = () => {
+ reject(new Error('Failed to open IDB: ' + req.error));
+ };
+ });
+ }
+
+ getStore(mode) {
+ return this.dbPromise.then(db => db
+ .transaction(INDEXED_DB_STORE_NAME, mode)
+ .objectStore(INDEXED_DB_STORE_NAME));
+ }
+
+ async get(key) {
+ const store = await this.getStore(READ_ONLY);
+ return new Promise((resolve, reject) => {
+ const req = store.get(key);
+ req.onsuccess = () => resolve(req.result);
+ req.onerror = () => reject(req.error);
+ });
+ }
+
+ async set(key, value) {
+ // The reason we don't _save_ null is because IE 10 does
+ // not support saving the `null` type in IndexedDB. How
+ // ironic, given the bug below!
+ // See: https://github.com/mozilla/localForage/issues/161
+ if (value === null) {
+ value = undefined;
+ }
+ // NOTE: We deliberately make this operation transactionless
+ const store = await this.getStore(READ_WRITE);
+ store.put(value, key);
+ }
+
+ async remove(key) {
+ // NOTE: We deliberately make this operation transactionless
+ const store = await this.getStore(READ_WRITE);
+ store.delete(key);
+ }
+
+ async clear() {
+ // NOTE: We deliberately make this operation transactionless
+ const store = await this.getStore(READ_WRITE);
+ store.clear();
+ }
+}
+
export const storage = (
- testLocalStorage() && createLocalStorage()
- || createMock()
+ testIndexedDb() && new IndexedDbBackend()
+ || testLocalStorage() && new LocalStorageBackend()
+ || new MemoryBackend()
);
diff --git a/tgui/packages/common/timer.js b/tgui/packages/common/timer.js
index f4e26fa5aa..1177071b9c 100644
--- a/tgui/packages/common/timer.js
+++ b/tgui/packages/common/timer.js
@@ -27,3 +27,12 @@ export const debounce = (fn, time, immediate = false) => {
}
};
};
+
+/**
+ * Suspends an asynchronous function for N milliseconds.
+ *
+ * @param {number} time
+ */
+export const sleep = time => (
+ new Promise(resolve => setTimeout(resolve, time))
+);
diff --git a/tgui/packages/common/uuid.js b/tgui/packages/common/uuid.js
new file mode 100644
index 0000000000..7721af6494
--- /dev/null
+++ b/tgui/packages/common/uuid.js
@@ -0,0 +1,19 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+/**
+ * Creates a UUID v4 string
+ *
+ * @return {string}
+ */
+export const createUuid = () => {
+ let d = new Date().getTime();
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+ const r = (d + Math.random() * 16) % 16 | 0;
+ d = Math.floor(d / 16);
+ return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+ });
+};
diff --git a/tgui/packages/tgui-dev-server/dreamseeker.js b/tgui/packages/tgui-dev-server/dreamseeker.js
new file mode 100644
index 0000000000..c36fe55f28
--- /dev/null
+++ b/tgui/packages/tgui-dev-server/dreamseeker.js
@@ -0,0 +1,87 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import axios from 'axios';
+import { exec } from 'child_process';
+import { createLogger } from 'common/logging.js';
+import { promisify } from 'util';
+
+const logger = createLogger('dreamseeker');
+
+const instanceByPid = new Map();
+
+export class DreamSeeker {
+ constructor(pid, addr) {
+ this.pid = pid;
+ this.addr = addr;
+ this.client = axios.create({
+ baseURL: `http://${addr}/`,
+ });
+ }
+
+ topic(params = {}) {
+ const query = Object.keys(params)
+ .map(key => encodeURIComponent(key)
+ + '=' + encodeURIComponent(params[key]))
+ .join('&');
+ return this.client.get('/dummy?' + query);
+ }
+}
+
+/**
+ * @param {number[]} pids
+ * @returns {DreamSeeker[]}
+ */
+DreamSeeker.getInstancesByPids = async pids => {
+ if (process.platform !== 'win32') {
+ return [];
+ }
+ const instances = [];
+ const pidsToResolve = [];
+ for (let pid of pids) {
+ const instance = instanceByPid.get(pid);
+ if (instance) {
+ instances.push(instance);
+ }
+ else {
+ pidsToResolve.push(pid);
+ }
+ }
+ if (pidsToResolve.length > 0) {
+ try {
+ const command = 'netstat -a -n -o';
+ const { stdout } = await promisify(exec)(command);
+ // Line format:
+ // proto addr mask mode pid
+ const entries = stdout
+ .split('\r\n')
+ .filter(line => line.includes('LISTENING'))
+ .map(line => {
+ const words = line.match(/\S+/g);
+ return {
+ addr: words[1],
+ pid: parseInt(words[4], 10),
+ };
+ })
+ .filter(entry => pidsToResolve.includes(entry.pid));
+ const len = entries.length;
+ logger.log('found', len, plural('instance', len));
+ for (let entry of entries) {
+ const { pid, addr } = entry;
+ const instance = new DreamSeeker(pid, addr);
+ instances.push(instance);
+ instanceByPid.set(pid, instance);
+ }
+ }
+ catch (err) {
+ logger.error(err);
+ return [];
+ }
+ }
+ return instances;
+};
+
+const plural = (word, n) => n !== 1 ? word + 's' : word;
diff --git a/tgui/packages/tgui-dev-server/index.js b/tgui/packages/tgui-dev-server/index.js
index f4e8155d29..43acd87474 100644
--- a/tgui/packages/tgui-dev-server/index.js
+++ b/tgui/packages/tgui-dev-server/index.js
@@ -8,12 +8,15 @@ import { setupWebpack, getWebpackConfig } from './webpack.js';
import { reloadByondCache } from './reloader.js';
const noHot = process.argv.includes('--no-hot');
+const noTmp = process.argv.includes('--no-tmp');
const reloadOnce = process.argv.includes('--reload');
const setupServer = async () => {
const config = await getWebpackConfig({
mode: 'development',
hot: !noHot,
+ devServer: true,
+ useTmpFolder: !noTmp,
});
// Reload cache once
if (reloadOnce) {
diff --git a/tgui/packages/tgui-dev-server/link/client.js b/tgui/packages/tgui-dev-server/link/client.js
index 4671b340c5..5a4d2f6112 100644
--- a/tgui/packages/tgui-dev-server/link/client.js
+++ b/tgui/packages/tgui-dev-server/link/client.js
@@ -37,7 +37,7 @@ if (process.env.NODE_ENV !== 'production') {
window.onunload = () => socket && socket.close();
}
-const subscribe = fn => subscribers.push(fn);
+export const subscribe = fn => subscribers.push(fn);
/**
* A json serializer which handles circular references and other junk.
@@ -68,7 +68,10 @@ const serializeObject = obj => {
}
refs.push(value);
// Error object
- if (value instanceof Error) {
+ const isError = value instanceof Error || (
+ value.code && value.message && value.message.includes('Error')
+ );
+ if (isError) {
return {
__error__: true,
string: String(value),
@@ -88,7 +91,7 @@ const serializeObject = obj => {
return json;
};
-const sendRawMessage = msg => {
+export const sendMessage = msg => {
if (process.env.NODE_ENV !== 'production') {
const json = serializeObject(msg);
// Send message using WebSocket
@@ -109,8 +112,8 @@ const sendRawMessage = msg => {
else {
const DEV_SERVER_IP = process.env.DEV_SERVER_IP || '127.0.0.1';
const req = new XMLHttpRequest();
- req.open('POST', `http://${DEV_SERVER_IP}:3001`);
- req.timeout = 500;
+ req.open('POST', `http://${DEV_SERVER_IP}:3001`, true);
+ req.timeout = 250;
req.send(json);
}
}
@@ -119,7 +122,7 @@ const sendRawMessage = msg => {
export const sendLogEntry = (level, ns, ...args) => {
if (process.env.NODE_ENV !== 'production') {
try {
- sendRawMessage({
+ sendMessage({
type: 'log',
payload: {
level,
diff --git a/tgui/packages/tgui-dev-server/link/server.js b/tgui/packages/tgui-dev-server/link/server.js
index 94a79c9ad5..2586d77779 100644
--- a/tgui/packages/tgui-dev-server/link/server.js
+++ b/tgui/packages/tgui-dev-server/link/server.js
@@ -16,37 +16,108 @@ const DEBUG = process.argv.includes('--debug');
export { loadSourceMaps };
-export const setupLink = () => {
- logger.log('setting up');
- const wss = setupWebSocketLink();
- setupHttpLink();
- return {
- wss,
- };
-};
+export const setupLink = () => new LinkServer();
-export const broadcastMessage = (link, msg) => {
- const { wss } = link;
- const clients = [...wss.clients];
- logger.log(`broadcasting ${msg.type} to ${clients.length} clients`);
- for (let client of clients) {
- const json = JSON.stringify(msg);
- client.send(json);
+class LinkServer {
+ constructor() {
+ logger.log('setting up');
+ this.wss = null;
+ this.setupWebSocketLink();
+ this.setupHttpLink();
}
-};
+
+ // WebSocket-based client link
+ setupWebSocketLink() {
+ const port = 3000;
+ this.wss = new WebSocket.Server({ port });
+ this.wss.on('connection', ws => {
+ logger.log('client connected');
+ ws.on('message', json => {
+ const msg = deserializeObject(json);
+ this.handleLinkMessage(ws, msg);
+ });
+ ws.on('close', () => {
+ logger.log('client disconnected');
+ });
+ });
+ logger.log(`listening on port ${port} (WebSocket)`);
+ }
+
+ // One way HTTP-based client link for IE8
+ setupHttpLink() {
+ const port = 3001;
+ this.httpServer = http.createServer((req, res) => {
+ if (req.method === 'POST') {
+ let body = '';
+ req.on('data', chunk => {
+ body += chunk.toString();
+ });
+ req.on('end', () => {
+ const msg = deserializeObject(body);
+ this.handleLinkMessage(null, msg);
+ res.end();
+ });
+ return;
+ }
+ res.write('Hello');
+ res.end();
+ });
+ this.httpServer.listen(port);
+ logger.log(`listening on port ${port} (HTTP)`);
+ }
+
+ handleLinkMessage(ws, msg) {
+ const { type, payload } = msg;
+ if (type === 'log') {
+ const { level, ns, args } = payload;
+ // Skip debug messages
+ if (level <= 0 && !DEBUG) {
+ return;
+ }
+ directLog(ns, ...args.map(arg => {
+ if (typeof arg === 'object') {
+ return inspect(arg, {
+ depth: Infinity,
+ colors: true,
+ compact: 8,
+ });
+ }
+ return arg;
+ }));
+ return;
+ }
+ if (type === 'relay') {
+ for (let client of this.wss.clients) {
+ if (client === ws) {
+ continue;
+ }
+ this.sendMessage(client, msg);
+ }
+ return;
+ }
+ logger.log('unhandled message', msg);
+ }
+
+ sendMessage(ws, msg) {
+ ws.send(JSON.stringify(msg));
+ }
+
+ broadcastMessage(msg) {
+ const clients = [...this.wss.clients];
+ if (clients.length === 0) {
+ return;
+ }
+ logger.log(`broadcasting ${msg.type} to ${clients.length} clients`);
+ for (let client of clients) {
+ const json = JSON.stringify(msg);
+ client.send(json);
+ }
+ }
+}
const deserializeObject = str => {
return JSON.parse(str, (key, value) => {
if (typeof value === 'object' && value !== null) {
- if (value.__error__) {
- if (!value.stack) {
- return value.string;
- }
- return retrace(value.stack);
- }
- if (value.__number__) {
- return parseFloat(value.__number__);
- }
if (value.__undefined__) {
// NOTE: You should not rely on deserialized object's undefined,
// this is purely for inspection purposes.
@@ -54,80 +125,17 @@ const deserializeObject = str => {
[inspect.custom]: () => undefined,
};
}
+ if (value.__number__) {
+ return parseFloat(value.__number__);
+ }
+ if (value.__error__) {
+ if (!value.stack) {
+ return value.string;
+ }
+ return retrace(value.stack);
+ }
return value;
}
return value;
});
};
-
-const handleLinkMessage = msg => {
- const { type, payload } = msg;
-
- if (type === 'log') {
- const { level, ns, args } = payload;
- // Skip debug messages
- if (level <= 0 && !DEBUG) {
- return;
- }
- directLog(ns, ...args.map(arg => {
- if (typeof arg === 'object') {
- return inspect(arg, {
- depth: Infinity,
- colors: true,
- compact: 8,
- });
- }
- return arg;
- }));
- return;
- }
-
- logger.log('unhandled message', msg);
-};
-
-// WebSocket-based client link
-const setupWebSocketLink = () => {
- const port = 3000;
- const wss = new WebSocket.Server({ port });
-
- wss.on('connection', ws => {
- logger.log('client connected');
-
- ws.on('message', json => {
- const msg = deserializeObject(json);
- handleLinkMessage(msg);
- });
-
- ws.on('close', () => {
- logger.log('client disconnected');
- });
- });
-
- logger.log(`listening on port ${port} (WebSocket)`);
- return wss;
-};
-
-// One way HTTP-based client link for IE8
-const setupHttpLink = () => {
- const port = 3001;
-
- const server = http.createServer((req, res) => {
- if (req.method === 'POST') {
- let body = '';
- req.on('data', chunk => {
- body += chunk.toString();
- });
- req.on('end', () => {
- const msg = deserializeObject(body);
- handleLinkMessage(msg);
- res.end();
- });
- return;
- }
- res.write('Hello');
- res.end();
- });
-
- server.listen(port);
- logger.log(`listening on port ${port} (HTTP)`);
-};
diff --git a/tgui/packages/tgui-dev-server/package.json b/tgui/packages/tgui-dev-server/package.json
index e397fe3e0b..3e50a97f0e 100644
--- a/tgui/packages/tgui-dev-server/package.json
+++ b/tgui/packages/tgui-dev-server/package.json
@@ -1,9 +1,10 @@
{
"private": true,
"name": "tgui-dev-server",
- "version": "3.0.0",
+ "version": "4.1.0",
"type": "module",
"dependencies": {
+ "axios": "^0.19.2",
"glob": "^7.1.4",
"source-map": "^0.7.3",
"stacktrace-parser": "^0.1.7",
diff --git a/tgui/packages/tgui-dev-server/reloader.js b/tgui/packages/tgui-dev-server/reloader.js
index e33f7226b9..1271e67d2a 100644
--- a/tgui/packages/tgui-dev-server/reloader.js
+++ b/tgui/packages/tgui-dev-server/reloader.js
@@ -11,6 +11,7 @@ import { basename } from 'path';
import { promisify } from 'util';
import { resolveGlob, resolvePath } from './util.js';
import { regQuery } from './winreg.js';
+import { DreamSeeker } from './dreamseeker.js';
const logger = createLogger('reloader');
@@ -43,7 +44,7 @@ export const findCacheRoot = async () => {
const paths = await resolveGlob(pattern);
if (paths.length > 0) {
cacheRoot = paths[0];
- logger.log(`found cache at '${cacheRoot}'`);
+ onCacheRootFound(cacheRoot);
return cacheRoot;
}
}
@@ -58,13 +59,19 @@ export const findCacheRoot = async () => {
.replace(/\\$/, '')
.replace(/\\/g, '/')
+ '/cache';
- logger.log(`found cache at '${cacheRoot}'`);
+ onCacheRootFound(cacheRoot);
return cacheRoot;
}
}
logger.log('found no cache directories');
};
+const onCacheRootFound = cacheRoot => {
+ logger.log(`found cache at '${cacheRoot}'`);
+ // Plant dummy
+ fs.closeSync(fs.openSync(cacheRoot + '/dummy', 'w'));
+};
+
export const reloadByondCache = async bundleDir => {
const cacheRoot = await findCacheRoot();
if (!cacheRoot) {
@@ -76,10 +83,16 @@ export const reloadByondCache = async bundleDir => {
logger.log('found no tmp folder in cache');
return;
}
- const assets = await resolveGlob(bundleDir, './*.+(bundle|hot-update).*');
+ // Get dreamseeker instances
+ const pids = cacheDirs.map(cacheDir => (
+ parseInt(cacheDir.split('/cache/tmp').pop(), 10)
+ ));
+ const dssPromise = DreamSeeker.getInstancesByPids(pids);
+ // Copy assets
+ const assets = await resolveGlob(bundleDir, './*.+(bundle|chunk|hot-update).*');
for (let cacheDir of cacheDirs) {
// Clear garbage
- const garbage = await resolveGlob(cacheDir, './*.+(bundle|hot-update).*');
+ const garbage = await resolveGlob(cacheDir, './*.+(bundle|chunk|hot-update).*');
for (let file of garbage) {
await promisify(fs.unlink)(file);
}
@@ -90,4 +103,15 @@ export const reloadByondCache = async bundleDir => {
}
logger.log(`copied ${assets.length} files to '${cacheDir}'`);
}
+ // Notify dreamseeker
+ const dss = await dssPromise;
+ if (dss.length > 0) {
+ logger.log(`notifying dreamseeker`);
+ for (let dreamseeker of dss) {
+ dreamseeker.topic({
+ tgui: 1,
+ type: 'cacheReloaded',
+ });
+ }
+ }
};
diff --git a/tgui/packages/tgui-dev-server/webpack.js b/tgui/packages/tgui-dev-server/webpack.js
index c625827409..7a1f600253 100644
--- a/tgui/packages/tgui-dev-server/webpack.js
+++ b/tgui/packages/tgui-dev-server/webpack.js
@@ -9,7 +9,7 @@ import fs from 'fs';
import { createRequire } from 'module';
import { promisify } from 'util';
import webpack from 'webpack';
-import { broadcastMessage, loadSourceMaps, setupLink } from './link/server.js';
+import { loadSourceMaps, setupLink } from './link/server.js';
import { reloadByondCache } from './reloader.js';
import { resolveGlob } from './util.js';
@@ -44,7 +44,7 @@ export const setupWebpack = async config => {
// Reload cache
await reloadByondCache(bundleDir);
// Notify all clients that update has happened
- broadcastMessage(link, {
+ link.broadcastMessage({
type: 'hotUpdate',
});
});
@@ -55,6 +55,9 @@ export const setupWebpack = async config => {
logger.error('compilation error', err);
return;
}
- logger.log(stats.toString(config.devServer.stats));
+ stats
+ .toString(config.devServer.stats)
+ .split('\n')
+ .forEach(line => logger.log(line));
});
};
diff --git a/tgui/packages/tgui-panel/Notifications.js b/tgui/packages/tgui-panel/Notifications.js
new file mode 100644
index 0000000000..a64ddd8e30
--- /dev/null
+++ b/tgui/packages/tgui-panel/Notifications.js
@@ -0,0 +1,41 @@
+/**
+ * @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
new file mode 100644
index 0000000000..d86a1fc8e8
--- /dev/null
+++ b/tgui/packages/tgui-panel/Panel.js
@@ -0,0 +1,142 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Button, Flex, Section } 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) => {
+ if (Byond.IS_LTE_IE8) {
+ 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.
+
+ )}
+
+
+
+
+
+ );
+};
+
+// IE8: Needs special treatment
+const HoboIE8Panel = (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
new file mode 100644
index 0000000000..654f2a6b7c
--- /dev/null
+++ b/tgui/packages/tgui-panel/audio/NowPlayingWidget.js
@@ -0,0 +1,69 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { toFixed } from 'common/math';
+import { useDispatch, useSelector } from 'common/redux';
+import { Fragment } from 'inferno';
+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
new file mode 100644
index 0000000000..17b29a9597
--- /dev/null
+++ b/tgui/packages/tgui-panel/audio/hooks.js
@@ -0,0 +1,17 @@
+/**
+ * @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
new file mode 100644
index 0000000000..ac7d4c2ca7
--- /dev/null
+++ b/tgui/packages/tgui-panel/audio/index.js
@@ -0,0 +1,10 @@
+/**
+ * @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
new file mode 100644
index 0000000000..c9a409aa93
--- /dev/null
+++ b/tgui/packages/tgui-panel/audio/middleware.js
@@ -0,0 +1,37 @@
+/**
+ * @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
new file mode 100644
index 0000000000..7848533e84
--- /dev/null
+++ b/tgui/packages/tgui-panel/audio/player.js
@@ -0,0 +1,117 @@
+/**
+ * @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
new file mode 100644
index 0000000000..17684060ff
--- /dev/null
+++ b/tgui/packages/tgui-panel/audio/reducer.js
@@ -0,0 +1,50 @@
+/**
+ * @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
new file mode 100644
index 0000000000..156f509cd7
--- /dev/null
+++ b/tgui/packages/tgui-panel/audio/selectors.js
@@ -0,0 +1,7 @@
+/**
+ * @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
new file mode 100644
index 0000000000..1f61e8093f
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/ChatPageSettings.js
@@ -0,0 +1,75 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { useDispatch, useSelector } from 'common/redux';
+import { Button, Collapsible, Divider, Flex, Input, Section } 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
new file mode 100644
index 0000000000..bf7eb90e6f
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/ChatPanel.js
@@ -0,0 +1,71 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { shallowDiffers } from 'common/react';
+import { Component, createRef, Fragment } 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
new file mode 100644
index 0000000000..a0e6cc59e5
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/ChatTabs.js
@@ -0,0 +1,61 @@
+/**
+ * @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
new file mode 100644
index 0000000000..e9919fcfa2
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/actions.js
@@ -0,0 +1,21 @@
+/**
+ * @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
new file mode 100644
index 0000000000..a21200a422
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/constants.js
@@ -0,0 +1,123 @@
+/**
+ * @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;
+
+export const MESSAGE_TYPES = [
+ // Always-on types
+ {
+ type: 'system',
+ name: 'System Messages',
+ description: 'Messages from your client, always enabled',
+ selector: '.boldannounce, .filter_system',
+ important: true,
+ },
+ // Basic types
+ {
+ type: 'localchat',
+ name: 'Local',
+ description: 'In-character local messages (say, emote, etc)',
+ selector: '.filter_say, .say, .emote',
+ },
+ {
+ type: 'radio',
+ name: 'Radio',
+ description: 'All departments of radio messages',
+ selector: '.filter_radio, .alert, .syndradio, .centradio, .airadio, .entradio, .comradio, .secradio, .engradio, .medradio, .sciradio, .supradio, .srvradio, .expradio, .radio, .deptradio, .newscaster',
+ },
+ {
+ type: 'info',
+ name: 'Info',
+ description: 'Non-urgent messages from the game and items',
+ selector: '.filter_notice, .notice:not(.pm), .adminnotice, .info, .sinister, .cult',
+ },
+ {
+ type: 'warning',
+ name: 'Warnings',
+ description: 'Urgent messages from the game and items',
+ selector: '.filter_warning, .warning:not(.pm), .critical, .userdanger, .italics',
+ },
+ {
+ type: 'deadchat',
+ name: 'Deadchat',
+ description: 'All of deadchat',
+ selector: '.filter_deadsay, .deadsay',
+ },
+ {
+ type: 'ooc',
+ name: 'OOC',
+ description: 'The bluewall of global OOC messages',
+ selector: '.filter_ooc, .ooc, .adminooc',
+ },
+ {
+ type: 'adminpm',
+ name: 'Admin PMs',
+ description: 'Messages to/from admins (adminhelp)',
+ selector: '.filter_pm, .pm',
+ },
+ {
+ type: 'combat',
+ name: 'Combat Log',
+ description: 'Urist McTraitor has stabbed you with a knife!',
+ selector: '.filter_combat, .danger',
+ },
+ {
+ type: 'unknown',
+ name: 'Unsorted',
+ description: 'Everything we could not sort, always enabled',
+ },
+ // Admin stuff
+ {
+ type: 'adminchat',
+ name: 'Admin Chat',
+ description: 'ASAY messages',
+ selector: '.filter_ASAY, .admin_channel',
+ admin: true,
+ },
+ {
+ type: 'modchat',
+ name: 'Mod Chat',
+ description: 'MSAY messages',
+ selector: '.filter_MSAY, .mod_channel',
+ admin: true,
+ },
+ {
+ type: 'eventchat',
+ name: 'Event Chat',
+ description: 'ESAY messages',
+ selector: '.filter_ESAY, .event_channel',
+ admin: true,
+ },
+ {
+ type: 'adminlog',
+ name: 'Admin Log',
+ description: 'ADMIN LOG: Urist McAdmin has jumped to coordinates X, Y, Z',
+ selector: '.filter_adminlog, .log_message',
+ admin: true,
+ },
+ {
+ type: 'attacklog',
+ name: 'Attack Log',
+ description: 'Urist McTraitor has shot John Doe',
+ selector: '.filter_attacklog',
+ admin: true,
+ },
+ {
+ type: 'debuglog',
+ name: 'Debug Log',
+ description: 'DEBUG: SSPlanets subsystem Recover().',
+ selector: '.filter_debuglog',
+ admin: true,
+ },
+];
diff --git a/tgui/packages/tgui-panel/chat/index.js b/tgui/packages/tgui-panel/chat/index.js
new file mode 100644
index 0000000000..d5ad6fa921
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/index.js
@@ -0,0 +1,11 @@
+/**
+ * @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
new file mode 100644
index 0000000000..c09602a0c6
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/middleware.js
@@ -0,0 +1,114 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { storage } from 'common/storage';
+import { loadSettings, updateSettings } from '../settings/actions';
+import { selectSettings } from '../settings/selectors';
+import { addChatPage, changeChatPage, changeScrollTracking, loadChat, rebuildChat, toggleAcceptedType, updateMessageCount, removeChatPage, saveChatToDisk } 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';
+import { logger } from 'tgui/logging';
+
+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'),
+ ]);
+ if (messages) {
+ 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
new file mode 100644
index 0000000000..b5a9836a51
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/model.js
@@ -0,0 +1,45 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { MESSAGE_TYPES } from './constants';
+import { createUuid } from 'common/uuid';
+
+export const canPageAcceptType = (page, type) => (
+ type.startsWith('internal') || page.acceptedTypes[type]
+);
+
+export const createPage = obj => ({
+ id: createUuid(),
+ name: 'New Tab',
+ acceptedTypes: {},
+ count: 0,
+ 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,
+ times: message.times,
+ createdAt: message.createdAt,
+});
diff --git a/tgui/packages/tgui-panel/chat/reducer.js b/tgui/packages/tgui-panel/chat/reducer.js
new file mode 100644
index 0000000000..b565fbcc8e
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/reducer.js
@@ -0,0 +1,168 @@
+/**
+ * @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: 4,
+ currentPage: 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.count = 0;
+ page.unreadCount = 0;
+ }
+ return {
+ ...state,
+ ...payload,
+ };
+ }
+ if (type === changeScrollTracking.type) {
+ const scrollTracking = payload;
+ const nextState = {
+ ...state,
+ scrollTracking,
+ };
+ if (scrollTracking) {
+ const pageId = state.currentPage;
+ 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 nextPageById = { ...state.pageById };
+ for (let page of pages) {
+ let count = 0;
+ let unreadCount = 0;
+ for (let type of Object.keys(countByType)) {
+ if (canPageAcceptType(page, type)) {
+ count += countByType[type];
+ if (page.id !== state.currentPage || !state.scrollTracking) {
+ unreadCount += countByType[type];
+ }
+ }
+ }
+ if (count > 0 || unreadCount > 0) {
+ nextPageById[page.id] = {
+ ...page,
+ count: page.count + count,
+ unreadCount: page.unreadCount + unreadCount,
+ };
+ }
+ }
+ return {
+ ...state,
+ pageById: nextPageById,
+ };
+ }
+ if (type === addChatPage.type) {
+ return {
+ ...state,
+ currentPage: 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,
+ currentPage: 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 currentPage = state.currentPage;
+ const nextState = {
+ ...state,
+ currentPage,
+ 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.currentPage = mainPage.id;
+ }
+ if (!nextState.currentPage || nextState.currentPage === pageId) {
+ nextState.currentPage = 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
new file mode 100644
index 0000000000..e8fc00b52d
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/renderer.js
@@ -0,0 +1,475 @@
+/**
+ * @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, PAGE_TEMPLATE } from './constants';
+import { canPageAcceptType, createMessage } 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('internal')
+ // Text payload must fully match
+ && message.text === predicate.text
+ // 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();
+ node.innerHTML = message.text;
+ // Highlight text
+ if (this.highlightRegex) {
+ const highlighted = highlightNode(node,
+ this.highlightRegex,
+ text => (
+ createHighlightNode(text, this.highlightColor)
+ ));
+ if (highlighted) {
+ node.className += ' ChatMessage--highlighted';
+ }
+ }
+ // Linkify text
+ linkifyNode(node);
+ // 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 || '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.messages) {
+ 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
new file mode 100644
index 0000000000..0db2b2193e
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/replaceInTextNode.js
@@ -0,0 +1,128 @@
+/**
+ * @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
new file mode 100644
index 0000000000..5d630f3e52
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/selectors.js
@@ -0,0 +1,21 @@
+/**
+ * @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.currentPage]
+);
+
+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
new file mode 100644
index 0000000000..e40014c44b
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/actions.js
@@ -0,0 +1,11 @@
+/**
+ * @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
new file mode 100644
index 0000000000..9df3a58d29
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/constants.js
@@ -0,0 +1,7 @@
+/**
+ * @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
new file mode 100644
index 0000000000..e9567b916b
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/hooks.js
@@ -0,0 +1,12 @@
+/**
+ * @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
new file mode 100644
index 0000000000..3cca2e6557
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/index.js
@@ -0,0 +1,9 @@
+/**
+ * @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
new file mode 100644
index 0000000000..854369dc54
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/middleware.js
@@ -0,0 +1,48 @@
+/**
+ * @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
new file mode 100644
index 0000000000..97535524c5
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/reducer.js
@@ -0,0 +1,39 @@
+/**
+ * @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
new file mode 100644
index 0000000000..dc2d7040f9
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/selectors.js
@@ -0,0 +1,7 @@
+/**
+ * @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
new file mode 100644
index 0000000000..1ce6030f14
--- /dev/null
+++ b/tgui/packages/tgui-panel/index.js
@@ -0,0 +1,127 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+// Polyfills
+import 'core-js/es';
+import 'core-js/web/immediate';
+import 'core-js/web/queue-microtask';
+import 'core-js/web/timers';
+import 'regenerator-runtime/runtime';
+import 'tgui-polyfill/html5shiv';
+import 'tgui-polyfill/ie8';
+import 'tgui-polyfill/dom4';
+import 'tgui-polyfill/css-om';
+import 'tgui-polyfill/inferno';
+
+// 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';
+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();
+
+ // Subscribe for Redux state updates
+ store.subscribe(renderApp);
+
+ // Subscribe for bankend updates
+ window.update = msg => store.dispatch(Byond.parseJson(msg));
+
+ // Process the early update queue
+ while (true) {
+ const msg = window.__updateQueue__.shift();
+ if (!msg) {
+ break;
+ }
+ window.update(msg);
+ }
+
+ // Unhide the panel
+ Byond.winset('output', {
+ 'is-visible': false,
+ });
+ Byond.winset('browseroutput', {
+ 'is-visible': true,
+ 'is-disabled': false,
+ 'pos': '0x0',
+ 'size': '0x0',
+ });
+
+ // 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
new file mode 100644
index 0000000000..36a31ac84a
--- /dev/null
+++ b/tgui/packages/tgui-panel/package.json
@@ -0,0 +1,6 @@
+{
+ "private": true,
+ "name": "tgui-panel",
+ "version": "4.2.0",
+ "type": "module"
+}
diff --git a/tgui/packages/tgui-panel/panelFocus.js b/tgui/packages/tgui-panel/panelFocus.js
new file mode 100644
index 0000000000..6922418c89
--- /dev/null
+++ b/tgui/packages/tgui-panel/panelFocus.js
@@ -0,0 +1,47 @@
+/**
+ * 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
new file mode 100644
index 0000000000..b663cd3a18
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/PingIndicator.js
@@ -0,0 +1,31 @@
+/**
+ * @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
new file mode 100644
index 0000000000..ba3582f131
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/actions.js
@@ -0,0 +1,25 @@
+/**
+ * @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
new file mode 100644
index 0000000000..5d9a0472c5
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/constants.js
@@ -0,0 +1,12 @@
+/**
+ * @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
new file mode 100644
index 0000000000..1bbbe3ed34
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/index.js
@@ -0,0 +1,9 @@
+/**
+ * @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
new file mode 100644
index 0000000000..fdd8410957
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/middleware.js
@@ -0,0 +1,50 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { sendMessage } from 'tgui/backend';
+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;
+ 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;
+ sendMessage({
+ type: 'ping',
+ payload: { index },
+ });
+ index = (index + 1) % PING_QUEUE_SIZE;
+ };
+ return next => action => {
+ const { type, payload } = action;
+ if (!initialized) {
+ initialized = true;
+ setInterval(sendPing, PING_INTERVAL);
+ sendPing();
+ }
+ 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
new file mode 100644
index 0000000000..22d146f8b8
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/reducer.js
@@ -0,0 +1,42 @@
+/**
+ * @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
new file mode 100644
index 0000000000..cfbe95c2f3
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/selectors.js
@@ -0,0 +1,7 @@
+/**
+ * @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
new file mode 100644
index 0000000000..7a4c81c2da
--- /dev/null
+++ b/tgui/packages/tgui-panel/settings/SettingsPanel.js
@@ -0,0 +1,142 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { toFixed } from 'common/math';
+import { useDispatch, useSelector } from 'common/redux';
+import { Box, Button, ColorBox, Divider, Dropdown, Flex, Input, LabeledList, NumberInput, Section, 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 { 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,
+ fontSize,
+ lineHeight,
+ highlightText,
+ highlightColor,
+ } = useSelector(context, selectSettings);
+ const dispatch = useDispatch(context);
+ return (
+