Return of Stat icons (BeeStation#11128)

* 515: Return of the icons

* Removes the stat tag

* Update StatText.js

* Update code/_compile_options.dm

* Update layers.dm

* Fixes some formatting

code/__DEFINES/flags.dm

@@ -55,15 +55,17 @@ GLOBAL_LIST_INIT(bitflags, list(1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 204
 /// Should we use the initial icon for display? Mostly used by overlay only objects
 #define HTML_USE_INITAL_ICON_1 (1<<13)
 /// Prevents direct access for anything in the contents of this atom.
-#define NO_DIRECT_ACCESS_FROM_CONTENTS_1 (1<<15)
+#define NO_DIRECT_ACCESS_FROM_CONTENTS_1 (1<<14)
+/// Prevents aggregation of the item in the stack panel
+#define STAT_UNIQUE_1 (1<<15)
 
 //turf-only flags. These use flags_1 too.
 // These exist to cover /turf and /area at the same time
-#define NOJAUNT_1					(1<<15)
-#define UNUSED_RESERVATION_TURF_1	(1<<16)
-#define CAN_BE_DIRTY_1				(1<<17) 	//! If a turf can be made dirty at roundstart. This is also used in areas.
-#define NO_LAVA_GEN_1				(1<<18) 	//! Blocks lava rivers being generated on the turf
-#define NO_RUINS_1					(1<<19) //! Blocks ruins spawning on the turf
+#define NOJAUNT_1					(1<<16)
+#define UNUSED_RESERVATION_TURF_1	(1<<17)
+#define CAN_BE_DIRTY_1				(1<<18) 	//! If a turf can be made dirty at roundstart. This is also used in areas.
+#define NO_LAVA_GEN_1				(1<<19) 	//! Blocks lava rivers being generated on the turf
+#define NO_RUINS_1					(1<<20) //! Blocks ruins spawning on the turf
 
 // Update flags for [/atom/proc/update_appearance]
 /// Update the atom's name

code/__DEFINES/layers.dm

@@ -1,27 +1,11 @@
 //Defines for atom layers and planes
 //KEEP THESE IN A NICE ACSCENDING ORDER, PLEASE
 
-//NEVER HAVE ANYTHING BELOW THIS PLANE ADJUST IF YOU NEED MORE SPACE
-#define LOWEST_EVER_PLANE -200
-
-#define CLICKCATCHER_PLANE -99
-
-#define PLANE_SPACE -95
-#define PLANE_SPACE_PARALLAX -90
-
-#define GRAVITY_PULSE_PLANE -89
-#define GRAVITY_PULSE_RENDER_TARGET "*GRAVPULSE_RENDER_TARGET"
 
-//#define ZMIMIC_MIN_PLANE -80
-// ZMIMIC: -----------  -80 to -70
-// Highest plane used by zmimic, occupies up to -ZMIMIC_MAX_DEPTH
-#define ZMIMIC_MAX_PLANE -70
-/// The maxiumum number of planes deep we'll go before we just dump everything on the same plane.
-#define ZMIMIC_MAX_DEPTH 10
+//KEEP THESE IN A NICE ACSCENDING ORDER, PLEASE
 
-#define FLOOR_PLANE -7
-#define GAME_PLANE -4
-#define GAME_PLANE_RENDER_TARGET "GAME_PLANE_RENDER_TARGET"
+///cinematics are "below" the splash screen
+#define CINEMATIC_LAYER -1
 
 #define SPACE_LAYER 1.8
 //#define TURF_LAYER 2 //For easy recordkeeping; this is a byond define
@@ -100,6 +84,54 @@
 #define TEXT_EFFECT_UI_LAYER 5.90 // text effects shouldn't be displayed behind.
 	// maybe it should be custom layer category like 'UI_LAYER 6'
 
+///1000 is an unimportant number, it's just to normalize copied layers
+#define RADIAL_LAYER 1000
+
+#define RADIAL_BACKGROUND_LAYER 0
+#define RADIAL_CONTENT_LAYER 1000
+
+/**
+ * Planes
+ */
+
+//NEVER HAVE ANYTHING BELOW THIS PLANE ADJUST IF YOU NEED MORE SPACE
+#define LOWEST_EVER_PLANE -200
+
+#define CLICKCATCHER_PLANE -99
+
+#define PLANE_SPACE -95
+#define PLANE_SPACE_PARALLAX -90
+
+#define GRAVITY_PULSE_PLANE -89
+#define GRAVITY_PULSE_RENDER_TARGET "*GRAVPULSE_RENDER_TARGET"
+
+//---------- Z-MIMIC -------------
+//#define ZMIMIC_MIN_PLANE -80
+// ZMIMIC: -----------  -80 to -70
+// Highest plane used by zmimic, occupies up to -ZMIMIC_MAX_DEPTH
+#define ZMIMIC_MAX_PLANE -70
+/// The maxiumum number of planes deep we'll go before we just dump everything on the same plane.
+#define ZMIMIC_MAX_DEPTH 10
+
+//---------- ABSTRACT LIGHTING -------------
+// Layering order of these is not particularly meaningful.
+// Important part is the seperation of the planes for control via plane_master
+// We put these below the standard planes because if they are rendered without a plane-master (RenderIcon)
+// then we want them to be as hidden as possible.
+
+///This plane masks out lighting to create an "emissive" effect, ie for glowing lights in otherwise dark areas
+#define EMISSIVE_PLANE -50
+#define EMISSIVE_RENDER_TARGET "*EMISSIVE_PLANE"
+
+/// The plane for managing the global starlight effect
+#define STARLIGHT_PLANE -45
+
+//---------- STANDARD -------------
+
+#define FLOOR_PLANE -7
+#define GAME_PLANE -4
+#define GAME_PLANE_RENDER_TARGET "GAME_PLANE_RENDER_TARGET"
+
 #define BLACKNESS_PLANE 0 //To keep from conflicts with SEE_BLACKNESS internals
 
 #define AREA_PLANE 60
@@ -115,9 +147,6 @@
 #define LIGHTING_PLANE 100
 #define LIGHTING_PLANE_ADDITIVE 101
 
-/// The plane for managing the global starlight effect
-#define STARLIGHT_PLANE 105
-
 ///Lighting objects that are "free floating"
 #define O_LIGHTING_VISUAL_PLANE 110
 #define O_LIGHTING_VISUAL_LAYER 110
@@ -128,13 +157,6 @@
 
 ///visibility + hiding of things outside of light source range
 #define BYOND_LIGHTING_PLANE 130
-//---------- EMISSIVES -------------
-//Layering order of these is not particularly meaningful.
-//Important part is the seperation of the planes for control via plane_master
-
-///This plane masks out lighting to create an "emissive" effect, ie for glowing lights in otherwise dark areas
-#define EMISSIVE_PLANE 150
-#define EMISSIVE_RENDER_TARGET "*EMISSIVE_PLANE"
 
 ///---------------- MISC -----------------------
 
@@ -183,17 +205,8 @@
 #define ABOVE_HUD_PLANE 1100
 #define ABOVE_HUD_RENDER_TARGET "ABOVE_HUD_PLANE"
 
-///1000 is an unimportant number, it's just to normalize copied layers
-#define RADIAL_LAYER 1000
-
-#define RADIAL_BACKGROUND_LAYER 0
-#define RADIAL_CONTENT_LAYER 1000
-
 ///Plane of the "splash" icon used that shows on the lobby screen. Nothing should ever be above this.
 #define SPLASHSCREEN_PLANE 9999
 
-///cinematics are "below" the splash screen
-#define CINEMATIC_LAYER -1
-
 ///Plane master controller keys
 #define PLANE_MASTERS_GAME "plane_masters_game"

code/modules/atmospherics/machinery/atmosmachinery.dm

@@ -20,6 +20,7 @@
 	resistance_flags = FIRE_PROOF
 	max_integrity = 200
 	obj_flags = CAN_BE_HIT | ON_BLUEPRINTS
+	flags_1 = STAT_UNIQUE_1
 	var/can_unwrench = 0
 	var/initialize_directions = 0
 	var/pipe_color

code/modules/mob/mob_stat.dm

@@ -118,6 +118,7 @@
 	tab_data[REF(src)] = list(
 		text="[name]",
 		tag = STAT_PANEL_TAG(src),
+		image = FAST_REF(src),
 		type=STAT_ATOM
 	)
 	var/max_item_sanity = MAX_ITEMS_TO_READ
@@ -150,11 +151,13 @@
 			var/image/override_image = overrides[A]
 			atom_name = override_image.name
 			image_overrides[A] = override_image
-		var/list/item_group = atom_count["[atom_type][atom_name]"]
+		// use the max item sanity as an extention if the unique flag is set, since its unique
+		var/extension = (A.flags_1 & STAT_UNIQUE_1) && max_item_sanity
+		var/list/item_group = atom_count["[atom_type][atom_name][extension]"]
 		if (item_group)
 			item_group += A
 		else
-			atom_count["[A.type][A.name]"] = list(A)
+			atom_count["[A.type][A.name][extension]"] = list(A)
 			// To many icon types per tile
 			if (icon_count_sanity-- <= 0)
 				break
@@ -168,20 +171,26 @@
 			for (var/obj/item/stack/stack_item as() in atom_items)
 				item_count += stack_item.amount
 		var/atom_name = first_atom.name
+		var/image_icon
 		if (image_overrides[first_atom])
 			var/image/override_image = image_overrides[first_atom]
 			atom_name = override_image.name
+			image_icon = FAST_REF(override_image)
+		else
+			image_icon = FAST_REF(first_atom)
 		tab_data[REF(first_atom)] = list(
 			text = "[atom_name][item_count > 1 ? " (x[item_count])" : ""]",
 			tag = STAT_PANEL_TAG(first_atom),
+			image = image_icon,
 			type = STAT_ATOM
 		)
 	// Display self
 	tab_data[REF(client.mob)] = list(
-			text = client.mob.name,
-			tag = "You",
-			type = STAT_ATOM
-		)
+		text = client.mob.name,
+		tag = "You",
+		image = FAST_REF(client.mob),
+		type = STAT_ATOM
+	)
 
 /mob/proc/get_all_verbs()
 	var/list/all_verbs = new

code/modules/power/cable.dm

@@ -42,6 +42,7 @@ By design, d1 is the smallest direction and d2 is the highest
 	layer = WIRE_LAYER //Above hidden pipes, GAS_PIPE_HIDDEN_LAYER
 	anchored = TRUE
 	obj_flags = CAN_BE_HIT | ON_BLUEPRINTS
+	flags_1 = STAT_UNIQUE_1
 	var/d1 = 0   // cable direction 1 (see above)
 	var/d2 = 1   // cable direction 2 (see above)
 	var/datum/powernet/powernet

code/modules/tgui/tgui_window.dm

@@ -83,6 +83,8 @@
 	var/html = SStgui.basehtml
 	html = replacetextEx(html, "\[tgui:windowId]", id)
 	html = replacetextEx(html, "\[tgui:strictMode]", strict_mode)
+	html = replacetextEx(html, "\[tgui:byondMajor\]", client.byond_version)
+	html = replacetextEx(html, "\[tgui:byondMinor\]", client.byond_build)
 	// Inject assets
 	var/inline_assets_str = ""
 	for(var/datum/asset/asset in assets)

tgui/global.d.ts

@@ -34,6 +34,16 @@ type ByondType = {
    */
   windowId: string;
 
+  /**
+   * The major version of byond.
+   */
+  BYOND_MAJOR: string;
+
+  /**
+   * The minor (build) version of byond.
+   */
+  BYOND_MINOR: string;
+
   /**
    * True if javascript is running in BYOND.
    */

tgui/packages/tgui-panel/stat/StatText.js

@@ -18,7 +18,7 @@ export const StatText = (props, context) => {
   }
   return (
     <div className="StatBorder">
-      <Box>
+      <Flex direction="row" wrap>
         {statPanelData
           ? Object.keys(statPanelData)
             .filter((x) => x !== null)
@@ -40,16 +40,25 @@ export const StatText = (props, context) => {
                     />
                   )) ||
                   (statPanelData[key].type === STAT_ATOM && (
-                    <StatTextAtom atom_ref={key} atom_name={statPanelData[key].text} atom_tag={statPanelData[key].tag} />
+                    <StatTextAtom
+                      atom_ref={key}
+                      atom_name={statPanelData[key].text}
+                      atom_tag={statPanelData[key].tag}
+                      atom_icon={statPanelData[key].image}
+                    />
                   )) ||
                   (statPanelData[key].type === STAT_DIVIDER && <StatTextDivider />) ||
-                  (statPanelData[key].type === STAT_BLANK && <br />))
+                  (statPanelData[key].type === STAT_BLANK && (
+                    <Flex.Item width="100%">
+                      <br />
+                    </Flex.Item>
+                  )))
             )
           : 'No data'}
         {Object.keys(verbs).map((verb) => (
           <StatTextVerb key={verb} title={verb} action_id={verbs[verb].action} params={verbs[verb].params} />
         ))}
-      </Box>
+      </Flex>
     </div>
   );
 };
@@ -101,7 +110,7 @@ const StatTagToClassName = (text) => {
 export const StatTextText = (props, context) => {
   const { title, text } = props;
   return (
-    <Flex.Item mt={1}>
+    <Flex.Item mt={1} width="100%">
       <b>{title}: </b>
       {text}
     </Flex.Item>
@@ -111,7 +120,7 @@ export const StatTextText = (props, context) => {
 export const StatTextButton = (props, context) => {
   const { title, text, action_id, params = [], multirow = false, buttons = [] } = props;
   return (
-    <Flex.Item mt={1}>
+    <Flex.Item mt={1} width="100%">
       <Button
         width="100%"
         overflowX="hidden"
@@ -189,13 +198,14 @@ const storeAtomRef = (value) => {
 const retrieveAtomRef = () => janky_storage;
 
 export const StatTextAtom = (props, context) => {
-  const { atom_name, atom_ref, atom_tag } = props;
+  const { atom_name, atom_ref, atom_tag, atom_icon } = props;
 
   storeAtomRef(null);
 
   return (
-    <Flex.Item mt={0.5}>
+    <Flex.Item mt={0.5} width={Byond.BYOND_MAJOR >= 515 ? '33%' : '50%'}>
       <Button
+        height="100%"
         pl={0}
         width="100%"
         overflowX="hidden"
@@ -245,10 +255,18 @@ export const StatTextAtom = (props, context) => {
         color="transparent">
         <div className="StatAtomElement">
           <Flex direction="row" wrap="wrap">
-            <Flex.Item basis={6} mr={2}>
-              <div className={StatTagToClassName(atom_tag)}>{atom_tag}</div>
+            {Byond.BYOND_MAJOR >= 515 ? (
+              <Flex.Item mr={1}>
+                <img width="32px" height="32px" src={atom_icon} />
+              </Flex.Item>
+            ) : (
+              <Flex.Item basis={6} mr={2}>
+                <div className={StatTagToClassName(atom_tag)}>{atom_tag}</div>
+              </Flex.Item>
+            )}
+            <Flex.Item grow={1} className="StatWordWrap">
+              {capitalize(atom_name)}
             </Flex.Item>
-            <Flex.Item grow={1}>{capitalize(atom_name)}</Flex.Item>
           </Flex>
         </div>
       </Button>
@@ -257,7 +275,11 @@ export const StatTextAtom = (props, context) => {
 };
 
 export const StatTextDivider = (props, context) => {
-  return <Divider />;
+  return (
+    <Flex.Item width="100%">
+      <Divider />
+    </Flex.Item>
+  );
 };
 
 export const StatTextVerb = (props, context) => {

tgui/packages/tgui-panel/styles/components/Stat.scss

@@ -100,3 +100,11 @@ $border-color: color.scale(colors.fg(colors.$primary), $lightness: 75%) !default
     background-color: #adadad;
   }
 }
+
+.StatMiddle {
+  vertical-align: middle;
+}
+
+.StatWordWrap {
+  white-space: normal;
+}

tgui/public/tgui.html

@@ -7,6 +7,8 @@
 <!-- Inlined metadata -->
 <meta id="tgui:windowId" content="[tgui:windowId]">
 <meta id="tgui:strictMode" content="[tgui:strictMode]">
+<meta id="tgui:byondMajor" content="[tgui:byondMajor]">
+<meta id="tgui:byondMinor" content="[tgui:byondMinor]">
 
 <!-- Early setup -->
 <script type="text/javascript">
@@ -39,6 +41,8 @@
 
   // Expose inlined metadata
   Byond.windowId = parseMetaTag('tgui:windowId');
+  Byond.BYOND_MAJOR = parseMetaTag('tgui:byondMajor');
+  Byond.BYOND_MINOR = parseMetaTag('tgui:byondMinor');
 
   // Backwards compatibility
   window.__windowId__ = Byond.windowId;