,
+ ) {
+ this.visibleMessageLimit = visibleMessageLimit;
+ this.combineMessageLimit = combineMessageLimit;
+ this.combineIntervalLimit = combineIntervalLimit;
+ this.logEnable = logEnable;
+ this.logLimit = logLimit;
+ this.storedTypes = storedTypes;
+ this.roundId = roundId;
+ this.prependTimestamps = prependTimestamps;
+ this.hideImportantInAdminTab = hideImportantInAdminTab;
+ this.interleaveEnabled = interleaveEnabled;
+ this.interleaveColor = interleaveColor;
+ this.databaseBackendEnabled = databaseBackendEnabled;
+ this.ttsVoice = ttsVoice;
+ this.ttsCategories = ttsCategories;
+ }
+
+ changePage(page: Page) {
if (!this.isReady()) {
this.page = page;
this.tryFlushQueue();
@@ -324,29 +465,44 @@ class ChatRenderer {
}
this.page = page;
// Fast clear of the root node
- this.rootNode.textContent = '';
+ if (this.rootNode) {
+ this.rootNode.textContent = '';
+ }
this.visibleMessages = [];
// Re-add message nodes
const fragment = document.createDocumentFragment();
let node;
for (const message of this.messages) {
- if (canPageAcceptType(page, message.type)) {
+ if (
+ canPageAcceptType(page, message.type) &&
+ !(
+ adminPageOnly(page) &&
+ typeIsImportant(message.type) &&
+ this.hideImportantInAdminTab
+ )
+ ) {
node = message.node;
+ node = interleaveMessage(
+ node,
+ this.interleaveEnabled && this.interleave,
+ this.interleaveColor,
+ );
+ this.interleave = !this.interleave;
fragment.appendChild(node);
this.visibleMessages.push(message);
}
}
- if (node) {
+ if (node && this.rootNode) {
this.rootNode.appendChild(fragment);
node.scrollIntoView();
}
}
- getCombinableMessage(predicate) {
+ getCombinableMessage(predicate: SerializedMessage) {
const now = Date.now();
const len = this.visibleMessages.length;
const from = len - 1;
- const to = Math.max(0, len - COMBINE_MAX_MESSAGES);
+ const to = Math.max(0, len - this.combineMessageLimit);
for (let i = from; i >= to; i--) {
const message = this.visibleMessages[i];
@@ -356,7 +512,7 @@ class ChatRenderer {
// Text payload must fully match
isSameMessage(message, predicate) &&
// Must land within the specified time window
- now < message.createdAt + COMBINE_MAX_TIME_WINDOW;
+ now < message.createdAt + this.combineIntervalLimit * 1000;
if (matches) {
return message;
}
@@ -364,8 +520,29 @@ class ChatRenderer {
return null;
}
- processBatch(batch, options: any = {}) {
- const { prepend, notifyListeners = true } = options;
+ tryTTS(message: SerializedMessage, node: HTMLElement) {
+ if (this.ttsCategories[message.type]) {
+ const utterance = new SpeechSynthesisUtterance(node.innerText);
+
+ const voice = window.speechSynthesis
+ .getVoices()
+ .find((val) => val.name === this.ttsVoice);
+ utterance.voice = voice || null;
+
+ window.speechSynthesis.speak(utterance);
+ }
+ }
+
+ // eslint-disable-next-line complexity
+ processBatch(
+ batch: SerializedMessage[],
+ options: {
+ prepend?: boolean;
+ notifyListeners?: boolean;
+ doArchive?: boolean;
+ } = {},
+ ) {
+ const { prepend, notifyListeners = true, doArchive = false } = options;
const now = Date.now();
// Queue up messages until chat is ready
if (!this.isReady()) {
@@ -383,8 +560,7 @@ class ChatRenderer {
// Insert messages
const fragment = document.createDocumentFragment();
const countByType = {};
- let node: HTMLElement;
- let insertedAnyNode = false;
+ let node;
for (const payload of batch) {
const message = createMessage(payload);
// Combine messages
@@ -397,111 +573,106 @@ class ChatRenderer {
// Reuse message node
if (message.node) {
node = message.node;
- insertedAnyNode = true;
}
// Reconnected
else if (message.type === 'internal/reconnected') {
node = createReconnectedNode();
- insertedAnyNode = true;
}
// Create message node
else {
node = createMessageNode();
- insertedAnyNode = true;
// Payload is plain text
if (message.text) {
- node.textContent = message.text;
+ message.text = stripNewLineFlood(message.text); // Do not allow more than 3 new lines in a row
+ node.textContent = this.prependTimestamps
+ ? getChatTimestamp(message) + message.text
+ : message.text;
}
// Payload is HTML
else if (message.html) {
- node.innerHTML = message.html;
+ message.html = stripNewLineFlood(message.html); // Do not allow more than 3 new lines in a row
+ node.innerHTML = this.prependTimestamps
+ ? getChatTimestamp(message) + message.html
+ : message.html;
} else {
logger.error('Error: message is missing text payload', message);
}
// Get all nodes in this message that want to be rendered like jsx
const nodes = node.querySelectorAll('[data-component]');
for (let i = 0; i < nodes.length; i++) {
- const childNode: Element = nodes[i];
+ const childNode = nodes[i];
const targetName = childNode.getAttribute('data-component');
- if (targetName === null) {
- continue;
- }
// Let's pull out the attibute info we need
const outputProps = {};
for (let j = 0; j < childNode.attributes.length; j++) {
const attribute = childNode.attributes[j];
- if (!attribute.nodeName.startsWith("data-")) {
- continue;
- }
+
let working_value = attribute.nodeValue;
- if (!working_value) {
- continue;
- }
- let parsed_value: any;
// We can't do the "if it has no value it's truthy" trick
// Because getAttribute returns "", not null. Hate IE
+ let parsed_value: any;
if (working_value === '$true') {
- parsed_value = true;
+ working_value = true;
} else if (working_value === '$false') {
parsed_value = false;
- } else {
+ } else if (!Number.isNaN(working_value)) {
const parsed_float = parseFloat(working_value);
- if (!isNaN(parsed_float)) {
- parsed_value = parsed_float;
+ if (!Number.isNaN(parsed_float)) {
+ working_value = parsed_float;
}
}
- // treat as string if doesn't match specials
- if (!parsed_value) {
+ // If it's not anything above then it has to be a string
+ if(!parsed_value) {
parsed_value = working_value;
}
+
let canon_name = attribute.nodeName.replace('data-', '');
// html attributes don't support upper case chars, so we need to map
- let remapped = TGUI_CHAT_ATTRIBUTE_REMAPS[canon_name];
- if (remapped) {
- canon_name = remapped;
- } else {
- // pretend - is an upper case
- canon_name = canon_name.replaceAll(/-([a-z])/g, (_, letter) => letter.toUpperCase());
- }
- outputProps[canon_name] = working_value;
+ canon_name = TGUI_CHAT_ATTRIBUTES_TO_PROPS[canon_name];
+ outputProps[canon_name] = parsed_value;
}
const oldHtml = { __html: childNode.innerHTML };
while (childNode.firstChild) {
childNode.removeChild(childNode.firstChild);
}
- // TODO: please type this properly
- let DataComponent: any = null;
+ const Element = TGUI_CHAT_COMPONENTS[targetName];
+
const reactRoot = createRoot(childNode);
- if (Object.keys(TGUI_CHAT_COMPONENTS).includes(targetName)) {
- DataComponent = TGUI_CHAT_COMPONENTS[targetName];
- const interior = (
- // eslint-disable-next-line react/no-danger
+
+ reactRoot.render(
+
+ {/** biome-ignore lint/security/noDangerouslySetInnerHtml: Chat rendere */}
- );
- const rendering = (
-
- {interior}
-
- );
- reactRoot.render(rendering);
- } else {
- reactRoot.render((
- -- invalid data component '{targetName}'; contact a coder.
- ));
+ ,
+ );
}
// Highlight text
if (!message.avoidHighlighting && this.highlightParsers) {
this.highlightParsers.map((parser) => {
- const highlighted = highlightNode(
- node,
- parser.highlightRegex,
- parser.highlightWords,
- (text) => createHighlightNode(text, parser.highlightColor),
- );
- if (highlighted && parser.highlightWholeMessage) {
- node.className += ' ChatMessage--highlighted';
+ const ourUser = node.getElementsByClassName('name');
+ const isEmote = node.getElementsByClassName('emote');
+ if (
+ !(
+ parser.highlightBlacklist &&
+ parser.blacklistregex &&
+ ((ourUser.length > 0 &&
+ parser.blacklistregex.test(ourUser[0].textContent)) ||
+ (isEmote.length > 0 &&
+ parser.blacklistregex.test(isEmote[0].textContent)))
+ )
+ ) {
+ const highlighted = highlightNode(
+ node,
+ parser.highlightRegex,
+ parser.highlightWords,
+ (text) => createHighlightNode(text, parser.highlightColor),
+ );
+ if (highlighted && parser.highlightWholeMessage) {
+ node.className += ' ChatMessage--highlighted';
+ }
}
+ return undefined;
});
}
// Linkify text
@@ -534,12 +705,56 @@ class ChatRenderer {
countByType[message.type] += 1;
// TODO: Detect duplicates
this.messages.push(message);
- if (canPageAcceptType(this.page, message.type)) {
+
+ // TTS
+ // Only TTS on new messages
+ if (doArchive) {
+ this.tryTTS(message, node);
+ }
+
+ if (
+ doArchive &&
+ this.logEnable &&
+ !this.databaseBackendEnabled &&
+ this.storedTypes &&
+ canStoreType(this.storedTypes, message.type)
+ ) {
+ message.roundId = this.roundId;
+ if (
+ this.logLimit > 0 &&
+ this.archivedMessages.length >= this.logLimit + 1
+ ) {
+ this.archivedMessages = this.archivedMessages.slice(
+ -(this.logLimit - 1),
+ );
+ } else if (
+ this.logLimit > 0 &&
+ this.archivedMessages.length >= this.logLimit
+ ) {
+ this.archivedMessages.shift();
+ }
+ this.archivedMessages.push(serializeMessage(message, true)); // TODO: Actually having a better message archiving maybe for exports?
+ }
+ if (
+ this.page &&
+ canPageAcceptType(this.page, message.type) &&
+ !(
+ adminPageOnly(this.page) &&
+ typeIsImportant(message.type) &&
+ this.hideImportantInAdminTab
+ )
+ ) {
+ node = interleaveMessage(
+ node,
+ this.interleaveEnabled && this.interleave,
+ this.interleaveColor,
+ );
+ this.interleave = !this.interleave;
fragment.appendChild(node);
this.visibleMessages.push(message);
}
}
- if (insertedAnyNode) {
+ if (node && this.rootNode) {
const firstChild = this.rootNode.childNodes[0];
if (prepend && firstChild) {
this.rootNode.insertBefore(fragment, firstChild);
@@ -555,7 +770,6 @@ class ChatRenderer {
this.events.emit('batchProcessed', countByType);
}
}
-}
pruneMessages() {
if (!this.isReady()) {
@@ -570,12 +784,14 @@ class ChatRenderer {
// Visible messages
{
const messages = this.visibleMessages;
- const fromIndex = Math.max(0, messages.length - MAX_VISIBLE_MESSAGES);
+ const fromIndex = Math.max(0, messages.length - this.visibleMessageLimit);
if (fromIndex > 0) {
this.visibleMessages = messages.slice(fromIndex);
for (let i = 0; i < fromIndex; i++) {
const message = messages[i];
- this.rootNode.removeChild(message.node);
+ if (this.rootNode && message.node) {
+ this.rootNode.removeChild(message.node as Node);
+ }
// Mark this message as pruned
message.node = 'pruned';
}
@@ -591,7 +807,7 @@ class ChatRenderer {
{
const fromIndex = Math.max(
0,
- this.messages.length - MAX_PERSISTED_MESSAGES,
+ this.messages.length - this.persistentMessageLimit,
);
if (fromIndex > 0) {
this.messages = this.messages.slice(fromIndex);
@@ -600,22 +816,21 @@ class ChatRenderer {
}
}
- rebuildChat() {
+ rebuildChat(rebuildLimit: number) {
if (!this.isReady()) {
return;
}
// Make a copy of messages
- const fromIndex = Math.max(
- 0,
- this.messages.length - MAX_PERSISTED_MESSAGES,
- );
+ const fromIndex = Math.max(0, this.messages.length - rebuildLimit);
const messages = this.messages.slice(fromIndex);
// Remove existing nodes
for (const message of messages) {
message.node = undefined;
}
// Fast clear of the root node
- this.rootNode.textContent = '';
+ if (this.rootNode) {
+ this.rootNode.textContent = '';
+ }
this.messages = [];
this.visibleMessages = [];
// Repopulate the chat log
@@ -636,7 +851,9 @@ class ChatRenderer {
this.visibleMessages = [];
for (let i = 0; i < messages.length; i++) {
const message = messages[i];
- this.rootNode.removeChild(message.node);
+ if (this.rootNode && message.node instanceof HTMLElement) {
+ this.rootNode.removeChild(message.node);
+ }
// Mark this message as pruned
message.node = 'pruned';
}
@@ -647,7 +864,13 @@ class ChatRenderer {
logger.log(`Cleared chat`);
}
- saveToDisk() {
+ saveToDisk(
+ logLineCount: number = 0,
+ startLine: number = 0,
+ endLine: number = 0,
+ startRound: number = 0,
+ endRound: number = 0,
+ ) {
// Compile currently loaded stylesheets as CSS text
let cssText = '';
const styleSheets = document.styleSheets;
@@ -662,45 +885,86 @@ class ChatRenderer {
}
cssText += 'body, html { background-color: #141414 }\n';
// Compile chat log as HTML text
- let messagesHtml = '';
- for (const message of this.visibleMessages) {
- if (message.node) {
- messagesHtml += `${message.node.outerHTML}\n`;
+
+ if (this.databaseBackendEnabled) {
+ exportToDisk(
+ cssText,
+ startRound,
+ endRound,
+ this.prependTimestamps,
+ this.page,
+ );
+ } else {
+ // Fetch from chat storage
+ let messagesHtml = '';
+ let tmpMsgArray: SerializedMessage[] = [];
+ if (startLine || endLine) {
+ if (!endLine) {
+ tmpMsgArray = this.archivedMessages.slice(startLine);
+ } else {
+ tmpMsgArray = this.archivedMessages.slice(startLine, endLine);
+ }
+ if (logLineCount > 0) {
+ tmpMsgArray = tmpMsgArray.slice(-logLineCount);
+ }
+ } else if (logLineCount > 0) {
+ tmpMsgArray = this.archivedMessages.slice(-logLineCount);
+ } else {
+ tmpMsgArray = this.archivedMessages;
+ }
+
+ // for (let message of this.visibleMessages) { // TODO: Actually having a better message archiving maybe for exports?
+ for (const message of tmpMsgArray) {
+ // Filter messages according to active tab for export
+ if (this.page && canPageAcceptType(this.page, message.type)) {
+ messagesHtml += `${message.html}\n`;
+ }
+ // 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], { type: 'text/plain' });
+ const timestamp = new Date()
+ .toISOString()
+ .substring(0, 19)
+ .replace(/[-:]/g, '')
+ .replace('T', '-');
+ Byond.saveBlob(blob, `ss13-chatlog-${timestamp}.html`, '.html');
}
- // 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], { type: 'text/plain' });
- const timestamp = new Date()
- .toISOString()
- .substring(0, 19)
- .replace(/[-:]/g, '')
- .replace('T', '-');
- Byond.saveBlob(blob, `ss13-chatlog-${timestamp}.html`, '.html');
+ }
+
+ purgeMessageArchive() {
+ this.archivedMessages = [];
+ }
+
+ getStoredMessages() {
+ return this.archivedMessages.length;
}
}
// 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__;
+export const chatRenderer: ChatRenderer = window.__chatRenderer__;
diff --git a/tgui/packages/tgui-panel/chat/replaceInTextNode.js b/tgui/packages/tgui-panel/chat/replaceInTextNode.ts
similarity index 65%
rename from tgui/packages/tgui-panel/chat/replaceInTextNode.js
rename to tgui/packages/tgui-panel/chat/replaceInTextNode.ts
index 171043ceb43..91355a761bb 100644
--- a/tgui/packages/tgui-panel/chat/replaceInTextNode.js
+++ b/tgui/packages/tgui-panel/chat/replaceInTextNode.ts
@@ -7,33 +7,41 @@
/**
* Replaces text matching a regular expression with a custom node.
*/
-const regexParseNode = (params) => {
+const regexParseNode = (params: {
+ node: Node;
+ regex: RegExp;
+ createNode: (text: string) => Node;
+ captureAdjust?: (str: string) => string;
+}): { nodes?: Node[]; n?: number } => {
const { node, regex, createNode, captureAdjust } = params;
const text = node.textContent;
+
+ if (!text || !regex) {
+ return { nodes: [], n: 0 };
+ }
+
const textLength = text.length;
- let nodes;
- let new_node;
- let match;
+ const nodes: Node[] = [];
+ let fragment: Node | undefined;
+ let new_node: Node;
+ let match: RegExpExecArray | null;
let lastIndex = 0;
- let fragment;
let n = 0;
let count = 0;
// eslint-disable-next-line no-cond-assign
- while ((match = regex.exec(text))) {
+ while (true) {
+ match = regex.exec(text);
+ if (!match) break;
n += 1;
// Safety check to prevent permanent
// client crashing
if (++count > 9999) {
- return {};
+ return { nodes: [], n: 0 };
}
// Lazy init fragment
if (!fragment) {
fragment = document.createDocumentFragment();
}
- // Lazy init nodes
- if (!nodes) {
- nodes = [];
- }
const matchText = captureAdjust ? captureAdjust(match[0]) : match[0];
const matchLength = matchText.length;
// If matchText is set to be a substring nested within the original
@@ -59,7 +67,9 @@ const regexParseNode = (params) => {
fragment.appendChild(new_node);
}
// Commit the fragment
- node.parentNode.replaceChild(fragment, node);
+ if (node?.parentNode) {
+ node.parentNode.replaceChild(fragment, node);
+ }
}
return {
@@ -72,57 +82,63 @@ const regexParseNode = (params) => {
* Replace text of a node with custom nades if they match
* a regex expression or are in a word list
*/
-export const replaceInTextNode = (regex, words, createNode) => (node) => {
- let nodes;
- let result;
- let n = 0;
+export const replaceInTextNode =
+ (
+ regex: RegExp,
+ words: string[] | null,
+ createNode: (text: string) => Node,
+ ): ((node: Node) => number) =>
+ (node: Node) => {
+ let nodes;
+ let result;
+ let n = 0;
- if (regex) {
- result = regexParseNode({
- node: node,
- regex: regex,
- createNode: createNode,
- });
- nodes = result.nodes;
- n += result.n;
- }
+ if (regex) {
+ result = regexParseNode({
+ node: node,
+ regex: regex,
+ createNode: createNode,
+ });
+ nodes = result.nodes;
+ n += result.n;
+ }
- if (words) {
- let i = 0;
- let wordRegexStr = '(';
- for (const word of words) {
- // Capture if the word is at the beginning, end, middle,
- // or by itself in a message
- wordRegexStr += `^${word}\\s\\W|\\s\\W${word}\\s\\W|\\s\\W${word}$|^${word}\\s\\W$`;
- // Make sure the last character for the expression is NOT '|'
- if (++i !== words.length) {
- wordRegexStr += '|';
+ if (words) {
+ let i = 0;
+ let wordRegexStr = '(';
+ for (const word of words) {
+ // Capture if the word is at the beginning, end, middle,
+ // or by itself in a message
+ wordRegexStr += `^${word}\\s\\W|\\s\\W${word}\\s\\W|\\s\\W${word}$|^${word}\\s\\W$`;
+ // Make sure the last character for the expression is NOT '|'
+ if (++i !== words.length) {
+ wordRegexStr += '|';
+ }
}
- }
- wordRegexStr += ')';
- const wordRegex = new RegExp(wordRegexStr, 'gi');
- if (regex && nodes) {
- for (const a_node of nodes) {
+ wordRegexStr += ')';
+ const wordRegex = new RegExp(wordRegexStr, 'gi');
+ if (regex && nodes) {
+ for (const a_node of nodes) {
+ result = regexParseNode({
+ node: a_node,
+ regex: wordRegex,
+ createNode: createNode,
+ captureAdjust: (str: string) => str.replace(/^\W|\W$/g, ''),
+ });
+ n += result.n;
+ }
+ } else {
result = regexParseNode({
- node: a_node,
+ node: node,
regex: wordRegex,
createNode: createNode,
- captureAdjust: (str) => str.replace(/^\W|\W$/g, ''),
+ captureAdjust: (str: string) => str.replace(/^\W|\W$/g, ''),
});
n += result.n;
}
- } else {
- result = regexParseNode({
- node: node,
- regex: wordRegex,
- createNode: createNode,
- captureAdjust: (str) => str.replace(/^\W|\W$/g, ''),
- });
- n += result.n;
}
- }
- return n;
-};
+ return n;
+ };
// Highlight
// --------------------------------------------------------
@@ -130,7 +146,7 @@ export const replaceInTextNode = (regex, words, createNode) => (node) => {
/**
* Default highlight node.
*/
-const createHighlightNode = (text) => {
+const createHighlightNode = (text: string): HTMLSpanElement => {
const node = document.createElement('span');
node.setAttribute('style', 'background-color:#fd4;color:#000');
node.textContent = text;
@@ -146,10 +162,10 @@ const createHighlightNode = (text) => {
* @returns {number} Number of matches
*/
export const highlightNode = (
- node,
- regex,
- words,
- createNode = createHighlightNode,
+ node: Node,
+ regex: RegExp,
+ words: string[],
+ createNode: (text: string) => Node = createHighlightNode,
) => {
if (!createNode) {
createNode = createHighlightNode;
@@ -180,7 +196,7 @@ const URL_REGEX =
* @param {Node} node Node which you want to process
* @returns {number} Number of matches
*/
-export const linkifyNode = (node) => {
+export const linkifyNode = (node: Node): number => {
let n = 0;
const childNodes = node.childNodes;
for (let i = 0; i < childNodes.length; i++) {
diff --git a/tgui/packages/tgui-panel/chat/selectors.ts b/tgui/packages/tgui-panel/chat/selectors.ts
deleted file mode 100644
index 2e6f486e2a2..00000000000
--- a/tgui/packages/tgui-panel/chat/selectors.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { map } from 'es-toolkit/compat';
-
-export const selectChat = (state) => state.chat;
-
-export const selectChatPages = (state) =>
- map(state.chat.pages, (id: string) => state.chat.pageById[id]);
-
-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/chat/types.ts b/tgui/packages/tgui-panel/chat/types.ts
index 91ab9fd3a7f..e4bbcf2a387 100644
--- a/tgui/packages/tgui-panel/chat/types.ts
+++ b/tgui/packages/tgui-panel/chat/types.ts
@@ -1,3 +1,21 @@
+import * as z from 'zod';
+
+export type ChatPages = {
+ chatPages: Record;
+};
+
+export type SerializedMessage = {
+ type: string;
+ createdAt: number;
+ roundId: number | null;
+} & Partial<{
+ text: string;
+ html: string;
+ times: number;
+ node?: HTMLElement | string;
+ avoidHighlighting: boolean;
+}>;
+
export type Page = {
isMain: boolean;
id: string;
@@ -7,3 +25,13 @@ export type Page = {
hideUnreadCount: boolean;
createdAt: number;
};
+
+export const storedSettingsSchema = z.object({
+ version: z.number(),
+ scrollTracking: z.boolean(),
+ currentPageId: z.string(),
+ pages: z.array(z.string()),
+ pageById: z.record(z.string(), z.any()),
+});
+
+export type StoredChatSettings = z.infer;
diff --git a/tgui/packages/tgui-panel/chat/use-chat-pages.ts b/tgui/packages/tgui-panel/chat/use-chat-pages.ts
new file mode 100644
index 00000000000..cde8f54f33a
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/use-chat-pages.ts
@@ -0,0 +1,146 @@
+import { useAtom, useAtomValue } from 'jotai';
+import {
+ chatPagesAtom,
+ chatPagesRecordAtom,
+ currentPageAtom,
+ currentPageIdAtom,
+ mainPage,
+} from './atoms';
+import { createPage } from './model';
+import { chatRenderer } from './renderer';
+import type { Page } from './types';
+
+/** Custom hook for handling chat pages state */
+export function useChatPages() {
+ const [pages, setPages] = useAtom(chatPagesAtom);
+ const [pagesRecord, setPagesRecord] = useAtom(chatPagesRecordAtom);
+ const [currentPageId, setCurrentPageId] = useAtom(currentPageIdAtom);
+ const page = useAtomValue(currentPageAtom);
+
+ function addChatPage(): void {
+ const draft = createPage();
+
+ setCurrentPageId(draft.id);
+ setPages((prev) => [...prev, draft.id]);
+ setPagesRecord((prev) => ({
+ ...prev,
+ [draft.id]: draft,
+ }));
+
+ chatRenderer.changePage(draft);
+ }
+
+ function changeChatPage(page: Page): void {
+ setCurrentPageId(page.id);
+
+ const draft: Page = {
+ ...pagesRecord[page.id],
+ unreadCount: 0,
+ };
+
+ setPagesRecord({
+ ...pagesRecord,
+ [page.id]: draft,
+ });
+
+ chatRenderer.changePage(draft);
+ }
+
+ function moveChatLeft(): void {
+ const tmpPage = pagesRecord[currentPageId];
+ const fromIndex = pages.indexOf(tmpPage.id);
+ const toIndex = fromIndex - 1;
+
+ // don't ever move leftmost page
+ if (fromIndex <= 0) return;
+ // don't ever move anything to the leftmost page
+ if (toIndex <= 0) return;
+
+ const draftPages = [...pages];
+ const tmp = draftPages[fromIndex];
+ draftPages[fromIndex] = draftPages[toIndex];
+ draftPages[toIndex] = tmp;
+
+ setPages(draftPages);
+ }
+
+ function moveChatRight(): void {
+ const tmpPage = pagesRecord[currentPageId];
+ const fromIndex = pages.indexOf(tmpPage.id);
+ const toIndex = fromIndex + 1;
+
+ // don't ever move leftmost page
+ if (fromIndex <= 0) return;
+ // don't ever move anything out of the array
+ if (toIndex >= pages.length) return;
+
+ const draftPages = [...pages];
+ const tmp = draftPages[fromIndex];
+ draftPages[fromIndex] = draftPages[toIndex];
+ draftPages[toIndex] = tmp;
+
+ setPages(draftPages);
+ }
+
+ function removeChatPage(): void {
+ const nextPages = pages.filter((id) => id !== currentPageId);
+
+ // Always keep at least the main page
+ const finalPages = nextPages.length > 0 ? nextPages : [mainPage.id];
+
+ const finalRecord =
+ nextPages.length > 0
+ ? (Object.fromEntries(
+ finalPages.map((id) => [id, pagesRecord[id]]),
+ ) as Record)
+ : { [mainPage.id]: mainPage };
+
+ setPagesRecord(finalRecord);
+ setPages(finalPages);
+ setCurrentPageId(finalPages[0]);
+ chatRenderer.changePage(finalRecord[finalPages[0]]);
+ }
+
+ function toggleAcceptedType(type: string): void {
+ const current = { ...pagesRecord[currentPageId] };
+
+ const draft: Page = {
+ ...current,
+ acceptedTypes: {
+ ...current.acceptedTypes,
+ [type]: !current.acceptedTypes[type],
+ },
+ };
+
+ setPagesRecord({
+ ...pagesRecord,
+ [currentPageId]: draft,
+ });
+ }
+
+ function updateChatPage(page: Partial): void {
+ const draft: Page = {
+ ...pagesRecord[currentPageId],
+ ...page,
+ };
+
+ setPagesRecord({
+ ...pagesRecord,
+ [currentPageId]: draft,
+ });
+ }
+
+ return {
+ page,
+ pages,
+ pagesRecord,
+ currentPageId,
+ addChatPage,
+ changeChatPage,
+ moveChatLeft,
+ moveChatRight,
+ removeChatPage,
+ toggleAcceptedType,
+ updateChatPage,
+ };
+}
diff --git a/tgui/packages/tgui-panel/chat/use-chat-persistence.ts b/tgui/packages/tgui-panel/chat/use-chat-persistence.ts
new file mode 100644
index 00000000000..91e59e0544a
--- /dev/null
+++ b/tgui/packages/tgui-panel/chat/use-chat-persistence.ts
@@ -0,0 +1,301 @@
+import { storage } from 'common/storage';
+import DOMPurify from 'dompurify';
+import { useAtom, useAtomValue } from 'jotai';
+import { useEffect } from 'react';
+import type { UserData } from 'tgui-panel/game/types';
+import { store } from '../events/store';
+import { gameAtom } from '../game/atoms';
+import { settingsAtom, settingsLoadedAtom } from '../settings/atoms';
+import {
+ allChatAtom,
+ chatLoadedAtom,
+ lastRoundIDAtom,
+ storedLinesAtom,
+ storedRoundsAtom,
+ versionAtom,
+} from './atoms';
+import { rebuildRoundTracking, saveChatToStorage } from './helpers';
+import { startChatStateMigration } from './migration';
+import { createMessage } from './model';
+import { chatRenderer } from './renderer';
+import type { SerializedMessage, StoredChatSettings } from './types';
+
+// List of blacklisted tags
+const FORBID_TAGS = ['a', 'iframe', 'link', 'video'];
+
+/**
+ * Custom hook that initializes chat from local storage and periodically saves
+ * it back
+ */
+export function useChatPersistence() {
+ const version = useAtomValue(versionAtom);
+ const settings = useAtomValue(settingsAtom);
+ const allChat = useAtomValue(allChatAtom);
+ const game = useAtomValue(gameAtom);
+
+ const [loaded, setLoaded] = useAtom(chatLoadedAtom);
+ const settingsLoaded = useAtomValue(settingsLoadedAtom);
+
+ /** Loads chat + chat settings */
+ useEffect(() => {
+ if (!loaded && settingsLoaded) {
+ async function initChatState(): Promise {
+ console.log('Initializing chat');
+
+ const [state] = await Promise.all([storage.get('chat-state')]);
+
+ chatRenderer.setVisualChatLimits(
+ settings.visibleMessageLimit,
+ settings.combineMessageLimit,
+ settings.combineIntervalLimit,
+ settings.logEnable,
+ settings.logLimit,
+ settings.storedTypes,
+ game.roundId,
+ settings.prependTimestamps,
+ settings.hideImportantInAdminTab,
+ settings.interleave,
+ settings.interleaveColor,
+ game.databaseBackendEnabled,
+ settings.ttsVoice,
+ settings.ttsCategories,
+ );
+ loadChatState(state);
+ setLoaded(true);
+ }
+
+ initChatState();
+ }
+ }, [loaded, settings, settingsLoaded]);
+
+ /** Apply user settings */
+ useEffect(() => {
+ if (!loaded) return;
+
+ chatRenderer.setVisualChatLimits(
+ settings.visibleMessageLimit,
+ settings.combineMessageLimit,
+ settings.combineIntervalLimit,
+ settings.logEnable,
+ settings.logLimit,
+ settings.storedTypes,
+ game.roundId,
+ settings.prependTimestamps,
+ settings.hideImportantInAdminTab,
+ settings.interleave,
+ settings.interleaveColor,
+ game.databaseBackendEnabled,
+ settings.ttsVoice,
+ settings.ttsCategories,
+ );
+ }, [settings]);
+
+ /** Periodically saves chat + chat settings */
+ useEffect(() => {
+ let saveInterval: NodeJS.Timeout;
+
+ if (loaded && settings.saveInterval) {
+ saveInterval = setInterval(() => {
+ if (!game.databaseBackendEnabled) {
+ saveChatToStorage();
+ }
+ }, settings.saveInterval * 1000);
+ }
+
+ return () => clearInterval(saveInterval);
+ }, [loaded, settings.saveInterval]);
+
+ /** Saves chat settings shortly after any settings change */
+ useEffect(() => {
+ let timeout: NodeJS.Timeout;
+
+ if (loaded) {
+ timeout = setTimeout(() => {
+ // Avoid persisting frequently-changing unread counts.
+ const pageById = Object.fromEntries(
+ Object.entries(allChat.pageById).map(([id, page]) => [
+ id,
+ {
+ ...page,
+ unreadCount: 0,
+ },
+ ]),
+ );
+
+ storage.set('chat-state', {
+ ...allChat,
+ pageById,
+ });
+ }, 750);
+ }
+
+ return () => clearTimeout(timeout);
+ }, [
+ loaded,
+ allChat.pages,
+ allChat.currentPageId,
+ allChat.pageById[allChat.currentPageId]?.name,
+ allChat.pageById[allChat.currentPageId]?.acceptedTypes,
+ allChat.pageById[allChat.currentPageId]?.hideUnreadCount,
+ ]);
+
+ /** Update our round ID information */
+ useEffect(() => {
+ if (!loaded) return;
+
+ const lastMessage =
+ chatRenderer.messages.at(-1) || chatRenderer.archivedMessages.at(-1);
+ if (!lastMessage?.roundId) return;
+
+ const lastId = store.get(lastRoundIDAtom);
+ if (lastId !== lastMessage.roundId) {
+ const storedRounds = store.get(storedRoundsAtom) + 1;
+ const storedLines = store.get(storedLinesAtom);
+ store.set(lastRoundIDAtom, lastMessage.roundId);
+ store.set(storedRoundsAtom, storedRounds);
+ store.set(storedLinesAtom, [
+ ...storedLines,
+ chatRenderer.getStoredMessages() - 1,
+ ]);
+ }
+ }, [loaded, chatRenderer.messages.length]);
+
+ useEffect(() => {
+ async function fetchChat() {
+ if (!loaded || !game.userData) {
+ return;
+ }
+
+ let messages: SerializedMessage[] = [];
+
+ if (game.userData.token) {
+ messages = await loadChatFromDBStorage(game.userData);
+ } else {
+ messages = await loadChatFromStorage();
+ }
+
+ if (messages) {
+ handleMessages(messages);
+ }
+
+ chatRenderer.onStateLoaded();
+ }
+
+ fetchChat();
+ }, [loaded, game.userData]);
+
+ async function loadChatFromStorage(): Promise {
+ const [messages, archived] = await Promise.all([
+ storage.get('chat-messages'),
+ storage.get('chat-messages-archive'),
+ ]);
+
+ if (archived) {
+ for (const msg of archived) {
+ if (msg.html) {
+ msg.html = DOMPurify.sanitize(msg.html, { FORBID_TAGS });
+ }
+ }
+ const { storedRounds, storedLines, lastId } =
+ rebuildRoundTracking(archived);
+
+ store.set(lastRoundIDAtom, lastId);
+ store.set(storedRoundsAtom, storedRounds.length);
+ store.set(storedLinesAtom, storedLines);
+
+ chatRenderer.archivedMessages = archived;
+ if (
+ settings.logRetainRounds > 0 &&
+ storedRounds.length > settings.logRetainRounds
+ ) {
+ chatRenderer.archivedMessages = chatRenderer.archivedMessages.slice(
+ storedLines[storedRounds.length - settings.logRetainRounds],
+ );
+ }
+ }
+
+ return messages;
+ }
+
+ async function loadChatFromDBStorage(
+ userData: UserData,
+ ): Promise {
+ const messages: SerializedMessage[] = [];
+
+ await new Promise((resolve) => {
+ fetch(
+ `${game.chatlogApiEndpoint}/api/logs/${userData.ckey}/${settings.persistentMessageLimit}`,
+ {
+ method: 'GET',
+ headers: {
+ Accept: 'application/json',
+ Authorization: `Bearer ${userData.token}`,
+ 'Content-Type': 'application/json',
+ },
+ },
+ )
+ .then((response) => response.json())
+ .then((json) => {
+ json.forEach(
+ (obj: {
+ msg_type: string | null;
+ text_raw: string;
+ created_at: number;
+ round_id: number;
+ }) => {
+ const msg: SerializedMessage = {
+ type: obj.msg_type ? obj.msg_type : '',
+ html: obj.text_raw,
+ createdAt: obj.created_at,
+ roundId: obj.round_id,
+ };
+
+ messages.push(msg);
+ },
+ );
+ resolve();
+ })
+ .catch(() => {
+ resolve();
+ });
+ });
+
+ return messages;
+ }
+
+ function loadChatState(state: StoredChatSettings | null) {
+ // Empty settings, set defaults
+ if (!state) {
+ console.log('Initialized chat with default settings');
+ } else if (state && 'version' in state && state.version === version) {
+ console.log('Loaded chat state from storage:', state);
+ startChatStateMigration(state);
+ } else {
+ // Discard incompatible versions
+ console.log('Discarded incompatible chat state from storage:', state);
+ }
+ }
+
+ function handleMessages(messages: SerializedMessage[]): void {
+ for (const 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,
+ });
+
+ console.log(`Restored chat with ${messages.length} messages`);
+ }
+}
diff --git a/tgui/packages/tgui-panel/events/handlers/assets.ts b/tgui/packages/tgui-panel/events/handlers/assets.ts
new file mode 100644
index 00000000000..fc814f9fd6c
--- /dev/null
+++ b/tgui/packages/tgui-panel/events/handlers/assets.ts
@@ -0,0 +1,8 @@
+import { loadMappings } from 'common/assets';
+
+const loadedMappings = {} as Record;
+
+/** This just lets us load in our own independent map */
+export function handleLoadAssets(payload: Record): void {
+ loadMappings(payload, loadedMappings);
+}
diff --git a/tgui/packages/tgui-panel/events/handlers/connected.ts b/tgui/packages/tgui-panel/events/handlers/connected.ts
new file mode 100644
index 00000000000..d1b61c8ea6f
--- /dev/null
+++ b/tgui/packages/tgui-panel/events/handlers/connected.ts
@@ -0,0 +1,15 @@
+import type { GameConnectedPayload } from 'packages/tgui-panel/game/types';
+import {
+ chatlogApiEndpointAtom,
+ databaseBackendEnabledAtom,
+ databaseStoredRoundsAtom,
+ roundIdAtom,
+} from '../../game/atoms';
+import { store } from '../store';
+
+export function connected(payload: GameConnectedPayload) {
+ store.set(roundIdAtom, payload.round_id);
+ store.set(databaseBackendEnabledAtom, payload.chatlog_db_backend);
+ store.set(chatlogApiEndpointAtom, payload.chatlog_api_endpoint);
+ store.set(databaseStoredRoundsAtom, payload.chatlog_stored_rounds);
+}
diff --git a/tgui/packages/tgui-panel/events/handlers/roundrestart.ts b/tgui/packages/tgui-panel/events/handlers/roundrestart.ts
new file mode 100644
index 00000000000..1bba7c1a12d
--- /dev/null
+++ b/tgui/packages/tgui-panel/events/handlers/roundrestart.ts
@@ -0,0 +1,8 @@
+import { saveChatToStorage } from '../../chat/helpers';
+import { roundRestartedAtAtom } from '../../game/atoms';
+import { store } from '../store';
+
+export function roundrestart() {
+ store.set(roundRestartedAtAtom, Date.now());
+ saveChatToStorage();
+}
diff --git a/tgui/packages/tgui-panel/events/listeners.ts b/tgui/packages/tgui-panel/events/listeners.ts
new file mode 100644
index 00000000000..797aaf96b6f
--- /dev/null
+++ b/tgui/packages/tgui-panel/events/listeners.ts
@@ -0,0 +1,30 @@
+import { loadStyleSheet } from 'common/assets';
+import { EventBus } from 'tgui-core/eventbus';
+import { playMusic, stopMusic } from '../audio/handlers';
+import { chatMessage } from '../chat/handlers';
+import { pingReply, pingSoft } from '../ping/handlers';
+import {
+ handleTelemetryData,
+ telemetryRequest,
+ testTelemetryCommand,
+} from '../telemetry/handlers';
+import { handleLoadAssets } from './handlers/assets';
+import { connected } from './handlers/connected';
+import { roundrestart } from './handlers/roundrestart';
+
+const listeners = {
+ 'asset/stylesheet': loadStyleSheet,
+ 'asset/mappings': handleLoadAssets,
+ 'audio/playMusic': playMusic,
+ 'audio/stopMusic': stopMusic,
+ 'chat/message': chatMessage,
+ connected,
+ 'ping/reply': pingReply,
+ 'ping/soft': pingSoft,
+ roundrestart,
+ 'telemetry/request': telemetryRequest,
+ testTelemetryCommand,
+ update: handleTelemetryData,
+} as const;
+
+export const bus = new EventBus(listeners);
diff --git a/tgui/packages/tgui-panel/events/store.ts b/tgui/packages/tgui-panel/events/store.ts
new file mode 100644
index 00000000000..09a7aa5b394
--- /dev/null
+++ b/tgui/packages/tgui-panel/events/store.ts
@@ -0,0 +1,3 @@
+import { createStore } from 'jotai';
+
+export const store = createStore();
diff --git a/tgui/packages/tgui-panel/game/actions.ts b/tgui/packages/tgui-panel/game/actions.ts
deleted file mode 100644
index e40014c44b0..00000000000
--- a/tgui/packages/tgui-panel/game/actions.ts
+++ /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/atoms.ts b/tgui/packages/tgui-panel/game/atoms.ts
new file mode 100644
index 00000000000..b14ce66fc47
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/atoms.ts
@@ -0,0 +1,52 @@
+import { atom } from 'jotai';
+import { lastPingedAtAtom } from '../ping/atoms';
+import { CONNECTION_LOST_AFTER } from './constants';
+
+export const roundIdAtom = atom(null);
+export const roundTimeAtom = atom(null);
+export const roundRestartedAtAtom = atom(null);
+export const databaseBackendEnabledAtom = atom(false);
+export const chatlogApiEndpointAtom = atom('');
+export const databaseStoredRoundsAtom = atom([]);
+export const userDataAtom = atom<{ ckey: string; token: string } | null>(null);
+
+/**
+ * Ticking clock atom. Only runs while something is subscribed to it.
+ * (And only after we’ve had at least one ping, see connectionLostAtAtom.)
+ */
+const nowAtom = atom(0);
+nowAtom.onMount = (set) => {
+ set(Date.now());
+ const id = setInterval(() => set(Date.now()), 1000);
+ return () => clearInterval(id);
+};
+
+/**
+ * Returns the timestamp at which we *became* "lost" (deadline),
+ * or null if we're not currently lost.
+ *
+ * Note: returns a stable value while lost, so `nowAtom` ticking won’t cause
+ * rerenders once lost (value stays equal).
+ */
+export const connectionLostAtAtom = atom((get) => {
+ const lastPingedAt = get(lastPingedAtAtom);
+ if (!lastPingedAt) return null;
+
+ const now = get(nowAtom);
+ const deadline = lastPingedAt + CONNECTION_LOST_AFTER;
+
+ return now >= deadline ? deadline : null;
+});
+
+//------- Convenience --------------------------------------------------------//
+
+export const gameAtom = atom((get) => ({
+ roundId: get(roundIdAtom),
+ roundTime: get(roundTimeAtom),
+ roundRestartedAt: get(roundRestartedAtAtom),
+ connectionLostAt: get(connectionLostAtAtom),
+ databaseBackendEnabled: get(databaseBackendEnabledAtom),
+ chatlogApiEndpoint: get(chatlogApiEndpointAtom),
+ databaseStoredRounds: get(databaseStoredRoundsAtom),
+ userData: get(userDataAtom),
+}));
diff --git a/tgui/packages/tgui-panel/game/constants.ts b/tgui/packages/tgui-panel/game/constants.ts
index d692e26c213..f40a529a101 100644
--- a/tgui/packages/tgui-panel/game/constants.ts
+++ b/tgui/packages/tgui-panel/game/constants.ts
@@ -4,4 +4,4 @@
* @license MIT
*/
-export const CONNECTION_LOST_AFTER = 45000;
+export const CONNECTION_LOST_AFTER = 20000;
diff --git a/tgui/packages/tgui-panel/game/hooks.ts b/tgui/packages/tgui-panel/game/hooks.ts
deleted file mode 100644
index 40a74ff44a0..00000000000
--- a/tgui/packages/tgui-panel/game/hooks.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { useSelector } from 'tgui/backend';
-
-import { selectGame } from './selectors';
-
-export const useGame = () => {
- return useSelector(selectGame);
-};
diff --git a/tgui/packages/tgui-panel/game/index.ts b/tgui/packages/tgui-panel/game/index.ts
deleted file mode 100644
index 3cca2e65577..00000000000
--- a/tgui/packages/tgui-panel/game/index.ts
+++ /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 1cf80a7ac63..00000000000
--- a/tgui/packages/tgui-panel/game/middleware.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { pingSoft, pingSuccess } from '../ping/actions';
-import { connectionLost, connectionRestored, roundRestarted } from './actions';
-import { CONNECTION_LOST_AFTER } from './constants';
-import { selectGame } from './selectors';
-
-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 } = action;
-
- if (type === pingSuccess.type || type === pingSoft.type) {
- lastPingedAt = Date.now();
- return next(action);
- }
-
- if (type === roundRestarted.type) {
- return next(withTimestamp(action));
- }
-
- return next(action);
- };
-};
diff --git a/tgui/packages/tgui-panel/game/reducer.ts b/tgui/packages/tgui-panel/game/reducer.ts
deleted file mode 100644
index c446db8f029..00000000000
--- a/tgui/packages/tgui-panel/game/reducer.ts
+++ /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, 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.ts b/tgui/packages/tgui-panel/game/selectors.ts
deleted file mode 100644
index a3b93b327d9..00000000000
--- a/tgui/packages/tgui-panel/game/selectors.ts
+++ /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/game/types.ts b/tgui/packages/tgui-panel/game/types.ts
new file mode 100644
index 00000000000..2c4f5e2aa01
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/types.ts
@@ -0,0 +1,34 @@
+import type { BooleanLike } from 'tgui-core/react';
+
+export type GameConnectedPayload = {
+ round_id: number | null;
+ chatlog_db_backend: boolean;
+ chatlog_api_endpoint: string;
+ chatlog_stored_rounds: string[];
+};
+
+export type TelemetryUpdatePayload = {
+ config: {
+ client: {
+ ckey: string;
+ chatlog_token: string;
+ address: string;
+ computer_id: string;
+ };
+ server: { round_id: number };
+ window: { fancy: BooleanLike; locked: BooleanLike };
+ };
+};
+
+export type GameAtom = {
+ roundId: number | null;
+ roundTime: null | number;
+ roundRestartedAt: null | number;
+ connectionLostAt: null | number;
+ databaseBackendEnabled: boolean;
+ chatlogApiEndpoint: string;
+ databaseStoredRounds: string[];
+ userData: UserData | null;
+};
+
+export type UserData = { ckey: string; token: string };
diff --git a/tgui/packages/tgui-panel/game/use-keep-alive.ts b/tgui/packages/tgui-panel/game/use-keep-alive.ts
new file mode 100644
index 00000000000..b9a0cba67fc
--- /dev/null
+++ b/tgui/packages/tgui-panel/game/use-keep-alive.ts
@@ -0,0 +1,27 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useEffect, useRef } from 'react';
+import { lastPingedAtAtom } from '../ping/atoms';
+import { connectionLostAtAtom } from './atoms';
+
+/** Custom hook that checks whether the panel is still receiving pings */
+export function useKeepAlive(
+ onDismissWarning: React.Dispatch>,
+) {
+ // Ensure the derived atom (and thus the clock) is subscribed.
+ const lostAt = useAtomValue(connectionLostAtAtom);
+ const prevLostAt = useRef(null);
+
+ // Clears stale ping timestamp across HMR/reloads to avoid a one-frame “lost” flash.
+ const setLastPingedAt = useSetAtom(lastPingedAtAtom);
+ useEffect(() => {
+ setLastPingedAt(null);
+ }, [setLastPingedAt]);
+
+ // Fire our connection restored event
+ useEffect(() => {
+ if (prevLostAt.current !== null && lostAt === null) {
+ onDismissWarning(false);
+ }
+ prevLostAt.current = lostAt;
+ }, [lostAt]);
+}
diff --git a/tgui/packages/tgui-panel/index.tsx b/tgui/packages/tgui-panel/index.tsx
index e788c68b6e1..d766304ef80 100644
--- a/tgui/packages/tgui-panel/index.tsx
+++ b/tgui/packages/tgui-panel/index.tsx
@@ -4,49 +4,21 @@
* @license MIT
*/
-// Themes
import './styles/main.scss';
-import { perf } from 'common/perf';
-import { combineReducers } from 'common/redux';
-import { setGlobalStore } from 'tgui/backend';
-import { captureExternalLinks } from 'tgui/links';
-import { render } from 'tgui/renderer';
-import { configureStore } from 'tgui/store';
+import { createRoot } from 'react-dom/client';
import { setupGlobalEvents } from 'tgui-core/events';
+import { captureExternalLinks } from 'tgui-core/links';
import { setupHotReloading } from 'tgui-dev-server/link/client';
-
-import { audioMiddleware, audioReducer } from './audio';
-import { chatMiddleware, chatReducer } from './chat';
-import { gameMiddleware, gameReducer } from './game';
-import { Panel } from './Panel';
+import { App } from './app';
+import { bus } from './events/listeners';
import { setupPanelFocusHacks } from './panelFocus';
-import { pingMiddleware, pingReducer } from './ping';
-import { settingsMiddleware, settingsReducer } from './settings';
-import { telemetryMiddleware } from './telemetry';
-perf.mark('inception', window.performance?.timeOrigin);
-perf.mark('init');
+const root = createRoot(document.getElementById('react-root')!);
-const store = configureStore({
- reducer: combineReducers({
- audio: audioReducer,
- chat: chatReducer,
- game: gameReducer,
- ping: pingReducer,
- settings: settingsReducer,
- }),
- middleware: {
- pre: [
- chatMiddleware,
- pingMiddleware,
- telemetryMiddleware,
- settingsMiddleware,
- audioMiddleware,
- gameMiddleware,
- ],
- },
-});
+function render(component: React.ReactElement) {
+ root.render(component);
+}
function setupApp() {
// Delay setup
@@ -55,7 +27,8 @@ function setupApp() {
return;
}
- setGlobalStore(store);
+ // Force speechSynthesis to check the server for voices as soon as the chat loads, so it's ready for us
+ window.speechSynthesis.getVoices();
setupGlobalEvents({
ignoreWindowFocus: true,
@@ -64,11 +37,10 @@ function setupApp() {
setupPanelFocusHacks();
captureExternalLinks();
- // Re-render UI on store updates
- store.subscribe(() => render());
+ render();
// Dispatch incoming messages as store actions
- Byond.subscribe((type, payload) => store.dispatch({ type, payload }));
+ Byond.subscribe((type, payload) => bus.dispatch({ type, payload }));
// Unhide the panel
Byond.winset('outputwindow.legacy_output_selector', {
@@ -76,7 +48,7 @@ function setupApp() {
});
// Resize the panel to match the non-browser output
- Byond.winget('legacy_output_selector').then((output: { size: string }) => {
+ Byond.winget('output').then((output: { size: string }) => {
Byond.winset('browseroutput', {
size: output.size,
});
@@ -86,21 +58,9 @@ function setupApp() {
if (import.meta.webpackHot) {
setupHotReloading();
- import.meta.webpackHot.accept(
- [
- './audio',
- './chat',
- './game',
- './Notifications',
- './Panel',
- './ping',
- './settings',
- './telemetry',
- ],
- () => {
- render();
- },
- );
+ import.meta.webpackHot.accept(['./app'], () => {
+ render();
+ });
}
}
diff --git a/tgui/packages/tgui-panel/package.json b/tgui/packages/tgui-panel/package.json
index 13cdd4ad96b..44e72488762 100644
--- a/tgui/packages/tgui-panel/package.json
+++ b/tgui/packages/tgui-panel/package.json
@@ -3,13 +3,15 @@
"version": "6.0.0",
"dependencies": {
"common": "workspace:*",
- "dompurify": "^3.2.5",
- "es-toolkit": "^1.39.3",
- "react": "^19.1.0",
- "react-dom": "^19.1.0",
+ "dompurify": "^3.3.1",
+ "es-toolkit": "^1.44.0",
+ "jotai": "^2.16.2",
+ "react": "^19.2.3",
+ "react-dom": "^19.2.3",
"tgui": "workspace:*",
- "tgui-core": "^4.2.3",
- "tgui-dev-server": "workspace:*"
+ "tgui-core": "^5.9.0",
+ "tgui-dev-server": "workspace:*",
+ "zod": "^4.3.6"
},
"private": true
}
diff --git a/tgui/packages/tgui-panel/panelFocus.ts b/tgui/packages/tgui-panel/panelFocus.ts
index 90cdf836368..7f700358cc3 100644
--- a/tgui/packages/tgui-panel/panelFocus.ts
+++ b/tgui/packages/tgui-panel/panelFocus.ts
@@ -15,17 +15,22 @@ import { vecLength, vecSubtract } from 'tgui-core/vector';
// text you can select with the mouse.
const MIN_SELECTION_DISTANCE = 10;
-const deferredFocusMap = () => setTimeout(() => focusMap());
+function deferredFocusMap(): void {
+ setTimeout(focusMap);
+}
-export const setupPanelFocusHacks = () => {
- let focusStolen = false;
+export function setupPanelFocusHacks(): void {
+ let focusStolen: boolean = false;
let clickStartPos: number[] | null = null;
+
window.addEventListener('focusin', (e) => {
focusStolen = canStealFocus(e.target as HTMLElement);
});
+
window.addEventListener('mousedown', (e) => {
clickStartPos = [e.screenX, e.screenY];
});
+
window.addEventListener('mouseup', (e) => {
if (clickStartPos) {
const clickEndPos = [e.screenX, e.screenY];
@@ -41,10 +46,11 @@ export const setupPanelFocusHacks = () => {
deferredFocusMap();
}
});
+
globalEvents.on('keydown', (key) => {
if (key.isModifierKey()) {
return;
}
deferredFocusMap();
});
-};
+}
diff --git a/tgui/packages/tgui-panel/ping/PingIndicator.tsx b/tgui/packages/tgui-panel/ping/PingIndicator.tsx
index bd55d644375..d202fc96d57 100644
--- a/tgui/packages/tgui-panel/ping/PingIndicator.tsx
+++ b/tgui/packages/tgui-panel/ping/PingIndicator.tsx
@@ -4,25 +4,25 @@
* @license MIT
*/
-import { useSelector } from 'tgui/backend';
+import { useAtomValue } from 'jotai';
import { Color } from 'tgui-core/color';
import { Box } from 'tgui-core/components';
-import { toFixed } from 'tgui-core/math';
+import { pingAtom } from './atoms';
-import { selectPing } from './selectors';
-
-export const PingIndicator = (props) => {
- const ping = useSelector(selectPing);
+export function PingIndicator(props) {
+ const ping = useAtomValue(pingAtom);
const color = Color.lookup(ping.networkQuality, [
new Color(220, 40, 40),
new Color(220, 200, 40),
new Color(60, 220, 40),
]).toString();
- const roundtrip = ping.roundtrip ? toFixed(ping.roundtrip) : '--';
+
+ const roundtrip = ping.roundtrip ? ping.roundtrip.toFixed() : '--';
+
return (
{roundtrip}
);
-};
+}
diff --git a/tgui/packages/tgui-panel/ping/actions.ts b/tgui/packages/tgui-panel/ping/actions.ts
deleted file mode 100644
index 27f103302c4..00000000000
--- a/tgui/packages/tgui-panel/ping/actions.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { createAction } from 'common/redux';
-
-export const pingReply = createAction('ping/reply');
-
-/**
- * Soft ping from the server.
- * It's intended to send periodic server-side metadata about the client,
- * e.g. its AFK status.
- */
-export const pingSoft = createAction('ping/soft');
-
-export const pingSuccess = createAction('ping/success', (ping) => ({
- payload: {
- lastId: ping.id,
- roundtrip: (Date.now() - ping.sentAt) * 0.5,
- },
-}));
-
-export const pingFail = createAction('ping/fail');
diff --git a/tgui/packages/tgui-panel/ping/atoms.ts b/tgui/packages/tgui-panel/ping/atoms.ts
new file mode 100644
index 00000000000..bead7597446
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/atoms.ts
@@ -0,0 +1,11 @@
+import { atom } from 'jotai';
+
+export type PingState = {
+ roundtrip: number | undefined;
+ roundtripAvg: number | undefined;
+ failCount: number;
+ networkQuality: number;
+};
+
+export const lastPingedAtAtom = atom(null);
+export const pingAtom = atom({} as PingState);
diff --git a/tgui/packages/tgui-panel/ping/handlers.ts b/tgui/packages/tgui-panel/ping/handlers.ts
new file mode 100644
index 00000000000..819d28b05a4
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/handlers.ts
@@ -0,0 +1,38 @@
+import { store } from '../events/store';
+import { lastPingedAtAtom } from './atoms';
+import { pingSuccess, pings, sendPing } from './helpers';
+
+type SoftPingPayload = {
+ afk: boolean;
+};
+
+/**
+ * Soft ping from the server.
+ * It's intended to send periodic server-side metadata about the client,
+ * e.g. its AFK status.
+ */
+export function pingSoft(payload: SoftPingPayload): void {
+ const { afk } = payload;
+ store.set(lastPingedAtAtom, Date.now());
+ // On each soft ping where client is not flagged as afk,
+ // initiate a new ping.
+ if (!afk) {
+ sendPing();
+ }
+}
+
+type ReplyPingPayload = {
+ index: number;
+};
+
+export function pingReply(payload: ReplyPingPayload) {
+ const { index } = payload;
+
+ const ping = pings[index];
+ if (!ping) return; // This ping was already marked as failed due to timeout.
+
+ pings[index] = null;
+ const roundtrip = (Date.now() - ping.sentAt) * 0.5;
+
+ pingSuccess(roundtrip);
+}
diff --git a/tgui/packages/tgui-panel/ping/helpers.ts b/tgui/packages/tgui-panel/ping/helpers.ts
new file mode 100644
index 00000000000..ff22c82abb4
--- /dev/null
+++ b/tgui/packages/tgui-panel/ping/helpers.ts
@@ -0,0 +1,74 @@
+import { scale } from 'tgui-core/math';
+import { store } from '../events/store';
+import { lastPingedAtAtom, pingAtom } from './atoms';
+import {
+ PING_QUEUE_SIZE,
+ PING_ROUNDTRIP_BEST,
+ PING_ROUNDTRIP_WORST,
+ PING_TIMEOUT,
+} from './constants';
+
+let index = 0;
+export const pings: Ping[] = [];
+
+type Ping = {
+ index: number;
+ sentAt: number;
+} | null;
+
+/** Sends a ping to byond */
+export function sendPing(): void {
+ for (let i = 0; i < PING_QUEUE_SIZE; i++) {
+ const ping = pings[i];
+ if (ping && Date.now() - ping.sentAt > PING_TIMEOUT) {
+ pings[i] = null;
+ pingFail();
+ }
+ }
+
+ const ping = { index, sentAt: Date.now() };
+ pings[index] = ping;
+ Byond.sendMessage('ping', { index });
+ index = (index + 1) % PING_QUEUE_SIZE;
+}
+
+export function pingSuccess(roundtrip: number): void {
+ const state = store.get(pingAtom);
+ 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);
+
+ store.set(pingAtom, {
+ roundtrip,
+ roundtripAvg,
+ failCount: 0,
+ networkQuality,
+ });
+
+ store.set(lastPingedAtAtom, Date.now());
+}
+
+export function pingFail(): void {
+ const state = store.get(pingAtom);
+ const { failCount = 0 } = state;
+
+ const networkQuality = Math.max(
+ 0,
+ state.networkQuality - failCount / PING_QUEUE_SIZE,
+ );
+
+ const nextState = {
+ ...state,
+ failCount: failCount + 1,
+ networkQuality,
+ };
+
+ if (failCount > PING_QUEUE_SIZE) {
+ nextState.roundtrip = undefined;
+ nextState.roundtripAvg = undefined;
+ }
+
+ store.set(pingAtom, nextState);
+}
diff --git a/tgui/packages/tgui-panel/ping/index.ts b/tgui/packages/tgui-panel/ping/index.ts
deleted file mode 100644
index 1bbbe3ed344..00000000000
--- a/tgui/packages/tgui-panel/ping/index.ts
+++ /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 e5b593d822f..00000000000
--- a/tgui/packages/tgui-panel/ping/middleware.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { pingFail, pingReply, pingSoft, pingSuccess } from './actions';
-import { 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;
- Byond.sendMessage('ping', { index });
- index = (index + 1) % PING_QUEUE_SIZE;
- };
-
- return (next) => (action) => {
- const { type, payload } = action;
-
- if (!initialized) {
- initialized = true;
- sendPing();
- }
-
- if (type === pingSoft.type) {
- const { afk } = payload;
- // On each soft ping where client is not flagged as afk,
- // initiate a new ping.
- if (!afk) {
- sendPing();
- }
- return next(action);
- }
-
- if (type === pingReply.type) {
- 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.ts b/tgui/packages/tgui-panel/ping/reducer.ts
deleted file mode 100644
index 2a25c9d3c15..00000000000
--- a/tgui/packages/tgui-panel/ping/reducer.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { clamp01, scale } from 'tgui-core/math';
-
-import { pingFail, pingSuccess } from './actions';
-import {
- PING_MAX_FAILS,
- PING_ROUNDTRIP_BEST,
- PING_ROUNDTRIP_WORST,
-} from './constants';
-
-type PingState = {
- roundtrip: number | undefined;
- roundtripAvg: number | undefined;
- failCount: number;
- networkQuality: number;
-};
-
-export const pingReducer = (state = {} as PingState, action) => {
- const { type, payload } = action;
-
- if (type === pingSuccess.type) {
- 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: PingState = {
- ...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.ts b/tgui/packages/tgui-panel/ping/selectors.ts
deleted file mode 100644
index 1b8bfb4ee40..00000000000
--- a/tgui/packages/tgui-panel/ping/selectors.ts
+++ /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/reconnect.tsx b/tgui/packages/tgui-panel/reconnect.tsx
index 4626ebb74e7..9e9f8782f99 100644
--- a/tgui/packages/tgui-panel/reconnect.tsx
+++ b/tgui/packages/tgui-panel/reconnect.tsx
@@ -1,4 +1,4 @@
-import { Button } from 'tgui-core/components';
+import { Button, Stack } from 'tgui-core/components';
let url: string | null = null;
@@ -11,30 +11,48 @@ setInterval(() => {
});
}, 5000);
-export const ReconnectButton = () => {
+export function ReconnectButton(props: {
+ onDismissedWarning: React.Dispatch>;
+}) {
if (!url) {
return null;
}
+ const { onDismissedWarning } = props;
+
return (
- <>
-
-
+ }
+ >
+ {FONTS.map((FONT) => (
+
+ ))}
+
+ ) : (
+
+
+ updateSettings({
+ fontFamily: value,
+ })
+ }
+ />
+
+
+ )}
+