Updating again because other PR with tgui changes :seensomeshit:

tgui/packages/tgui/interfaces/Communicator.js

@@ -536,6 +536,21 @@ const enforceLengthLimit = (prefix, name, length) => {
   return prefix + name;
 };
 
+const findClassMessage = (im, targetAddress, lastIndex, filterArray) => {
+  if (lastIndex < 0 || lastIndex > filterArray.length) {
+    return IsIMOurs(im, targetAddress) ? "TinderMessage_First_Sent" : "TinderMessage_First_Received";
+  }
+
+  let thisSent = IsIMOurs(im, targetAddress);
+  let lastSent = IsIMOurs(filterArray[lastIndex], targetAddress);
+  if (thisSent && lastSent) {
+    return "TinderMessage_Subsequent_Sent";
+  } else if (!thisSent && !lastSent) {
+    return "TinderMessage_Subsequent_Received";
+  }
+  return thisSent ? "TinderMessage_First_Sent" : "TinderMessage_First_Received";
+};
+
 const MessagingThreadTab = (props, context) => {
   const { act, data } = useBackend(context);
 
@@ -578,7 +593,7 @@ const MessagingThreadTab = (props, context) => {
           {imList.map((im, i) => (
             <Box
               key={i}
-              color={IsIMOurs(im, targetAddress) ? "#4d9121" : "#cd7a0d"}>
+              className={IsIMOurs(im, targetAddress) ? "ClassicMessage_Sent" : "ClassicMessage_Received"}>
               {IsIMOurs(im, targetAddress) ? "You" : "Them"}: {im.im}
             </Box>
           ))}
@@ -618,37 +633,16 @@ const MessagingThreadTab = (props, context) => {
         "height": "95%",
         "overflow-y": "auto",
       }}>
-        {imList.map((im, i) => (
+        {imList.map((im, i, filterArr) => (
           <Box
             textAlign={IsIMOurs(im, targetAddress) ? "right" : "left"}
-            position="relative"
             mb={1}
             key={i}>
-            <Icon
-              fontSize={2.5}
-              color={IsIMOurs(im, targetAddress) ? "#4d9121" : "#cd7a0d"}
-              position="absolute"
-              left={IsIMOurs(im, targetAddress) ? null : "0px"}
-              right={IsIMOurs(im, targetAddress) ? "0px" : null}
-              bottom="-4px"
-              style={{
-                "z-index": "0",
-                "transform": IsIMOurs(im, targetAddress) ? "scale(-1, 1)" : null,
-              }}
-              name="comment" />
             <Box
-              inline
-              backgroundColor={IsIMOurs(im, targetAddress) ? "#4d9121" : "#cd7a0d"}
-              p={1}
-              maxWidth="100%"
-              position="relative"
-              textAlign={IsIMOurs(im, targetAddress) ? "left" : "right"}
-              style={{
-                "z-index": "1",
-                "border-radius": "10px",
-                "word-break": "break-all",
-              }}>
-              {IsIMOurs(im, targetAddress) ? "You:" : "Them:"} {decodeHtmlEntities(im.im)}
+              maxWidth="75%"
+              className={findClassMessage(im, targetAddress, i - 1, filterArr)}
+              inline>
+              {decodeHtmlEntities(im.im)}
             </Box>
           </Box>
         ))}

tgui/packages/tgui/interfaces/pda/pda_messenger.js

@@ -1,3 +1,4 @@
+import { decodeHtmlEntities } from 'common/string';
 import { filter } from 'common/collections';
 import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from "../../backend";
@@ -20,6 +21,20 @@ export const pda_messenger = (props, context) => {
   return <MessengerList />;
 };
 
+const findClassMessage = (im, lastIndex, filterArray) => {
+  if (lastIndex < 0 || lastIndex > filterArray.length) {
+    return im.sent ? "TinderMessage_First_Sent" : "TinderMessage_First_Received";
+  }
+
+  let lastSent = filterArray[lastIndex].sent;
+  if (im.sent && lastSent) {
+    return "TinderMessage_Subsequent_Sent";
+  } else if (!im.sent && !lastSent) {
+    return "TinderMessage_Subsequent_Received";
+  }
+  return im.sent ? "TinderMessage_First_Sent" : "TinderMessage_First_Received";
+};
+
 const ActiveConversation = (props, context) => {
   const { act, data } = useBackend(context);
 
@@ -52,37 +67,16 @@ const ActiveConversation = (props, context) => {
         "height": "97%",
         "overflow-y": "auto",
       }}>
-        {filter(im => im.target === active_conversation)(messages).map((im, i) => (
+        {filter(im => im.target === active_conversation)(messages).map((im, i, filterArr) => (
           <Box
             textAlign={im.sent ? "right" : "left"}
-            position="relative"
             mb={1}
             key={i}>
-            <Icon
-              fontSize={2.5}
-              color={im.sent ? "#4d9121" : "#cd7a0d"}
-              position="absolute"
-              left={im.sent ? null : "0px"}
-              right={im.sent ? "0px" : null}
-              bottom="-4px"
-              style={{
-                "z-index": "0",
-                "transform": im.sent ? "scale(-1, 1)" : null,
-              }}
-              name="comment" />
             <Box
-              inline
-              backgroundColor={im.sent ? "#4d9121" : "#cd7a0d"}
-              p={1}
-              maxWidth="100%"
-              position="relative"
-              textAlign={im.sent ? "left" : "right"}
-              style={{
-                "z-index": "1",
-                "border-radius": "10px",
-                "word-break": "break-all",
-              }}>
-              {im.sent ? "You:" : "Them:"} {im.message}
+              maxWidth="75%"
+              className={findClassMessage(im, i - 1, filterArr)}
+              inline>
+              {decodeHtmlEntities(im.message)}
             </Box>
           </Box>
         ))}
@@ -116,11 +110,8 @@ const ActiveConversation = (props, context) => {
           {filter(im => im.target === active_conversation)(messages).map((im, i) => (
             <Box
               key={i}
-              color={im.sent ? "#4d9121" : "#cd7a0d"}
-              style={{
-                "word-break": "break-all",
-              }}>
-              {im.sent ? "You:" : "Them:"} <Box inline color={useRetro ? "black" : null}>{im.message}</Box>
+              className={im.sent ? "ClassicMessage_Sent" : "ClassicMessage_Received"}>
+              {im.sent ? "You:" : "Them:"} {decodeHtmlEntities(im.message)}
             </Box>
           ))}
         </Section>

tgui/packages/tgui/styles/interfaces/TinderMessaging.scss

@@ -0,0 +1,55 @@
+// Kind of a weirdly named SCSS file, but this is used for both pda/pda_messenger.js
+// as well as Communicator.js, and it implements a CSS scheme to produce results similar to Tinder.
+
+@use '../base.scss';
+
+$color-sent: #4d9121 !default;
+$color-received: #cd7a0d !default;
+
+.TinderMessage_First_Sent,
+.TinderMessage_Subsequent_Sent,
+.TinderMessage_First_Received,
+.TinderMessage_Subsequent_Received {
+  padding: 6px;
+  z-index: 1;
+  word-break: break-all;
+  max-width: 100%;
+}
+
+.TinderMessage_First_Sent, .TinderMessage_Subsequent_Sent {
+  text-align: right;
+  background-color: $color-sent;
+}
+
+.TinderMessage_First_Sent {
+  border-radius: 10px 10px 0px 10px;
+}
+
+.TinderMessage_Subsequent_Sent {
+  border-radius: 10px 0px 0px 10px;
+}
+
+.TinderMessage_First_Received, .TinderMessage_Subsequent_Received {
+  text-align: left;
+  background-color: $color-received;
+}
+
+.TinderMessage_First_Received {
+  border-radius: 10px 10px 10px 0px;
+}
+
+.TinderMessage_Subsequent_Received {
+  border-radius: 0px 10px 10px 0px;
+}
+
+.ClassicMessage_Sent, .ClassicMessage_Received {
+  word-break: break-all;
+}
+
+.ClassicMessage_Sent {
+  color: $color-sent;
+}
+
+.ClassicMessage_Received {
+  color: $color-received;
+}

tgui/packages/tgui/styles/main.scss

@@ -39,6 +39,7 @@
 @include meta.load-css('./interfaces/IDCard.scss');
 @include meta.load-css('./interfaces/NuclearBomb.scss');
 @include meta.load-css('./interfaces/Roulette.scss');
+@include meta.load-css('./interfaces/TinderMessaging.scss');
 @include meta.load-css('./interfaces/Turbolift.scss');
 
 // Layouts

tgui/packages/tgui/styles/themes/pda-retro.scss

@@ -34,6 +34,12 @@
     'color-background': rgba(0, 0, 0, 0.1),
   ));
 
+  // Interfaces
+  @include meta.load-css('../interfaces/TinderMessaging.scss', $with: (
+    'color-sent': #9faa91,
+    'color-received': #b8b37b,
+  ));
+
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');