Crayons (#2132)

* -Added Crayons + CrayonBox
-Can set any crayon state and color
-Added CrayonDecals

* Allows to cycle through decals (not the final thing)

* ItemStatus

* -UI (WIP)
-Selection thing works
-Changed some shitty state names

* -Icons
-Changed decal name

* Pure Texture Grid

* Charges

* -Reach check
-Toggle interface on use

* Can't draw on windows anymore

* UI now shows selected decal and color

* -UseSound
-Nullable

* Remove unused imports

* -Rotation
-Made decal abstract

* Remove some duplicate images

* Space Cleaner cleans

* Loc Title

Co-authored-by: Pieter-Jan Briers <pieterjan.briers@gmail.com>

* Review adressed

Co-authored-by: Pieter-Jan Briers <pieterjan.briers@gmail.com>

Content.Client/GameObjects/Components/Crayon/CrayonBoundUserInterface.cs

@@ -0,0 +1,49 @@
+using Content.Shared.GameObjects.Components;
+using Robust.Client.GameObjects.Components.UserInterface;
+using Robust.Shared.GameObjects.Components.UserInterface;
+using Robust.Shared.IoC;
+using Robust.Shared.Prototypes;
+using System.Linq;
+
+namespace Content.Client.GameObjects.Components.Crayon
+{
+    public class CrayonBoundUserInterface : BoundUserInterface
+    {
+        public CrayonBoundUserInterface(ClientUserInterfaceComponent owner, object uiKey) : base(owner, uiKey)
+        {
+        }
+
+        private CrayonWindow _menu;
+
+        protected override void Open()
+        {
+            base.Open();
+            _menu = new CrayonWindow(this);
+
+            _menu.OnClose += Close;
+            var prototypeManager = IoCManager.Resolve<IPrototypeManager>();
+            var crayonDecals = prototypeManager.EnumeratePrototypes<CrayonDecalPrototype>().FirstOrDefault();
+            if (crayonDecals != null)
+                _menu.Populate(crayonDecals);
+            _menu.OpenCentered();
+        }
+
+        protected override void UpdateState(BoundUserInterfaceState state)
+        {
+            base.UpdateState(state);
+            _menu.UpdateState((CrayonBoundUserInterfaceState) state);
+        }
+
+        public void Select(string state)
+        {
+            SendMessage(new CrayonSelectMessage(state));
+        }
+
+        protected override void Dispose(bool disposing)
+        {
+            base.Dispose(disposing);
+
+            _menu.Close();
+        }
+    }
+}

Content.Client/GameObjects/Components/Crayon/CrayonComponent.cs

@@ -0,0 +1,71 @@
+using Content.Client.UserInterface.Stylesheets;
+using Content.Client.Utility;
+using Content.Shared.GameObjects.Components;
+using Robust.Client.UserInterface;
+using Robust.Client.UserInterface.Controls;
+using Robust.Shared.GameObjects;
+using Robust.Shared.Localization;
+using Robust.Shared.Timing;
+using Robust.Shared.ViewVariables;
+
+namespace Content.Client.GameObjects.Components.Crayon
+{
+    [RegisterComponent]
+    public class CrayonComponent : SharedCrayonComponent, IItemStatus
+    {
+        [ViewVariables(VVAccess.ReadWrite)] private bool _uiUpdateNeeded;
+        [ViewVariables(VVAccess.ReadWrite)] private string Color => _color;
+        [ViewVariables] private int Charges { get; set; }
+        [ViewVariables] private int Capacity { get; set; }
+
+        Control IItemStatus.MakeControl()
+        {
+            return new StatusControl(this);
+        }
+
+        public override void HandleComponentState(ComponentState curState, ComponentState nextState)
+        {
+            if (!(curState is CrayonComponentState state))
+                return;
+
+            _color = state.Color;
+            SelectedState = state.State;
+            Charges = state.Charges;
+            Capacity = state.Capacity;
+
+            _uiUpdateNeeded = true;
+        }
+
+        private sealed class StatusControl : Control
+        {
+            private readonly CrayonComponent _parent;
+            private readonly RichTextLabel _label;
+
+            public StatusControl(CrayonComponent parent)
+            {
+                _parent = parent;
+                _label = new RichTextLabel { StyleClasses = { StyleNano.StyleClassItemStatus } };
+                AddChild(_label);
+
+                parent._uiUpdateNeeded = true;
+            }
+
+            protected override void Update(FrameEventArgs args)
+            {
+                base.Update(args);
+
+                if (!_parent._uiUpdateNeeded)
+                {
+                    return;
+                }
+
+                _parent._uiUpdateNeeded = false;
+                _label.SetMarkup(Loc.GetString("Drawing: [color={0}]{1}[/color] ({2}/{3})",
+                    _parent.Color,
+                    _parent.SelectedState,
+                    _parent.Charges,
+                    _parent.Capacity));
+            }
+        }
+    }
+}

Content.Client/GameObjects/Components/Crayon/CrayonDecalVisualizer.cs

@@ -0,0 +1,25 @@
+using Content.Shared.GameObjects.Components;
+using Robust.Client.GameObjects;
+using Robust.Client.Interfaces.GameObjects.Components;
+using Robust.Shared.Maths;
+
+namespace Content.Client.GameObjects.Components.Crayon
+{
+    public class CrayonDecalVisualizer : AppearanceVisualizer
+    {
+        public override void OnChangeData(AppearanceComponent component)
+        {
+            base.OnChangeData(component);
+
+            var sprite = component.Owner.GetComponent<SpriteComponent>();
+
+            var state = component.GetData<string>(CrayonVisuals.State);
+            var color = component.GetData<Color>(CrayonVisuals.Color);
+            var rotation = component.GetData<Angle>(CrayonVisuals.Rotation);
+
+            sprite.LayerSetState(0, state);
+            sprite.LayerSetColor(0, color);
+            sprite.Rotation = rotation;
+        }
+    }
+}

Content.Client/GameObjects/Components/Crayon/CrayonWindow.cs

@@ -0,0 +1,123 @@
+using Content.Client.UserInterface.Stylesheets;
+using Content.Shared.GameObjects.Components;
+using Robust.Client.Graphics;
+using Robust.Client.Graphics.Drawing;
+using Robust.Client.UserInterface.Controls;
+using Robust.Client.UserInterface.CustomControls;
+using Robust.Client.Utility;
+using Robust.Shared.Localization;
+using Robust.Shared.Maths;
+using Robust.Shared.Utility;
+using System.Collections.Generic;
+
+namespace Content.Client.GameObjects.Components.Crayon
+{
+    public class CrayonWindow : SS14Window
+    {
+        public CrayonBoundUserInterface Owner { get; }
+        private readonly LineEdit _search;
+        private readonly GridContainer _grid;
+        private Dictionary<string, Texture> _decals;
+        private string _selected;
+        private Color _color;
+
+        protected override Vector2? CustomSize => (250, 300);
+
+        public CrayonWindow(CrayonBoundUserInterface owner)
+        {
+            Title = Loc.GetString("Crayon");
+            Owner = owner;
+
+            var vbox = new VBoxContainer();
+            Contents.AddChild(vbox);
+
+            _search = new LineEdit();
+            _search.OnTextChanged += (e) => RefreshList();
+            vbox.AddChild(_search);
+
+            _grid = new GridContainer()
+            {
+                Columns = 6,
+            };
+            var gridScroll = new ScrollContainer()
+            {
+                SizeFlagsVertical = SizeFlags.FillExpand,
+                Children =
+                {
+                    _grid
+                }
+            };
+            vbox.AddChild(gridScroll);
+        }
+
+        private void RefreshList()
+        {
+            // Clear
+            _grid.RemoveAllChildren();
+            if (_decals == null)
+                return;
+
+            var filter = _search.Text;
+            foreach (var (decal, tex) in _decals)
+            {
+                if (!decal.Contains(filter))
+                    continue;
+
+                var button = new TextureButton()
+                {
+                    TextureNormal = tex,
+                    Name = decal,
+                    ToolTip = decal,
+                    Modulate = _color
+                };
+                button.OnPressed += Button_OnPressed;
+                if (_selected == decal)
+                {
+                    var panelContainer = new PanelContainer()
+                    {
+                        PanelOverride = new StyleBoxFlat()
+                        {
+                            BackgroundColor = StyleNano.ButtonColorDefault,
+                        },
+                        Children =
+                        {
+                            button
+                        }
+                    };
+                    _grid.AddChild(panelContainer);
+                }
+                else
+                {
+                    _grid.AddChild(button);
+                }
+            }
+        }
+
+        private void Button_OnPressed(BaseButton.ButtonEventArgs obj)
+        {
+            Owner.Select(obj.Button.Name);
+            _selected = obj.Button.Name;
+            RefreshList();
+        }
+
+        public void UpdateState(CrayonBoundUserInterfaceState state)
+        {
+            _selected = state.Selected;
+            _color = state.Color;
+            RefreshList();
+        }
+
+        public void Populate(CrayonDecalPrototype proto)
+        {
+            var path = new ResourcePath(proto.SpritePath);
+            _decals = new Dictionary<string, Texture>();
+            foreach (var state in proto.Decals)
+            {
+                var rsi = new SpriteSpecifier.Rsi(path, state);
+                _decals.Add(state, rsi.Frame0());
+            }
+            
+            RefreshList();
+        }
+    }
+}

Content.Client/IgnoredComponents.cs

@@ -183,6 +183,7 @@
             "GasCanister",
             "GasCanisterPort",
             "Lung",
+            "Cleanable"
         };
     }
 }

Content.Server/Chemistry/TileReactions/CleanTileReaction.cs

@@ -0,0 +1,39 @@
+using Content.Server.GameObjects.Components;
+using Content.Server.Utility;
+using Content.Shared.Chemistry;
+using Content.Shared.Interfaces.Chemistry;
+using Robust.Shared.Interfaces.Serialization;
+using Robust.Shared.Map;
+using Robust.Shared.Serialization;
+using System.Linq;
+
+namespace Content.Server.Chemistry.TileReactions
+{
+    public class CleanTileReaction : ITileReaction
+    {
+        void IExposeData.ExposeData(ObjectSerializer serializer)
+        {
+        }
+
+        ReagentUnit ITileReaction.TileReact(TileRef tile, ReagentPrototype reagent, ReagentUnit reactVolume)
+        {
+            var entities = tile.GetEntitiesInTileFast().ToArray();
+            var amount = ReagentUnit.Zero;
+            foreach (var entity in entities)
+            {
+                if (entity.TryGetComponent(out CleanableComponent cleanable))
+                {
+                    var next = amount + cleanable.CleanAmount;
+                    // Nothing left?
+                    if (reactVolume < next)
+                        break;
+
+                    amount = next;
+                    entity.Delete();
+                }
+            }
+
+            return amount;
+        }
+    }
+}

Content.Server/GameObjects/Components/CleanableComponent.cs

@@ -0,0 +1,23 @@
+using Content.Shared.Chemistry;
+using Robust.Shared.GameObjects;
+using Robust.Shared.Serialization;
+using Robust.Shared.ViewVariables;
+
+namespace Content.Server.GameObjects.Components
+{
+    [RegisterComponent]
+    public class CleanableComponent : Component
+    {
+        public override string Name => "Cleanable";
+
+        private ReagentUnit _cleanAmount;
+        [ViewVariables(VVAccess.ReadWrite)]
+        public ReagentUnit CleanAmount => _cleanAmount;
+
+        public override void ExposeData(ObjectSerializer serializer)
+        {
+            base.ExposeData(serializer);
+            serializer.DataField(ref _cleanAmount, "cleanAmount", ReagentUnit.Zero);
+        }
+    }
+}

Content.Server/GameObjects/Components/CrayonComponent.cs

@@ -0,0 +1,148 @@
+#nullable enable
+using Content.Server.Utility;
+using Content.Shared.Audio;
+using Content.Shared.GameObjects.Components;
+using Content.Shared.Interfaces;
+using Content.Shared.Interfaces.GameObjects.Components;
+using Content.Shared.Utility;
+using Robust.Server.GameObjects;
+using Robust.Server.GameObjects.Components.UserInterface;
+using Robust.Server.GameObjects.EntitySystems;
+using Robust.Server.Interfaces.GameObjects;
+using Robust.Shared.GameObjects;
+using Robust.Shared.GameObjects.Systems;
+using Robust.Shared.IoC;
+using Robust.Shared.Localization;
+using Robust.Shared.Maths;
+using Robust.Shared.Prototypes;
+using Robust.Shared.Serialization;
+using Robust.Shared.ViewVariables;
+using System.Linq;
+
+namespace Content.Server.GameObjects.Components
+{
+    [RegisterComponent]
+    public class CrayonComponent : SharedCrayonComponent, IAfterInteract, IUse, IDropped
+    {
+        [Dependency] private readonly IPrototypeManager _prototypeManager = default!;
+        //TODO: useSound
+        private string? _useSound;
+        [ViewVariables]
+        public Color Color { get; set; }
+
+        [ViewVariables(VVAccess.ReadWrite)]
+        public int Charges { get; set; }
+        private int _capacity;
+        [ViewVariables(VVAccess.ReadWrite)]
+        public int Capacity { get => _capacity; set => _capacity = value; }
+
+        [ViewVariables] private BoundUserInterface? UserInterface => Owner.GetUIOrNull(CrayonUiKey.Key);
+
+        public override void ExposeData(ObjectSerializer serializer)
+        {
+            base.ExposeData(serializer);
+            serializer.DataField(ref _useSound, "useSound", string.Empty);
+            serializer.DataField(ref _color, "color", "white");
+            serializer.DataField(ref _capacity, "capacity", 30);
+            Color = Color.FromName(_color);
+        }
+
+        public override void Initialize()
+        {
+            base.Initialize();
+            if (UserInterface != null)
+            {
+                UserInterface.OnReceiveMessage += UserInterfaceOnReceiveMessage;
+            }
+            Charges = Capacity;
+
+            // Get the first one from the catalog and set it as default
+            var decals = _prototypeManager.EnumeratePrototypes<CrayonDecalPrototype>().FirstOrDefault();
+            if (decals != null)
+            {
+                SelectedState = decals.Decals.First();
+            }
+            Dirty();
+        }
+
+        private void UserInterfaceOnReceiveMessage(ServerBoundUserInterfaceMessage serverMsg)
+        {
+            switch (serverMsg.Message)
+            {
+                case CrayonSelectMessage msg:
+                    // Check if the selected state is valid
+                    var crayonDecals = _prototypeManager.EnumeratePrototypes<CrayonDecalPrototype>().FirstOrDefault();
+                    if (crayonDecals != null)
+                    {
+                        if (crayonDecals.Decals.Contains(msg.State))
+                        {
+                            SelectedState = msg.State;
+                            Dirty();
+                        }
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        public override ComponentState GetComponentState()
+        {
+            return new CrayonComponentState(_color, SelectedState, Charges, Capacity);
+        }
+
+        // Opens the selection window
+        bool IUse.UseEntity(UseEntityEventArgs eventArgs)
+        {
+            if (eventArgs.User.TryGetComponent(out IActorComponent? actor))
+            {
+                UserInterface?.Toggle(actor.playerSession);
+                if (UserInterface?.SessionHasOpen(actor.playerSession) == true)
+                {
+                    // Tell the user interface the selected stuff
+                    UserInterface.SetState(
+                        new CrayonBoundUserInterfaceState(SelectedState, Color));
+                }
+                return true;
+            }
+            return false;
+        }
+
+        void IAfterInteract.AfterInteract(AfterInteractEventArgs eventArgs)
+        {
+            if (!eventArgs.InRangeUnobstructed(ignoreInsideBlocker: false, popup: true,
+                collisionMask: Shared.Physics.CollisionGroup.MobImpassable)) return;
+
+            if (Charges <= 0)
+            {
+                eventArgs.User.PopupMessage(Loc.GetString("Not enough left."));
+                return;
+            }
+
+            var entityManager = IoCManager.Resolve<IServerEntityManager>();
+            
+            var entity = entityManager.SpawnEntity("CrayonDecal", eventArgs.ClickLocation);
+            if (entity.TryGetComponent(out AppearanceComponent? appearance))
+            {
+                appearance.SetData(CrayonVisuals.State, SelectedState);
+                appearance.SetData(CrayonVisuals.Color, Color);
+                appearance.SetData(CrayonVisuals.Rotation, eventArgs.User.Transform.LocalRotation);
+            }
+
+            if (!string.IsNullOrEmpty(_useSound))
+            {
+                EntitySystem.Get<AudioSystem>().PlayFromEntity(_useSound, Owner, AudioHelpers.WithVariation(0.125f));
+            }
+
+            // Decrease "Ammo"
+            Charges--;
+            Dirty();
+        }
+
+        void IDropped.Dropped(DroppedEventArgs eventArgs)
+        {
+            if (eventArgs.User.TryGetComponent(out IActorComponent? actor))
+                UserInterface?.Close(actor.playerSession);
+        }
+    }
+}

Content.Shared/GameObjects/Components/SharedCrayonComponent.cs

@@ -0,0 +1,91 @@
+using Robust.Shared.GameObjects;
+using Robust.Shared.GameObjects.Components.UserInterface;
+using Robust.Shared.Maths;
+using Robust.Shared.Prototypes;
+using Robust.Shared.Serialization;
+using System;
+using System.Collections.Generic;
+using YamlDotNet.RepresentationModel;
+
+namespace Content.Shared.GameObjects.Components
+{
+    public class SharedCrayonComponent : Component
+    {
+        public override string Name => "Crayon";
+        public override uint? NetID => ContentNetIDs.CRAYONS;
+
+        public string SelectedState { get; set; }
+        protected string _color;
+
+        [Serializable, NetSerializable]
+        public enum CrayonUiKey
+        {
+            Key,
+        }
+    }
+
+    [Serializable, NetSerializable]
+    public class CrayonSelectMessage : BoundUserInterfaceMessage
+    {
+        public readonly string State;
+        public CrayonSelectMessage(string selected)
+        {
+            State = selected;
+        }
+    }
+
+    [Serializable, NetSerializable]
+    public enum CrayonVisuals
+    {
+        State,
+        Color,
+        Rotation
+    }
+
+    [Serializable, NetSerializable]
+    public class CrayonComponentState : ComponentState
+    {
+        public readonly string Color;
+        public readonly string State;
+        public readonly int Charges;
+        public readonly int Capacity;
+
+        public CrayonComponentState(string color, string state, int charges, int capacity) : base(ContentNetIDs.CRAYONS)
+        {
+            Color = color;
+            State = state;
+            Charges = charges;
+            Capacity = capacity;
+        }
+    }
+    [Serializable, NetSerializable]
+    public class CrayonBoundUserInterfaceState : BoundUserInterfaceState
+    {
+        public string Selected;
+        public Color Color;
+
+        public CrayonBoundUserInterfaceState(string selected, Color color)
+        {
+            Selected = selected;
+            Color = color;
+        }
+    }
+
+    [Serializable, NetSerializable, Prototype("crayonDecal")]
+    public class CrayonDecalPrototype : IPrototype
+    {
+        private string _spritePath;
+        public string SpritePath => _spritePath;
+
+        private List<string> _decals;
+        public List<string> Decals => _decals;
+
+        public void LoadFrom(YamlMappingNode mapping)
+        {
+            var serializer = YamlObjectSerializer.NewReader(mapping);
+
+            serializer.DataField(ref _spritePath, "spritePath", "");
+            serializer.DataField(ref _decals, "decals", new List<string>());
+        }
+    }
+}

Content.Shared/GameObjects/ContentNetIDs.cs

@@ -78,6 +78,7 @@
         public const uint SPACE_VILLAIN_ARCADE = 1072;
         public const uint BLOCKGAME_ARCADE = 1073;
         public const uint BODY_PART = 1074;
+        public const uint CRAYONS = 1075;
 
         // Net IDs for integration tests.
         public const uint PREDICTION_TEST = 10001;

Resources/Prototypes/Catalog/crayon_decals.yml

@@ -0,0 +1,134 @@
+- type: crayonDecal
+  spritePath: "Constructible/Misc/crayondecals.rsi"
+  decals:
+    - 0
+    - 1
+    - 2
+    - 3
+    - 4
+    - 5
+    - 6
+    - 7
+    - 8
+    - 9
+    - Blasto
+    - Clandestine
+    - Cyber
+    - Diablo
+    - Donk
+    - Gene
+    - Gib
+    - Max
+    - Newton
+    - North
+    - Omni
+    - Osiron
+    - Prima
+    - Psyke
+    - Sirius
+    - Tunnel
+    - Waffle
+    - a
+    - ampersand
+    - amyjon
+    - antilizard
+    - arrow
+    - b
+    - beepsky
+    - biohazard
+    - blueprint
+    - body
+    - bottle
+    - brush
+    - c
+    - carp
+    - cat
+    - chevron
+    - clawprint
+    - clown
+    - comma
+    - corgi
+    - credit
+    - cyka
+    - d
+    - danger
+    - disk
+    - dot
+    - dwarf
+    - e
+    - electricdanger
+    - end
+    - engie
+    - equals
+    - evac
+    - exclamationmark
+    - f
+    - face
+    - fireaxe
+    - firedanger
+    - food
+    - footprint
+    - g
+    - ghost
+    - guy
+    - h
+    - heart
+    - i
+    - j
+    - k
+    - l
+    - largebrush
+    - like
+    - line
+    - m
+    - matt
+    - med
+    - minus
+    - n
+    - nay
+    - o
+    - p
+    - pawprint
+    - peace
+    - percent
+    - plus
+    - pound
+    - prolizard
+    - q
+    - questionmark
+    - r
+    - radiation
+    - revolution
+    - rune1
+    - rune2
+    - rune3
+    - rune4
+    - rune5
+    - rune6
+    - s
+    - safe
+    - scroll
+    - shop
+    - shortline
+    - shotgun
+    - skull
+    - slash
+    - smallbrush
+    - snake
+    - space
+    - splatter
+    - star
+    - stickman
+    - t
+    - taser
+    - thinline
+    - toilet
+    - toolbox
+    - trade
+    - u
+    - uboa
+    - v
+    - w
+    - x
+    - y
+    - z

Resources/Prototypes/Entities/Constructible/Ground/crayondecals.yml

@@ -0,0 +1,16 @@
+- type: entity
+  abstract: true
+  id: CrayonDecal
+  name: crayon drawing
+  description: "Graffiti. Damn kids."
+  components:
+  - type: Clickable
+  - type: InteractionOutline
+  - type: Collidable
+  - type: Sprite
+    sprite: Constructible/Misc/crayondecals.rsi
+    state: corgi
+  - type: Cleanable
+  - type: Appearance
+    visuals:
+    - type: CrayonDecalVisualizer

Resources/Prototypes/Entities/Objects/Misc/crayons.yml

@@ -0,0 +1,111 @@
+- type: entity
+  parent: BaseItem
+  id: Crayon
+  name: crayon
+  abstract: true
+  description: "A colourful crayon. Looks tasty. Mmmm..."
+  components:
+  - type: UserInterface
+    interfaces:
+    - key: enum.CrayonUiKey.Key
+      type: CrayonBoundUserInterface
+
+- type: entity
+  parent: Crayon
+  id: CrayonWhite
+  suffix: White
+  components:
+  - type: Sprite
+    sprite: Objects/Misc/crayons.rsi
+    state: crayonwhite
+  - type: Crayon
+    color: white
+    capacity: 30
+
+- type: entity
+  parent: Crayon
+  id: CrayonRed
+  suffix: Red
+  components:
+  - type: Sprite
+    sprite: Objects/Misc/crayons.rsi
+    state: crayonred
+  - type: Crayon
+    color: red
+    capacity: 30
+
+- type: entity
+  parent: Crayon
+  id: CrayonGreen
+  suffix: Green
+  components:
+  - type: Sprite
+    sprite: Objects/Misc/crayons.rsi
+    state: crayongreen
+  - type: Crayon
+    color: green
+    capacity: 30
+
+- type: entity
+  parent: Crayon
+  id: CrayonPurple
+  suffix: Purple
+  components:
+  - type: Sprite
+    sprite: Objects/Misc/crayons.rsi
+    state: crayonpurple
+  - type: Crayon
+    color: purple
+    capacity: 30
+
+- type: entity
+  parent: Crayon
+  id: CrayonOrange
+  suffix: Orange
+  components:
+  - type: Sprite
+    sprite: Objects/Misc/crayons.rsi
+    state: crayonorange
+  - type: Crayon
+    color: orange
+    capacity: 30
+
+- type: entity
+  parent: Crayon
+  id: CrayonYellow
+  suffix: Yellow
+  components:
+  - type: Sprite
+    sprite: Objects/Misc/crayons.rsi
+    state: crayonyellow
+  - type: Crayon
+    color: yellow
+    capacity: 30
+
+- type: entity
+  id: CrayonBox
+  parent: BaseItem
+  name: crayon box
+  components:
+  - type: Sprite
+    sprite: Objects/Misc/crayons.rsi
+    state: crayonbox
+  - type: Storage
+    capacity: 30
+  - type: Item
+    size: 9999
+
+- type: entity
+  id: CrayonBoxFilled
+  name: crayon box
+  parent: CrayonBox
+  suffix: Filled
+  components:
+  - type: StorageFill
+    contents:
+      - name: CrayonGreen
+      - name: CrayonOrange
+      - name: CrayonPurple
+      - name: CrayonRed
+      - name: CrayonWhite
+      - name: CrayonYellow

Resources/Prototypes/Reagents/chemicals.yml

@@ -127,7 +127,8 @@
   color: "#c8ff69"
   boilingPoint: 147.0 # Made this up, loosely based on bleach
   meltingPoint: -11.0
-  # You should probably add a tile reaction here that tries to clean the tile.
+  tileReactions:
+    - !type:CleanTileReaction {}
 
 - type: reagent
   id: chem.SpaceLube