Merge pull request #6700 from Citadel-Station-13/upstream-merge-37399

[MIRROR] Use spritesheets to reduce time spent sending PNG assets by 90+%

code/modules/client/asset_cache.dm

@@ -161,8 +161,12 @@ GLOBAL_LIST_EMPTY(asset_datums)
 		return new type()
 	return GLOB.asset_datums[type]
 
+/datum/asset
+	var/_abstract = /datum/asset
+
 /datum/asset/New()
 	GLOB.asset_datums[type] = src
+	register()
 
 /datum/asset/proc/register()
 	return
@@ -170,20 +174,173 @@ GLOBAL_LIST_EMPTY(asset_datums)
 /datum/asset/proc/send(client)
 	return
 
+
 //If you don't need anything complicated.
 /datum/asset/simple
+	_abstract = /datum/asset/simple
 	var/assets = list()
 	var/verify = FALSE
 
 /datum/asset/simple/register()
 	for(var/asset_name in assets)
 		register_asset(asset_name, assets[asset_name])
+
 /datum/asset/simple/send(client)
 	send_asset_list(client,assets,verify)
 
 
+// For registering or sending multiple others at once
+/datum/asset/group
+	_abstract = /datum/asset/group
+	var/list/children
+
+/datum/asset/group/register()
+	for(var/type in children)
+		get_asset_datum(type)
+
+/datum/asset/group/send(client/C)
+	for(var/type in children)
+		var/datum/asset/A = get_asset_datum(type)
+		A.send(C)
+
+
+// spritesheet implementation - coalesces various icons into a single .png file
+// and uses CSS to select icons out of that file - saves on transferring some
+// 1400-odd individual PNG files
+#define SPR_SIZE 1
+#define SPR_IDX 2
+#define SPRSZ_COUNT 1
+#define SPRSZ_ICON 2
+#define SPRSZ_STRIPPED 3
+
+/datum/asset/spritesheet
+	_abstract = /datum/asset/spritesheet
+	var/name
+	var/list/sizes = list()    // "32x32" -> list(10, icon/normal, icon/stripped)
+	var/list/sprites = list()  // "foo_bar" -> list("32x32", 5)
+	var/verify = FALSE
+
+/datum/asset/spritesheet/register()
+	if (!name)
+		CRASH("spritesheet [type] cannot register without a name")
+	ensure_stripped()
+
+	var/res_name = "spritesheet_[name].css"
+	var/fname = "data/spritesheets/[res_name]"
+	call("rust_g", "file_write")(generate_css(), fname)
+	register_asset(res_name, file(fname))
+
+	for(var/size_id in sizes)
+		var/size = sizes[size_id]
+		register_asset("[name]_[size_id].png", size[SPRSZ_STRIPPED])
+
+/datum/asset/spritesheet/send(client/C)
+	if (!name)
+		return
+	var/all = list("spritesheet_[name].css")
+	for(var/size_id in sizes)
+		all += "[name]_[size_id].png"
+	send_asset_list(C, all, verify)
+
+/datum/asset/spritesheet/proc/ensure_stripped(sizes_to_strip = sizes)
+	for(var/size_id in sizes_to_strip)
+		var/size = sizes[size_id]
+		if (size[SPRSZ_STRIPPED])
+			continue
+
+		// save flattened version
+		var/fname = "data/spritesheets/[name]_[size_id].png"
+		fcopy(size[SPRSZ_ICON], fname)
+		var/error = call("rust_g", "dmi_strip_metadata")(fname)
+		if(length(error))
+			stack_trace("Failed to strip [name]_[size_id].png: [error]")
+		size[SPRSZ_STRIPPED] = icon(fname)
+
+/datum/asset/spritesheet/proc/generate_css()
+	var/list/out = list()
+
+	for (var/size_id in sizes)
+		var/size = sizes[size_id]
+		var/icon/tiny = size[SPRSZ_ICON]
+		out += ".[name][size_id]{display:inline-block;width:[tiny.Width()]px;height:[tiny.Height()]px;background:url('[name]_[size_id].png') no-repeat;}"
+
+	for (var/sprite_id in sprites)
+		var/sprite = sprites[sprite_id]
+		var/size_id = sprite[SPR_SIZE]
+		var/idx = sprite[SPR_IDX]
+		var/size = sizes[size_id]
+
+		var/icon/tiny = size[SPRSZ_ICON]
+		var/icon/big = size[SPRSZ_STRIPPED]
+		var/per_line = big.Width() / tiny.Width()
+		var/x = (idx % per_line) * tiny.Width()
+		var/y = round(idx / per_line) * tiny.Height()
+
+		out += ".[name][size_id].[sprite_id]{background-position:-[x]px -[y]px;}"
+
+	return out.Join("\n")
+
+/datum/asset/spritesheet/proc/Insert(sprite_name, icon/I, icon_state="", dir=SOUTH, frame=1, moving=FALSE)
+	I = icon(I, icon_state=icon_state, dir=dir, frame=frame, moving=moving)
+	if (!I || !length(icon_states(I)))  // that direction or state doesn't exist
+		return
+	var/size_id = "[I.Width()]x[I.Height()]"
+	var/size = sizes[size_id]
+
+	if (sprites[sprite_name])
+		CRASH("duplicate sprite \"[sprite_name]\" in sheet [name] ([type])")
+
+	if (size)
+		var/position = size[SPRSZ_COUNT]++
+		var/icon/sheet = size[SPRSZ_ICON]
+		size[SPRSZ_STRIPPED] = null
+		sheet.Insert(I, icon_state=sprite_name)
+		sprites[sprite_name] = list(size_id, position)
+	else
+		sizes[size_id] = size = list(1, I, null)
+		sprites[sprite_name] = list(size_id, 0)
+
+/datum/asset/spritesheet/proc/InsertAll(prefix, icon/I, list/directions)
+	if (length(prefix))
+		prefix = "[prefix]-"
+
+	if (!directions)
+		directions = list(SOUTH)
+
+	for (var/icon_state_name in icon_states(I))
+		for (var/direction in directions)
+			var/prefix2 = (directions.len > 1) ? "[dir2text(direction)]-" : ""
+			Insert("[prefix][prefix2][icon_state_name]", I, icon_state=icon_state_name, dir=direction)
+
+/datum/asset/spritesheet/proc/css_tag()
+	return {"<link rel="stylesheet" href="spritesheet_[name].css" />"}
+
+/datum/asset/spritesheet/proc/icon_tag(sprite_name)
+	var/sprite = sprites[sprite_name]
+	if (!sprite)
+		return null
+	var/size_id = sprite[SPR_SIZE]
+	return {"<span class="[name][size_id] [sprite_name]"></span>"}
+
+#undef SPR_SIZE
+#undef SPR_IDX
+#undef SPRSZ_COUNT
+#undef SPRSZ_ICON
+#undef SPRSZ_STRIPPED
+
+
+/datum/asset/spritesheet/simple
+	_abstract = /datum/asset/spritesheet/simple
+	var/list/assets
+
+/datum/asset/spritesheet/simple/register()
+	for (var/key in assets)
+		Insert(key, assets[key])
+	..()
+
 //Generates assets based on iconstates of a single icon
 /datum/asset/simple/icon_states
+	_abstract = /datum/asset/simple/icon_states
 	var/icon
 	var/list/directions = list(SOUTH)
 	var/frame = 1
@@ -209,6 +366,7 @@ GLOBAL_LIST_EMPTY(asset_datums)
 			register_asset(asset_name, asset)
 
 /datum/asset/simple/icon_states/multiple_icons
+	_abstract = /datum/asset/simple/icon_states/multiple_icons
 	var/list/icons
 
 /datum/asset/simple/icon_states/multiple_icons/register()
@@ -260,50 +418,52 @@ GLOBAL_LIST_EMPTY(asset_datums)
 		"smmon_6.gif" 				= 'icons/program_icons/smmon_6.gif'
 	)
 
-/datum/asset/simple/pda
+/datum/asset/spritesheet/simple/pda
+	name = "pda"
 	assets = list(
-		"pda_atmos.png"			= 'icons/pda_icons/pda_atmos.png',
-		"pda_back.png"			= 'icons/pda_icons/pda_back.png',
-		"pda_bell.png"			= 'icons/pda_icons/pda_bell.png',
-		"pda_blank.png"			= 'icons/pda_icons/pda_blank.png',
-		"pda_boom.png"			= 'icons/pda_icons/pda_boom.png',
-		"pda_bucket.png"		= 'icons/pda_icons/pda_bucket.png',
-		"pda_medbot.png"		= 'icons/pda_icons/pda_medbot.png',
-		"pda_floorbot.png"		= 'icons/pda_icons/pda_floorbot.png',
-		"pda_cleanbot.png"		= 'icons/pda_icons/pda_cleanbot.png',
-		"pda_crate.png"			= 'icons/pda_icons/pda_crate.png',
-		"pda_cuffs.png"			= 'icons/pda_icons/pda_cuffs.png',
-		"pda_eject.png"			= 'icons/pda_icons/pda_eject.png',
-		"pda_flashlight.png"	= 'icons/pda_icons/pda_flashlight.png',
-		"pda_honk.png"			= 'icons/pda_icons/pda_honk.png',
-		"pda_mail.png"			= 'icons/pda_icons/pda_mail.png',
-		"pda_medical.png"		= 'icons/pda_icons/pda_medical.png',
-		"pda_menu.png"			= 'icons/pda_icons/pda_menu.png',
-		"pda_mule.png"			= 'icons/pda_icons/pda_mule.png',
-		"pda_notes.png"			= 'icons/pda_icons/pda_notes.png',
-		"pda_power.png"			= 'icons/pda_icons/pda_power.png',
-		"pda_rdoor.png"			= 'icons/pda_icons/pda_rdoor.png',
-		"pda_reagent.png"		= 'icons/pda_icons/pda_reagent.png',
-		"pda_refresh.png"		= 'icons/pda_icons/pda_refresh.png',
-		"pda_scanner.png"		= 'icons/pda_icons/pda_scanner.png',
-		"pda_signaler.png"		= 'icons/pda_icons/pda_signaler.png',
-		"pda_status.png"		= 'icons/pda_icons/pda_status.png',
-		"pda_dronephone.png"	= 'icons/pda_icons/pda_dronephone.png'
+		"atmos"			= 'icons/pda_icons/pda_atmos.png',
+		"back"			= 'icons/pda_icons/pda_back.png',
+		"bell"			= 'icons/pda_icons/pda_bell.png',
+		"blank"			= 'icons/pda_icons/pda_blank.png',
+		"boom"			= 'icons/pda_icons/pda_boom.png',
+		"bucket"		= 'icons/pda_icons/pda_bucket.png',
+		"medbot"		= 'icons/pda_icons/pda_medbot.png',
+		"floorbot"		= 'icons/pda_icons/pda_floorbot.png',
+		"cleanbot"		= 'icons/pda_icons/pda_cleanbot.png',
+		"crate"			= 'icons/pda_icons/pda_crate.png',
+		"cuffs"			= 'icons/pda_icons/pda_cuffs.png',
+		"eject"			= 'icons/pda_icons/pda_eject.png',
+		"flashlight"	= 'icons/pda_icons/pda_flashlight.png',
+		"honk"			= 'icons/pda_icons/pda_honk.png',
+		"mail"			= 'icons/pda_icons/pda_mail.png',
+		"medical"		= 'icons/pda_icons/pda_medical.png',
+		"menu"			= 'icons/pda_icons/pda_menu.png',
+		"mule"			= 'icons/pda_icons/pda_mule.png',
+		"notes"			= 'icons/pda_icons/pda_notes.png',
+		"power"			= 'icons/pda_icons/pda_power.png',
+		"rdoor"			= 'icons/pda_icons/pda_rdoor.png',
+		"reagent"		= 'icons/pda_icons/pda_reagent.png',
+		"refresh"		= 'icons/pda_icons/pda_refresh.png',
+		"scanner"		= 'icons/pda_icons/pda_scanner.png',
+		"signaler"		= 'icons/pda_icons/pda_signaler.png',
+		"status"		= 'icons/pda_icons/pda_status.png',
+		"dronephone"	= 'icons/pda_icons/pda_dronephone.png'
 	)
 
-/datum/asset/simple/paper
+/datum/asset/spritesheet/simple/paper
+	name = "paper"
 	assets = list(
-		"large_stamp-clown.png" = 'icons/stamp_icons/large_stamp-clown.png',
-		"large_stamp-deny.png" = 'icons/stamp_icons/large_stamp-deny.png',
-		"large_stamp-ok.png" = 'icons/stamp_icons/large_stamp-ok.png',
-		"large_stamp-hop.png" = 'icons/stamp_icons/large_stamp-hop.png',
-		"large_stamp-cmo.png" = 'icons/stamp_icons/large_stamp-cmo.png',
-		"large_stamp-ce.png" = 'icons/stamp_icons/large_stamp-ce.png',
-		"large_stamp-hos.png" = 'icons/stamp_icons/large_stamp-hos.png',
-		"large_stamp-rd.png" = 'icons/stamp_icons/large_stamp-rd.png',
-		"large_stamp-cap.png" = 'icons/stamp_icons/large_stamp-cap.png',
-		"large_stamp-qm.png" = 'icons/stamp_icons/large_stamp-qm.png',
-		"large_stamp-law.png" = 'icons/stamp_icons/large_stamp-law.png'
+		"stamp-clown" = 'icons/stamp_icons/large_stamp-clown.png',
+		"stamp-deny" = 'icons/stamp_icons/large_stamp-deny.png',
+		"stamp-ok" = 'icons/stamp_icons/large_stamp-ok.png',
+		"stamp-hop" = 'icons/stamp_icons/large_stamp-hop.png',
+		"stamp-cmo" = 'icons/stamp_icons/large_stamp-cmo.png',
+		"stamp-ce" = 'icons/stamp_icons/large_stamp-ce.png',
+		"stamp-hos" = 'icons/stamp_icons/large_stamp-hos.png',
+		"stamp-rd" = 'icons/stamp_icons/large_stamp-rd.png',
+		"stamp-cap" = 'icons/stamp_icons/large_stamp-cap.png',
+		"stamp-qm" = 'icons/stamp_icons/large_stamp-qm.png',
+		"stamp-law" = 'icons/stamp_icons/large_stamp-law.png'
 	)
 
 /datum/asset/simple/IRV
@@ -335,6 +495,9 @@ GLOBAL_LIST_EMPTY(asset_datums)
 		"changelog.css" = 'html/changelog.css'
 	)
 
+/datum/asset/group/goonchat
+	children = list(/datum/asset/simple/goonchat, /datum/asset/spritesheet/goonchat)
+
 /datum/asset/simple/goonchat
 	verify = FALSE
 	assets = list(
@@ -350,6 +513,24 @@ GLOBAL_LIST_EMPTY(asset_datums)
 		"browserOutput.css"	       = 'code/modules/goonchat/browserassets/css/browserOutput.css',
 	)
 
+/datum/asset/spritesheet/goonchat
+	name = "chat"
+
+/datum/asset/spritesheet/goonchat/register()
+	InsertAll("emoji", 'icons/emoji.dmi')
+
+	// pre-loading all lanugage icons also helps to avoid meta
+	InsertAll("language", 'icons/misc/language.dmi')
+	// catch languages which are pulling icons from another file
+	for(var/path in typesof(/datum/language))
+		var/datum/language/L = path
+		var/icon = initial(L.icon)
+		if (icon != 'icons/misc/language.dmi')
+			var/icon_state = initial(L.icon_state)
+			Insert("language-[icon_state]", icon, icon_state=icon_state)
+
+	..()
+
 /datum/asset/simple/permissions
 	assets = list(
 		"padlock.png"	= 'html/padlock.png'
@@ -362,26 +543,19 @@ GLOBAL_LIST_EMPTY(asset_datums)
 		var/datum/language/L = new path ()
 		L.get_icon()
 
-/datum/asset/simple/icon_states/emojis
-	icon = 'icons/emoji.dmi'
-	generic_icon_names = TRUE
+/datum/asset/spritesheet/pipes
+	name = "pipes"
 
-/datum/asset/simple/icon_states/multiple_icons/pipes
-	icons = list('icons/obj/atmospherics/pipes/pipe_item.dmi', 'icons/obj/atmospherics/pipes/disposal.dmi', 'icons/obj/atmospherics/pipes/transit_tube.dmi')
-	prefix = "pipe"
-
-/datum/asset/simple/icon_states/multiple_icons/pipes/New()
-	directions = GLOB.alldirs
+/datum/asset/spritesheet/pipes/register()
+	for (var/each in list('icons/obj/atmospherics/pipes/pipe_item.dmi', 'icons/obj/atmospherics/pipes/disposal.dmi', 'icons/obj/atmospherics/pipes/transit_tube.dmi'))
+		InsertAll("", each, GLOB.alldirs)
 	..()
 
-/datum/asset/simple/icon_states/multiple_icons/pipes/register()
-	..()
-	var/meter = icon('icons/obj/atmospherics/pipes/simple.dmi', "meterX", SOUTH, frame, movement_states)
-	if(meter)
-		register_asset(sanitize_filename("[prefix].south.meterX.png"), fcopy_rsc(meter))
-
 // Representative icons for each research design
-/datum/asset/simple/research_designs/register()
+/datum/asset/spritesheet/research_designs
+	name = "design"
+
+/datum/asset/spritesheet/research_designs/register()
 	for (var/path in subtypesof(/datum/design))
 		var/datum/design/D = path
 
@@ -401,7 +575,6 @@ GLOBAL_LIST_EMPTY(asset_datums)
 			if (machine)
 				item = machine
 		var/icon_file = initial(item.icon)
-		var/all_states = icon_states(icon_file)
 		var/icon/I = icon(icon_file, initial(item.icon_state), SOUTH)
 
 		// computers (and snowflakes) get their screen and keyboard sprites
@@ -409,10 +582,11 @@ GLOBAL_LIST_EMPTY(asset_datums)
 			var/obj/machinery/computer/C = item
 			var/screen = initial(C.icon_screen)
 			var/keyboard = initial(C.icon_keyboard)
+			var/all_states = icon_states(icon_file)
 			if (screen && (screen in all_states))
 				I.Blend(icon(icon_file, screen, SOUTH), ICON_OVERLAY)
 			if (keyboard && (keyboard in all_states))
 				I.Blend(icon(icon_file, keyboard, SOUTH), ICON_OVERLAY)
 
-		assets["design_[initial(D.id)].png"] = I
+		Insert(initial(D.id), I)
 	return ..()

code/modules/emoji/emoji_parse.dm

@@ -15,8 +15,10 @@
 			search = findtext(text, ":", pos+1)
 			if(search)
 				emoji = lowertext(copytext(text, pos+1, search))
-				if(emoji in emojis)
-					parsed += icon2html('icons/emoji.dmi', world, emoji)
+				var/datum/asset/spritesheet/sheet = get_asset_datum(/datum/asset/spritesheet/goonchat)
+				var/tag = sheet.icon_tag("emoji-[emoji]")
+				if(tag)
+					parsed += tag
 					pos = search + 1
 				else
 					parsed += copytext(text, pos, search)

code/modules/goonchat/browserOutput.dm

@@ -46,8 +46,7 @@ GLOBAL_DATUM_INIT(iconCache, /savefile, new("data/iconCache.sav")) //Cache of ic
 	if(!owner)
 		return
 
-	var/datum/asset/stuff = get_asset_datum(/datum/asset/simple/goonchat)
-	stuff.register()
+	var/datum/asset/stuff = get_asset_datum(/datum/asset/group/goonchat)
 	stuff.send(owner)
 
 	owner << browse(file('code/modules/goonchat/browserassets/html/browserOutput.html'), "window=browseroutput")

code/modules/goonchat/browserassets/html/browserOutput.html

@@ -6,6 +6,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 	<link rel="stylesheet" type="text/css" href="font-awesome.css" />
 	<link rel="stylesheet" type="text/css" href="browserOutput.css" />
+	<link rel="stylesheet" type="text/css" href="spritesheet_chat.css" />
 	<script type="text/javascript" src="errorHandler.js"></script>
 	<script type="text/javascript" src="jquery.min.js"></script>
 	<script type="text/javascript" src="json2.min.js"></script>

code/modules/language/language.dm

@@ -35,7 +35,8 @@
 	return TRUE
 
 /datum/language/proc/get_icon()
-	return "[icon2html(icon, world, icon_state)]"
+	var/datum/asset/spritesheet/sheet = get_asset_datum(/datum/asset/spritesheet/goonchat)
+	return sheet.icon_tag("language-[icon_state]")
 
 /datum/language/proc/get_random_name(gender, name_count=2, syllable_count=4, syllable_divisor=2)
 	if(!syllables || !syllables.len)

code/modules/paperwork/paper.dm

@@ -66,7 +66,7 @@
 	..()
 	to_chat(user, "<span class='notice'>Alt-click to fold it.</span>")
 
-	var/datum/asset/assets = get_asset_datum(/datum/asset/simple/paper)
+	var/datum/asset/assets = get_asset_datum(/datum/asset/spritesheet/simple/paper)
 	assets.send(user)
 
 	if(in_range(user, src) || isobserver(user))
@@ -300,7 +300,10 @@
 		if(!in_range(src, user))
 			return
 
-		stamps += "<img src=large_[P.icon_state].png>"
+		var/datum/asset/spritesheet/sheet = get_asset_datum(/datum/asset/spritesheet/simple/paper)
+		if (isnull(stamps))
+			stamps = sheet.css_tag()
+		stamps += sheet.icon_tag(P.icon_state)
 		var/mutable_appearance/stampoverlay = mutable_appearance('icons/obj/bureaucracy.dmi', "paper_[P.icon_state]")
 		stampoverlay.pixel_x = rand(-2, 2)
 		stampoverlay.pixel_y = rand(-3, 2)

code/modules/research/designs.dm

@@ -51,8 +51,9 @@ other types of metals and chemistry for reagents).
 	return ..()
 
 /datum/design/proc/icon_html(client/user)
-	send_asset(user, "design_[id].png", FALSE)
-	return "<img class='icon' src=\"design_[id].png\">"
+	var/datum/asset/spritesheet/sheet = get_asset_datum(/datum/asset/spritesheet/research_designs)
+	sheet.send(user)
+	return sheet.icon_tag(id)
 
 ////////////////////////////////////////
 //Disks for transporting design datums//

code/modules/research/rdconsole.dm

@@ -217,6 +217,8 @@ doesn't have toxins access.
 
 /obj/machinery/computer/rdconsole/proc/ui_header()
 	var/list/l = list()
+	var/datum/asset/spritesheet/sheet = get_asset_datum(/datum/asset/spritesheet/research_designs)
+	l += "[sheet.css_tag()][RDSCREEN_NOBREAK]"
 	l += "<div class='statusDisplay'><b>[stored_research.organization] Research and Development Network</b>"
 	l += "Available points: [round(stored_research.research_points)] (+[round(stored_research.last_bitcoins * 60)] / minute)"
 	l += "Security protocols: [obj_flags & EMAGGED ? "<font color='red'>Disabled</font>" : "<font color='green'>Enabled</font>"]"