this.clickwrapper(e)}>
+ Canvas failed to render.
+
+ );
+ }
+}
+
+const getImageSize = value => {
+ const width = value.length;
+ const height = width !== 0 ? value[0].length : 0;
+ return [width, height];
+};
+
+export const Canvas = (props, context) => {
+ const { act, data } = useBackend(context);
+ const dotsize = PX_PER_UNIT;
+ const [width, height] = getImageSize(data.grid);
+ return (
+
+
+
+ act("paint", { x, y })} />
+
+ {!data.finalized && (
+ act("finalize")}
+ content="Finalize" />
+ )}
+ {data.name}
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/InputModal.js b/tgui/packages/tgui/interfaces/InputModal.js
new file mode 100644
index 0000000000..6366e775a0
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/InputModal.js
@@ -0,0 +1,117 @@
+/**
+ * @file
+ * @copyright 2021 Leshana
+ * @license MIT
+ */
+
+import { clamp01 } from 'common/math';
+import { useBackend, useLocalState } from '../backend';
+import { Box, Button, Section, Input, Stack, TextArea } from '../components';
+import { KEY_ESCAPE } from 'common/keycodes';
+import { Window } from '../layouts';
+import { createLogger } from '../logging';
+
+const logger = createLogger('inputmodal');
+
+export const InputModal = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { title, message, initial, input_type, timeout } = data;
+
+ // Current Input Value
+ const [curValue, setCurValue] = useLocalState(context, 'curValue', initial);
+
+ const handleKeyDown = e => {
+ if (e.keyCode === KEY_ESCAPE) {
+ e.preventDefault();
+ act("cancel");
+ return;
+ }
+ };
+
+ let initialHeight, initialWidth;
+ let modalBody;
+ switch (input_type) {
+ case 'text':
+ case 'num':
+ initialWidth = 325;
+ initialHeight = Math.max(150, message.length);
+ modalBody = (
+
{
+ setCurValue(val);
+ }}
+ onEnter={(_e, val) => {
+ act('choose', { choice: val });
+ }}
+ />
+ );
+ break;
+ case 'message':
+ initialWidth = 450;
+ initialHeight = 350;
+ modalBody = (
+