[MIRROR] Polish the microwave UI (#10748)

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

code/modules/asset_cache/assets/microwave.dm

@@ -0,0 +1,5 @@
+/datum/asset/simple/microwave
+	assets = list(
+		"microwave.png" = 'icons/obj/microwave_ui/base.png',
+		"microwave.gif" = 'icons/obj/microwave_ui/microwave.gif',
+	)

code/modules/food/kitchen/microwave.dm

@@ -253,7 +253,8 @@
 
 /obj/machinery/microwave/ui_assets(mob/user)
 	return list(
-		get_asset_datum(/datum/asset/spritesheet_batched/kitchen_recipes)
+		get_asset_datum(/datum/asset/spritesheet_batched/kitchen_recipes),
+		get_asset_datum(/datum/asset/simple/microwave)
 	)
 
 /obj/machinery/microwave/tgui_static_data(mob/user)

tgui/packages/tgui/interfaces/Microwave.tsx

@@ -1,9 +1,12 @@
+import { resolveAsset } from 'tgui/assets';
 import { useBackend } from 'tgui/backend';
 import { Window } from 'tgui/layouts';
 import {
   Box,
   Button,
   DmIcon,
+  Icon,
+  Image,
   Section,
   Stack,
   Tooltip,
@@ -44,30 +47,78 @@ export const Microwave = (props) => {
 
   let inner;
 
+  const first_item = items[0] || null;
+
   if (broken) {
     inner = (
       <Section fill>
-        <Box color="bad">Bzzzzttttt!!</Box>
+        <Stack vertical fill align="center" justify="center">
+          <Stack.Item>
+            <Box color="bad" fontSize={6}>
+              Bzzzzttttt!!
+            </Box>
+          </Stack.Item>
+          <Stack.Item>
+            <Stack align="center" justify="space-around">
+              <Stack.Item>
+                <Icon name="fire" color="orange" size={10} />
+              </Stack.Item>
+              <Stack.Item>
+                <Icon name="fire" color="orange" size={10} />
+              </Stack.Item>
+              <Stack.Item>
+                <Icon name="fire" color="orange" size={10} />
+              </Stack.Item>
+            </Stack>
+          </Stack.Item>
+        </Stack>
       </Section>
     );
   } else if (operating) {
     inner = (
       <Section fill>
-        <Box color="good">
+        <Stack fill vertical align="center" justify="center">
-          Microwaving in progress!
+          <Stack.Item>
-          <br />
+            <Box position="relative" className="Microwave__Hover">
-          Please wait...!
+              <Image src={resolveAsset('microwave.png')} />
+              {first_item ? (
+                <Box
+                  position="absolute"
+                  className="Microwave__Hover"
+                  left={8}
+                  top={10}
+                >
+                  <DmIcon
+                    icon={first_item.icon.icon}
+                    icon_state={first_item.icon.icon_state}
+                    width="64px"
+                    height="64px"
+                  />
                 </Box>
+              ) : null}
+              <Image
+                position="absolute"
+                left={0}
+                top={0}
+                src={resolveAsset('microwave.gif')}
+              />
+            </Box>
+          </Stack.Item>
+        </Stack>
       </Section>
     );
   } else if (dirty) {
     inner = (
-      <Section fill>
+      <Section fill textAlign="center">
+        <Stack fill vertical align="center" justify="center" fontSize={2}>
+          <Stack.Item>
             <Box color="bad">
               This microwave is dirty!
               <br />
               Please clean it before use!
             </Box>
+          </Stack.Item>
+        </Stack>
       </Section>
     );
   } else if (items.length) {
@@ -75,14 +126,20 @@ export const Microwave = (props) => {
   } else {
     inner = (
       <Section fill>
-        <Box color="bad">{config.title} is empty.</Box>
+        <Stack fill align="center" justify="center">
+          <Stack.Item>
+            <Box color="bad" fontSize={2}>
+              {config.title} is empty.
+            </Box>
+          </Stack.Item>
+        </Stack>
       </Section>
     );
   }
 
   return (
     <Window width={520} height={300}>
-      <Window.Content scrollable>{inner}</Window.Content>
+      <Window.Content>{inner}</Window.Content>
     </Window>
   );
 };
@@ -96,6 +153,7 @@ const MicrowaveContents = (props) => {
     <Section
       fill
       title="Ingredients"
+      scrollable
       buttons={
         <Stack>
           <Stack.Item>
@@ -201,6 +259,10 @@ const MicrowaveContents = (props) => {
                   ml="16px"
                   mt="16px"
                   className={classes(['kitchen_recipes32x32', recipe])}
+                  style={{
+                    transform: 'scale(3)',
+                    imageRendering: 'pixelated',
+                  }}
                 />
               ) : (
                 <DmIcon

tgui/packages/tgui/styles/interfaces/Microwave.scss

@@ -0,0 +1,15 @@
+@keyframes microwave-floating {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-16px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.Microwave__Hover {
+  animation: microwave-floating 2s ease-in-out infinite;
+}

tgui/packages/tgui/styles/main.scss

@@ -36,6 +36,7 @@
 @include meta.load-css('./interfaces/CrewManifest.scss');
 @include meta.load-css('./interfaces/ExperimentConfigure.scss');
 @include meta.load-css('./interfaces/FishingMinigame.scss');
+@include meta.load-css('./interfaces/Microwave.scss');
 @include meta.load-css('./interfaces/NuclearBomb.scss');
 @include meta.load-css('./interfaces/Paper.scss');
 @include meta.load-css('./interfaces/Pda.scss');

vorestation.dme

@@ -2141,6 +2141,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\microwave.dm"
 #include "code\modules\asset_cache\assets\ntos.dm"
 #include "code\modules\asset_cache\assets\permissions.dm"
 #include "code\modules\asset_cache\assets\preferences.dm"