TGUI Flavour Text (#17363)

* TGUI Flavour Text

* cl

* we love linetrs

aurorastation.dme

@@ -3301,6 +3301,7 @@
 #include "code\modules\tgui\status_composers.dm"
 #include "code\modules\tgui\tgui.dm"
 #include "code\modules\tgui\tgui_window.dm"
+#include "code\modules\tgui\modules\flavor_text.dm"
 #include "code\modules\tgui\states\admin.dm"
 #include "code\modules\tgui\states\always.dm"
 #include "code\modules\tgui\states\conscious.dm"

code/modules/mob/mob.dm

@@ -646,9 +646,8 @@
 		src << browse(null, t1)
 
 	if(href_list["flavor_more"])
-		var/datum/browser/flavor_win = new(usr, name, capitalize_first_letters(name), 500, 250)
-		flavor_win.set_content(replacetext(flavor_text, "\n", "<BR>"))
-		flavor_win.open()
+		var/datum/tgui_module/flavor_text/FT = new /datum/tgui_module/flavor_text(usr, capitalize_first_letters(name), flavor_text)
+		FT.ui_interact(usr)
 
 	if(href_list["accent_tag"])
 		var/datum/accent/accent = SSrecords.accents[href_list["accent_tag"]]

code/modules/tgui/modules/flavor_text.dm

@@ -0,0 +1,20 @@
+/datum/tgui_module/flavor_text
+	var/mob_name = ""
+	var/flavor_text = ""
+
+/datum/tgui_module/flavor_text/New(mob/user, var/set_mob_name, var/set_flavor_text)
+	..()
+	mob_name = set_mob_name
+	flavor_text = set_flavor_text
+
+/datum/tgui_module/flavor_text/ui_interact(var/mob/user, var/datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "FlavorText", mob_name, 500, 400)
+		ui.autoupdate = FALSE
+		ui.open()
+
+/datum/tgui_module/flavor_text/ui_data(mob/user)
+	var/list/data = list()
+	data["flavor_text"] = flavor_text
+	return data

html/changelogs/geeves-flavour_text_tgui.yml

@@ -0,0 +1,6 @@
+author: Geeves
+
+delete-after: True
+
+changes:
+  - rscadd: "TGUIified the flavor text view."

tgui/packages/tgui/interfaces/FlavorText.tsx

@@ -0,0 +1,47 @@
+import { useBackend } from '../backend';
+import { Box, Divider, Section } from '../components';
+import { Window } from '../layouts';
+
+export type FlavorTextData = {
+  flavor_text: string;
+};
+
+// Credits to https://www.js-craft.io/blog/react-detect-url-text-convert-link
+// for this Linkify code
+const Linkify = ({ text }) => {
+  const isUrl = (word) => {
+    const urlPattern =
+      /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm;
+    return word.match(urlPattern);
+  };
+
+  const addMarkup = (word) => {
+    return isUrl(word) ? `<a href="${word}">${word}</a>` : word;
+  };
+
+  const words = text.split(' ');
+  const formatedWords = words.map((w, i) => addMarkup(w));
+  const html = formatedWords.join(' ');
+  return <Box key={text} dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+export const FlavorText = (props, context) => {
+  const { act, data } = useBackend<FlavorTextData>(context);
+
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <Section>
+          {data.flavor_text.split('\n').map((line) =>
+            line ? (
+              <Box>
+                <Linkify text={line} />
+                <Divider />
+              </Box>
+            ) : null
+          )}
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};