Added mapped storage for things like crayon belts and tools (#4201)

* Added mapped storage for things like crayon belts and tools

* Attempt to get StorageFillEvent to work

* Managed to get it working with Visualizer logi

* Improved PR and did some light refactoring of components

* Update Content.Client/Storage/Visualizers/MappedItemVisualizer.cs

Co-authored-by: metalgearsloth <31366439+metalgearsloth@users.noreply.github.com>

* Removed event, went with stateful ApperanceData

* Removed ids in favor of whitelist

* Refactor YAML, Moved functionality to Shared and renamed it.

* Changed so insert/remove always send full state.

* Move logic to component

* Fix some issues on MappedVisualizer and few nitpicks

- Fix mapped visualizer only doing init or update layers
- Fixed naming of systems
- Fixed sort of crayons

* Forgot to apply Vera's suggestion

* Fix the data to be more strict and to avoid unnecessary clearing

Co-authored-by: metalgearsloth <31366439+metalgearsloth@users.noreply.github.com>

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

@@ -1,6 +1,30 @@
 - type: Tag
   id: Crayon
 
+- type: Tag
+  id: CrayonBlack
+
+- type: Tag
+  id: CrayonBlue
+
+- type: Tag
+  id: CrayonGreen
+
+- type: Tag
+  id: CrayonOrange
+
+- type: Tag
+  id: CrayonPurple
+
+- type: Tag
+  id: CrayonRed
+
+- type: Tag
+  id: CrayonWhite
+
+- type: Tag
+  id: CrayonYellow
+
 - type: entity
   abstract: true
   parent: BaseItem
@@ -30,6 +54,9 @@
   - type: Crayon
     color: white
     capacity: 5
+  - type: Tag
+    tags:
+    - CrayonWhite
 
 - type: entity
   parent: Crayon
@@ -42,6 +69,9 @@
   - type: Crayon
     color: white
     capacity: 5
+  - type: Tag
+    tags:
+    - CrayonWhite
 
 - type: entity
   parent: Crayon
@@ -54,6 +84,9 @@
   - type: Crayon
     color: black
     capacity: 5
+  - type: Tag
+    tags:
+    - CrayonBlack
 
 - type: entity
   parent: Crayon
@@ -66,6 +99,9 @@
   - type: Crayon
     color: red
     capacity: 5
+  - type: Tag
+    tags:
+    - CrayonRed
 
 - type: entity
   parent: Crayon
@@ -78,6 +114,9 @@
   - type: Crayon
     color: orange
     capacity: 5
+  - type: Tag
+    tags:
+    - CrayonOrange
 
 - type: entity
   parent: Crayon
@@ -90,6 +129,9 @@
   - type: Crayon
     color: yellow
     capacity: 5
+  - type: Tag
+    tags:
+    - CrayonYellow
 
 - type: entity
   parent: Crayon
@@ -102,6 +144,9 @@
   - type: Crayon
     color: green
     capacity: 5
+  - type: Tag
+    tags:
+    - CrayonGreen
 
 - type: entity
   parent: Crayon
@@ -114,6 +159,9 @@
   - type: Crayon
     color: lightblue
     capacity: 5
+  - type: Tag
+    tags:
+    - CrayonBlue
 
 - type: entity
   parent: Crayon
@@ -126,6 +174,9 @@
   - type: Crayon
     color: purple
     capacity: 5
+  - type: Tag
+    tags:
+    - CrayonPurple
 
 - type: entity
   parent: BaseItem
@@ -152,15 +203,38 @@
     - id: CrayonBlue
     - id: CrayonPurple
     - id: CrayonBlack
+  - type: ItemCounter
+    mapLayers:
+      black_box:
+        whitelist:
+          tags:
+          - CrayonBlack
+      blue_box:
+        whitelist:
+          tags:
+          - CrayonBlue
+      green_box:
+        whitelist:
+          tags:
+          - CrayonGreen
+      orange_box:
+        whitelist:
+          tags:
+          - CrayonOrange
+      purple_box:
+        whitelist:
+          tags:
+          - CrayonPurple
+      red_box:
+        whitelist:
+          tags:
+          - CrayonRed
+      yellow_box:
+        whitelist:
+          tags:
+          - CrayonYellow
+
   - type: Appearance
     visuals:
-    - type: StackVisualizer
-      composite: true
-      stackLayers:
-      - red_box
-      - orange_box
-      - yellow_box
-      - green_box
-      - blue_box
-      - purple_box
-      - black_box
+    - type: MappedItemVisualizer
+