Vending tgui

code/modules/projectiles/ammo_boxes.dm

@@ -89,6 +89,7 @@
 		overlays += image(icon, icon_state = "text[overlay_gun_type]")		//adding text
 	if(overlay_ammo_type)
 		overlays += image(icon, icon_state = "base_type[overlay_ammo_type]")	//adding base color stripes
+	if(overlay_ammo_type!="_reg" && overlay_ammo_type!="_blank")
 		overlays += image(icon, icon_state = "lid_type[overlay_ammo_type]")	//adding base color stripes
 
 //---------------------INTERACTION PROCS

tgui/packages/tgui/index.js

@@ -17,6 +17,7 @@ import './styles/themes/retro.scss';
 import './styles/themes/syndicate.scss';
 import './styles/themes/wizard.scss';
 import './styles/themes/weyland.scss';
+import './styles/themes/uscm.scss';
 import './styles/themes/xeno.scss';
 import './styles/themes/hive_status.scss';
 

tgui/packages/tgui/interfaces/VendingSorted.tsx

@@ -0,0 +1,217 @@
+import { useBackend, useLocalState } from '../backend';
+import { Button, Section, Flex, Box, Tooltip, Input, NoticeBox, Icon } from '../components';
+import { Window } from '../layouts';
+import { classes } from 'common/react';
+
+const THEME_COMP = 0;
+const THEME_USCM = 1;
+const THEME_CLF = 2;
+const THEME_UPP = 3;
+
+const VENDOR_ITEM_REGULAR = 1;
+const VENDOR_ITEM_MANDATORY = 2;
+const VENDOR_ITEM_RECOMMENDED = 3;
+
+type IconRecord = {
+  icon_sheet: string;
+  icon_state: string;
+  href: string;
+}
+
+type VendingRecord = {
+  prod_index: number,
+  prod_name: string,
+  prod_available: number,
+  prod_initial: number,
+  prod_color?: number;
+  prod_icon: IconRecord;
+  prod_desc?: string;
+}
+
+type VendingCategory = {
+  name: string;
+  items: VendingRecord[];
+}
+
+type VendingData = {
+  vendor_name: string;
+  theme: string;
+  displayed_categories: VendingCategory[];
+  stock_listing: Array<number>;
+}
+
+type VenableItem = {
+  record: VendingRecord
+}
+
+const VendableItem = (props: VenableItem, context) => {
+  const { data, act } = useBackend<VendingData>(context);
+  const { record } = props;
+
+  const isMandatory = record.prod_color === VENDOR_ITEM_MANDATORY;
+  const isRecommended = record.prod_color === VENDOR_ITEM_RECOMMENDED;
+  const quantity = data.stock_listing[record.prod_index - 1];
+  const available = quantity > 0;
+  return (
+    <Flex align="center" justify="space-between" align-items="stretch" className="VendingSorted__ItemBox">
+      <Flex.Item>
+        <img className="VendingSorted__Icon" src={record.prod_icon.href} />
+      </Flex.Item>
+
+      <Flex.Item>
+        <Box className="VendingSorted__Spacer" />
+      </Flex.Item>
+
+      <Flex.Item grow={1}>
+        <Tooltip
+          position="bottom-start"
+          content={(
+            <NoticeBox
+              info
+              className="VendingSorted__Description"
+            >
+              <ItemDescriptionViewer desc={record.prod_desc ?? ""} name={record.prod_name} />
+            </NoticeBox>
+          )}
+        >
+          <span className={classes([
+            'VendingSorted__Text',
+            'VendingSorted__RegularItemText',
+            isMandatory && 'VendingSorted__MandatoryItemText',
+            isRecommended && 'VendingSorted__RecommendedItemText',
+          ])}>
+            {record.prod_name} <Icon name="circle-info" />
+          </span>
+        </Tooltip>
+      </Flex.Item>
+
+      <Flex.Item>
+        <Box className="VendingSorted__Spacer" />
+      </Flex.Item>
+
+      <Flex.Item width={5}>
+        <span className={classes(['VendingSorted__Text', !available && 'VendingSorted__Failure'])}>
+          {quantity}
+        </span>
+      </Flex.Item>
+
+      <Flex.Item>
+        <Box className="VendingSorted__Spacer" />
+      </Flex.Item>
+      <Flex.Item justify="right">
+        <Button
+          className={classes(["VendingSorted__Button", 'VendingSorted__VendButton'])}
+          preserveWhitespace
+          icon={available ? "circle-down" : "xmark"}
+          onClick={() => act('vend', record)}
+          textAlign="center"
+          disabled={!available} />
+      </Flex.Item>
+    </Flex>);
+};
+
+type VendingCategoryProps = {
+  category: VendingCategory;
+}
+
+type DescriptionProps = {
+  desc: string;
+  name: string;
+}
+
+const ItemDescriptionViewer = (props: DescriptionProps, context) => {
+  return (
+    <Section title={props.name}>
+      <span>{props.desc}</span>
+    </Section>
+  );
+};
+
+export const ViewVendingCategory = (props: VendingCategoryProps, context) => {
+  const { data } = useBackend<VendingData>(context);
+  const { category } = props;
+  const [searchTerm, _] = useLocalState(context, 'searchTerm', "");
+  const searchFilter = (x: VendingRecord) =>
+    x.prod_name.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase());
+
+  const filteredCategories = category.items.filter(searchFilter);
+  if (filteredCategories.length === 0) {
+    return null;
+  }
+
+  return (
+    <Section title={category.name ?? ""} className="VendingSorted__CategorySection">
+      <Flex direction="column" className="VendingSorted__ItemFlex">
+        {filteredCategories
+          .sort((a, b) => a.prod_name.localeCompare(b.prod_name))
+          .map((record, i) =>
+          {
+            const isLast = (filteredCategories.length - 1) === i;
+            return (
+              <Flex.Item mb={1} key={record.prod_index}>
+                <VendableItem record={record} />
+                {!isLast && <hr className="VendingSorted__ItemSeparator" />}
+              </Flex.Item>
+            );
+          })}
+      </Flex>
+    </Section>);
+
+};
+
+const getTheme = (value: string | number): string => {
+  switch (value) {
+    case THEME_UPP:
+      return "abductor";
+    case THEME_CLF:
+      return "retro";
+    case THEME_COMP:
+      return "weyland";
+    default:
+      return "usmc";
+  }
+};
+
+export const VendingSorted = (_, context) => {
+  const { data } = useBackend<VendingData>(context);
+  const categories = data.displayed_categories ?? [];
+  const [searchTerm, setSearchTerm] = useLocalState(context, 'searchTerm', "");
+  return (
+    <Window
+      height={800}
+      width={500}
+      theme={getTheme(data.theme)}
+    >
+      <Window.Content scrollable>
+        <Box className={classes([
+          "VendingSorted__SearchBox",
+        ])}>
+          <Flex align="center" justify="space-between" align-items="stretch" className="Section__title">
+            <Flex.Item>
+              <span className="Section__titleText">Search</span>
+            </Flex.Item>
+            <Flex.Item>
+              <Input
+                autoFocus
+                value={searchTerm}
+                onInput={(_, value) => setSearchTerm(value)}
+                width="160px"
+              />
+            </Flex.Item>
+          </Flex>
+        </Box>
+
+        <Box className="VendingSorted__ItemContainer">
+          <Flex direction="column">
+            {categories.map((category, i) => (
+              <Flex.Item key={i} className={"VendingSorted__Category"}>
+                <ViewVendingCategory category={category} />
+              </Flex.Item>))}
+            <Flex.Item height={15}>
+              &nbsp;
+            </Flex.Item>
+          </Flex>
+        </Box>
+      </Window.Content>
+    </Window>);
+};

tgui/packages/tgui/styles/interfaces/VendingSorted.scss

@@ -0,0 +1,117 @@
+@use '../base.scss';
+@use '../colors.scss';
+@use '../functions.scss' as *;
+
+$title-text-color: base.$color-fg !default;
+
+.VendingSorted__SearchBox {
+  position: fixed;
+  width: calc(100% - 25px);
+  margin: 0px;
+  z-index: 1;
+  background-color: base.$color-bg;
+  top: 31px;
+}
+
+.VendingSorted__ItemContainer {
+  margin-top: 30px;
+  position: absolute;
+  width: 100%;
+  padding-right: 10px;
+}
+
+.VendingSorted__CategorySection {
+  padding-top: 2.5px;
+  padding-bottom: 2.5px;
+  width: 100%
+}
+
+.VendingSorted__Category {
+  padding-top: 2.5px;
+  padding-bottom: 2.5px;
+  width: 100%
+}
+
+.VendingSorted__Input {
+  border: 1px solid white;
+  color: white;
+}
+
+.VendingSorted__Button {
+  text-align: center;
+}
+
+.VendingSorted__VendButton {
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+}
+
+.VendingSorted__Icon {
+  width: 100%;
+  filter: blur(8px);
+  -webkit-filter: blur(8px);
+  transition: 0.3s filter linear;
+  -webkit-transition: 0.3s -webkit-filter linear;
+  -moz-transition: 0.3s -moz-filter linear;
+  -ms-transition: 0.3s -ms-filter linear;
+  -o-transition: 0.3s -o-filter linear;
+}
+
+.VendingSorted__Text {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  width: inherit;
+}
+
+.VendingSorted__Failure {
+  color: red;
+}
+
+.VendingSorted__RegularItemText {
+  color: white;
+}
+
+.VendingSorted__MandatoryItemText {
+  color: orange;
+}
+
+.VendingSorted__RecommendedItemText {
+  color: #56E97B;
+}
+
+.VendingSorted__Spacer {
+  width: 15px
+}
+
+.VendingSorted__ItemFlex {
+  margin-top: 5px;
+}
+
+.VendingSorted__ItemBox {
+  height: 25px;
+}
+
+
+.VendingSorted__ItemSeparator {
+  height: 1px;
+  border: none;
+  background-color: base.$color-bg;
+  position: absolute;
+  width: 100%;
+  margin-top: -0px;
+}
+
+.VendingSorted__Tooltip {
+  background-color: red;
+}
+
+.VendingSorted__Description {
+  margin-left: -5px;
+  margin-right: -5px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+}

tgui/packages/tgui/styles/main.scss

@@ -58,6 +58,7 @@
 @include meta.load-css('./interfaces/TachyonArray.scss');
 @include meta.load-css('./interfaces/Techweb.scss');
 @include meta.load-css('./interfaces/TechNode.scss');
+@include meta.load-css('./interfaces/VendingSorted.scss');
 
 // Layouts
 @include meta.load-css('./layouts/Layout.scss');