Ports tgui stripping (finally) (#15401)

* Upload files * Update items.dm * Update files * Update files * Update strippable.dm * Update strippable * Update strippable.dm * Upload files * Update files * Update files * Update files * update files * Update files * Update dog.dm * Update strippable.dm * Update equipping * Update strippable.d * Upload files * Upload files * Update monkey.dm
2021-12-30 07:40:15 +01:00
parent 89166f8286
commit 8510dcc08a
50 changed files with 1524 additions and 513 deletions
@@ -23,7 +23,7 @@
 		c-13.66-16.01-2.33-26.15,22.14-49.83C228.23,47.45,234.41,19.82,248.07,35.83z"/>
 	<line class="st0" x1="139.93" y1="375.93" x2="139.65" y2="375.65"/>
 	<line class="st0" x1="125.93" y1="390.93" x2="125.61" y2="390.61"/>
-	
+
 		<rect x="191.43" y="-6.09" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -86.5159 210.9892)" class="st2" width="40" height="432.04"/>
 </g>
 </svg>
@@ -8,6 +8,9 @@ import { Window } from "../layouts";
 const ROWS = 5;
 const COLUMNS = 6;

+const ROWS_LONG = 4;
+const COLUMNS_LONG = 11;
+
 const BUTTON_DIMENSIONS = "50px";

 type GridSpotKey = string;
@@ -71,6 +74,14 @@ const ALTERNATE_ACTIONS: Record<string, AlternateAction> = {
    icon: "tshirt",
    text: "Adjust jumpsuit",
  },
+  enable_helmet: {
+    icon: "toggle-off",
+    text: "Extend helmet",
+  },
+  disable_helmet: {
+    icon: "toggle-on",
+    text: "Retract helmet",
+  },
 };

 const SLOTS: Record<
@@ -209,6 +220,142 @@ const SLOTS: Record<
  },
 };

+const SLOTS_LONG: Record<
+  string,
+  {
+    displayName: string;
+    gridSpot: GridSpotKey;
+    image?: string;
+    additionalComponent?: JSX.Element;
+  }
+> = {
+  eyes: {
+    displayName: "eyewear",
+    gridSpot: getGridSpotKey([0, 0]),
+    image: "inventory-glasses.png",
+  },
+
+  head: {
+    displayName: "headwear",
+    gridSpot: getGridSpotKey([0, 1]),
+    image: "inventory-head.png",
+  },
+
+  neck: {
+    displayName: "neckwear",
+    gridSpot: getGridSpotKey([1, 0]),
+    image: "inventory-neck.png",
+  },
+
+  mask: {
+    displayName: "mask",
+    gridSpot: getGridSpotKey([1, 1]),
+    image: "inventory-mask.png",
+  },
+
+  corgi_collar: {
+    displayName: "collar",
+    gridSpot: getGridSpotKey([1, 1]),
+    image: "inventory-collar.png",
+  },
+
+  ears: {
+    displayName: "earwear",
+    gridSpot: getGridSpotKey([1, 2]),
+    image: "inventory-ears.png",
+  },
+
+  parrot_headset: {
+    displayName: "headset",
+    gridSpot: getGridSpotKey([1, 2]),
+    image: "inventory-ears.png",
+  },
+
+  jumpsuit: {
+    displayName: "uniform",
+    gridSpot: getGridSpotKey([2, 0]),
+    image: "inventory-uniform.png",
+  },
+
+  suit: {
+    displayName: "suit",
+    gridSpot: getGridSpotKey([2, 1]),
+    image: "inventory-suit.png",
+  },
+
+  gloves: {
+    displayName: "gloves",
+    gridSpot: getGridSpotKey([2, 2]),
+    image: "inventory-gloves.png",
+  },
+
+  handcuffs: {
+    displayName: "handcuffs",
+    gridSpot: getGridSpotKey([2, 8]),
+  },
+
+  shoes: {
+    displayName: "shoes",
+    gridSpot: getGridSpotKey([3, 1]),
+    image: "inventory-shoes.png",
+  },
+
+  legcuffs: {
+    displayName: "legcuffs",
+    gridSpot: getGridSpotKey([3, 2]),
+  },
+
+  suit_storage: {
+    displayName: "suit storage item",
+    gridSpot: getGridSpotKey([3, 3]),
+    image: "inventory-suit_storage.png",
+  },
+
+  id: {
+    displayName: "ID",
+    gridSpot: getGridSpotKey([3, 4]),
+    image: "inventory-id.png",
+  },
+
+  belt: {
+    displayName: "belt",
+    gridSpot: getGridSpotKey([3, 5]),
+    image: "inventory-belt.png",
+  },
+
+  back: {
+    displayName: "backpack",
+    gridSpot: getGridSpotKey([3, 6]),
+    image: "inventory-back.png",
+  },
+
+  right_hand: {
+    displayName: "right hand",
+    gridSpot: getGridSpotKey([3, 7]),
+    image: "inventory-hand_r.png",
+    additionalComponent: <CornerText align="left">R</CornerText>,
+  },
+
+  left_hand: {
+    displayName: "left hand",
+    gridSpot: getGridSpotKey([3, 8]),
+    image: "inventory-hand_l.png",
+    additionalComponent: <CornerText align="right">L</CornerText>,
+  },
+
+  left_pocket: {
+    displayName: "left pocket",
+    gridSpot: getGridSpotKey([3, 9]),
+    image: "inventory-pocket.png",
+  },
+
+  right_pocket: {
+    displayName: "right pocket",
+    gridSpot: getGridSpotKey([3, 10]),
+    image: "inventory-pocket.png",
+  },
+};
+
 enum ObscuringLevel {
  Completely = 1,
  Hidden = 2,
@@ -246,24 +393,35 @@ type StripMenuItem =
 type StripMenuData = {
  items: Record<keyof typeof SLOTS, StripMenuItem>;
  name: string;
+  long_strip_menu: boolean;
 };

 export const StripMenu = (props, context) => {
  const { act, data } = useBackend<StripMenuData>(context);

  const gridSpots = new Map<GridSpotKey, string>();
-  for (const key of Object.keys(data.items)) {
-    gridSpots.set(SLOTS[key].gridSpot, key);
+  if (data.long_strip_menu) {
+    for (const key of Object.keys(data.items)) {
+      gridSpots.set(SLOTS_LONG[key].gridSpot, key);
+    }
+  } else {
+    for (const key of Object.keys(data.items)) {
+      gridSpots.set(SLOTS[key].gridSpot, key);
+    }
  }

  return (
-    <Window title={`Stripping ${data.name}`} width={400} height={400}>
+    <Window
+      title={`Stripping ${data.name}`}
+      width={data.long_strip_menu ? 620 : 400}
+      height={data.long_strip_menu ? 300 : 400}>
      <Window.Content>
        <Stack fill vertical>
-          {range(0, ROWS).map(row => (
+          {range(0, data.long_strip_menu ? ROWS_LONG : ROWS).map(row => (
            <Stack.Item key={row}>
              <Stack fill>
-                {range(0, COLUMNS).map(column => {
+                {range(0, data.long_strip_menu ? COLUMNS_LONG
+                  : COLUMNS).map(column => {
                  const key = getGridSpotKey([row, column]);
                  const keyAtSpot = gridSpots.get(key);

@@ -290,7 +448,9 @@ export const StripMenu = (props, context) => {
                  if (item === null) {
                    tooltip = slot.displayName;
                  } else if ("name" in item) {
-                    alternateAction = ALTERNATE_ACTIONS[item.alternate];
+                    if (item.alternate) {
+                      alternateAction = ALTERNATE_ACTIONS[item.alternate];
+                    }

                    content = (
                      <Box
@@ -364,17 +524,9 @@ export const StripMenu = (props, context) => {
                          {slot.image && (
                            <Box
                              as="img"
+                              className="centered-image"
                              src={resolveAsset(slot.image)}
                              opacity={0.7}
-                              style={{
-                                position: "absolute",
-                                width: "32px",
-                                height: "32px",
-                                left: "50%",
-                                top: "50%",
-                                transform:
-                                  "translateX(-50%) translateY(-50%) scale(0.8)",
-                              }}
                            />
                          )}

@@ -0,0 +1,7 @@
+.centered-image {
+  position: absolute;
+  height: 100%;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%) scale(0.8);
+}
@@ -11,6 +11,7 @@

 // Atomic classes
@include meta.load-css('./atomic/candystripe.scss');
+@include meta.load-css('./atomic/centered-image.scss');
@include meta.load-css('./atomic/color.scss');
@include meta.load-css('./atomic/debug-layout.scss');
@include meta.load-css('./atomic/outline.scss');