[MIRROR] Make the microwave preview what it'll (probably) create (#9565)

Co-authored-by: Heroman3003 <31296024+Heroman3003@users.noreply.github.com>
Co-authored-by: Kashargul <144968721+Kashargul@users.noreply.github.com>

code/game/objects/effects/decals/Cleanable/humans.dm

@@ -194,7 +194,7 @@ var/global/list/image/splatter_cache=list()
 	density = FALSE
 	anchored = TRUE
 	icon = 'icons/effects/blood.dmi'
-	icon_state = "gibbl5"
+	icon_state = "gib1"
 	random_icon_states = list("gib1", "gib2", "gib3", "gib5", "gib6")
 	var/fleshcolor = "#FFFFFF"
 

code/modules/asset_cache/assets/kitchen_recipes.dm

@@ -0,0 +1,26 @@
+/datum/asset/spritesheet/kitchen_recipes
+	name = "kitchen_recipes"
+
+/datum/asset/spritesheet/kitchen_recipes/create_spritesheets()
+	for(var/datum/recipe/R as anything in subtypesof(/datum/recipe))
+		add_atom_icon(R.result, sanitize_css_class_name("[R.type]"))
+
+/datum/asset/spritesheet/kitchen_recipes/proc/add_atom_icon(typepath, id)
+	var/icon_file
+	var/icon_state
+	var/obj/preview_item = typepath
+
+	// if(ispath(ingredient_typepath, /datum/reagent))
+	// 	var/datum/reagent/reagent = ingredient_typepath
+	// 	preview_item = initial(reagent.default_container)
+	// 	var/datum/glass_style/style = GLOB.glass_style_singletons[preview_item]?[reagent]
+	// 	if(istype(style))
+	// 		icon_file = style.icon
+	// 		icon_state = style.icon_state
+
+	// icon_file ||= initial(preview_item.icon_preview) || initial(preview_item.icon)
+	// icon_state ||= initial(preview_item.icon_state_preview) || initial(preview_item.icon_state)
+	icon_file = initial(preview_item.icon)
+	icon_state = initial(preview_item.icon_state)
+
+	Insert("[id]", icon_file, icon_state)

code/modules/food/kitchen/microwave.dm

@@ -138,6 +138,7 @@
 			user.visible_message( \
 				span_notice("\The [user] has added one of [O] to \the [src]."), \
 				span_notice("You add one of [O] to \the [src]."))
+			update_static_data_for_all_viewers()
 			return
 		else
 		//	user.remove_from_mob(O)	//This just causes problems so far as I can tell. -Pete - Man whoever you are, it's been years. o7
@@ -145,7 +146,7 @@
 			user.visible_message( \
 				span_notice("\The [user] has added \the [O] to \the [src]."), \
 				span_notice("You add \the [O] to \the [src]."))
-			SStgui.update_uis(src)
+			update_static_data_for_all_viewers()
 			return
 	else if (istype(O,/obj/item/storage/bag/plants)) // There might be a better way about making plant bags dump their contents into a microwave, but it works.
 		var/obj/item/storage/bag/plants/bag = O
@@ -173,6 +174,7 @@
 			to_chat(user, "You fill \the [src] from \the [O].")
 
 		SStgui.update_uis(src)
+		update_static_data_for_all_viewers()
 		return 0
 
 	else if(istype(O,/obj/item/reagent_containers/glass) || \
@@ -185,6 +187,8 @@
 			if (!(R.id in acceptable_reagents))
 				to_chat(user, span_warning("Your [O] contains components unsuitable for cookery."))
 				return 1
+		// gotta let afterattack resolve
+		addtimer(CALLBACK(src, TYPE_PROC_REF(/datum, update_static_data_for_all_viewers)), 1 SECOND)
 		return
 	else if(istype(O,/obj/item/grab))
 		var/obj/item/grab/G = O
@@ -247,6 +251,20 @@
 		ui = new(user, src, "Microwave", name)
 		ui.open()
 
+/obj/machinery/microwave/ui_assets(mob/user)
+	return list(
+		get_asset_datum(/datum/asset/spritesheet/kitchen_recipes)
+	)
+
+/obj/machinery/microwave/tgui_static_data(mob/user)
+	var/list/data = ..()
+
+	var/datum/recipe/recipe = select_recipe(available_recipes,src)
+	data["recipe"] = recipe ? sanitize_css_class_name("[recipe.type]") : null
+	data["recipe_name"] = recipe ? initial(recipe.result:name) : null
+
+	return data
+
 /obj/machinery/microwave/tgui_data(mob/user, datum/tgui/ui, datum/tgui_state/state)
 	var/list/data = ..()
 
@@ -255,6 +273,21 @@
 	data["dirty"] = dirty == 100
 	data["items"] = get_items_list()
 
+	var/list/reagents_data = list()
+	for(var/datum/reagent/R in reagents.reagent_list)
+		var/display_name = R.name
+		if(R.id == "capsaicin")
+			display_name = "Hotsauce"
+		if(R.id == "frostoil")
+			display_name = "Coldsauce"
+		UNTYPED_LIST_ADD(reagents_data, list(
+			"name" = display_name,
+			"amt" = R.volume,
+			"extra" = "unit[R.volume > 1 ? "s" : ""]",
+			"color" = R.color,
+		))
+	data["reagents"] = reagents_data
+
 	return data
 
 /obj/machinery/microwave/proc/get_items_list()
@@ -263,7 +296,8 @@
 	var/list/items_counts = list()
 	var/list/items_measures = list()
 	var/list/items_measures_p = list()
-	//for(var/obj/O in ((contents - component_parts) - circuit))
+	var/list/icons = list()
+
 	for(var/obj/O in cookingContents())
 		var/display_name = O.name
 		if(istype(O,/obj/item/reagent_containers/food/snacks/egg))
@@ -283,33 +317,26 @@
 			items_measures[display_name] = "fillet of meat"
 			items_measures_p[display_name] = "fillets of meat"
 		items_counts[display_name]++
+		icons[display_name] = list("icon" = O.icon, "icon_state" = O.icon_state)
+
 	for(var/O in items_counts)
 		var/N = items_counts[O]
+		var/icon = icons[O]
 		if(!(O in items_measures))
 			data.Add(list(list(
 				"name" = capitalize(O),
 				"amt" = N,
 				"extra" = "[lowertext(O)][N > 1 ? "s" : ""]",
+				"icon" = icon,
 			)))
 		else
 			data.Add(list(list(
 				"name" = capitalize(O),
 				"amt" = N,
 				"extra" = N == 1 ? items_measures[O] : items_measures_p[O],
+				"icon" = icon,
 			)))
 
-	for(var/datum/reagent/R in reagents.reagent_list)
-		var/display_name = R.name
-		if(R.id == "capsaicin")
-			display_name = "Hotsauce"
-		if(R.id == "frostoil")
-			display_name = "Coldsauce"
-		data.Add(list(list(
-			"name" = display_name,
-			"amt" = R.volume,
-			"extra" = "unit[R.volume > 1 ? "s" : ""]"
-		)))
-
 	return data
 
 /obj/machinery/microwave/tgui_act(action, list/params, datum/tgui/ui, datum/tgui_state/state)
@@ -327,68 +354,6 @@
 		if("dispose")
 			dispose()
 			return TRUE
-/*
-/obj/machinery/microwave/interact(mob/user as mob) // The microwave Menu
-	var/dat = ""
-	if(src.broken > 0)
-		dat = {"<TT>Bzzzzttttt</TT>"}
-	else if(src.operating)
-		dat = {"<TT>Microwaving in progress!<BR>Please wait...!</TT>"}
-	else if(src.dirty==100)
-		dat = {"<TT>This microwave is dirty!<BR>Please clean it before use!</TT>"}
-	else
-		var/list/items_counts = new
-		var/list/items_measures = new
-		var/list/items_measures_p = new
-		for (var/obj/O in ((contents - component_parts) - circuit))
-			var/display_name = O.name
-			if (istype(O,/obj/item/reagent_containers/food/snacks/egg))
-				items_measures[display_name] = "egg"
-				items_measures_p[display_name] = "eggs"
-			if (istype(O,/obj/item/reagent_containers/food/snacks/tofu))
-				items_measures[display_name] = "tofu chunk"
-				items_measures_p[display_name] = "tofu chunks"
-			if (istype(O,/obj/item/reagent_containers/food/snacks/meat)) //any meat
-				items_measures[display_name] = "slab of meat"
-				items_measures_p[display_name] = "slabs of meat"
-			if (istype(O,/obj/item/reagent_containers/food/snacks/donkpocket))
-				display_name = "Turnovers"
-				items_measures[display_name] = "turnover"
-				items_measures_p[display_name] = "turnovers"
-			if (istype(O,/obj/item/reagent_containers/food/snacks/carpmeat))
-				items_measures[display_name] = "fillet of meat"
-				items_measures_p[display_name] = "fillets of meat"
-			items_counts[display_name]++
-		for (var/O in items_counts)
-			var/N = items_counts[O]
-			if (!(O in items_measures))
-				dat += span_bold("[capitalize(O)]:") + " [N] [lowertext(O)]\s<BR>"
-			else
-				if (N==1)
-					dat += span_bold("[capitalize(O)]:") + " [N] [items_measures[O]]<BR>"
-				else
-					dat += span_bold("[capitalize(O)]:") + " [N] [items_measures_p[O]]<BR>"
-
-		for (var/datum/reagent/R in reagents.reagent_list)
-			var/display_name = R.name
-			if (R.id == "capsaicin")
-				display_name = "Hotsauce"
-			if (R.id == "frostoil")
-				display_name = "Coldsauce"
-			dat += span_bold("[display_name]:") + " [R.volume] unit\s<BR>"
-
-		if (items_counts.len==0 && reagents.reagent_list.len==0)
-			dat = span_bold("The microwave is empty") + "<BR>"
-		else
-			dat = span_bold("Ingredients:") + "<br>[dat]"
-		dat += {"<HR><BR>\
-<A href='?src=\ref[src];action=cook'>Turn on!<BR>\
-<A href='?src=\ref[src];action=dispose'>Eject ingredients!<BR>\
-"}
-	user << browse("<HEAD><TITLE>Microwave Controls</TITLE></HEAD><TT>[dat]</TT>", "window=microwave")
-	onclose(user, "microwave")
-	return
-*/
 
 /***********************************
 *   Microwave Menu Handling/Cooking

tgui/packages/tgui/interfaces/Microwave.tsx

@@ -1,75 +1,209 @@
 import { BooleanLike } from 'common/react';
+import { DmIcon, Stack, Tooltip } from 'tgui-core/components';
+import { classes } from 'tgui-core/react';
 
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section } from '../components';
+import { Box, Button, Section } from '../components';
 import { Window } from '../layouts';
+import { AnimatedArrows } from './common/AnimatedArrows';
+
+type Item = {
+  name: string;
+  amt: number;
+  extra: string;
+  icon: { icon: string; icon_state: string };
+};
+
+type Reagent = {
+  name: string;
+  amt: number;
+  extra: string;
+  color: string;
+};
 
 type Data = {
   broken: BooleanLike;
   operating: BooleanLike;
   dirty: BooleanLike;
-  items: { name: string; amt: number; extra: string }[];
+  items: Item[];
+  reagents: Reagent[];
+  recipe: string | null;
+  recipe_name: string | null;
 };
 
 export const Microwave = (props) => {
-  const { act, config, data } = useBackend<Data>();
+  const { config, data } = useBackend<Data>();
 
   const { broken, operating, dirty, items } = data;
 
+  let inner;
+
+  if (broken) {
+    inner = (
+      <Section fill>
+        <Box color="bad">Bzzzzttttt!!</Box>
+      </Section>
+    );
+  } else if (operating) {
+    inner = (
+      <Section fill>
+        <Box color="good">
+          Microwaving in progress!
+          <br />
+          Please wait...!
+        </Box>
+      </Section>
+    );
+  } else if (dirty) {
+    inner = (
+      <Section fill>
+        <Box color="bad">
+          This microwave is dirty!
+          <br />
+          Please clean it before use!
+        </Box>
+      </Section>
+    );
+  } else if (items.length) {
+    inner = <MicrowaveContents />;
+  } else {
+    inner = (
+      <Section fill>
+        <Box color="bad">{config.title} is empty.</Box>
+      </Section>
+    );
+  }
+
   return (
-    <Window width={400} height={500}>
+    <Window width={520} height={300}>
-      <Window.Content scrollable>
+      <Window.Content scrollable>{inner}</Window.Content>
-        {(broken && (
-          <Section>
-            <Box color="bad">Bzzzzttttt!!</Box>
-          </Section>
-        )) ||
-          (operating && (
-            <Section>
-              <Box color="good">
-                Microwaving in progress!
-                <br />
-                Please wait...!
-              </Box>
-            </Section>
-          )) ||
-          (dirty && (
-            <Section>
-              <Box color="bad">
-                This microwave is dirty!
-                <br />
-                Please clean it before use!
-              </Box>
-            </Section>
-          )) ||
-          (items.length && (
-            <Section
-              title="Ingredients"
-              buttons={
-                <>
-                  <Button icon="radiation" onClick={() => act('cook')}>
-                    Microwave
-                  </Button>
-                  <Button icon="eject" onClick={() => act('dispose')}>
-                    Eject
-                  </Button>
-                </>
-              }
-            >
-              <LabeledList>
-                {items.map((item) => (
-                  <LabeledList.Item key={item.name} label={item.name}>
-                    {item.amt} {item.extra}
-                  </LabeledList.Item>
-                ))}
-              </LabeledList>
-            </Section>
-          )) || (
-            <Section>
-              <Box color="bad">{config.title} is empty.</Box>
-            </Section>
-          )}
-      </Window.Content>
     </Window>
   );
 };
+
+const MicrowaveContents = (props) => {
+  const { act, data } = useBackend<Data>();
+
+  const { items, reagents, recipe, recipe_name } = data;
+
+  return (
+    <Section
+      fill
+      title="Ingredients"
+      buttons={
+        <>
+          <Button icon="radiation" onClick={() => act('cook')}>
+            Microwave
+          </Button>
+          <Button icon="eject" onClick={() => act('dispose')}>
+            Eject
+          </Button>
+        </>
+      }
+    >
+      <Stack fill align="center">
+        <Stack.Item basis="70%">
+          <Box>
+            {items.map((item) => (
+              <Tooltip
+                content={item.name + ' - ' + item.amt + ' ' + item.extra}
+                position="top"
+                key={item.name}
+              >
+                <Box
+                  backgroundColor="black"
+                  height="64px"
+                  width="64px"
+                  position="relative"
+                  m={1}
+                  style={{ border: '1px solid #4444ab', float: 'left' }}
+                >
+                  <Box position="absolute" top={0} right={0}>
+                    x{item.amt}
+                  </Box>
+                  <DmIcon
+                    icon={item.icon?.icon}
+                    icon_state={item.icon?.icon_state}
+                    width="64px"
+                    height="64px"
+                  />
+                </Box>
+              </Tooltip>
+            ))}
+            {reagents.map((r) => (
+              <Tooltip
+                content={`${r.name} - ${r.amt} ${r.extra}`}
+                key={r.name}
+                position="top"
+              >
+                <Box
+                  backgroundColor="black"
+                  height="64px"
+                  width="64px"
+                  position="relative"
+                  m={1}
+                  style={{ border: '1px solid #4444ab', float: 'left ' }}
+                >
+                  <Box position="absolute" top={0} right={0}>
+                    {r.amt}
+                  </Box>
+                  {/* To be clear: This is fucking cursed
+                      We're directly loading the rectangular glass and
+                      manually colorizing a div that's set to be the right shape */}
+                  <Box
+                    position="absolute"
+                    left="24px"
+                    top="26px"
+                    width="16px"
+                    height="20px"
+                    backgroundColor={r.color}
+                  />
+                  <DmIcon
+                    position="absolute"
+                    width="64px"
+                    height="64px"
+                    icon="icons/pdrink.dmi"
+                    icon_state="square"
+                  />
+                </Box>
+              </Tooltip>
+            ))}
+          </Box>
+        </Stack.Item>
+        <Stack.Item basis="10%">
+          <AnimatedArrows on inline />
+        </Stack.Item>
+        <Stack.Item>
+          <Tooltip
+            content={'Predicted Result - ' + (recipe_name || 'Burned Mess')}
+            position="top"
+          >
+            <Box
+              inline
+              backgroundColor="black"
+              height="64px"
+              width="64px"
+              position="relative"
+              style={{ border: '1px solid #4444ab' }}
+            >
+              {recipe ? (
+                <Box
+                  ml="16px"
+                  mt="16px"
+                  className={classes(['kitchen_recipes32x32', recipe])}
+                />
+              ) : (
+                <DmIcon
+                  icon="icons/obj/food.dmi"
+                  icon_state="badrecipe"
+                  width="64px"
+                  height="64px"
+                />
+              )}
+            </Box>
+          </Tooltip>
+        </Stack.Item>
+      </Stack>
+    </Section>
+  );
+};

tgui/packages/tgui/interfaces/common/AnimatedArrows.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { Box } from 'tgui/components';
+import { BoxProps } from 'tgui/components/Box';
+import { Icon } from 'tgui-core/components';
+
+export const AnimatedArrows = (props: { on: boolean } & BoxProps) => {
+  const { on, ...rest } = props;
+
+  const [activeArrow, setActiveArrow] = useState(0);
+
+  // Lower to make it animate faster
+  const SPEED = 200;
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setActiveArrow((arrow) => (arrow + 1) % 3);
+    }, SPEED);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <Box {...rest}>
+      <Icon
+        color={!on ? 'gray' : activeArrow === 0 ? 'green' : 'white'}
+        name="chevron-right"
+      />
+      <Icon
+        color={!on ? 'gray' : activeArrow === 1 ? 'green' : 'white'}
+        name="chevron-right"
+      />
+      <Icon
+        color={!on ? 'gray' : activeArrow === 2 ? 'green' : 'white'}
+        name="chevron-right"
+      />
+    </Box>
+  );
+};

vorestation.dme

@@ -2089,6 +2089,7 @@
 #include "code\modules\asset_cache\assets\fontawesome.dm"
 #include "code\modules\asset_cache\assets\icon_ref_map.dm"
 #include "code\modules\asset_cache\assets\jquery.dm"
+#include "code\modules\asset_cache\assets\kitchen_recipes.dm"
 #include "code\modules\asset_cache\assets\preferences.dm"
 #include "code\modules\asset_cache\assets\tgfont.dm"
 #include "code\modules\asset_cache\assets\tgui.dm"