[WIP] Custom Links in Character Directory [Advice Requested] (#17790)

* [WIP] Custom Links in Character Directory

Added custom links to the character directory.
They work fine at the moment as just plain text, even if you have to copy and paste them it's an improvement. However, I wanted to keep this in WIP until I have a chance to ask our TGUI experts if it is possible to make them a clickable link.

* maks link usable

* ignore bad links

* .

---------

Co-authored-by: Kashargul <144968721+Kashargul@users.noreply.github.com>

code/modules/client/verbs/character_directory.dm

@@ -70,6 +70,7 @@ GLOBAL_DATUM(character_directory, /datum/character_directory)
 		var/sexualitytag = null
 		var/eventtag = GLOB.vantag_choices_list[VANTAG_NONE]
 		var/flavor_text = null
+		var/custom_link = null
 		var/tag
 		var/erptag
 		var/character_ad
@@ -116,6 +117,8 @@ GLOBAL_DATUM(character_directory, /datum/character_directory)
 					ooc_notes += "\n\nDISLIKES\n\n[H.ooc_notes_dislikes]"
 			if(LAZYLEN(H.flavor_texts))
 				flavor_text = H.flavor_texts["general"]
+			if(H.custom_link)
+				custom_link = H.custom_link
 
 		if(isAI(C.mob))
 			var/mob/living/silicon/ai/A = C.mob
@@ -234,6 +237,7 @@ GLOBAL_DATUM(character_directory, /datum/character_directory)
 			"erptag" = erptag,
 			"character_ad" = character_ad,
 			"flavor_text" = flavor_text,
+			"custom_link" = custom_link,
 		)))
 
 	data["directory"] = directory_mobs

code/modules/paperwork/pen.dm

@@ -101,9 +101,10 @@
 	var/colors = list("black","blue","red")
 
 /obj/item/pen/AltClick(mob/user)
+	if(!Adjacent(user))
+		return
 	to_chat(user, span_notice("Click."))
 	playsound(src, 'sound/items/penclick.ogg', 50, 1)
-	return
 
 /obj/item/pen/multi/attack_self(mob/user)
 	if(++selectedColor > 3)

tgui/packages/tgui/interfaces/CharacterDirectory/CharacterDirectoryViewCharacter.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Section, Table } from 'tgui-core/components';
 
 import { getTagColor } from './constants';
+import { validateLink } from './functions';
 import type { mobEntry } from './types';
 
 export const ViewCharacter = (props: {
@@ -108,6 +109,15 @@ export const ViewCharacter = (props: {
           {overlay.flavor_text || 'Unset.'}
         </Box>
       </Section>
+      <Section title="Custom Link">
+        <Box style={{ wordBreak: 'break-all' }} preserveWhitespace>
+          {validateLink(overlay.custom_link) ? (
+            <a href={overlay.custom_link}>{overlay.custom_link}</a>
+          ) : (
+            'Unset.'
+          )}
+        </Box>
+      </Section>
     </Section>
   );
 };

tgui/packages/tgui/interfaces/CharacterDirectory/constants.ts

@@ -16,3 +16,6 @@ export const getTagColor = (tag: string) => {
       return 'black';
   }
 };
+
+export const urlRegex =
+  /^https:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;

tgui/packages/tgui/interfaces/CharacterDirectory/functions.ts

@@ -0,0 +1,11 @@
+import { urlRegex } from './constants';
+
+export function validateLink(url: string | null) {
+  if (!url) {
+    return false;
+  }
+  if (urlRegex.test(url)) {
+    return true;
+  }
+  return false;
+}

tgui/packages/tgui/interfaces/CharacterDirectory/types.ts

@@ -26,4 +26,5 @@ export type mobEntry = {
   erptag: string;
   character_ad: string;
   flavor_text: string;
+  custom_link: string;
 };