diff --git a/tgui/packages/tgui/constants.js b/tgui/packages/tgui/constants.js
index 0c19cd8f6bed..dc2c961680c0 100644
--- a/tgui/packages/tgui/constants.js
+++ b/tgui/packages/tgui/constants.js
@@ -140,6 +140,13 @@ export const RADIO_CHANNELS = [
freq: 1459,
color: '#1ecc43',
},
+ // SS220 ADD - Start
+ {
+ name: 'VoxCom',
+ freq: 1220,
+ color: '#952aa5',
+ },
+ // SS220 ADD - End
];
const GASES = [
diff --git a/tgui/packages/tgui/interfaces/Shop.js b/tgui/packages/tgui/interfaces/Shop.js
new file mode 100644
index 000000000000..b81a4b9eeb18
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/Shop.js
@@ -0,0 +1,274 @@
+import { filter, sortBy } from 'common/collections';
+import { flow } from 'common/fp';
+import { decodeHtmlEntities } from 'common/string';
+import { useBackend, useLocalState } from '../backend';
+import { Box, Button, Input, Section, Stack, Tabs, LabeledList } from '../components';
+import { Window } from '../layouts';
+import { ComplexModal } from './common/ComplexModal';
+
+const PickTab = (index) => {
+ switch (index) {
+ case 0:
+ return ;
+ case 1:
+ return ;
+ default:
+ return 'ОШИБКА, СООБЩИТЕ РАЗРАБОТЧИКУ';
+ }
+};
+
+export const Shop = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { cart } = data;
+
+ const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
+
+ return (
+
+
+
+
+
+
+ {
+ setTabIndex(0);
+ }}
+ icon="store"
+ >
+ Торговля
+
+ {
+ setTabIndex(1);
+ }}
+ icon="shopping-cart"
+ >
+ Корзина {cart && cart.length ? '(' + cart.length + ')' : ''}
+
+
+
+ {PickTab(tabIndex)}
+
+
+
+ );
+};
+
+// ================== ITEMS PAGE ==================
+
+const ItemsPage = (_properties, context) => {
+ const { act, data } = useBackend(context);
+ const { cash, cats } = data;
+ // Default to first
+ const [shopItems, setShopItems] = useLocalState(context, 'shopItems', cats[0].items);
+
+ const [showDesc, setShowDesc] = useLocalState(context, 'showDesc', 1);
+
+ return (
+
+
+
+ setShowDesc(!showDesc)} />
+ }
+ />
+
+
+
+
+
+
+ {cats.map((c) => (
+ {
+ setShopItems(c.items);
+ }}
+ >
+ {c.cat}
+
+ ))}
+
+
+
+
+
+
+ {shopItems.map((i) => (
+
+
+
+ ))}
+
+
+
+
+
+ );
+};
+
+const CartPage = (_properties, context) => {
+ const { act, data } = useBackend(context);
+ const { cart, cash, cart_price } = data;
+
+ const [showDesc, setShowDesc] = useLocalState(context, 'showDesc', 0);
+
+ return (
+
+
+
+ setShowDesc(!showDesc)} />
+
+
+
+ );
+};
+
+const ShopItem = (props, context) => {
+ const { i, showDecription = 1, buttons = } = props;
+
+ return (
+
+ {showDecription ? {decodeHtmlEntities(i.desc)} : null}
+ {showDecription ? {decodeHtmlEntities(i.content)} : null}
+
+ );
+};
+
+const ShopItemButtons = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { i } = props;
+ const { cash } = data;
+
+ return (
+