allows to interleave chat messages (#15887)

* allows to interleave chat messages

* make it work on tab swap and filter change

tgui/packages/tgui-panel/chat/middleware.js

@@ -166,6 +166,8 @@ export const chatMiddleware = (store) => {
       game.roundId,
       settings.prependTimestamps,
       settings.hideImportantInAdminTab,
+      settings.interleave,
+      settings.interleaveColor,
     );
     // Load the chat once settings are loaded
     if (!initialized && settings.initialized) {

tgui/packages/tgui-panel/chat/renderer.jsx

@@ -77,6 +77,17 @@ const createMessageNode = () => {
   return node;
 };
 
+const interleaveMessage = (node, interleave, color) => {
+  if (interleave) {
+    node.setAttribute('style', 'background-color:' + color);
+    node.setAttribute('display', 'block');
+  } else {
+    node.removeAttribute('style');
+    node.removeAttribute('display');
+  }
+  return node;
+};
+
 const createReconnectedNode = () => {
   const node = document.createElement('div');
   node.className = 'Chat__reconnected';
@@ -156,6 +167,9 @@ class ChatRenderer {
     this.logEnable = true;
     this.roundId = null;
     this.storedTypes = {};
+    this.interleave = false;
+    this.interleaveEnabled = false;
+    this.interleaveColor = '#909090';
     this.hideImportantInAdminTab = false;
     // Scroll handler
     /** @type {HTMLElement} */
@@ -378,6 +392,8 @@ class ChatRenderer {
     roundId,
     prependTimestamps,
     hideImportantInAdminTab,
+    interleaveEnabled,
+    interleaveColor,
   ) {
     this.visibleMessageLimit = visibleMessageLimit;
     this.combineMessageLimit = combineMessageLimit;
@@ -388,6 +404,8 @@ class ChatRenderer {
     this.roundId = roundId;
     this.prependTimestamps = prependTimestamps;
     this.hideImportantInAdminTab = hideImportantInAdminTab;
+    this.interleaveEnabled = interleaveEnabled;
+    this.interleaveColor = interleaveColor;
   }
 
   changePage(page) {
@@ -413,6 +431,12 @@ class ChatRenderer {
         )
       ) {
         node = message.node;
+        node = interleaveMessage(
+          node,
+          this.interleaveEnabled && this.interleave,
+          this.interleaveColor,
+        );
+        this.interleave = !this.interleave;
         fragment.appendChild(node);
         this.visibleMessages.push(message);
       }
@@ -627,6 +651,12 @@ class ChatRenderer {
           this.hideImportantInAdminTab
         )
       ) {
+        node = interleaveMessage(
+          node,
+          this.interleaveEnabled && this.interleave,
+          this.interleaveColor,
+        );
+        this.interleave = !this.interleave;
         fragment.appendChild(node);
         this.visibleMessages.push(message);
       }

tgui/packages/tgui-panel/settings/SettingsPanel.jsx

@@ -95,6 +95,8 @@ export const SettingsGeneral = (props) => {
     lineHeight,
     showReconnectWarning,
     prependTimestamps,
+    interleave,
+    interleaveColor,
   } = useSelector(selectSettings);
   const dispatch = useDispatch();
   const [freeFont, setFreeFont] = useState(false);
@@ -209,6 +211,37 @@ export const SettingsGeneral = (props) => {
             }
           />
         </LabeledList.Item>
+        <LabeledList.Item label="Interleave messages">
+          <Button.Checkbox
+            checked={interleave}
+            content=""
+            tooltip="Enabling this will interleave messages."
+            mr="5px"
+            onClick={() =>
+              dispatch(
+                updateSettings({
+                  interleave: !interleave,
+                }),
+              )
+            }
+          />
+          <Box inline>
+            <ColorBox mr={1} color={interleaveColor} />
+            <Input
+              width="5em"
+              monospace
+              placeholder="#ffffff"
+              value={interleaveColor}
+              onInput={(e, value) =>
+                dispatch(
+                  updateSettings({
+                    interleaveColor: value,
+                  }),
+                )
+              }
+            />
+          </Box>
+        </LabeledList.Item>
         <LabeledList.Item label="Enable chat timestamps">
           <Button.Checkbox
             checked={prependTimestamps}

tgui/packages/tgui-panel/settings/reducer.js

@@ -59,6 +59,8 @@ const initialState = {
   initialized: false,
   storedTypes: {},
   hideImportantInAdminTab: false,
+  interleave: false,
+  interleaveColor: '#909090',
 };
 
 export const settingsReducer = (state = initialState, action) => {