From 46a740eea100c4173bbd63aba25918c9ee4aaa7d Mon Sep 17 00:00:00 2001
From: Geeves <ggrobler447@gmail.com>
Date: Wed, 20 Sep 2023 13:35:13 +0200
Subject: [PATCH] TGUI Flavour Text (#17363)

* TGUI Flavour Text

* cl

* we love linetrs
---
 aurorastation.dme                            |  1 +
 code/modules/mob/mob.dm                      |  5 +--
 code/modules/tgui/modules/flavor_text.dm     | 20 +++++++++
 html/changelogs/geeves-flavour_text_tgui.yml |  6 +++
 tgui/packages/tgui/interfaces/FlavorText.tsx | 47 ++++++++++++++++++++
 5 files changed, 76 insertions(+), 3 deletions(-)
 create mode 100644 code/modules/tgui/modules/flavor_text.dm
 create mode 100644 html/changelogs/geeves-flavour_text_tgui.yml
 create mode 100644 tgui/packages/tgui/interfaces/FlavorText.tsx

diff --git a/aurorastation.dme b/aurorastation.dme
index 5f40b411602..9416b408202 100644
--- a/aurorastation.dme
+++ b/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"
diff --git a/code/modules/mob/mob.dm b/code/modules/mob/mob.dm
index 219ee92408a..f68e05824f5 100644
--- a/code/modules/mob/mob.dm
+++ b/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"]]
diff --git a/code/modules/tgui/modules/flavor_text.dm b/code/modules/tgui/modules/flavor_text.dm
new file mode 100644
index 00000000000..a4ab6ce4e13
--- /dev/null
+++ b/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
diff --git a/html/changelogs/geeves-flavour_text_tgui.yml b/html/changelogs/geeves-flavour_text_tgui.yml
new file mode 100644
index 00000000000..9c8b7f98ff5
--- /dev/null
+++ b/html/changelogs/geeves-flavour_text_tgui.yml
@@ -0,0 +1,6 @@
+author: Geeves
+
+delete-after: True
+
+changes:
+  - rscadd: "TGUIified the flavor text view."
\ No newline at end of file
diff --git a/tgui/packages/tgui/interfaces/FlavorText.tsx b/tgui/packages/tgui/interfaces/FlavorText.tsx
new file mode 100644
index 00000000000..7961dde48e5
--- /dev/null
+++ b/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>
+  );
+};