[MIRROR] Cooking Update (#11058)

Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>
Co-authored-by: Cameron Lennox <killer65311@gmail.com>

code/modules/food/kitchen/cooking_machines/_appliance.dm

@@ -434,9 +434,58 @@
 			cooking = FALSE
 			update_icon()
 
+/obj/machinery/appliance/proc/predict_cooking(datum/cooking_item/CI)
+	var/datum/recipe/recipe = null
+	var/atom/C = null
+	if(CI.container)
+		C = CI.container
+	else
+		C = src
+	recipe = select_recipe(available_recipes, C)
+
+	var/list/results = list()
+	if(recipe)
+		var/obj/O = recipe.result
+		results += initial(O.name)
+	else if(CI.combine_target)
+		results += predict_combination(CI)
+	else
+		for(var/obj/item/I in CI.container)
+			results += predict_modification(I, CI)
+
+	return jointext(results, ", ")
+
+/obj/machinery/appliance/proc/predict_combination(datum/cooking_item/CI)
+	var/obj/cook_path = output_options[CI.combine_target]
+
+	var/list/words = list()
+	var/list/cooktypes = list()
+
+	for(var/obj/item/reagent_containers/food/snacks/S in CI.container)
+		words |= splittext(S.name, " ")
+		cooktypes |= S.cooked
+
+	//Set the name.
+	words -= list("and", "the", "in", "is", "bar", "raw", "sticks", "boiled", "fried", "deep", "-o-", "warm", "two", "flavored")
+	//Remove common connecting words and unsuitable ones from the list. Unsuitable words include those describing
+	//the shape, cooked-ness/temperature or other state of an ingredient which doesn't apply to the finished product
+	var/name = initial(cook_path.name)
+	words.Remove(name)
+	shuffle(words)
+	var/num = 6 //Maximum number of words
+	while (num > 0)
+		num--
+		if (!words.len)
+			break
+		//Add prefixes from the ingredients in a random order until we run out or hit limit
+		name = "[pop(words)] [name]"
+
+	return name
+
+/obj/machinery/appliance/proc/predict_modification(obj/item/input, datum/cooking_item/CI)
+	return "[cook_type] [input.name]"
 
 /obj/machinery/appliance/proc/finish_cooking(var/datum/cooking_item/CI)
-
 	src.visible_message(span_infoplain(span_bold("\The [src]") + " pings!"))
 	if(cooked_sound)
 		playsound(get_turf(src), cooked_sound, 50, 1)

code/modules/food/kitchen/cooking_machines/_cooker.dm

@@ -14,13 +14,15 @@
 	mobdamagetype = BURN
 	can_burn_food = TRUE
 
+	var/tgui_id = "CookingAppliance"
+
 /obj/machinery/appliance/cooker/attack_hand(mob/user)
 	tgui_interact(user)
 
 /obj/machinery/appliance/cooker/tgui_interact(mob/user, datum/tgui/ui, datum/tgui/parent_ui)
 	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
-		ui = new(user, src, "CookingAppliance", name)
+		ui = new(user, src, tgui_id, name)
 		ui.open()
 
 /obj/machinery/appliance/cooker/tgui_data(mob/user, datum/tgui/ui, datum/tgui_state/state)
@@ -45,6 +47,7 @@
 				our_contents[i] = list()
 				our_contents[i]["progress"] = 0
 				our_contents[i]["progressText"] = report_progress_tgui(CI)
+				our_contents[i]["prediction"] = predict_cooking(CI)
 				if(CI.max_cookwork)
 					our_contents[i]["progress"] = CI.cookwork / CI.max_cookwork
 				if(CI.container)

code/modules/food/kitchen/cooking_machines/fryer.dm

@@ -31,6 +31,8 @@
 
 	stat = POWEROFF // Starts turned off
 
+	tgui_id = "CookingFryer"
+
 	var/datum/reagents/oil
 	var/optimal_oil = 9000 //90 litres of cooking oil
 

code/modules/food/kitchen/cooking_machines/grill.dm

@@ -26,6 +26,8 @@
 	max_contents = 3 // Arbitrary number, 3 grill 'racks'
 	container_type = /obj/item/reagent_containers/cooking_container/grill
 
+	tgui_id = "CookingGrill"
+
 /obj/machinery/appliance/cooker/grill/Initialize(mapload)
 	. = ..()
 	grill_loop = new(list(src), FALSE)

code/modules/food/kitchen/cooking_machines/oven.dm

@@ -27,6 +27,8 @@
 
 	var/open = FALSE // Start closed just so people don't try to preheat with it open, lol.
 
+	tgui_id = "CookingOven"
+
 	output_options = list(
 		"Pizza" = /obj/item/reagent_containers/food/snacks/variable/pizza,
 		"Bread" = /obj/item/reagent_containers/food/snacks/variable/bread,

maps/redgate/fantasy_items.dm

@@ -107,6 +107,7 @@
 	name = "oven"
 	desc = "Old fashioned cookies are ready, dear."
 	icon_state = "yeoldovenopen"
+	tgui_id = "CookingOvenOld"
 
 /obj/machinery/appliance/cooker/oven/yeoldoven/update_icon()
 	if(!open)

maps/virgo_minitest/virgo_minitest-1.dmm

@@ -1826,6 +1826,9 @@
 /obj/structure/cable{
 	icon_state = "1-4"
 	},
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
 /turf/simulated/floor/tiled,
 /area/medical/medbay)
 "ec" = (
@@ -2436,6 +2439,14 @@
 	},
 /turf/simulated/floor/tiled,
 /area/hallway/primary/fore)
+"fz" = (
+/obj/structure/grille,
+/obj/structure/window/reinforced,
+/obj/structure/window/reinforced{
+	dir = 8
+	},
+/turf/simulated/floor/tiled,
+/area/crew_quarters/kitchen)
 "fA" = (
 /obj/structure/grille,
 /obj/structure/window/reinforced,
@@ -3173,10 +3184,139 @@
 	},
 /turf/simulated/shuttle/plating/carry,
 /area/shuttle/overmapdemo)
+"hE" = (
+/obj/structure/grille,
+/obj/structure/window/reinforced,
+/obj/structure/window/reinforced{
+	dir = 1;
+	health = 1e+006
+	},
+/turf/simulated/floor/tiled,
+/area/crew_quarters/kitchen)
+"hF" = (
+/obj/structure/grille,
+/obj/structure/window/reinforced{
+	dir = 4
+	},
+/obj/structure/window/reinforced{
+	dir = 8
+	},
+/turf/simulated/floor/tiled,
+/area/crew_quarters/kitchen)
+"hG" = (
+/obj/machinery/appliance/mixer/cereal,
+/obj/machinery/atmospherics/unary/vent_scrubber/on{
+	dir = 1
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hH" = (
+/obj/machinery/appliance/mixer/candy,
+/obj/machinery/light,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hI" = (
+/obj/structure/closet/chefcloset,
+/obj/item/glass_jar,
+/obj/item/retail_scanner/civilian,
+/obj/item/soap/nanotrasen,
+/obj/item/destTagger{
+	pixel_x = 4;
+	pixel_y = 3
+	},
+/obj/item/packageWrap,
+/obj/item/packageWrap,
+/obj/item/packageWrap,
+/obj/item/tool/wrench,
+/obj/machinery/light/floortube,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
 "hJ" = (
 /obj/machinery/atmospherics/pipe/manifold4w/visible/green,
 /turf/simulated/floor,
 /area/engineering/workshop)
+"hK" = (
+/obj/effect/floor_decal/steeldecal/steel_decals4{
+	dir = 8
+	},
+/obj/effect/floor_decal/steeldecal/steel_decals4{
+	dir = 5
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hL" = (
+/obj/structure/table/standard,
+/obj/item/retail_scanner/civilian,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hM" = (
+/obj/structure/table/standard,
+/obj/item/reagent_containers/food/condiment/carton/flour,
+/obj/item/reagent_containers/food/condiment/carton/flour,
+/obj/item/reagent_containers/food/condiment/carton/flour,
+/obj/item/reagent_containers/food/condiment/carton/flour,
+/obj/item/reagent_containers/food/condiment/carton/flour,
+/obj/item/reagent_containers/food/condiment/carton/flour,
+/obj/item/reagent_containers/food/condiment/carton/flour,
+/obj/item/reagent_containers/food/condiment/carton/flour,
+/obj/item/reagent_containers/food/condiment/spacespice,
+/obj/item/reagent_containers/food/condiment/spacespice,
+/obj/item/reagent_containers/food/condiment/carton/sugar,
+/obj/item/reagent_containers/food/condiment/carton/sugar,
+/obj/item/reagent_containers/food/condiment/small/saltshaker,
+/obj/item/reagent_containers/food/condiment/small/saltshaker,
+/obj/item/reagent_containers/food/condiment/small/peppermill,
+/obj/item/reagent_containers/food/condiment/small/peppermill,
+/obj/random/donkpocketbox,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hN" = (
+/obj/structure/closet/crate/bin{
+	anchored = 1
+	},
+/obj/machinery/light/floortube,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hO" = (
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hP" = (
+/obj/structure/table/steel_reinforced,
+/obj/machinery/camera/network/civilian{
+	dir = 10
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/medical/medbay)
+"hQ" = (
+/obj/effect/floor_decal/steeldecal/steel_decals4{
+	dir = 6
+	},
+/obj/effect/floor_decal/steeldecal/steel_decals4{
+	dir = 1
+	},
+/obj/machinery/alarm/angled{
+	dir = 4
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hR" = (
+/obj/structure/table/steel_reinforced,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/medical/medbay)
+"hS" = (
+/turf/simulated/wall,
+/area/crew_quarters/kitchen)
+"hT" = (
+/obj/machinery/vending/dinnerware,
+/obj/machinery/atmospherics/unary/vent_pump/on,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hU" = (
+/obj/structure/cable/green{
+	icon_state = "1-4"
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
 "hV" = (
 /obj/structure/cable/cyan{
 	icon_state = "0-4"
@@ -3188,6 +3328,134 @@
 	},
 /turf/simulated/floor,
 /area/engineering/engine_room)
+"hW" = (
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
+/obj/structure/table/standard,
+/obj/machinery/light/floortube,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hX" = (
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
+/obj/structure/table/standard,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hY" = (
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
+/obj/structure/table/standard,
+/obj/item/reagent_containers/dropper,
+/obj/item/reagent_containers/glass/beaker{
+	pixel_x = 5
+	},
+/obj/item/reagent_containers/food/condiment/enzyme{
+	layer = 5
+	},
+/obj/item/reagent_containers/food/condiment/enzyme{
+	layer = 5
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"hZ" = (
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
+/obj/structure/table/standard,
+/obj/item/book/manual/cook_guide,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ia" = (
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
+/obj/structure/table/standard,
+/obj/item/reagent_containers/food/snacks/mint,
+/obj/machinery/light/floortube{
+	pixel_y = -6
+	},
+/obj/item/reagent_containers/food/condiment/small/peppermill{
+	pixel_x = 3;
+	pixel_y = 13
+	},
+/obj/item/reagent_containers/food/condiment/small/saltshaker{
+	pixel_x = -1;
+	pixel_y = 10
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ib" = (
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ic" = (
+/obj/structure/table/steel_reinforced,
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/medical/medbay)
+"id" = (
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
+/turf/simulated/floor/tiled,
+/area/medical/medbay)
+"ie" = (
+/obj/structure/cable/green{
+	icon_state = "0-4"
+	},
+/obj/machinery/power/apc{
+	dir = 8;
+	name = "west bump";
+	pixel_x = -28
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"if" = (
+/obj/structure/cable/green{
+	icon_state = "2-8"
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ig" = (
+/obj/structure/table/standard,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ih" = (
+/obj/structure/table/standard,
+/obj/machinery/reagentgrinder{
+	pixel_y = 10
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ii" = (
+/obj/structure/table/standard,
+/obj/item/material/knife/butch,
+/obj/item/material/kitchen/rollingpin,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ij" = (
+/obj/structure/table/standard,
+/obj/item/storage/box/beakers{
+	name = "box of measuring cups";
+	pixel_x = 2;
+	pixel_y = 3;
+	starts_with = list(/obj/item/reagent_containers/glass/beaker/measuring_cup = 7)
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ik" = (
+/obj/machinery/camera/network/civilian{
+	dir = 5
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
 "il" = (
 /obj/effect/floor_decal/industrial/warning/cee{
 	dir = 1
@@ -3207,6 +3475,67 @@
 	nitrogen = 82.1472
 	},
 /area/engineering/workshop)
+"im" = (
+/obj/machinery/light{
+	dir = 8
+	},
+/obj/structure/closet/secure_closet/freezer/fridge,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"in" = (
+/obj/structure/closet/secure_closet/freezer/meat,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"io" = (
+/obj/machinery/chem_master/condimaster,
+/obj/machinery/light/floortube,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ip" = (
+/obj/machinery/appliance/cooker/fryer,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"iq" = (
+/obj/machinery/appliance/cooker/grill,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"ir" = (
+/obj/machinery/appliance/cooker/oven,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"is" = (
+/obj/structure/table/standard,
+/obj/machinery/microwave,
+/obj/machinery/light/floortube,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"it" = (
+/obj/structure/table/standard,
+/obj/machinery/microwave,
+/obj/machinery/atmospherics/unary/vent_scrubber/on,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"iu" = (
+/obj/structure/sink/kitchen{
+	pixel_y = 20
+	},
+/turf/simulated/floor/tiled/eris/cafe,
+/area/crew_quarters/kitchen)
+"iv" = (
+/obj/machinery/camera/network/civilian,
+/turf/simulated/floor/tiled/eris/cafe,
+/area/medical/medbay)
+"iw" = (
+/obj/structure/grille,
+/obj/structure/window/reinforced{
+	dir = 1;
+	health = 1e+006
+	},
+/obj/structure/window/reinforced{
+	dir = 8
+	},
+/turf/simulated/floor/tiled,
+/area/crew_quarters/kitchen)
 "iy" = (
 /obj/structure/lattice,
 /turf/simulated/floor/airless,
@@ -6060,6 +6389,9 @@
 /obj/machinery/camera/network/civilian{
 	dir = 10
 	},
+/obj/structure/cable/green{
+	icon_state = "4-8"
+	},
 /turf/simulated/floor/tiled,
 /area/medical/medbay)
 "OE" = (
@@ -9095,15 +9427,15 @@ aa
 aa
 aa
 aa
-aa
+iw
-aa
+hF
-aa
+hF
-aa
+hF
-aa
+hS
-aa
+hF
-aa
+hF
-aa
+hF
-aa
+fz
 aa
 aa
 aa
@@ -9197,15 +9529,15 @@ aa
 aa
 aa
 aa
-aa
+hE
-aa
+im
-aa
+hO
-aa
+ik
-aa
+ie
-aa
+hT
-aa
+hQ
-aa
+hG
-aa
+hE
 aa
 aa
 aa
@@ -9299,15 +9631,15 @@ aa
 aa
 aa
 aa
-aa
+hE
-aa
+in
-aa
+hO
-aa
+hO
-aa
+if
-aa
+hU
-aa
+hO
-aa
+hH
-aa
+hE
 aa
 aa
 aa
@@ -9401,15 +9733,15 @@ aa
 aa
 aa
 aa
-aa
+hE
-aa
+io
-aa
+hO
-aa
+hO
-aa
+ig
-aa
+hW
-aa
+hO
-aa
+hI
-aa
+hE
 aa
 aa
 aa
@@ -9503,15 +9835,15 @@ aa
 aa
 aa
 aa
-aa
+hE
-aa
+ip
-aa
+hO
-aa
+hO
-aa
+ig
-aa
+hX
-aa
+hO
-aa
+hK
-aa
+hE
 aa
 aa
 aa
@@ -9605,15 +9937,15 @@ aa
 aa
 aa
 aa
-aa
+hE
-aa
+iq
-aa
+hO
-aa
+hO
-aa
+ih
-aa
+hY
-aa
+hO
-aa
+hL
-aa
+hE
 aa
 aa
 aa
@@ -9707,15 +10039,15 @@ aa
 aa
 aa
 aa
-aa
+hE
-aa
+ir
-aa
+hO
-aa
+hO
-aa
+ii
-aa
+hZ
-aa
+hO
-aa
+hM
-aa
+hE
 aa
 aa
 aa
@@ -9809,15 +10141,15 @@ aa
 aa
 aa
 aa
-aa
+hE
-aa
+is
-aa
+hO
-aa
+hO
-aa
+ij
-aa
+ia
-aa
+hO
-aa
+hN
-aa
+hE
 aa
 aa
 aa
@@ -9911,15 +10243,15 @@ aa
 aa
 aa
 aa
-aa
+hE
-aa
+it
-aa
+hO
-aa
+hO
-aa
+hO
-aa
+ib
-aa
+hO
-aa
+hO
-aa
+hE
 aa
 aa
 aa
@@ -10013,15 +10345,15 @@ aa
 aa
 aa
 aa
-aa
+hS
-aa
+iu
-aa
+hO
-aa
+hO
-aa
+hO
-aa
+ib
-aa
+hO
-aa
+hO
-aa
+hE
 aa
 aa
 aa
@@ -10115,15 +10447,15 @@ aa
 cE
 cL
 cL
-cL
+du
-cL
+iv
-cL
+hR
-cL
+hR
-cL
+hR
-cL
+ic
-cL
+hR
-cL
+hP
-cL
+du
 cL
 cL
 cS
@@ -10218,13 +10550,13 @@ cF
 cM
 cM
 xX
-dd
 cM
 cM
 cM
 cM
+id
+cM
 cM
-xX
 dd
 cM
 cM
@@ -10324,7 +10656,7 @@ cM
 cM
 cM
 cM
-cM
+id
 cM
 cM
 cM
@@ -10426,8 +10758,8 @@ cM
 cM
 cM
 cM
-cM
+id
-du
+hS
 cM
 cM
 cM
@@ -10630,7 +10962,7 @@ cM
 cM
 cM
 cM
-cM
+id
 du
 cM
 cM

tgui/packages/tgui/interfaces/CookingAppliance.tsx

@@ -10,7 +10,7 @@ import {
 } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
 
-type Data = {
+export type Data = {
   on: BooleanLike;
   safety: BooleanLike;
   selected_option: string | null;
@@ -24,13 +24,13 @@ type Data = {
     empty: BooleanLike;
     progress: number;
     progressText: string;
+    prediction: string;
     container: string | null;
   }[];
 };
 
-export const CookingAppliance = (props) => {
+export const CookingApplianceStatus = (props) => {
   const { act, data } = useBackend<Data>();
-
   const {
     on,
     safety,
@@ -44,59 +44,69 @@ export const CookingAppliance = (props) => {
     our_contents,
   } = data;
 
+  return (
+    <Section
+      title="Status"
+      buttons={
+        <Button
+          selected={on}
+          icon="power-off"
+          onClick={() => act('toggle_power')}
+        >
+          {on ? 'On' : 'Off'}
+        </Button>
+      }
+    >
+      <LabeledList>
+        <LabeledList.Item label="Safety">
+          <Button
+            fluid
+            selected={safety}
+            icon={safety ? 'shield-alt' : 'exclamation-triangle'}
+            onClick={() => act('toggle_safety')}
+          >
+            {safety ? 'On' : 'Off'}
+          </Button>
+        </LabeledList.Item>
+        {!!show_selected_option && (
+          <LabeledList.Item label="Selected Output">
+            <Button
+              icon="pencil"
+              fluid
+              onClick={() => act('change_output')}
+              tooltip="Change Output"
+            >
+              {selected_option || 'Default'}
+            </Button>
+          </LabeledList.Item>
+        )}
+        <LabeledList.Item label="Temperature">
+          <ProgressBar
+            color={temperatureEnough ? 'good' : 'blue'}
+            value={temperature}
+            maxValue={optimalTemp}
+          >
+            <AnimatedNumber value={temperature} />
+            &deg;C / {optimalTemp}&deg;C
+          </ProgressBar>
+        </LabeledList.Item>
+        <LabeledList.Item label="Efficiency">
+          <AnimatedNumber value={efficiency} />%
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};
+
+export const CookingAppliance = (props) => {
+  const { act, data } = useBackend<Data>();
+
+  const { containersRemovable, our_contents } = data;
+
   return (
     <Window width={600} height={600}>
       <Window.Content scrollable>
-        <Section
+        <CookingApplianceStatus />
-          title="Status"
-          buttons={
-            <Button
-              selected={on}
-              icon="power-off"
-              onClick={() => act('toggle_power')}
-            >
-              {on ? 'On' : 'Off'}
-            </Button>
-          }
-        >
-          <LabeledList>
-            <LabeledList.Item label="Safety">
-              <Button
-                fluid
-                selected={safety}
-                icon={safety ? 'shield-alt' : 'exclamation-triangle'}
-                onClick={() => act('toggle_safety')}
-              >
-                {safety ? 'On' : 'Off'}
-              </Button>
-            </LabeledList.Item>
-            {!!show_selected_option && (
-              <LabeledList.Item label="Selected Output">
-                <Button
-                  icon="pencil"
-                  fluid
-                  onClick={() => act('change_output')}
-                  tooltip="Change Output"
-                >
-                  {selected_option || 'Default'}
-                </Button>
-              </LabeledList.Item>
-            )}
-            <LabeledList.Item label="Temperature">
-              <ProgressBar
-                color={temperatureEnough ? 'good' : 'blue'}
-                value={temperature}
-                maxValue={optimalTemp}
-              >
-                <AnimatedNumber value={temperature} />
-                &deg;C / {optimalTemp}&deg;C
-              </ProgressBar>
-            </LabeledList.Item>
-            <LabeledList.Item label="Efficiency">
-              <AnimatedNumber value={efficiency} />%
-            </LabeledList.Item>
-          </LabeledList>
-        </Section>
         <Section title="Containers">
           <LabeledList>
             {our_contents.map((content, i) => {
@@ -115,8 +125,13 @@ export const CookingAppliance = (props) => {
                   label={'Slot #' + (i + 1)}
                   verticalAlign="middle"
                   key={i}
+                  tooltip={
+                    content.prediction
+                      ? `Predicted Output: ${content.prediction}`
+                      : undefined
+                  }
                 >
-                  <Stack>
+                  <Stack align="center">
                     <Stack.Item>
                       <Button
                         disabled={!containersRemovable}

tgui/packages/tgui/interfaces/CookingFryer.tsx

@@ -0,0 +1,162 @@
+import { useBackend } from 'tgui/backend';
+import { Window } from 'tgui/layouts';
+import {
+  DmIcon,
+  ProgressBar,
+  Section,
+  Stack,
+  Tooltip,
+} from 'tgui-core/components';
+
+import { CookingApplianceStatus, type Data } from './CookingAppliance';
+
+export const CookingFryer = (props) => {
+  const { act, data } = useBackend<Data>();
+
+  const { containersRemovable, our_contents } = data;
+
+  return (
+    <Window width={600} height={600}>
+      <Window.Content scrollable>
+        <CookingApplianceStatus />
+        <Section title="Containers">
+          <Stack align="center" justify="center">
+            <Stack.Item position="relative">
+              <Stack
+                position="absolute"
+                top={10}
+                align="center"
+                justify="space-around"
+                left={1.7}
+                width="92%"
+              >
+                {our_contents.map((content, i) => {
+                  if (content.empty) {
+                    return (
+                      <Stack.Item key={i} position="relative">
+                        <Stack
+                          position="absolute"
+                          top={-6}
+                          left={-1}
+                          height={4}
+                          align="center"
+                          justify="center"
+                        >
+                          <Stack.Item>
+                            <ProgressBar
+                              value={0}
+                              maxValue={1}
+                              backgroundColor="black"
+                              width={8}
+                            >
+                              N/A
+                            </ProgressBar>
+                          </Stack.Item>
+                        </Stack>
+                        <Stack align="center" justify="center" fill vertical>
+                          <Stack.Item
+                            backgroundColor="black"
+                            width={6}
+                            height={8}
+                            style={{
+                              border: '2px solid #48739e',
+                              cursor: 'pointer',
+                            }}
+                            onClick={() => act('slot', { slot: i + 1 })}
+                          />
+                          <Stack.Item
+                            backgroundColor="black"
+                            style={{ borderRadius: '4px' }}
+                            p={1}
+                          >
+                            Slot #{i + 1}
+                          </Stack.Item>
+                        </Stack>
+                      </Stack.Item>
+                    );
+                  }
+
+                  return (
+                    <Stack.Item key={i} position="relative">
+                      <Stack
+                        position="absolute"
+                        top={-6}
+                        left={-1}
+                        height={4}
+                        align="center"
+                        justify="center"
+                      >
+                        <Stack.Item>
+                          <ProgressBar
+                            color={content.progressText[0]}
+                            value={content.progress}
+                            maxValue={1}
+                            backgroundColor="black"
+                            width={8}
+                          >
+                            {content.progressText[1]}
+                          </ProgressBar>
+                        </Stack.Item>
+                      </Stack>
+                      <Stack align="center" justify="center" fill vertical>
+                        <Stack.Item
+                          width={6}
+                          height={8}
+                          style={{ cursor: 'pointer' }}
+                          onClick={() => act('slot', { slot: i + 1 })}
+                        >
+                          <Stack align="center" justify="center">
+                            <Stack.Item>
+                              {content.empty ? (
+                                'Empty'
+                              ) : (
+                                <DmIcon
+                                  mt={-16}
+                                  icon="icons/obj/cooking_machines.dmi"
+                                  icon_state="basket"
+                                  width="256px"
+                                  height="256px"
+                                />
+                              )}
+                            </Stack.Item>
+                          </Stack>
+                        </Stack.Item>
+                        <Tooltip
+                          content={
+                            content.prediction
+                              ? `Predicted Output: ${content.prediction}`
+                              : undefined
+                          }
+                        >
+                          <Stack.Item
+                            mt={2}
+                            ml={-1}
+                            backgroundColor="black"
+                            style={{
+                              borderRadius: '4px',
+                              textDecoration: content.prediction
+                                ? 'underline'
+                                : undefined,
+                            }}
+                            p={1}
+                          >
+                            Slot #{i + 1}
+                          </Stack.Item>
+                        </Tooltip>
+                      </Stack>
+                    </Stack.Item>
+                  );
+                })}
+              </Stack>
+              <DmIcon
+                icon="icons/obj/cooking_machines.dmi"
+                icon_state="fryer_off"
+                width={32}
+              />
+            </Stack.Item>
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};

tgui/packages/tgui/interfaces/CookingGrill.tsx

@@ -0,0 +1,140 @@
+import { useBackend } from 'tgui/backend';
+import { Window } from 'tgui/layouts';
+import {
+  DmIcon,
+  ProgressBar,
+  Section,
+  Stack,
+  Tooltip,
+} from 'tgui-core/components';
+
+import { CookingApplianceStatus, type Data } from './CookingAppliance';
+
+export const CookingGrill = (props) => {
+  const { act, data } = useBackend<Data>();
+
+  const { containersRemovable, our_contents } = data;
+
+  return (
+    <Window width={600} height={600}>
+      <Window.Content scrollable>
+        <CookingApplianceStatus />
+        <Section title="Containers">
+          <Stack align="center" justify="center">
+            <Stack.Item position="relative">
+              <Stack
+                position="absolute"
+                top={8}
+                align="center"
+                justify="space-around"
+                width="100%"
+              >
+                {our_contents.map((content, i) => {
+                  if (content.empty) {
+                    return (
+                      <Stack.Item key={i}>
+                        <Stack align="center" justify="center" fill vertical>
+                          <Stack.Item>
+                            <ProgressBar
+                              value={0}
+                              maxValue={1}
+                              backgroundColor="black"
+                              width={8}
+                            >
+                              N/A
+                            </ProgressBar>
+                          </Stack.Item>
+                          <Stack.Item
+                            backgroundColor="black"
+                            width={6}
+                            height={6}
+                            style={{
+                              border: '2px solid #48739e',
+                              cursor: 'pointer',
+                            }}
+                            onClick={() => act('slot', { slot: i + 1 })}
+                          />
+                          <Stack.Item
+                            backgroundColor="black"
+                            style={{ borderRadius: '4px' }}
+                            p={1}
+                          >
+                            Slot #{i + 1}
+                          </Stack.Item>
+                        </Stack>
+                      </Stack.Item>
+                    );
+                  }
+
+                  return (
+                    <Stack.Item key={i}>
+                      <Stack align="center" justify="center" fill vertical>
+                        <Stack.Item>
+                          <ProgressBar
+                            color={content.progressText[0]}
+                            value={content.progress}
+                            maxValue={1}
+                            backgroundColor="black"
+                            width={8}
+                          >
+                            {content.progressText[1]}
+                          </ProgressBar>
+                        </Stack.Item>
+                        <Stack.Item
+                          backgroundColor="black"
+                          width={6}
+                          height={6}
+                          style={{
+                            border: '2px solid #48739e',
+                            cursor: 'pointer',
+                          }}
+                          onClick={() => act('slot', { slot: i + 1 })}
+                        >
+                          {content.empty ? (
+                            'Empty'
+                          ) : (
+                            <DmIcon
+                              icon="icons/obj/cooking_machines.dmi"
+                              icon_state="grillrack"
+                              width="64px"
+                              height="64px"
+                            />
+                          )}
+                        </Stack.Item>
+                        <Tooltip
+                          content={
+                            content.prediction
+                              ? `Predicted Output: ${content.prediction}`
+                              : undefined
+                          }
+                        >
+                          <Stack.Item
+                            backgroundColor="black"
+                            style={{
+                              borderRadius: '4px',
+                              textDecoration: content.prediction
+                                ? 'underline'
+                                : undefined,
+                            }}
+                            p={1}
+                          >
+                            Slot #{i + 1}
+                          </Stack.Item>
+                        </Tooltip>
+                      </Stack>
+                    </Stack.Item>
+                  );
+                })}
+              </Stack>
+              <DmIcon
+                icon="icons/obj/cooking_machines.dmi"
+                icon_state="grill_off"
+                width={30}
+              />
+            </Stack.Item>
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};

tgui/packages/tgui/interfaces/CookingOven.tsx

@@ -0,0 +1,142 @@
+import { useBackend } from 'tgui/backend';
+import { Window } from 'tgui/layouts';
+import {
+  DmIcon,
+  ProgressBar,
+  Section,
+  Stack,
+  Tooltip,
+} from 'tgui-core/components';
+
+import { CookingApplianceStatus, type Data } from './CookingAppliance';
+
+export const CookingOven = (props) => {
+  const { act, data } = useBackend<Data>();
+
+  const { containersRemovable, our_contents } = data;
+
+  return (
+    <Window width={600} height={600}>
+      <Window.Content scrollable>
+        <CookingApplianceStatus />
+        <Section title="Containers">
+          <Stack align="center" justify="center">
+            <Stack.Item position="relative">
+              <Stack
+                position="absolute"
+                top={8}
+                left={1.5}
+                align="center"
+                justify="space-around"
+                wrap="wrap"
+                width="90%"
+              >
+                {our_contents.map((content, i) => {
+                  if (content.empty) {
+                    return (
+                      <Stack.Item key={i}>
+                        <Stack align="center" justify="center" fill vertical>
+                          <Stack.Item>
+                            <ProgressBar
+                              value={0}
+                              maxValue={1}
+                              backgroundColor="black"
+                              width={8}
+                            >
+                              N/A
+                            </ProgressBar>
+                          </Stack.Item>
+                          <Stack.Item
+                            backgroundColor="black"
+                            width={3}
+                            height={3}
+                            style={{
+                              border: '2px solid #48739e',
+                              cursor: 'pointer',
+                            }}
+                            onClick={() => act('slot', { slot: i + 1 })}
+                          />
+                          <Stack.Item
+                            backgroundColor="black"
+                            style={{ borderRadius: '4px' }}
+                            p={1}
+                          >
+                            Slot #{i + 1}
+                          </Stack.Item>
+                        </Stack>
+                      </Stack.Item>
+                    );
+                  }
+
+                  return (
+                    <Stack.Item key={i}>
+                      <Stack align="center" justify="center" fill vertical>
+                        <Stack.Item>
+                          <ProgressBar
+                            color={content.progressText[0]}
+                            value={content.progress}
+                            maxValue={1}
+                            backgroundColor="black"
+                            width={8}
+                          >
+                            {content.progressText[1]}
+                          </ProgressBar>
+                        </Stack.Item>
+                        <Stack.Item
+                          backgroundColor="black"
+                          width={3}
+                          height={3}
+                          style={{
+                            border: '2px solid #48739e',
+                            cursor: 'pointer',
+                          }}
+                          onClick={() => act('slot', { slot: i + 1 })}
+                        >
+                          {content.empty ? (
+                            'Empty'
+                          ) : (
+                            <DmIcon
+                              icon="icons/obj/cooking_machines.dmi"
+                              icon_state="ovendish"
+                              width="32px"
+                              height="32px"
+                            />
+                          )}
+                        </Stack.Item>
+                        <Tooltip
+                          content={
+                            content.prediction
+                              ? `Predicted Output: ${content.prediction}`
+                              : undefined
+                          }
+                        >
+                          <Stack.Item
+                            backgroundColor="black"
+                            style={{
+                              borderRadius: '4px',
+                              textDecoration: content.prediction
+                                ? 'underline'
+                                : undefined,
+                            }}
+                            p={1}
+                          >
+                            Slot #{i + 1}
+                          </Stack.Item>
+                        </Tooltip>
+                      </Stack>
+                    </Stack.Item>
+                  );
+                })}
+              </Stack>
+              <DmIcon
+                icon="icons/obj/cooking_machines.dmi"
+                icon_state="ovenopen"
+                width={30}
+              />
+            </Stack.Item>
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};

tgui/packages/tgui/interfaces/CookingOvenOld.tsx

@@ -0,0 +1,142 @@
+import { useBackend } from 'tgui/backend';
+import { Window } from 'tgui/layouts';
+import {
+  DmIcon,
+  ProgressBar,
+  Section,
+  Stack,
+  Tooltip,
+} from 'tgui-core/components';
+
+import { CookingApplianceStatus, type Data } from './CookingAppliance';
+
+export const CookingOvenOld = (props) => {
+  const { act, data } = useBackend<Data>();
+
+  const { containersRemovable, our_contents } = data;
+
+  return (
+    <Window width={600} height={600}>
+      <Window.Content scrollable>
+        <CookingApplianceStatus />
+        <Section title="Containers">
+          <Stack align="center" justify="center">
+            <Stack.Item position="relative">
+              <Stack
+                position="absolute"
+                top={8}
+                left={1.5}
+                align="center"
+                justify="space-around"
+                wrap="wrap"
+                width="90%"
+              >
+                {our_contents.map((content, i) => {
+                  if (content.empty) {
+                    return (
+                      <Stack.Item key={i}>
+                        <Stack align="center" justify="center" fill vertical>
+                          <Stack.Item>
+                            <ProgressBar
+                              value={0}
+                              maxValue={1}
+                              backgroundColor="black"
+                              width={8}
+                            >
+                              N/A
+                            </ProgressBar>
+                          </Stack.Item>
+                          <Stack.Item
+                            backgroundColor="black"
+                            width={3}
+                            height={3}
+                            style={{
+                              border: '2px solid #48739e',
+                              cursor: 'pointer',
+                            }}
+                            onClick={() => act('slot', { slot: i + 1 })}
+                          />
+                          <Stack.Item
+                            backgroundColor="black"
+                            style={{ borderRadius: '4px' }}
+                            p={1}
+                          >
+                            Slot #{i + 1}
+                          </Stack.Item>
+                        </Stack>
+                      </Stack.Item>
+                    );
+                  }
+
+                  return (
+                    <Stack.Item key={i}>
+                      <Stack align="center" justify="center" fill vertical>
+                        <Stack.Item>
+                          <ProgressBar
+                            color={content.progressText[0]}
+                            value={content.progress}
+                            maxValue={1}
+                            backgroundColor="black"
+                            width={8}
+                          >
+                            {content.progressText[1]}
+                          </ProgressBar>
+                        </Stack.Item>
+                        <Stack.Item
+                          backgroundColor="black"
+                          width={3}
+                          height={3}
+                          style={{
+                            border: '2px solid #48739e',
+                            cursor: 'pointer',
+                          }}
+                          onClick={() => act('slot', { slot: i + 1 })}
+                        >
+                          {content.empty ? (
+                            'Empty'
+                          ) : (
+                            <DmIcon
+                              icon="icons/obj/cooking_machines.dmi"
+                              icon_state="ovendish"
+                              width="32px"
+                              height="32px"
+                            />
+                          )}
+                        </Stack.Item>
+                        <Tooltip
+                          content={
+                            content.prediction
+                              ? `Predicted Output: ${content.prediction}`
+                              : undefined
+                          }
+                        >
+                          <Stack.Item
+                            backgroundColor="black"
+                            style={{
+                              borderRadius: '4px',
+                              textDecoration: content.prediction
+                                ? 'underline'
+                                : undefined,
+                            }}
+                            p={1}
+                          >
+                            Slot #{i + 1}
+                          </Stack.Item>
+                        </Tooltip>
+                      </Stack>
+                    </Stack.Item>
+                  );
+                })}
+              </Stack>
+              <DmIcon
+                icon="icons/obj/cooking_machines.dmi"
+                icon_state="yeoldovenopen"
+                width={30}
+              />
+            </Stack.Item>
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};