SCP-294 Vending Machine

code/game/machinery/scp.dm

@@ -0,0 +1,35 @@
+/obj/structure/machinery/scp
+	name = "\improper Coffee Machine"
+	desc = "A generic vending machine."
+	icon = 'icons/obj/structures/machinery/vending.dmi'
+	icon_state = "294"
+	anchored = TRUE
+	density = TRUE
+	layer = BELOW_OBJ_LAYER
+	wrenchable = FALSE
+	unslashable = TRUE
+	unacidable = TRUE
+
+
+/obj/structure/machinery/scp/attack_remote(mob/user as mob)
+	return 0
+
+/obj/structure/machinery/scp/attack_hand(mob/user as mob)
+	user.set_interaction(src)
+	tgui_interact(user)
+
+/obj/structure/machinery/scp/tgui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if (!ui)
+		ui = new(user, src, "scp", name)
+		ui.open()
+
+/obj/structure/machinery/scp/ui_data(mob/user)
+	var/list/data = list()
+	return data
+
+/obj/structure/machinery/scp/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	if(..())
+		return
+
+//very unfinished//

colonialmarines.dme

@@ -952,6 +952,7 @@
 #include "code\game\machinery\rechargestation.dm"
 #include "code\game\machinery\robot_fabricator.dm"
 #include "code\game\machinery\scoreboard.dm"
+#include "code\game\machinery\scp.dm"
 #include "code\game\machinery\seed_extractor.dm"
 #include "code\game\machinery\sentry_holder.dm"
 #include "code\game\machinery\spaceheater.dm"

tgui/packages/tgui/index.tsx

@@ -33,6 +33,7 @@ import './styles/themes/weyland.scss';
 import './styles/themes/uscm.scss';
 import './styles/themes/xeno.scss';
 import './styles/themes/hive_status.scss';
+import './styles/themes/scp.scss';
 
 import { perf } from 'common/perf';
 import { setupHotReloading } from 'tgui-dev-server/link/client.cjs';

tgui/packages/tgui/interfaces/scp.tsx

@@ -0,0 +1,66 @@
+import { useBackend } from '../backend';
+import { Button, Section } from '../components';
+import { Window } from '../layouts';
+
+export const scp = (props) => {
+  const { act, data } = useBackend();
+  // Extract `health` and `color` variables from the `data` object.
+  return (
+    <Window width={400} height={600} theme="scp">
+      <Window.Content>
+        <Section fitted backgroundColor="hsla(323, 7%, 23%, 1.00)">
+          <Section>
+            <div>
+              <Button onClick={() => 1} icon="1" />
+              <Button onClick={() => 1} icon="2" />
+              <Button onClick={() => 1} icon="3" />
+              <Button onClick={() => 1} icon="4" />
+              <Button onClick={() => 1} icon="5" />
+              <Button onClick={() => 1} icon="6" />
+              <Button onClick={() => 1} icon="7" />
+              <Button onClick={() => 1} icon="8" />
+              <Button onClick={() => 1} icon="9" />
+              <Button onClick={() => 1} icon="0" />
+            </div>
+            <div>
+              <Button onClick={() => 1} icon="q" />
+              <Button onClick={() => 1} icon="w" />
+              <Button onClick={() => 1} icon="e" />
+              <Button onClick={() => 1} icon="r" />
+              <Button onClick={() => 1} icon="t" />
+              <Button onClick={() => 1} icon="y" />
+              <Button onClick={() => 1} icon="u" />
+              <Button onClick={() => 1} icon="i" />
+              <Button onClick={() => 1} icon="o" />
+              <Button onClick={() => 1} icon="p" />
+            </div>
+            <div>
+              <Button onClick={() => 1} icon="a" />
+              <Button onClick={() => 1} icon="s" />
+              <Button onClick={() => 1} icon="d" />
+              <Button onClick={() => 1} icon="f" />
+              <Button onClick={() => 1} icon="g" />
+              <Button onClick={() => 1} icon="h" />
+              <Button onClick={() => 1} icon="j" />
+              <Button onClick={() => 1} icon="k" />
+              <Button onClick={() => 1} icon="l" />
+              <Button onClick={() => 1} icon="check" />
+            </div>
+            <div>
+              <Button onClick={() => 1} icon="z" />
+              <Button onClick={() => 1} icon="x" />
+              <Button onClick={() => 1} icon="c" />
+              <Button onClick={() => 1} icon="v" />
+              <Button onClick={() => 1} icon="b" />
+              <Button onClick={() => 1} icon="n" />
+              <Button onClick={() => 1} icon="m" />
+              <Button onClick={() => 1} icon="minus" />
+              <Button onClick={() => 1} icon="far_square" />
+              <Button onClick={() => 1} icon="arrow-left" />
+            </div>
+          </Section>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+};

tgui/packages/tgui/styles/themes/scp.scss

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: hsl(0, 0%, 0%),
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: hsl(0, 0%, 10%),
+  $color-bg-grad-spread: 0%,
+  $border-radius: 0
+);
+
+// A fat warning to anyone who wants to use this: this only half works.
+// It was made almost purely for the nuke ui, and requires a good amount of manual hacks to get it working as intended.
+.theme-scp {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '~tgui/styles/components/Button',
+    $with: (
+      'color-default': hsl(0, 0%, 20%),
+      'color-disabled': hsl(60, 6%, 28%),
+      'color-selected': hsl(0, 91%, 31%),
+      'color-caution': hsl(28, 87%, 39%),
+      'color-danger': hsl(61, 100%, 30%)
+    )
+  );
+  @include meta.load-css(
+    '~tgui/styles/components/ProgressBar',
+    $with: ('background-color': hsla(0, 0%, 0%, 0.5))
+  );
+  @include meta.load-css('~tgui/styles/components/Section');
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': hsl(0, 0%, 21%))
+  );
+
+  .Button {
+    color: hsl(0, 0%, 80%);
+    font-family: monospace;
+    border: base.em(2px) outset hsl(0, 0%, 15%);
+    outline: base.em(1px) solid hsl(0, 0%, 10%);
+    &:hover {
+      color: hsl(0, 0%, 80%);
+      background-color: hsl(0, 0%, 20%);
+    }
+    &:focus {
+      color: hsl(0, 0%, 80%);
+      background-color: hsl(0, 0%, 20%);
+    }
+  }
+}
+
+.Button--disabled {
+  color: hsl(0, 0%, 20%);
+  font-family: monospace;
+  &:hover {
+    color: hsl(0, 0%, 100%);
+  }
+  &:focus {
+    color: hsl(0, 0%, 100%);
+  }
+}
+
+.Layout__content {
+  background-image: none;
+}