Printer (#17590)

* Port all of /tg/'s fonts and switch maptext to Grand9K

* Allow TGUI to use the new fonts

* Remove SpessFont to be safe

* Redo photocopier UI to be in the style of a VFD

---------

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

tgui/packages/tgui/interfaces/Photocopier.tsx

@@ -1,10 +1,9 @@
 import { useBackend } from 'tgui/backend';
 import { Window } from 'tgui/layouts';
 import {
+  AnimatedNumber,
   Box,
   Button,
-  NumberInput,
-  ProgressBar,
   Section,
   Stack,
 } from 'tgui-core/components';
@@ -22,27 +21,77 @@ type Data = {
 };
 
 export const Photocopier = (props) => {
-  const { data } = useBackend<Data>();
-  const { isAI, has_toner, has_item } = data;
+  const { act, data } = useBackend<Data>();
+  const { has_item, num_copies, can_AI_print, isAI } = data;
 
   return (
-    <Window title="Photocopier" width={240} height={isAI ? 309 : 234}>
+    <Window title="Photocopier" width={200} height={isAI ? 230 : 210}>
       <Window.Content>
-        {has_toner ? (
-          <Toner />
-        ) : (
-          <Section title="Toner">
-            <Box color="average">No inserted toner cartridge.</Box>
-          </Section>
-        )}
-        {has_item ? (
-          <Options />
-        ) : (
-          <Section title="Options">
-            <Box color="average">No inserted item.</Box>
-          </Section>
-        )}
-        {!!isAI && <AIOptions />}
+        {/* VFD */}
+        <Stack vertical>
+          <Stack.Item>
+            <Box
+              className="font-grand9k_pixel"
+              backgroundColor="#002200"
+              textColor="#0fffb8"
+              pl={1}
+              pr={1}
+              style={{ border: '4px solid #181817', borderRadius: '4px' }}
+            >
+              <Stack vertical>
+                <Stack.Item>
+                  <Stack>
+                    <Stack.Item>TONER LEVEL:</Stack.Item>
+                    <Stack.Item>
+                      <Toner />
+                    </Stack.Item>
+                  </Stack>
+                </Stack.Item>
+                <Stack.Item>
+                  <Stack>
+                    <Stack.Item>COPIES:</Stack.Item>
+                    <Stack.Item>{num_copies}</Stack.Item>
+                  </Stack>
+                </Stack.Item>
+                <Stack.Item color={has_item ? 'good' : 'bad'}>
+                  {has_item ? 'SCANNER READY' : 'NO ITEM LOADED'}
+                </Stack.Item>
+                {isAI ? (
+                  <Stack.Item>
+                    <Stack>
+                      <Stack.Item color="hsl(332, 60%, 60%)">AI:</Stack.Item>
+                      <Stack.Item>
+                        <Button
+                          color="transparent"
+                          disabled={!can_AI_print}
+                          onClick={() => act('ai_photo')}
+                        >
+                          UPLOAD PHOTO
+                        </Button>
+                      </Stack.Item>
+                    </Stack>
+                  </Stack.Item>
+                ) : null}
+              </Stack>
+            </Box>
+          </Stack.Item>
+          <Stack.Item>
+            <Buttons />
+          </Stack.Item>
+          {has_item ? (
+            <Stack.Item>
+              <Button
+                fluid
+                backgroundColor="#3a3a3a"
+                style={{ boxShadow: '2px 2px #1a1a1a' }}
+                icon="eject"
+                onClick={() => act('remove')}
+              >
+                Remove Item
+              </Button>
+            </Stack.Item>
+          ) : null}
+        </Stack>
       </Window.Content>
     </Window>
   );
@@ -50,75 +99,72 @@ export const Photocopier = (props) => {
 
 const Toner = (props) => {
   const { data } = useBackend<Data>();
-  const { max_toner, current_toner } = data;
+  const { max_toner, current_toner, has_toner } = data;
+
+  if (!has_toner) {
+    return <Box color="bad">ERR</Box>;
+  }
 
   const average_toner: number = max_toner * 0.66;
   const bad_toner: number = max_toner * 0.33;
 
+  let color;
+  if (current_toner < bad_toner) {
+    color = 'bad';
+  } else if (current_toner < average_toner) {
+    color = 'average';
+  } else {
+    color = 'good';
+  }
+
   return (
-    <Section title="Toner">
-      <ProgressBar
-        ranges={{
-          good: [average_toner, max_toner],
-          average: [bad_toner, average_toner],
-          bad: [0, bad_toner],
-        }}
-        value={current_toner}
-        minValue={0}
-        maxValue={max_toner}
-      />
-    </Section>
+    <Box color={color}>
+      <AnimatedNumber value={current_toner} format={(f) => f + '%'} />
+    </Box>
   );
 };
 
-const Options = (props) => {
+const Buttons = (props) => {
   const { act, data } = useBackend<Data>();
   const { num_copies } = data;
-
   return (
-    <Section title="Options">
-      <Stack>
-        <Stack.Item mt={0.4} width={11} color="label">
-          Make copies:
-        </Stack.Item>
-        <Stack.Item>
-          <NumberInput
-            animated
-            width="2.6em"
-            height="1.65"
-            step={1}
-            stepPixelSize={8}
-            minValue={1}
-            maxValue={10}
-            value={num_copies}
-            onDrag={(value) =>
-              act('set_copies', {
-                num_copies: value,
-              })
-            }
-          />
-        </Stack.Item>
-        <Stack.Item>
-          <Button
-            ml={0.2}
-            icon="copy"
-            textAlign="center"
-            onClick={() => act('make_copy')}
-          >
-            Copy
-          </Button>
-        </Stack.Item>
-      </Stack>
-      <Button
-        mt={0.5}
-        textAlign="center"
-        icon="reply"
-        fluid
-        onClick={() => act('remove')}
-      >
-        Remove item
-      </Button>
-    </Section>
+    <Stack justify="center">
+      <Stack.Item>
+        <Button
+          icon="minus"
+          backgroundColor="#3a3a3a"
+          fontSize={2.5}
+          style={{ boxShadow: '2px 2px #1a1a1a' }}
+          onClick={() =>
+            act('set_copies', {
+              num_copies: num_copies - 1,
+            })
+          }
+        />
+      </Stack.Item>
+      <Stack.Item>
+        <Button
+          icon="play"
+          backgroundColor="#3a3a3a"
+          fontSize={2.5}
+          style={{ boxShadow: '2px 2px #1a1a1a' }}
+          onClick={() => act('make_copy')}
+        />
+      </Stack.Item>
+      <Stack.Item>
+        <Button
+          icon="plus"
+          backgroundColor="#3a3a3a"
+          fontSize={2.5}
+          style={{ boxShadow: '2px 2px #1a1a1a' }}
+          onClick={() =>
+            act('set_copies', {
+              num_copies: num_copies + 1,
+            })
+          }
+        />
+      </Stack.Item>
+    </Stack>
   );
 };