OOC Emoji 2.0 - TG Edition (#25012)

* Didn't work

* It works

* Emojipedia

* Some emoji sorting

* lol

* Remove a lot of shit emoji

* Update emojipedia.dm

* Observer and ghost-bar emoji

* Msay emoji

* Emoji sorting and updates

* Make emoji centered

* Clueless and trollface

* Mowzers

* +taa

* Another rebuild

* TRUE and Rebuild

code/__DEFINES/misc_defines.dm

@@ -52,6 +52,9 @@
 #define PRINTER_FONT "Times New Roman"
 #define SIGNFONT "Times New Roman"
 
+/// Emoji icon set
+#define EMOJI_SET 'icons/ui_icons/emoji.dmi'
+
 //some arbitrary defines to be used by self-pruning global lists. (see master_controller)
 #define PROCESS_KILL 26	//Used to trigger removal from a processing list
 

code/game/verbs/ooc.dm

@@ -91,7 +91,7 @@ GLOBAL_VAR_INIT(admin_ooc_colour, "#b82e00")
 						display_name = holder.fakekey
 
 			if(GLOB.configuration.general.enable_ooc_emoji)
-				msg = "<span class='emoji_enabled'>[msg]</span>"
+				msg = emoji_parse(msg)
 
 			to_chat(C, "<font color='[display_colour]'><span class='ooc'><span class='prefix'>OOC:</span> <EM>[display_name]:</EM> <span class='message'>[msg]</span></span></font>")
 

code/modules/admin/verbs/adminsay.dm

@@ -1,10 +1,12 @@
 /client/proc/cmd_admin_say(msg as text)
 	set name = "Asay" //Gave this shit a shorter name so you only have to time out "asay" rather than "admin say" to use it --NeoFite
 	set hidden = 1
-	if(!check_rights(R_ADMIN))	return
+	if(!check_rights(R_ADMIN))
+		return
 
-	msg = sanitize(copytext_char(msg, 1, MAX_MESSAGE_LEN))
-	if(!msg)	return
+	msg = emoji_parse(copytext_char(sanitize(msg), 1, MAX_MESSAGE_LEN))
+	if(!msg)
+		return
 
 	var/datum/asays/asay = new(usr.ckey, usr.client.holder.rank, msg, world.timeofday)
 	GLOB.asays += asay
@@ -60,7 +62,7 @@
 	else if(!check_rights(R_ADMIN|R_MOD)) // Catch any other non-admins trying to use this proc
 		return
 
-	msg = sanitize(copytext_char(msg, 1, MAX_MESSAGE_LEN))
+	msg = emoji_parse(copytext_char(sanitize(msg), 1, MAX_MESSAGE_LEN))
 	log_mentorsay(msg, src)
 	mob.create_log(OOC_LOG, "MSAY: [msg]")
 

code/modules/asset_cache/asset_list.dm

@@ -240,7 +240,7 @@ GLOBAL_LIST_EMPTY(asset_datums)
 
 	for(var/icon_state_name in icon_states(I))
 		for(var/direction in directions)
-			var/prefix2 = length(directions) ? "[dir2text(direction)]-" : ""
+			var/prefix2 = length(directions) > 1 ? "[dir2text(direction)]-" : ""
 			Insert("[prefix][prefix2][icon_state_name]", I, icon_state=icon_state_name, dir=direction)
 
 /datum/asset/spritesheet/proc/css_tag()

code/modules/asset_cache/assets/asset_emoji.dm

@@ -0,0 +1,5 @@
+/datum/asset/spritesheet/emoji
+	name = "emoji"
+
+/datum/asset/spritesheet/emoji/create_spritesheets()
+	InsertAll("emoji", EMOJI_SET)

code/modules/asset_cache/assets/asset_safe.dm

@@ -1,5 +1,5 @@
 /datum/asset/simple/safe
 	keep_local_name = TRUE
 	assets = list(
-		"safe_dial.png" = 'icons/safe_dial.png'
+		"safe_dial.png" = 'icons/ui_icons/safe_dial.png'
 	)

code/modules/emoji/emoji_parse.dm

@@ -0,0 +1,32 @@
+/// Turns :ai: into an emoji in text.
+/proc/emoji_parse(text)
+	if(!text)
+		return text
+	. = text
+	var/static/list/emojis = icon_states(icon(EMOJI_SET))
+	var/parsed = ""
+	var/pos = 1
+	var/search = 0
+	var/emoji = ""
+	while(TRUE)
+		search = findtext(text, ":", pos)
+		parsed += copytext(text, pos, search)
+		if(search)
+			pos = search
+			search = findtext(text, ":", pos + length(text[pos]))
+			if(search)
+				emoji = lowertext(copytext(text, pos + length(text[pos]), search))
+				var/datum/asset/spritesheet/sheet = get_asset_datum(/datum/asset/spritesheet/emoji)
+				var/tag = sheet.icon_tag("emoji-[emoji]")
+				if(tag)
+					parsed += tag
+					pos = search + length(text[pos])
+				else
+					parsed += copytext(text, pos, search)
+					pos = search
+				emoji = ""
+				continue
+			else
+				parsed += copytext(text, pos, search)
+		break
+	return parsed

code/modules/emoji/emojipedia.dm

@@ -0,0 +1,37 @@
+/client/verb/emojipedia()
+	set name = "Emojipedia"
+	set category = "OOC"
+	set desc = "Literally an emojipedia, a list of all the emoji available for OOC use."
+
+	var/datum/ui_module/emojipedia/emojipedia = new()
+	emojipedia.ui_interact(usr)
+
+/datum/ui_module/emojipedia
+	name = "Emojipedia"
+	/// Store the list of potential emojis here.
+	var/static/list/emoji_list = icon_states(icon(EMOJI_SET))
+
+/datum/ui_module/emojipedia/ui_state(mob/user)
+	return GLOB.always_state
+
+/datum/ui_module/emojipedia/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "Emojipedia", name)
+		ui.autoupdate = FALSE
+		ui.open()
+
+/datum/ui_module/emojipedia/ui_static_data(mob_user)
+	var/list/data = list()
+
+	for(var/emoji in emoji_list)
+		data["emoji_list"] += list(list(
+			"name" = emoji,
+		))
+
+	return data
+
+/datum/ui_module/emojipedia/ui_assets(mob/user)
+	return list(
+		get_asset_datum(/datum/asset/spritesheet/emoji),
+	)

code/modules/mob/dead/observer/observer_say.dm

@@ -4,6 +4,9 @@
 	if(!message)
 		return
 
+	if(GLOB.configuration.general.enable_ooc_emoji)
+		message = emoji_parse(message)
+
 	return say_dead(message)
 
 /mob/dead/observer/handle_track(message, verb = "says", mob/speaker = null, speaker_name, atom/follow_target, hard_to_hear)

code/modules/mob/living/living_say.dm

@@ -113,7 +113,10 @@ GLOBAL_LIST_EMPTY(channel_to_radio_key)
 
 	if(sanitize)
 		if(speaks_ooc)
-			message = sanitize(message)
+			if(GLOB.configuration.general.enable_ooc_emoji)
+				message = emoji_parse(sanitize(message))
+			else
+				message = sanitize(message)
 		else
 			message = sanitize_for_ic(message)
 

code/modules/tgui/tgui_panel/tgui_panel.dm

@@ -57,6 +57,7 @@
 			get_asset_datum(/datum/asset/simple/tgui_panel),
 		))
 	window.send_asset(get_asset_datum(/datum/asset/simple/namespaced/fontawesome))
+	window.send_asset(get_asset_datum(/datum/asset/spritesheet/emoji))
 	request_telemetry()
 	addtimer(CALLBACK(src, PROC_REF(on_initialize_timed_out)), 5 SECONDS)
 

paradise.dme

@@ -1510,6 +1510,7 @@
 #include "code\modules\asset_cache\assets\asset_claw_game.dm"
 #include "code\modules\asset_cache\assets\asset_cloning.dm"
 #include "code\modules\asset_cache\assets\asset_common.dm"
+#include "code\modules\asset_cache\assets\asset_emoji.dm"
 #include "code\modules\asset_cache\assets\asset_jquery.dm"
 #include "code\modules\asset_cache\assets\asset_materials.dm"
 #include "code\modules\asset_cache\assets\asset_mob_hunt.dm"
@@ -1743,6 +1744,8 @@
 #include "code\modules\economy\economy_machinery\atm.dm"
 #include "code\modules\economy\economy_machinery\economy_machinery.dm"
 #include "code\modules\economy\economy_machinery\eftpos.dm"
+#include "code\modules\emoji\emoji_parse.dm"
+#include "code\modules\emoji\emojipedia.dm"
 #include "code\modules\error_handler\error_handler.dm"
 #include "code\modules\error_handler\error_viewer.dm"
 #include "code\modules\events\abductor_event.dm"

tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss

@@ -23,6 +23,10 @@ img.icon {
   vertical-align: bottom;
 }
 
+.emoji16x16 {
+  vertical-align: middle;
+}
+
 a {
   color: #397ea5;
 }

tgui/packages/tgui/interfaces/Emojipedia.tsx

@@ -0,0 +1,72 @@
+import { classes } from 'common/react';
+import { useBackend, useLocalState } from '../backend';
+import { Button, Input, Section } from '../components';
+import { Window } from '../layouts';
+
+type Data = {
+  emoji_list: Emoji[];
+};
+
+type Emoji = {
+  name: string;
+};
+
+export const Emojipedia = (props, context) => {
+  const { data } = useBackend<Data>(context);
+  const { emoji_list } = data;
+  const [searchText, setSearchText] = useLocalState(context, 'searchText', '');
+  const filteredEmoji = emoji_list.filter((emoji) =>
+    emoji.name.toLowerCase().includes(searchText.toLowerCase())
+  );
+
+  return (
+    <Window width={325} height={400}>
+      <Window.Content scrollable>
+        <Section
+          fill
+          scrollable
+          // required: follow semantic versioning every time you touch this file
+          title={'Emojipedia v1.0.1'}
+          buttons={
+            <>
+              <Input
+                placeholder="Search by name"
+                value={searchText}
+                onInput={(e, value) => setSearchText(value)}
+              />
+              <Button
+                tooltip={'Click on an emoji to copy its tag!'}
+                tooltipPosition="bottom"
+                icon="circle-question"
+              />
+            </>
+          }
+        >
+          {filteredEmoji.map((emoji) => (
+            <Button
+              key={emoji.name}
+              m={1}
+              color={'transparent'}
+              className={classes(['emoji16x16', `emoji-${emoji.name}`])}
+              style={{ transform: 'scale(1.5)' }}
+              tooltip={emoji.name}
+              onClick={() => {
+                copyText(emoji.name);
+              }}
+            />
+          ))}
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
+
+const copyText = (text: string) => {
+  const input = document.createElement('input');
+  const formattedText = `:${text}:`;
+  input.value = formattedText;
+  document.body.appendChild(input);
+  input.select();
+  document.execCommand('copy');
+  document.body.removeChild(input);
+};