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

Co-authored-by: SatinIsle <98125273+SatinIsle@users.noreply.github.com>
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;
 };