From 907eee0abed68eb0d17aaf51efd1ae59283e420a Mon Sep 17 00:00:00 2001
From: paulrpg <mullenpaul90@gmail.com>
Date: Tue, 14 Nov 2023 22:29:28 +0000
Subject: [PATCH] finished styling the panel

---
 .../interfaces/DropshipWeaponsConsole.tsx     | 21 +++++++-------
 .../MfdPanels/MultifunctionDisplay.tsx        | 28 ++++++++++++++++---
 .../interfaces/MfdPanels/TargetAquisition.tsx |  9 ++++--
 .../styles/interfaces/DropshipWeapons.scss    | 22 +++++++++++++++
 4 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/DropshipWeaponsConsole.tsx b/tgui/packages/tgui/interfaces/DropshipWeaponsConsole.tsx
index a3208d60986b..ffc2ba99c454 100644
--- a/tgui/packages/tgui/interfaces/DropshipWeaponsConsole.tsx
+++ b/tgui/packages/tgui/interfaces/DropshipWeaponsConsole.tsx
@@ -334,19 +334,20 @@ const PrimaryPanel = (props: MfdProps, context) => {
   }
 };
 
-export const DropshipWeaponsConsole = (_, context) => {
-  const { data } = useBackend<DropshipProps>(context);
+export const DropshipWeaponsConsole = () => {
   return (
     <Window height={700} width={1300}>
       <Window.Content>
-        <Stack horizontal className="WeaponsConsole">
-          <Stack.Item>
-            <PrimaryPanel panelStateId="left-screen" />
-          </Stack.Item>
-          <Stack.Item>
-            <PrimaryPanel panelStateId="right-screen" />
-          </Stack.Item>
-        </Stack>
+        <Box className="WeaponsConsoleBackground">
+          <Stack horizontal className="WeaponsConsole">
+            <Stack.Item>
+              <PrimaryPanel panelStateId="left-screen" />
+            </Stack.Item>
+            <Stack.Item>
+              <PrimaryPanel panelStateId="right-screen" />
+            </Stack.Item>
+          </Stack>
+        </Box>
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/interfaces/MfdPanels/MultifunctionDisplay.tsx b/tgui/packages/tgui/interfaces/MfdPanels/MultifunctionDisplay.tsx
index fff175b92d28..5fcc9b17a714 100644
--- a/tgui/packages/tgui/interfaces/MfdPanels/MultifunctionDisplay.tsx
+++ b/tgui/packages/tgui/interfaces/MfdPanels/MultifunctionDisplay.tsx
@@ -75,6 +75,18 @@ export const VerticalPanel = (
   );
 };
 
+const HexScrew = () => {
+  return (
+    <svg viewBox="0 0 10 10" width="30px" height="30px">
+      <circle cx="5" cy="5" r="4" fill="#202020" />
+      <polygon
+        points="3.5,2.5 6.5,2.5 8,5 6.5,7.5 3.5,7.5 2,5"
+        fill="#040404"
+      />
+    </svg>
+  );
+};
+
 export const MfdPanel = (props: MfdProps) => {
   const topProps = props.topButtons ?? [];
   const botProps = props.bottomButtons ?? [];
@@ -94,11 +106,15 @@ export const MfdPanel = (props: MfdProps) => {
   return (
     <Table className="primarypanel">
       <TableRow>
-        <TableCell />
+        <TableCell className={classes(['Screw_cell_top', 'Screw_cell_left'])}>
+          <HexScrew />
+        </TableCell>
         <TableCell>
           <HorizontalPanel buttons={topButtons} />
         </TableCell>
-        <TableCell />
+        <TableCell className={classes(['Screw_cell_top', 'Screw_cell_right'])}>
+          <HexScrew />
+        </TableCell>
       </TableRow>
       <TableRow>
         <TableCell>
@@ -114,11 +130,15 @@ export const MfdPanel = (props: MfdProps) => {
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell />
+        <TableCell className={classes(['Screw_cell_bot', 'Screw_cell_left'])}>
+          <HexScrew />
+        </TableCell>
         <TableCell>
           <HorizontalPanel buttons={bottomButtons} />
         </TableCell>
-        <TableCell />
+        <TableCell className={classes(['Screw_cell_bot', 'Screw_cell_right'])}>
+          <HexScrew />
+        </TableCell>
       </TableRow>
     </Table>
   );
diff --git a/tgui/packages/tgui/interfaces/MfdPanels/TargetAquisition.tsx b/tgui/packages/tgui/interfaces/MfdPanels/TargetAquisition.tsx
index a3c62a3879d8..e56ce04b1e3e 100644
--- a/tgui/packages/tgui/interfaces/MfdPanels/TargetAquisition.tsx
+++ b/tgui/packages/tgui/interfaces/MfdPanels/TargetAquisition.tsx
@@ -265,10 +265,13 @@ const lazeMapper = (context) => {
   return (index: number) => {
     const target = lazes.length > index ? lazes[index] : undefined;
     const label = target?.target_name.split(' ')[0] ?? '';
-    const squad = label[0] ?? '';
-    const number = label.split('-')[1] ?? '';
+    const squad = label[0] ?? undefined;
+    const number = label.split('-')[1] ?? undefined;
     return {
-      children: `${squad}-${number}`,
+      children:
+        squad !== undefined && number !== undefined
+          ? `${squad}-${number}`
+          : undefined,
       onClick: target
         ? () => {
           act('set-camera', { 'equipment_id': target.target_tag });
diff --git a/tgui/packages/tgui/styles/interfaces/DropshipWeapons.scss b/tgui/packages/tgui/styles/interfaces/DropshipWeapons.scss
index 4c08761ded9e..300a4219ee32 100644
--- a/tgui/packages/tgui/styles/interfaces/DropshipWeapons.scss
+++ b/tgui/packages/tgui/styles/interfaces/DropshipWeapons.scss
@@ -5,7 +5,17 @@
   border: 1px solid red;
 }
 
+.WeaponsConsoleBackground {
+  background-color: #040404;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .WeaponsConsole {
+  padding: 8px;
   .primarypanel {
     width: fit-content;
     height: 512px;
@@ -209,6 +219,18 @@
     padding: 2px;
     margin: 0px;
   }
+  .Screw_cell_top {
+    vertical-align: top;
+  }
+  .Screw_cell_bot {
+    vertical-align: bottom;
+  }
+  .Screw_cell_right {
+    text-align: right;
+  }
+  .Screw_cell_left {
+    text-align: left;
+  }
 }
 
 .Test {