Some painting fixes (#31632)

* Fix supply packs

* Fix painting descriptions so you can tell what kind of canvas an item is

* Have palette (item) colors show up on painting UI palette

* Fixes templates sometimes being broken due to opacity, and a few minor things here and there.

* Fixes remote painting. Also fixes a bunch of inconsistencies between paintings in item vs structure form, conversion between the two, glass pane behavior, descriptions, etc.

code/modules/html_interface/paintTool/canvas.css

@@ -86,13 +86,25 @@
 	border: 1px solid #000000;
 }
 
-.palette div {
+.palette div.paletteColor {
 	width: 28px;
 	height: 28px;
 	display: inline-block;
 	border: 1px solid #000000;
 }
 
+.palette div.paletteButton {
+	background: #40628a;
+}
+
+.palette div.paletteButton:hover {
+	background: #507aac;
+}
+
+.paletteButton .uiIcon16 {
+	margin: 6px;
+}
+
 .toolPanel input[type="text"] {
 	width: 5ch;
 	text-align:center

code/modules/html_interface/paintTool/canvas.js

@@ -3,7 +3,9 @@
  * Scripts meant to handle canvas.html
  */
 
+//--------------------------------
 // Tab selector
+//--------------------------------
 var panelIdList = ["infoPanel", "templatePanel", "exportPanel"];
 function panelSelect(panelId) {
 	var panelClass;
@@ -36,7 +38,9 @@ function toggleHelp(helpButton, helpPanel) {
 	toggleClass(helpPanel, "hidden");
 }
 
+//--------------------------------
 // Template control
+//--------------------------------
 var currentTemplate = {};
 /* A test template for 14x14 sized paintings
 {
@@ -198,17 +202,21 @@ function templatePaint(id) {
 		if (currentTemplate.bmp[i] == id) {
 			var x = i % width;
 			var y = (i - x)/width;
-			pixelDraw(x, y, paint_color, paint_strength);
+			pixelDraw(x, y, getPaintColor(), getOpacity());
 		}
 	}
 	display_bitmap();
 	document.getElementById("bitmap").value = bitmap;
 }
 
+//--------------------------------
+// INIT
+//--------------------------------
 var src;
 function initCanvas(paintInitData, canvasInitData) {
 	initPaint(paintInitData);
 	document.getElementById("paintColumn").style.maxWidth = (document.getElementById("canvas").width + 40) +  "px";
+	document.getElementById("paint_strength").value = getOpacity()
 
 	canvasInitData = JSON.parse(canvasInitData);
 
@@ -226,19 +234,22 @@ function initCanvas(paintInitData, canvasInitData) {
 	while (paletteButtonPanel.childElementCount > 0) {
 		paletteButtonPanel.removeChild(paletteButtonPanel.firstChild);
 	}
-
+	
 	for (color in palette) {
 		paletteButtonPanel.innerHTML +=
-			  '<div onclick="setColor(\'' + palette[color] + '\');" style="background-image:' +  generateColorPaletteBackgroundStyle(palette[color]) + '; background-image:' +  generateColorPaletteBackgroundStyle(palette[color], true) + '"></div>\n';
+			'<div class="paletteColor" onclick="setColor(\'' + palette[color] + '\');" style="background-image:' + generateColorPaletteBackgroundStyle(palette[color]) + '; background-image:' + generateColorPaletteBackgroundStyle(palette[color], true) + '"></div>\n';
 	}
 	setColor(palette[0]);
 }
 
+//--------------------------------
+// COLORS & PALETTE
+//--------------------------------
 function generateColorPaletteBackgroundStyle (color, ieMode) {
 	let colorOpaque = hexToRgba(color);
 	colorOpaque.a = 255;
 	colorOpaque = rgbaToHex(colorOpaque);
-
+	
 	// Stupid IE has to use this
 	if (ieMode) {
 		let ocolor = hexToRgba(color);
@@ -277,6 +288,9 @@ function setStrength() {
 	updateSelectedColorDisplay(getPaintColor(), strengthInput.value);
 }
 
+//--------------------------------
+// SUBMIT
+//--------------------------------
 function sanitizeLength (inputId, meterId) {
 	var input = document.getElementById(inputId);
 

code/modules/html_interface/paintTool/canvas.tmpl

@@ -125,6 +125,7 @@
 
 		<!-- Paint Tool Controls -->
 		<div class="paintPanel">
+			<div class="item">
 			<span class="toolPanel">
 				<label class="itemLabelNarrow">Opacity: </label>
 				<a id="paint_strength_lower" class="button" onclick="changeStrength(-0.05);"><div class="uiIcon16 icon-minus"></div></a>
@@ -136,9 +137,9 @@
 				&nbsp;</span>
 				<a id="paint_strength_lower" class="button" onclick="changeStrength(0.05);"><div class="uiIcon16 icon-plus"></div></a>
 			</span>
-			<br/>
+			</div>
 			<!-- Selected Color -->
-			<div class="colorPanel">
+			<div class="item colorPanel">
 				<label class="selectedColor">
 					<div style="background: #000000" id="current_color"></div>
 				</label>

code/modules/html_interface/paintTool/custom_painting_datum.dm

@@ -3,8 +3,6 @@
 #define BRUSH_STRENGTH_MAX 1
 #define BRUSH_STRENGTH_MIN 0
 
-
-
 /*
  * PAINTING UTENSIL DATUM
  *
@@ -14,7 +12,7 @@
 /datum/painting_utensil
 	var/min_strength = 0
 	var/max_strength = 1
-	var/list/palette = list()
+	var/list/palette = list() // List of colors that will be made available while painting
 	var/base_color
 
 /datum/painting_utensil/New(mob/user, obj/item/held_item)
@@ -22,6 +20,8 @@
 		return
 	if (!held_item)
 		held_item = user.get_active_hand()
+
+	// Painting with a pen
 	if (istype(held_item, /obj/item/weapon/pen))
 		var/obj/item/weapon/pen/p = held_item
 		max_strength = PENCIL_STRENGTH_MAX
@@ -29,6 +29,7 @@
 		palette += p.colour_rgb
 		base_color = p.colour_rgb
 
+	// Painting with a crayon
 	if (istype(held_item, /obj/item/toy/crayon))
 		var/obj/item/toy/crayon/c = held_item
 		max_strength = PENCIL_STRENGTH_MAX
@@ -37,6 +38,7 @@
 		palette += c.shadeColour
 		base_color = c.color
 
+	// Painting with hair dye sprays
 	if (istype(held_item, /obj/item/weapon/hair_dye))
 		var/obj/item/weapon/hair_dye/h = held_item
 		max_strength = PENCIL_STRENGTH_MAX
@@ -44,14 +46,24 @@
 		palette += rgb(h.color_r, h.color_g, h.color_b)
 		base_color = rgb(h.color_r, h.color_g, h.color_b)
 
+	// Painting with a brush
 	if (istype(held_item, /obj/item/weapon/painting_brush))
+		// If holding a palette (item) add it's colors to the brush's list
+		for (var/obj/item/weapon/palette/pal in user.held_items)
+			for (var/datum/painting_utensil/pu in pal.stored_colours)
+				palette += pu.base_color
+
 		var/obj/item/weapon/painting_brush/b = held_item
 		if (b.paint_color)
 			max_strength = BRUSH_STRENGTH_MAX
 			min_strength = BRUSH_STRENGTH_MIN
-			palette += b.paint_color
+			// Players are likely to have one of the palette's colors on their brush from mixing colors earlier,
+			//  so make sure we're not adding it again to the list
+			if (!(b.paint_color in palette))
+				palette += b.paint_color
 			base_color = b.paint_color
 
+
 /datum/painting_utensil/proc/duplicate()
 	var/datum/painting_utensil/dupe = new(null, null)
 	dupe.max_strength = src.max_strength
@@ -127,12 +139,21 @@
 	src.parent = parent
 	mp_handler.set_parent(parent)
 
-
 /datum/custom_painting/proc/blank_contents()
 	bitmap = list()
 	for (var/i = 0, i < bitmap_height * bitmap_width, i++)
 		bitmap += base_color
 
+/datum/custom_painting/proc/is_blank()
+	if (author || title || description)
+		return FALSE
+
+	for (var/b in bitmap)
+		if (b != base_color)
+			return FALSE
+
+	return TRUE
+
 /datum/custom_painting/proc/setup_UI()
 	// Setup head
 	var/head = {"
@@ -180,20 +201,22 @@
 
 
 /datum/custom_painting/Topic(href, href_list)
+	world.log << "painting topic"
 	// Handle multipart href
 	if (href_list["multipart"])
+		world.log << "painting topic: href"
 		mp_handler.Topic(href, href_list)
 		return
 
 	// Save changes
 	else
+		world.log << "painting topic: onwards"
 		// Make sure the player can actually paint
 		if(!usr || usr.incapacitated())
 			return
 
 		var /datum/painting_utensil/pu = new /datum/painting_utensil(usr)
 		if(!pu.palette.len)
-			//TODO other tools (crayons, brushes)
 			to_chat(usr, "<span class='warning'>You need to be holding a painting utensil in your active hand.</span>")
 			return
 

code/modules/html_interface/paintTool/paintTool.js

@@ -116,7 +116,7 @@ function initPaint(initData) {
 
 	minPaintStrength = initData.minPaintStrength;
 	maxPaintStrength = initData.maxPaintStrength;
-	setStrength();
+	setOpacity(maxPaintStrength);
 
 	//No data? start with a blank canvas
 	if (bitmap.length != width * height) {