upload files

code/game/objects/items/airlock_painter.dm

@@ -157,7 +157,7 @@
 		to_chat(user, "<span class='notice'>You need to get closer!</span>")
 		return
 	if(use_paint(user) && isturf(F))
-		F.AddElement(/datum/element/decal, 'icons/turf/decals.dmi', stored_decal_total, turn(stored_dir, -dir2angle(F.dir)), CLEAN_STRONG, color, null, null, alpha)
+		F.AddElement(/datum/element/decal, 'icons/turf/decals.dmi', stored_decal_total, stored_dir, CLEAN_STRONG, color, null, null, alpha)
 
 /obj/item/airlock_painter/decal/attack_self(mob/user)
 	if((ink) && (ink.charges >= 1))
@@ -180,6 +180,11 @@
 	stored_decal_total = "[stored_decal][yellow_fix][stored_color]"
 	return
 
+/obj/item/airlock_painter/decal/ui_assets(mob/user)
+	return list(
+		get_asset_datum(/datum/asset/spritesheet/decals)
+	)
+
 /obj/item/airlock_painter/decal/ui_interact(mob/user, datum/tgui/ui)
 	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
@@ -189,6 +194,7 @@
 /obj/item/airlock_painter/decal/ui_data(mob/user)
 	var/list/data = list()
 	data["decal_direction"] = stored_dir
+	data["decal_dir_text"] = dir2text(stored_dir)
 	data["decal_color"] = stored_color
 	data["decal_style"] = stored_decal
 	data["decal_list"] = list()

code/modules/asset_cache/asset_list_items.dm

@@ -345,6 +345,14 @@
 		InsertAll("", each, GLOB.alldirs)
 	..()
 
+/datum/asset/spritesheet/decals
+	name = "decals"
+
+/datum/asset/spritesheet/decals/register()
+	for(var/each in list('icons/turf/decals.dmi'))
+		InsertAll("", each, GLOB.alldirs)
+	..()
+
 /datum/asset/spritesheet/supplypods
 	name = "supplypods"
 

tgui/packages/tgui/interfaces/DecalPainter.js

@@ -1,6 +1,7 @@
 import { useBackend } from '../backend';
-import { Button, Section } from '../components';
+import { Box, Button, Section } from '../components';
 import { Window } from '../layouts';
+import { classes } from 'common/react';
 
 export const DecalPainter = (props, context) => {
   const { act, data } = useBackend(context);
@@ -16,11 +17,25 @@ export const DecalPainter = (props, context) => {
           {decal_list.map(decal => (
             <Button
               key={decal.decal}
-              content={decal.name}
+              style={{
+                width: '48px',
+                height: '48px',
+                padding: 0,
+              }}
               selected={decal.decal === data.decal_style}
+              tooltip={decal.name}
               onClick={() => act('select decal', {
                 decals: decal.decal,
-              })} />
+              })}>
+                <Box
+                  className={classes([
+                    'decals32x32',
+                    data.decal_dir_text + '-' + decal.decal + (data.decal_color ? '_' + data.decal_color : ''),
+                  ])}
+                  style={{
+                    transform: 'scale(1.5) translate(17%, 17%)',
+                  }} />
+            </Button>
           ))}
         </Section>
         <Section title="Decal Color">
@@ -28,15 +43,29 @@ export const DecalPainter = (props, context) => {
             return (
               <Button
                 key={color.colors}
-                content={color.colors === "red"
-                  ? "Red"
-                  : color.colors === "white"
-                    ? "White"
-                    : "Yellow"}
+                style={{
+                  width: '48px',
+                  height: '48px',
+                  padding: 0,
+                }}
+                tooltip={color.colors === "red"
+                ? "Red"
+                : color.colors === "white"
+                  ? "White"
+                  : "Yellow"}
                 selected={color.colors === data.decal_color}
                 onClick={() => act('select color', {
                   colors: color.colors,
-                })} />
+                })}>
+                  <Box
+                    className={classes([
+                      'decals32x32',
+                      data.decal_dir_text + '-' + data.decal_style + (color.colors ? '_' + color.colors : ''),
+                    ])}
+                    style={{
+                      transform: 'scale(1.5) translate(17%, 17%)',
+                    }} />
+              </Button>
             );
           })}
         </Section>
@@ -45,7 +74,12 @@ export const DecalPainter = (props, context) => {
             return (
               <Button
                 key={dir.dirs}
-                content={dir.dirs === 1
+                style={{
+                  width: '48px',
+                  height: '48px',
+                  padding: 0,
+                }}
+                tooltip={dir.dirs === 1
                   ? "North"
                   : dir.dirs === 2
                     ? "South"
@@ -55,7 +89,23 @@ export const DecalPainter = (props, context) => {
                 selected={dir.dirs === data.decal_direction}
                 onClick={() => act('selected direction', {
                   dirs: dir.dirs,
-                })} />
+                })}>
+                  <Box
+                    className={classes([
+                      'decals32x32',
+                      (dir.dirs === 1
+                      ? "north"
+                      : dir.dirs === 2
+                        ? "south"
+                        : dir.dirs === 4
+                          ? "east"
+                          : "west")
+                      + '-' + data.decal_style + (data.decal_color ? '_' + data.decal_color : ''),
+                    ])}
+                    style={{
+                      transform: 'scale(1.5) translate(17%, 17%)',
+                    }} />
+                </Button>
             );
           })}
         </Section>