[MIRROR] Add character portraits to the character directory (#11056)

Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>
Co-authored-by: Cameron Lennox <killer65311@gmail.com>

code/game/objects/items/weapons/id cards/station_ids.dm

@@ -86,6 +86,9 @@
 		id_card.species = "[custom_species ? "[custom_species] ([species.name])" : species.name]"
 	id_card.sex = capitalize(name_gender())
 
+	// Save time by reusing our ID card photo instead of generating it for the char directory specifically
+	set_chardirectory_photo(id_card.front)
+
 /obj/item/card/id/tgui_data(mob/user)
 	var/list/data = list()
 

code/modules/client/verbs/character_directory.dm

@@ -47,6 +47,19 @@ GLOBAL_DATUM(character_directory, /datum/character_directory)
 
 	return data
 
+GLOBAL_LIST_EMPTY(chardirectory_photos)
+/mob/proc/set_chardirectory_photo(base64)
+	LAZYSET(GLOB.chardirectory_photos, REF(src), base64)
+
+/mob/proc/get_chardirectory_photo()
+	if(LAZYACCESS(GLOB.chardirectory_photos, REF(src)))
+		return LAZYACCESS(GLOB.chardirectory_photos, REF(src))
+
+	var/icon/F = getFlatIcon(src, defdir = SOUTH, no_anim = TRUE)
+	var/new_base64 = "'data:image/png;base64,[icon2base64(F)]'"
+	set_chardirectory_photo(new_base64)
+	return new_base64
+
 /datum/character_directory/tgui_static_data(mob/user, datum/tgui/ui, datum/tgui_state/state)
 	var/list/data = ..()
 
@@ -74,6 +87,7 @@ GLOBAL_DATUM(character_directory, /datum/character_directory)
 		var/tag
 		var/erptag
 		var/character_ad
+		var/photo = C.mob?.get_chardirectory_photo()
 		if (C.mob?.mind) //could use ternary for all three but this is more efficient
 			tag = C.mob.mind.directory_tag || "Unset"
 			erptag = C.mob.mind.directory_erptag || "Unset"
@@ -238,6 +252,7 @@ GLOBAL_DATUM(character_directory, /datum/character_directory)
 			"character_ad" = character_ad,
 			"flavor_text" = flavor_text,
 			"custom_link" = custom_link,
+			"photo" = photo,
 		)))
 
 	data["directory"] = directory_mobs

tgui/packages/tgui/interfaces/CharacterDirectory/CharacterDirectoryList.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useBackend } from 'tgui/backend';
-import { Button, Section, Table } from 'tgui-core/components';
+import { Button, Image, Section, Stack, Table } from 'tgui-core/components';
 
 import { SortButton } from './CharacterDirectorySortButton';
 import { getTagColor } from './constants';
@@ -36,6 +36,7 @@ export const CharacterDirectoryList = (props: {
     >
       <Table>
         <Table.Row bold>
+          <Table.Cell collapsing>Photo</Table.Cell>
           <SortButton
             id="name"
             sortId={sortId}
@@ -110,14 +111,45 @@ export const CharacterDirectoryList = (props: {
           })
           .map((character, i) => (
             <Table.Row key={i} backgroundColor={getTagColor(character.tag)}>
-              <Table.Cell p={1}>{character.name}</Table.Cell>
-              <Table.Cell>{character.species}</Table.Cell>
-              <Table.Cell>{character.tag}</Table.Cell>
-              <Table.Cell>{character.gendertag}</Table.Cell>
-              <Table.Cell>{character.sexualitytag}</Table.Cell>
-              <Table.Cell>{character.erptag}</Table.Cell>
-              <Table.Cell>{character.eventtag}</Table.Cell>
-              <Table.Cell collapsing textAlign="right">
+              <Table.Cell verticalAlign="middle">
+                {character.photo ? (
+                  <Stack
+                    align="center"
+                    justify="center"
+                    backgroundColor="black"
+                    overflow="hidden"
+                  >
+                    <Stack.Item>
+                      <Image
+                        fixErrors
+                        src={character.photo.substring(
+                          1,
+                          character.photo.length - 1,
+                        )}
+                        height="64px"
+                      />
+                    </Stack.Item>
+                  </Stack>
+                ) : null}
+              </Table.Cell>
+              <Table.Cell p={1} verticalAlign="middle">
+                {character.name}
+              </Table.Cell>
+              <Table.Cell verticalAlign="middle">
+                {character.species}
+              </Table.Cell>
+              <Table.Cell verticalAlign="middle">{character.tag}</Table.Cell>
+              <Table.Cell verticalAlign="middle">
+                {character.gendertag}
+              </Table.Cell>
+              <Table.Cell verticalAlign="middle">
+                {character.sexualitytag}
+              </Table.Cell>
+              <Table.Cell verticalAlign="middle">{character.erptag}</Table.Cell>
+              <Table.Cell verticalAlign="middle">
+                {character.eventtag}
+              </Table.Cell>
+              <Table.Cell verticalAlign="middle" collapsing textAlign="right">
                 <Button
                   onClick={() => onOverlay(character)}
                   color="transparent"

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

@@ -27,4 +27,5 @@ export type mobEntry = {
   character_ad: string;
   flavor_text: string;
   custom_link: string;
+  photo: string | null;
 };