Redoes decal painter UI and adds tile sprayer (#66248)

* Redoes decal painter UI and adds tile sprayer

* Suggested color palette name changes

* remove unused scss filter

* prettier formatting of DecalPainter.tsc

* added custom colors to tile sprayer

* Prettier formatting

* Removed needless classes

* Autodocs, minor fixes

* Did list format and spritesheet commenting suggestions

code/_globalvars/lists/maintenance_loot.dm

@@ -50,6 +50,7 @@ GLOBAL_LIST_INIT(trash_loot, list(//junk: useless, very easy to get, or ghetto c
 
 		/obj/item/airlock_painter = 1,
 		/obj/item/airlock_painter/decal = 1,
+		/obj/item/airlock_painter/decal/tile = 1,
 		/obj/item/clothing/mask/breath = 1,
 		/obj/item/rack_parts = 1,
 		/obj/item/shard = 1,

code/game/objects/items/airlock_painter.dm

@@ -1,6 +1,6 @@
 /obj/item/airlock_painter
 	name = "airlock painter"
-	desc = "An advanced autopainter preprogrammed with several paintjobs for airlocks. Use it on an airlock during or after construction to change the paintjob."
+	desc = "An advanced autopainter preprogrammed with several paintjobs for airlocks. Use it on an airlock during or after construction to change the paintjob. Alt-Click to remove the ink cartridge."
 	icon = 'icons/obj/objects.dmi'
 	icon_state = "paint sprayer"
 	inhand_icon_state = "paint sprayer"
@@ -14,7 +14,10 @@
 	slot_flags = ITEM_SLOT_BELT
 	usesound = 'sound/effects/spray2.ogg'
 
+	/// The ink cartridge to pull charges from.
 	var/obj/item/toner/ink = null
+	/// The type path to instantiate for the ink cartridge the device initially comes with, eg. /obj/item/toner
+	var/initial_ink_type = /obj/item/toner
 	/// Associate list of all paint jobs the airlock painter can apply. The key is the name of the airlock the user will see. The value is the type path of the airlock
 	var/list/available_paint_jobs = list(
 		"Public" = /obj/machinery/door/airlock/public,
@@ -36,7 +39,7 @@
 
 /obj/item/airlock_painter/Initialize(mapload)
 	. = ..()
-	ink = new /obj/item/toner(src)
+	ink = new initial_ink_type(src)
 
 //This proc doesn't just check if the painter can be used, but also uses it.
 //Only call this if you are certain that the painter will be used right after this check!
@@ -136,7 +139,8 @@
 	else
 		return ..()
 
-/obj/item/airlock_painter/attack_self(mob/user)
+/obj/item/airlock_painter/AltClick(mob/user)
+	. = ..()
 	if(ink)
 		playsound(src.loc, 'sound/machines/click.ogg', 50, TRUE)
 		ink.forceMove(user.drop_location())
@@ -146,50 +150,101 @@
 
 /obj/item/airlock_painter/decal
 	name = "decal painter"
-	desc = "An airlock painter, reprogramed to use a different style of paint in order to apply decals for floor tiles as well, in addition to repainting doors. Decals break when the floor tiles are removed. Alt-Click to change design."
+	desc = "An airlock painter, reprogramed to use a different style of paint in order to apply decals for floor tiles as well, in addition to repainting doors. Decals break when the floor tiles are removed. Alt-Click to remove the ink cartridge."
 	icon = 'icons/obj/objects.dmi'
 	icon_state = "decal_sprayer"
 	inhand_icon_state = "decalsprayer"
 	custom_materials = list(/datum/material/iron=50, /datum/material/glass=50)
+	initial_ink_type = /obj/item/toner/large
+	/// The current direction of the decal being printed
 	var/stored_dir = 2
-	var/stored_color = ""
+	/// The current color of the decal being printed.
+	var/stored_color = "yellow"
+	/// The current base icon state of the decal being printed.
 	var/stored_decal = "warningline"
+	/// The full icon state of the decal being printed.
 	var/stored_decal_total = "warningline"
-	var/color_list = list("","red","white")
-	var/dir_list = list(1,2,4,8)
-	var/decal_list = list(list("Warning Line","warningline"),
-			list("Warning Line Corner","warninglinecorner"),
-			list("Caution Label","caution"),
-			list("Directional Arrows","arrows"),
-			list("Stand Clear Label","stand_clear"),
-			list("Box","box"),
-			list("Box Corner","box_corners"),
-			list("Delivery Marker","delivery"),
-			list("Warning Box","warn_full"))
-
-/obj/item/airlock_painter/decal/afterattack(atom/target, mob/user, proximity)
-	. = ..()
-	var/turf/open/floor/F = target
-	if(!proximity)
-		to_chat(user, span_notice("You need to get closer!"))
-		return
-	if(use_paint(user) && isturf(F))
-		F.AddElement(/datum/element/decal, 'icons/turf/decals.dmi', stored_decal_total, stored_dir, null, null, alpha, color, null, CLEAN_TYPE_PAINT, null)
-
-/obj/item/airlock_painter/decal/AltClick(mob/user)
-	. = ..()
-	ui_interact(user)
+	/// The type path of the spritesheet being used for the frontend.
+	var/spritesheet_type = /datum/asset/spritesheet/decals // spritesheet containing previews
+	/// Does this printer implementation support custom colors?
+	var/supports_custom_color = FALSE
+	/// Current custom color
+	var/stored_custom_color
+	/// List of color options as list(user-friendly label, color value to return)
+	var/color_list = list(
+		list("Yellow", "yellow"),
+		list("Red", "red"),
+		list("White", "white"),
+	)
+	/// List of direction options as list(user-friendly label, dir value to return)
+	var/dir_list = list(
+		list("North", NORTH),
+		list("South", SOUTH),
+		list("East", EAST),
+		list("West", WEST),
+	)
+	/// List of decal options as list(user-friendly label, icon state base value to return)
+	var/decal_list = list(
+		list("Warning Line", "warningline"),
+		list("Warning Line Corner", "warninglinecorner"),
+		list("Caution Label", "caution"),
+		list("Directional Arrows", "arrows"),
+		list("Stand Clear Label", "stand_clear"),
+		list("Bot", "bot"),
+		list("Box", "box"),
+		list("Box Corner", "box_corners"),
+		list("Delivery Marker", "delivery"),
+		list("Warning Box", "warn_full"),
+	)
+	// These decals only have a south sprite.
+	var/nondirectional_decals = list(
+		"bot",
+		"box",
+		"delivery",
+		"warn_full",
+	)
 
 /obj/item/airlock_painter/decal/Initialize(mapload)
 	. = ..()
-	ink = new /obj/item/toner/large(src)
+	stored_custom_color = stored_color
+
+/obj/item/airlock_painter/decal/afterattack(atom/target, mob/user, proximity)
+	. = ..()
+	if(!proximity)
+		to_chat(user, span_notice("You need to get closer!"))
+		return
+
+	if(isfloorturf(target) && use_paint(user))
+		paint_floor(target)
+
+/**
+ * Actually add current decal to the floor.
+ *
+ * Responsible for actually adding the element to the turf for maximum flexibility.area
+ * Can be overriden for different decal behaviors.
+ * Arguments:
+ * * target - The turf being painted to
+*/
+/obj/item/airlock_painter/decal/proc/paint_floor(turf/open/floor/target)
+	target.AddElement(/datum/element/decal, 'icons/turf/decals.dmi', stored_decal_total, stored_dir, null, null, alpha, color, null, CLEAN_TYPE_PAINT, null)
+
+/**
+ * Return the final icon_state for the given decal options
+ *
+ * Arguments:
+ * * decal - the selected decal base icon state
+ * * color - the selected color
+ * * dir - the selected dir
+ */
+/obj/item/airlock_painter/decal/proc/get_decal_path(decal, color, dir)
+	// Special case due to icon_state names
+	if(color == "yellow")
+		color = ""
+
+	return "[decal][color ? "_" : ""][color]"
 
 /obj/item/airlock_painter/decal/proc/update_decal_path()
-	var/yellow_fix = "" //This will have to do until someone refactor's markings.dm
-	if (stored_color)
-		yellow_fix = "_"
-	stored_decal_total = "[stored_decal][yellow_fix][stored_color]"
-	return
+	stored_decal_total = get_decal_path(stored_decal, stored_color, stored_dir)
 
 /obj/item/airlock_painter/decal/ui_interact(mob/user, datum/tgui/ui)
 	ui = SStgui.try_update_ui(user, src, ui)
@@ -197,31 +252,45 @@
 		ui = new(user, src, "DecalPainter", name)
 		ui.open()
 
+/obj/item/airlock_painter/decal/ui_assets(mob/user)
+	. = ..()
+	. += get_asset_datum(spritesheet_type)
+
+/obj/item/airlock_painter/decal/ui_static_data(mob/user)
+	. = ..()
+	var/datum/asset/spritesheet/icon_assets = get_asset_datum(spritesheet_type)
+
+	.["icon_prefix"] = "[icon_assets.name]32x32"
+	.["supports_custom_color"] = supports_custom_color
+	.["decal_list"] = list()
+	.["color_list"] = list()
+	.["dir_list"] = list()
+	.["nondirectional_decals"] = nondirectional_decals
+
+	for(var/decal in decal_list)
+		.["decal_list"] += list(list(
+			"name" = decal[1],
+			"decal" = decal[2],
+		))
+	for(var/color in color_list)
+		.["color_list"] += list(list(
+			"name" = color[1],
+			"color" = color[2],
+		))
+	for(var/dir in dir_list)
+		.["dir_list"] += list(list(
+			"name" = dir[1],
+			"dir" = dir[2],
+		))
+
 /obj/item/airlock_painter/decal/ui_data(mob/user)
-	var/list/data = list()
-	data["decal_direction"] = stored_dir
-	data["decal_color"] = stored_color
-	data["decal_style"] = stored_decal
-	data["decal_list"] = list()
-	data["color_list"] = list()
-	data["dir_list"] = list()
+	. = ..()
+	.["current_decal"] = stored_decal
+	.["current_color"] = stored_color
+	.["current_dir"] = stored_dir
+	.["current_custom_color"] = stored_custom_color
 
-	for(var/i in decal_list)
-		data["decal_list"] += list(list(
-			"name" = i[1],
-			"decal" = i[2]
-		))
-	for(var/j in color_list)
-		data["color_list"] += list(list(
-			"colors" = j
-		))
-	for(var/k in dir_list)
-		data["dir_list"] += list(list(
-			"dirs" = k
-		))
-	return data
-
-/obj/item/airlock_painter/decal/ui_act(action,list/params)
+/obj/item/airlock_painter/decal/ui_act(action, list/params)
 	. = ..()
 	if(.)
 		return
@@ -229,21 +298,148 @@
 	switch(action)
 		//Lists of decals and designs
 		if("select decal")
-			var/selected_decal = params["decals"]
+			var/selected_decal = params["decal"]
+			var/selected_dir = text2num(params["dir"])
 			stored_decal = selected_decal
+			stored_dir = selected_dir
 		if("select color")
-			var/selected_color = params["colors"]
+			var/selected_color = params["color"]
 			stored_color = selected_color
-		if("selected direction")
-			var/selected_direction = text2num(params["dirs"])
-			stored_dir = selected_direction
+		if("pick custom color")
+			if(supports_custom_color)
+				pick_painting_tool_color(usr, stored_custom_color)
 	update_decal_path()
 	. = TRUE
 
+/obj/item/airlock_painter/decal/set_painting_tool_color(chosen_color)
+	. = ..()
+	stored_custom_color = chosen_color
+	stored_color = chosen_color
+
+/datum/asset/spritesheet/decals
+	name = "floor_decals"
+	cross_round_cachable = TRUE
+
+	/// The floor icon used for blend_preview_floor()
+	var/preview_floor_icon = 'icons/turf/floors.dmi'
+	/// The floor icon state used for blend_preview_floor()
+	var/preview_floor_state = "floor"
+	/// The associated decal painter type to grab decals, colors, etc from.
+	var/obj/item/airlock_painter/decal/painter_type = /obj/item/airlock_painter/decal
+
+/**
+ * Underlay an example floor for preview purposes, and return the new icon.
+ *
+ * Arguments:
+ * * decal - the decal to place over the example floor tile
+ */
+/datum/asset/spritesheet/decals/proc/blend_preview_floor(icon/decal)
+	var/icon/final = icon(preview_floor_icon, preview_floor_state)
+	final.Blend(decal, ICON_OVERLAY)
+	return final
+
+/**
+ * Insert a specific state into the spritesheet.
+ *
+ * Arguments:
+ * * decal - the given decal base state.
+ * * dir - the given direction.
+ * * color - the given color.
+ */
+/datum/asset/spritesheet/decals/proc/insert_state(decal, dir, color)
+	// Special case due to icon_state names
+	var/icon_state_color = color == "yellow" ? "" : color
+
+	var/icon/final = blend_preview_floor(icon('icons/turf/decals.dmi', "[decal][icon_state_color ? "_" : ""][icon_state_color]", dir))
+	Insert("[decal]_[dir]_[color]", final)
+
+/datum/asset/spritesheet/decals/create_spritesheets()
+	// Must actually create because initial(type) doesn't work for /lists for some reason.
+	var/obj/item/airlock_painter/decal/painter = new painter_type()
+
+	for(var/list/decal in painter.decal_list)
+		for(var/list/dir in painter.dir_list)
+			for(var/list/color in painter.color_list)
+				insert_state(decal[2], dir[2], color[2])
+			if(painter.supports_custom_color)
+				insert_state(decal[2], dir[2], "custom")
+
+	qdel(painter)
+
 /obj/item/airlock_painter/decal/debug
 	name = "extreme decal painter"
 	icon_state = "decal_sprayer_ex"
+	initial_ink_type = /obj/item/toner/extreme
 
-/obj/item/airlock_painter/decal/debug/Initialize(mapload)
-	. = ..()
-	ink = new /obj/item/toner/extreme(src)
+/obj/item/airlock_painter/decal/tile
+	name = "tile sprayer"
+	desc = "An airlock painter, reprogramed to use a different style of paint in order to spray colors on floor tiles as well, in addition to repainting doors. Decals break when the floor tiles are removed. Alt-Click to change design."
+	icon_state = "tile_sprayer"
+	stored_dir = 2
+	stored_color = "#D4D4D4"
+	stored_decal = "tile_corner"
+	spritesheet_type = /datum/asset/spritesheet/decals/tiles
+	supports_custom_color = TRUE
+	color_list = list(
+		list("White", "#D4D4D4"),
+		list("Black", "#0e0f0f"),
+		list("Bar Burgundy", "#791500"),
+		list("Sec Red", "#DE3A3A"),
+		list("Cargo Brown", "#A46106"),
+		list("Engi Yellow", "#EFB341"),
+		list("Service Green", "#9FED58"),
+		list("Med Blue", "#52B4E9"),
+		list("R&D Purple", "#D381C9"),
+	)
+	decal_list = list(
+		list("Corner", "tile_corner"),
+		list("Half", "tile_half_contrasted"),
+		list("Opposing Corners", "tile_opposing_corners"),
+		list("3 Corners", "tile_anticorner_contrasted"),
+		list("4 Corners", "tile_fourcorners"),
+		list("Trimline Corner", "trimline_corner_fill"),
+		list("Trimline Fill", "trimline_fill"),
+		list("Trimline Fill L", "trimline_fill__8"), // This is a hack that lives in the spritesheet builder and paint_floor
+		list("Trimline End", "trimline_end_fill"),
+		list("Trimline Box", "trimline_box_fill"),
+	)
+	nondirectional_decals = list(
+		"tile_fourcorners",
+		"trimline_box_fill",
+	)
+
+	/// The alpha value to paint the tiles at. The decal mapping helper creates tile overlays at alpha 110.
+	var/stored_alpha = 110
+
+/obj/item/airlock_painter/decal/tile/paint_floor(turf/open/floor/target)
+	// Account for 8-sided decals.
+	var/source_decal = stored_decal
+	var/source_dir = stored_dir
+	if(copytext(stored_decal, -3) == "__8")
+		source_decal = splicetext(stored_decal, -3, 0, "")
+		source_dir = turn(stored_dir, 45)
+
+	target.AddElement(/datum/element/decal, 'icons/turf/decals.dmi', source_decal, source_dir, null, null, stored_alpha, stored_color, null, CLEAN_TYPE_PAINT, null)
+
+/datum/asset/spritesheet/decals/tiles
+	name = "floor_tile_decals"
+	painter_type = /obj/item/airlock_painter/decal/tile
+
+/datum/asset/spritesheet/decals/tiles/insert_state(decal, dir, color)
+	// Account for 8-sided decals.
+	var/source_decal = decal
+	var/source_dir = dir
+	if(copytext(decal, -3) == "__8")
+		source_decal = splicetext(decal, -3, 0, "")
+		source_dir = turn(dir, 45)
+
+	var/icon/colored_icon = icon('icons/turf/decals.dmi', source_decal, dir=source_dir)
+	colored_icon.ChangeOpacity(110)
+	if(color == "custom")
+		// Do a fun rainbow pattern to stand out while still being static.
+		colored_icon.Blend(icon('icons/effects/random_spawners.dmi', "rainbow"), ICON_MULTIPLY)
+	else
+		colored_icon.Blend(color, ICON_MULTIPLY)
+
+	colored_icon = blend_preview_floor(colored_icon)
+	Insert("[decal]_[dir]_[replacetext(color, "#", "")]", colored_icon)

code/modules/research/designs/autolathe_designs.dm

@@ -265,6 +265,15 @@
 	category = list("initial","Tools","Tool Designs")
 	departmental_flags = DEPARTMENTAL_FLAG_ENGINEERING | DEPARTMENTAL_FLAG_SERVICE
 
+/datum/design/airlock_painter/decal/tile
+	name = "Tile Sprayer"
+	id = "tile_sprayer"
+	build_type = AUTOLATHE | PROTOLATHE | AWAY_LATHE
+	materials = list(/datum/material/iron = 50, /datum/material/glass = 50)
+	build_path = /obj/item/airlock_painter/decal/tile
+	category = list("initial","Tools","Tool Designs")
+	departmental_flags = DEPARTMENTAL_FLAG_ENGINEERING | DEPARTMENTAL_FLAG_SERVICE
+
 /datum/design/emergency_oxygen
 	name = "Emergency Oxygen Tank"
 	id = "emergency_oxygen"

code/modules/research/techweb/all_nodes.dm

@@ -181,6 +181,7 @@
 		"spade",
 		"spraycan",
 		"swab",
+		"tile_sprayer",
 		"tscanner",
 		"welding_helmet",
 		"welding_tool",

tgui/packages/tgui/interfaces/DecalPainter.js

@@ -1,65 +0,0 @@
-import { useBackend } from '../backend';
-import { Button, Section } from '../components';
-import { Window } from '../layouts';
-
-export const DecalPainter = (props, context) => {
-  const { act, data } = useBackend(context);
-  const decal_list = data.decal_list || [];
-  const color_list = data.color_list || [];
-  const dir_list = data.dir_list || [];
-  return (
-    <Window
-      width={500}
-      height={400}>
-      <Window.Content>
-        <Section title="Decal Type">
-          {decal_list.map(decal => (
-            <Button
-              key={decal.decal}
-              content={decal.name}
-              selected={decal.decal === data.decal_style}
-              onClick={() => act('select decal', {
-                decals: decal.decal,
-              })} />
-          ))}
-        </Section>
-        <Section title="Decal Color">
-          {color_list.map(color => {
-            return (
-              <Button
-                key={color.colors}
-                content={color.colors === "red"
-                  ? "Red"
-                  : color.colors === "white"
-                    ? "White"
-                    : "Yellow"}
-                selected={color.colors === data.decal_color}
-                onClick={() => act('select color', {
-                  colors: color.colors,
-                })} />
-            );
-          })}
-        </Section>
-        <Section title="Decal Direction">
-          {dir_list.map(dir => {
-            return (
-              <Button
-                key={dir.dirs}
-                content={dir.dirs === 1
-                  ? "North"
-                  : dir.dirs === 2
-                    ? "South"
-                    : dir.dirs === 4
-                      ? "East"
-                      : "West"}
-                selected={dir.dirs === data.decal_direction}
-                onClick={() => act('selected direction', {
-                  dirs: dir.dirs,
-                })} />
-            );
-          })}
-        </Section>
-      </Window.Content>
-    </Window>
-  );
-};

tgui/packages/tgui/interfaces/DecalPainter.tsx

@@ -0,0 +1,153 @@
+import { useBackend } from '../backend';
+import { Button, ColorBox, Flex, Section } from '../components';
+import { Window } from '../layouts';
+
+type DecalInfo = {
+  name: string;
+  decal: string;
+};
+
+type ColorInfo = {
+  name: string;
+  color: string;
+};
+
+type DirInfo = {
+  name: string;
+  dir: number;
+};
+
+type DecalPainterData = {
+  icon_prefix: string;
+  decal_list: DecalInfo[];
+  color_list: ColorInfo[];
+  dir_list: DirInfo[];
+  nondirectional_decals: string[];
+  supports_custom_color: number;
+  current_decal: string;
+  current_color: string;
+  current_dir: number;
+  current_custom_color: string;
+};
+
+export const DecalPainter = (props, context) => {
+  const { act, data } = useBackend<DecalPainterData>(context);
+
+  const custom_color_selected = !data.color_list.some(
+    (color) => color.color === data.current_color
+  );
+  const supports_custom_color = !!data.supports_custom_color;
+
+  // Handle custom color icon correctly
+  const preview_color = custom_color_selected ? 'custom' : data.current_color;
+
+  return (
+    <Window width={550} height={400}>
+      <Window.Content>
+        <Section title="Decal Color">
+          {data.color_list.map((color) => {
+            return (
+              <Button
+                key={color.color}
+                selected={color.color === data.current_color}
+                onClick={() =>
+                  act('select color', {
+                    color: color.color,
+                  })}>
+                <ColorBox color={color.color} mr={0.5} />
+                {color.name}
+              </Button>
+            );
+          })}
+          {supports_custom_color && (
+            <Button
+              selected={custom_color_selected}
+              onClick={() => act('pick custom color')}>
+              <ColorBox color={data.current_custom_color} mr={0.5} />
+              Custom
+            </Button>
+          )}
+        </Section>
+        <Section title="Decal Style">
+          <Flex direction="row" wrap="nowrap" align="fill" justify="fill">
+            {data.decal_list.map((decal) => {
+              const nondirectional = data.nondirectional_decals.includes(
+                decal.decal
+              );
+
+              return nondirectional ? (
+                // Tallll button for nondirectional
+                <IconButton
+                  key={decal.decal}
+                  decal={decal.decal}
+                  dir={2}
+                  color={preview_color}
+                  label={decal.name}
+                  selected={decal.decal === data.current_decal}
+                />
+              ) : (
+                // 4 buttons for directional
+                <Flex
+                  key={decal.decal}
+                  direction="column"
+                  wrap="nowrap"
+                  align="fill"
+                  justify="fill">
+                  {data.dir_list.map((dir) => {
+                    const selected
+                      = decal.decal === data.current_decal
+                      && dir.dir === data.current_dir;
+
+                    return (
+                      <IconButton
+                        key={dir.dir}
+                        decal={decal.decal}
+                        dir={dir.dir}
+                        color={preview_color}
+                        label={`${dir.name} ${decal.name}`}
+                        selected={selected}
+                      />
+                    );
+                  })}
+                </Flex>
+              );
+            })}
+          </Flex>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};
+
+type IconButtonParams = {
+  decal: string;
+  dir: number;
+  color: string;
+  label: string;
+  selected: boolean;
+};
+
+const IconButton = (props: IconButtonParams, context) => {
+  const { act, data } = useBackend<DecalPainterData>(context);
+
+  const generateIconKey = (decal: string, dir: number, color: string) =>
+    `${data.icon_prefix} ${decal}_${dir}_${color.replace('#', '')}`;
+
+  const icon = generateIconKey(props.decal, props.dir, props.color);
+
+  return (
+    <Button
+      tooltip={props.label}
+      selected={props.selected}
+      verticalAlignContent="middle"
+      m={'2px'}
+      p={1}
+      onClick={() =>
+        act('select decal', {
+          decal: props.decal,
+          dir: props.dir,
+        })}>
+      <div className={icon} style={{ display: 'block' }} />
+    </Button>
+  );
+};