From e27bc2eda33e0116ab28781c457a5be15ec8175f Mon Sep 17 00:00:00 2001 From: Letter N <24603524+LetterN@users.noreply.github.com> Date: Tue, 21 Jul 2020 13:32:12 +0800 Subject: [PATCH 001/112] docs and things --- tgui/README.md | 7 +- tgui/docs/component-reference.md | 22 +- tgui/docs/tutorial-and-examples.md | 4 +- tgui/yarn.lock | 566 ++++++++++++++++------------- 4 files changed, 337 insertions(+), 262 deletions(-) diff --git a/tgui/README.md b/tgui/README.md index 5ddeb18fdd..c479324764 100644 --- a/tgui/README.md +++ b/tgui/README.md @@ -180,8 +180,11 @@ See: [Component Reference](docs/component-reference.md). ## License -All code is licensed with the parent license of *tgstation*, **AGPL-3.0**. +Source code is covered by /tg/station's parent license - **AGPL-3.0** +(see the main [README](../README.md)), unless otherwise indicated. -See the main [README](../README.md) for more details. +Some files are annotated with a copyright header, which explicitly states +the copyright holder and license of the file. Most of the core tgui +source code is available under the **MIT** license. The Authors retain all copyright to their respective work here submitted. diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md index a2a0066a70..e1f7ebf9b4 100644 --- a/tgui/docs/component-reference.md +++ b/tgui/docs/component-reference.md @@ -30,6 +30,8 @@ Make sure to add new items to this list if you document new components. - [`Icon`](#icon) - [`Input`](#input) - [`Knob`](#knob) + - [`LabeledControls`](#labeledcontrols) + - [`LabeledControls.Item`](#labeledcontrolsitem) - [`LabeledList`](#labeledlist) - [`LabeledList.Item`](#labeledlistitem) - [`LabeledList.Divider`](#labeledlistdivider) @@ -239,7 +241,7 @@ A ghetto checkbox, made entirely using existing Button API. ### `Button.Confirm` -A button with a an extra confirmation step, using native button component. +A button with an extra confirmation step, using native button component. **Props:** @@ -584,6 +586,24 @@ the input, or successfully enter a number. - `onDrag: (e, value) => void` - An event, which fires about every 500ms when you drag the input up and down, on release and on manual editing. +### `LabeledControls` + +LabeledControls is a horizontal grid, that is designed to hold various +controls, like [Knobs](#knob) or small [Buttons](#button). Every item in +this grid is labeled at the bottom. + +**Props:** + +- See inherited props: [Box](#box) +- `children: LabeledControls.Item` - Items to render. + +### `LabeledControls.Item` + +**Props:** + +- See inherited props: [Box](#box) +- `label: string` - Item label. + ### `LabeledList` LabeledList is a continuous, vertical list of text and other content, where diff --git a/tgui/docs/tutorial-and-examples.md b/tgui/docs/tutorial-and-examples.md index 683f819a8c..3497ea9746 100644 --- a/tgui/docs/tutorial-and-examples.md +++ b/tgui/docs/tutorial-and-examples.md @@ -142,7 +142,7 @@ export const SampleInterface = (props, context) => { + ); + })} + { !!admin_controls && ( + + + + + + + + )} + +
+ + {!!players && players.map(player => { return ( + + {player.votes !== undefined + && (Votes : {player.votes} )} + { + !!player.actions && player.actions.map(action => { + return ( + ); }) + } + ); + })} + +
+
+ + {!!all_roles && all_roles.map(r => ( + + + {r} + + + ))} +
+
+ + + ); +}; diff --git a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js new file mode 100644 index 0000000000..07a0038544 --- /dev/null +++ b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js @@ -0,0 +1,15 @@ +import { Fragment } from 'inferno'; +import { useBackend } from '../backend'; +import { Box, Button, LabeledList, NoticeBox, Section } from '../components'; +import { NtosWindow } from '../layouts'; +import { NtosCyborgRemoteMonitorContent } from './NtosCyborgRemoteMonitor'; + +export const NtosCyborgRemoteMonitorSyndicate = (props, context) => { + return ( + + + + + + ); +}; diff --git a/tgui/packages/tgui/interfaces/SeedExtractor.js b/tgui/packages/tgui/interfaces/SeedExtractor.js new file mode 100644 index 0000000000..3dbdd6da06 --- /dev/null +++ b/tgui/packages/tgui/interfaces/SeedExtractor.js @@ -0,0 +1,89 @@ +import { sortBy } from 'common/collections'; +import { flow } from 'common/fp'; +import { toTitleCase } from 'common/string'; +import { useBackend } from '../backend'; +import { Button, Section, Table } from '../components'; +import { Window } from '../layouts'; + +/** + * This method takes a seed string and splits the values + * into an object + */ +const splitSeedString = text => { + const re = /([^;=]+)=([^;]+)/g; + const ret = {}; + let m; + do { + m = re.exec(text); + if (m) { + ret[m[1]] = m[2] + ''; + } + } while (m); + return ret; +}; + +/** + * This method splits up the string "name" we get for the seeds + * and creates an object from it include the value that is the + * ammount + * + * @returns {any[]} + */ +const createSeeds = seedStrings => { + const objs = Object.keys(seedStrings).map(key => { + const obj = splitSeedString(key); + obj.amount = seedStrings[key]; + obj.key = key; + obj.name = toTitleCase(obj.name.replace('pack of ', '')); + return obj; + }); + return flow([ + sortBy(item => item.name), + ])(objs); +}; + +export const SeedExtractor = (props, context) => { + const { act, data } = useBackend(context); + const seeds = createSeeds(data.seeds); + return ( + + +
+ + + Name + Lifespan + Endurance + Maturation + Production + Yield + Potency + Instability + Stock + + {seeds.map(item => ( + + {item.name} + {item.lifespan} + {item.endurance} + {item.maturation} + {item.production} + {item.yield} + {item.potency} + {item.instability} + +
+
+ + + ); +}; From 775d84370f9dbb74b81f10de417f265404a96244 Mon Sep 17 00:00:00 2001 From: Letter N <24603524+LetterN@users.noreply.github.com> Date: Tue, 21 Jul 2020 15:03:15 +0800 Subject: [PATCH 008/112] huh?? --- tgui/packages/tgui/interfaces/Apc.js | 24 ------------------- .../tgui/interfaces/NaniteCloudControl.js | 12 +++++----- 2 files changed, 6 insertions(+), 30 deletions(-) diff --git a/tgui/packages/tgui/interfaces/Apc.js b/tgui/packages/tgui/interfaces/Apc.js index 0f44e3509d..72cee0bf83 100644 --- a/tgui/packages/tgui/interfaces/Apc.js +++ b/tgui/packages/tgui/interfaces/Apc.js @@ -206,33 +206,9 @@ const ApcContent = (props, context) => { + ))} + + + + + + + + + + ); +}; + +const KitchenSinkButton = props => { + return ( +
+ +
+ ); +}; + +const KitchenSinkBox = props => { + return ( +
+ + bold + + + italic + + + opacity 0.5 + + + opacity 0.25 + + + m: 2 + + + left + + + center + + + right + +
+ ); +}; + +const KitchenSinkFlexAndSections = (props, context) => { + const [grow, setGrow] = useLocalState( + context, 'fs_grow', 1); + const [direction, setDirection] = useLocalState( + context, 'fs_direction', 'column'); + const [fill, setFill] = useLocalState( + context, 'fs_fill', true); + const [hasTitle, setHasTitle] = useLocalState( + context, 'fs_title', true); + return ( + + +
+ + + + +
+ + + + +
+ Content +
+ + +
+ Content +
+ + + + + ); +}; + +const KitchenSinkProgressBar = (props, context) => { + const [ + progress, + setProgress, + ] = useLocalState(context, 'progress', 0.5); + return ( +
+ + Value: {Number(progress).toFixed(1)} + + +
+ ); +}; + +const KitchenSinkTabs = (props, context) => { + const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0); + const [vertical, setVertical] = useLocalState(context, 'tabVert'); + const [altSelection, setAltSelection] = useLocalState(context, 'tabAlt'); + const TAB_RANGE = [1, 2, 3, 4, 5]; + return ( +
+ + setVertical(!vertical)} /> + setAltSelection(!altSelection)} /> + + + {TAB_RANGE.map((number, i) => ( + setTabIndex(i)}> + Tab #{number} + + ))} + +
+ ); +}; + +const KitchenSinkTooltip = props => { + const positions = [ + 'top', + 'left', + 'right', + 'bottom', + 'bottom-left', + 'bottom-right', + ]; + return ( +
+ + + Box (hover me). + + +
+ ); +}; + +const KitchenSinkInput = (props, context) => { + const [ + number, + setNumber, + ] = useLocalState(context, 'number', 0); + const [ + text, + setText, + ] = useLocalState(context, 'text', "Sample text"); + return ( +
+ + + setText(value)} /> + + + setText(value)} /> + + + setNumber(value)} /> + + + setNumber(value)} /> + + + setNumber(value)} /> + + + setNumber(value)} /> + setNumber(value)} /> + + + + setNumber(value)}> + {control => ( + + + {control.inputElement} + + )} + + + + +
+ ); +}; + +const KitchenSinkCollapsible = props => { + return ( +
+ + )}> + + +
+ ); +}; + +const BoxWithSampleText = props => { + return ( + + + Jackdaws love my big sphinx of quartz. + + + The wide electrification of the southern + provinces will give a powerful impetus to the + growth of agriculture. + + + ); +}; + +const KitchenSinkBlockQuote = props => { + return ( +
+
+ +
+
+ ); +}; + +const KitchenSinkByondUi = (props, context) => { + const { config } = useBackend(context); + const [code, setCode] = useLocalState(context, + 'byondUiEvalCode', + `Byond.winset('${window.__windowId__}', {\n 'is-visible': true,\n})`); + return ( + +
+ +
+
setImmediate(() => { + try { + const result = new Function('return (' + code + ')')(); + if (result && result.then) { + logger.log('Promise'); + result.then(logger.log); + } + else { + logger.log(result); + } + } + catch (err) { + logger.log(err); + } + })}> + Evaluate + + )}> + setCode(e.target.value)}> + {code} + +
+ + ); +}; + +const KitchenSinkThemes = (props, context) => { + const [theme, setTheme] = useLocalState(context, 'kitchenSinkTheme'); + return ( +
+ + + setTheme(value)} /> + + +
+ ); +}; + +const KitchenSinkStorage = (props, context) => { + if (!window.localStorage) { + return ( + + Local storage is not available. + + ); + } + return ( +
{ + localStorage.clear(); + }}> + Clear + + )}> + + + {localStorage.length} + + + {formatSiUnit(localStorage.remainingSpace, 0, 'B')} + + +
+ ); +}; diff --git a/tgui/packages/tgui/debug/index.js b/tgui/packages/tgui/debug/index.js new file mode 100644 index 0000000000..83fc136548 --- /dev/null +++ b/tgui/packages/tgui/debug/index.js @@ -0,0 +1,49 @@ +/** + * @file + * @copyright 2020 Aleksej Komarov + * @license MIT + */ + +import { subscribeToHotKey } from '../hotkeys'; + +export const toggleKitchenSink = () => ({ + type: 'debug/toggleKitchenSink', +}); + +export const toggleDebugLayout = () => ({ + type: 'debug/toggleDebugLayout', +}); + +subscribeToHotKey('F11', () => toggleDebugLayout()); +subscribeToHotKey('F12', () => toggleKitchenSink()); +subscribeToHotKey('Ctrl+Alt+[8]', () => { + // NOTE: We need to call this in a timeout, because we need a clean + // stack in order for this to be a fatal error. + setTimeout(() => { + throw new Error( + 'OOPSIE WOOPSIE!! UwU We made a fucky wucky!! A wittle' + + ' fucko boingo! The code monkeys at our headquarters are' + + ' working VEWY HAWD to fix this!'); + }); +}); + +export const selectDebug = state => state.debug; + +export const useDebug = context => selectDebug(context.store.getState()); + +export const debugReducer = (state = {}, action) => { + const { type, payload } = action; + if (type === 'debug/toggleKitchenSink') { + return { + ...state, + kitchenSink: !state.kitchenSink, + }; + } + if (type === 'debug/toggleDebugLayout') { + return { + ...state, + debugLayout: !state.debugLayout, + }; + } + return state; +}; diff --git a/tgui/packages/tgui/drag.js b/tgui/packages/tgui/drag.js index 1b735cb818..99db716410 100644 --- a/tgui/packages/tgui/drag.js +++ b/tgui/packages/tgui/drag.js @@ -4,79 +4,171 @@ * @license MIT */ -import { vecAdd, vecInverse, vecMultiply } from 'common/vector'; -import { winget, winset } from './byond'; +import { storage } from 'common/storage'; +import { vecAdd, vecInverse, vecMultiply, vecScale } from 'common/vector'; import { createLogger } from './logging'; const logger = createLogger('drag'); -let ref; +let windowKey = window.__windowId__; let dragging = false; let resizing = false; let screenOffset = [0, 0]; +let screenOffsetPromise; let dragPointOffset; let resizeMatrix; let initialSize; let size; -const getWindowPosition = ref => { - return winget(ref, 'pos').then(pos => [pos.x, pos.y]); +export const setWindowKey = key => { + windowKey = key; }; -const setWindowPosition = (ref, vec) => { - return winset(ref, 'pos', vec[0] + ',' + vec[1]); +export const getWindowPosition = () => [ + window.screenLeft, + window.screenTop, +]; + +export const getWindowSize = () => [ + window.innerWidth, + window.innerHeight, +]; + +export const setWindowPosition = vec => { + const byondPos = vecAdd(vec, screenOffset); + return Byond.winset(window.__windowId__, { + pos: byondPos[0] + ',' + byondPos[1], + }); }; -const setWindowSize = (ref, vec) => { - return winset(ref, 'size', vec[0] + ',' + vec[1]); +export const setWindowSize = vec => { + return Byond.winset(window.__windowId__, { + size: vec[0] + 'x' + vec[1], + }); }; -export const setupDrag = async state => { - logger.log('setting up'); - ref = state.config.window; - // Calculate offset caused by windows taskbar - const realPosition = await getWindowPosition(ref); - screenOffset = [ - realPosition[0] - window.screenLeft, - realPosition[1] - window.screenTop, - ]; - // Constraint window position - const [relocated, safePosition] = constraintPosition(realPosition); - if (relocated) { - setWindowPosition(ref, safePosition); +export const getScreenPosition = () => [ + 0 - screenOffset[0], + 0 - screenOffset[1], +]; + +export const getScreenSize = () => [ + window.screen.availWidth, + window.screen.availHeight, +]; + +/** + * Moves an item to the top of the recents array, and keeps its length + * limited to the number in `limit` argument. + * + * Uses a strict equality check for comparisons. + * + * Returns new recents and an item which was trimmed. + */ +const touchRecents = (recents, touchedItem, limit = 50) => { + const nextRecents = [touchedItem]; + let trimmedItem; + for (let i = 0; i < recents.length; i++) { + const item = recents[i]; + if (item === touchedItem) { + continue; + } + if (nextRecents.length < limit) { + nextRecents.push(item); + } + else { + trimmedItem = item; + } } - logger.debug('current state', { ref, screenOffset }); + return [nextRecents, trimmedItem]; +}; + +export const storeWindowGeometry = windowKey => { + logger.log('storing geometry'); + const geometry = { + pos: getWindowPosition(), + size: getWindowSize(), + }; + storage.set(windowKey, geometry); + // Update the list of stored geometries + const [geometries, trimmedKey] = touchRecents( + storage.get('geometries') || [], + windowKey); + if (trimmedKey) { + storage.remove(trimmedKey); + } + storage.set('geometries', geometries); +}; + +export const recallWindowGeometry = async (windowKey, options = {}) => { + // Only recall geometry in fancy mode + const geometry = options.fancy && storage.get(windowKey); + if (geometry) { + logger.log('recalled geometry:', geometry); + } + let pos = geometry?.pos || options.pos; + const size = options.size; + // Set window size + if (size) { + setWindowSize(size); + } + // Set window position + if (pos) { + await screenOffsetPromise; + // Constraint window position if monitor lock was set in preferences. + if (size && options.locked) { + pos = constraintPosition(pos, size)[1]; + } + setWindowPosition(pos); + } + // Set window position at the center of the screen. + else if (size) { + await screenOffsetPromise; + const areaAvailable = [ + window.screen.availWidth - Math.abs(screenOffset[0]), + window.screen.availHeight - Math.abs(screenOffset[1]), + ]; + const pos = vecAdd( + vecScale(areaAvailable, 0.5), + vecScale(size, -0.5), + vecScale(screenOffset, -1.0)); + setWindowPosition(pos); + } +}; + +export const setupDrag = async () => { + // Calculate screen offset caused by the windows taskbar + screenOffsetPromise = Byond.winget(window.__windowId__, 'pos') + .then(pos => [ + pos.x - window.screenLeft, + pos.y - window.screenTop, + ]); + screenOffset = await screenOffsetPromise; + logger.debug('screen offset', screenOffset); }; /** * Constraints window position to safe screen area, accounting for safe * margins which could be a system taskbar. */ -const constraintPosition = position => { - let x = position[0]; - let y = position[1]; +const constraintPosition = (pos, size) => { + const screenPos = getScreenPosition(); + const screenSize = getScreenSize(); + const nextPos = [pos[0], pos[1]]; let relocated = false; - // Left - if (x < 0) { - x = 0; - relocated = true; + for (let i = 0; i < 2; i++) { + const leftBoundary = screenPos[i]; + const rightBoundary = screenPos[i] + screenSize[i]; + if (pos[i] < leftBoundary) { + nextPos[i] = leftBoundary; + relocated = true; + } + else if (pos[i] + size[i] > rightBoundary) { + nextPos[i] = rightBoundary - size[i]; + relocated = true; + } } - // Right - else if (x + window.innerWidth > window.screen.availWidth) { - x = window.screen.availWidth - window.innerWidth; - relocated = true; - } - // Top - if (y < 0) { - y = 0; - relocated = true; - } - // Bottom - else if (y + window.innerHeight > window.screen.availHeight) { - y = window.screen.availHeight - window.innerHeight; - relocated = true; - } - return [relocated, [x, y]]; + return [relocated, nextPos]; }; export const dragStartHandler = event => { @@ -97,6 +189,7 @@ const dragEndHandler = event => { document.removeEventListener('mousemove', dragMoveHandler); document.removeEventListener('mouseup', dragEndHandler); dragging = false; + storeWindowGeometry(windowKey); }; const dragMoveHandler = event => { @@ -104,9 +197,8 @@ const dragMoveHandler = event => { return; } event.preventDefault(); - setWindowPosition(ref, vecAdd( + setWindowPosition(vecAdd( [event.screenX, event.screenY], - screenOffset, dragPointOffset)); }; @@ -133,6 +225,7 @@ const resizeEndHandler = event => { document.removeEventListener('mousemove', resizeMoveHandler); document.removeEventListener('mouseup', resizeEndHandler); resizing = false; + storeWindowGeometry(windowKey); }; const resizeMoveHandler = event => { @@ -146,7 +239,7 @@ const resizeMoveHandler = event => { dragPointOffset, [1, 1]))); // Sane window size values - size[0] = Math.max(size[0], 250); - size[1] = Math.max(size[1], 120); - setWindowSize(ref, size); + size[0] = Math.max(size[0], 150); + size[1] = Math.max(size[1], 50); + setWindowSize(size); }; diff --git a/tgui/packages/tgui/format.js b/tgui/packages/tgui/format.js index 4a72658723..1f8420860e 100644 --- a/tgui/packages/tgui/format.js +++ b/tgui/packages/tgui/format.js @@ -39,6 +39,9 @@ export const formatSiUnit = ( minBase1000 = -SI_BASE_INDEX, unit = '' ) => { + if (typeof value !== 'number' || !Number.isFinite(value)) { + return value; + } const realBase10 = Math.floor(Math.log10(value)); const base10 = Math.floor(Math.max(minBase1000 * 3, realBase10)); const realBase1000 = Math.floor(realBase10 / 3); diff --git a/tgui/packages/tgui/global.d.ts b/tgui/packages/tgui/global.d.ts new file mode 100644 index 0000000000..ab8870f15c --- /dev/null +++ b/tgui/packages/tgui/global.d.ts @@ -0,0 +1,95 @@ +interface ByondType { + /** + * True if javascript is running in BYOND. + */ + IS_BYOND: boolean; + + /** + * True if browser is IE8 or lower. + */ + IS_LTE_IE8: boolean; + + /** + * True if browser is IE9 or lower. + */ + IS_LTE_IE9: boolean; + + /** + * True if browser is IE10 or lower. + */ + IS_LTE_IE10: boolean; + + /** + * True if browser is IE11 or lower. + */ + IS_LTE_IE11: boolean; + + /** + * Makes a BYOND call. + * + * If path is empty, this will trigger a Topic call. + * You can reference a specific object by setting the "src" parameter. + * + * See: https://secure.byond.com/docs/ref/skinparams.html + */ + call(path: string, params: object): void; + + /** + * Makes an asynchronous BYOND call. Returns a promise. + */ + callAsync(path: string, params: object): Promise; + + /** + * Makes a Topic call. + * + * You can reference a specific object by setting the "src" parameter. + */ + topic(params: object): void; + + /** + * Runs a command or a verb. + */ + command(command: string): void; + + /** + * Retrieves all properties of the BYOND skin element. + * + * Returns a promise with a key-value object containing all properties. + */ + winget(id: string): Promise; + + /** + * Retrieves all properties of the BYOND skin element. + * + * Returns a promise with a key-value object containing all properties. + */ + winget(id: string, propName: '*'): Promise; + + /** + * Retrieves an exactly one property of the BYOND skin element, + * as defined in `propName`. + * + * Returns a promise with the value of that property. + */ + winget(id: string, propName: string): Promise; + + /** + * Retrieves multiple properties of the BYOND skin element, + * as listen in the `propNames` array. + * + * Returns a promise with a key-value object containing listed properties. + */ + winget(id: string, propNames: string[]): Promise; + + /** + * Assigns properties to the BYOND skin element. + */ + winset(id: string, props: object): void; + + /** + * Sets a property on the BYOND skin element to a certain value. + */ + winset(id: string, propName: string, propValue: any): void; +}; + +declare const Byond: ByondType; diff --git a/tgui/packages/tgui/hotkeys.js b/tgui/packages/tgui/hotkeys.js index 0cb2083ac5..0beff6b028 100644 --- a/tgui/packages/tgui/hotkeys.js +++ b/tgui/packages/tgui/hotkeys.js @@ -4,7 +4,6 @@ * @license MIT */ -import { callByond, IS_IE8 } from './byond'; import { createLogger } from './logging'; const logger = createLogger('hotkeys'); @@ -54,6 +53,18 @@ export const KEY_W = 87; export const KEY_X = 88; export const KEY_Y = 89; export const KEY_Z = 90; +export const KEY_F1 = 112; +export const KEY_F2 = 113; +export const KEY_F3 = 114; +export const KEY_F4 = 115; +export const KEY_F5 = 116; +export const KEY_F6 = 117; +export const KEY_F7 = 118; +export const KEY_F8 = 119; +export const KEY_F9 = 120; +export const KEY_F10 = 121; +export const KEY_F11 = 122; +export const KEY_F12 = 123; export const KEY_EQUAL = 187; export const KEY_MINUS = 189; @@ -70,6 +81,18 @@ const NO_PASSTHROUGH_KEYS = [ KEY_TAB, KEY_CTRL, KEY_SHIFT, + KEY_F1, + KEY_F2, + KEY_F3, + KEY_F4, + KEY_F5, + KEY_F6, + KEY_F7, + KEY_F8, + KEY_F9, + KEY_F10, + KEY_F11, + KEY_F12, ]; // Tracks the "pressed" state of keys @@ -89,6 +112,9 @@ const createHotkeyString = (ctrlKey, altKey, shiftKey, keyCode) => { if (keyCode >= 48 && keyCode <= 90) { str += String.fromCharCode(keyCode); } + else if (keyCode >= KEY_F1 && keyCode <= KEY_F12) { + str += 'F' + (keyCode - 111); + } else { str += '[' + keyCode + ']'; } @@ -135,11 +161,11 @@ const handlePassthrough = (e, eventType) => { // Send this keypress to BYOND if (eventType === 'keydown' && !keyState[keyCode]) { logger.debug('passthrough', eventType, keyData); - return callByond('', { __keydown: keyCode }); + return Byond.topic({ __keydown: keyCode }); } if (eventType === 'keyup' && keyState[keyCode]) { logger.debug('passthrough', eventType, keyData); - return callByond('', { __keyup: keyCode }); + return Byond.topic({ __keyup: keyCode }); } }; @@ -152,41 +178,45 @@ export const releaseHeldKeys = () => { if (keyState[keyCode]) { logger.log(`releasing [${keyCode}] key`); keyState[keyCode] = false; - callByond('', { __keyup: keyCode }); + Byond.topic({ __keyup: keyCode }); } } }; -const handleHotKey = (e, eventType, dispatch) => { +const hotKeySubscribers = []; + +/** + * Subscribes to a certain hotkey, and dispatches a redux action returned + * by the callback function. + */ +export const subscribeToHotKey = (keyString, fn) => { + hotKeySubscribers.push((store, keyData) => { + if (keyData.keyString === keyString) { + const action = fn(store); + if (action) { + store.dispatch(action); + } + } + }); +}; + +const handleHotKey = (e, eventType, store) => { if (eventType !== 'keyup') { return; } const keyData = getKeyData(e); const { - ctrlKey, - altKey, keyCode, hasModifierKeys, keyString, } = keyData; // Dispatch a detected hotkey as a store action - if (hasModifierKeys && !MODIFIER_KEYS.includes(keyCode)) { + if (hasModifierKeys && !MODIFIER_KEYS.includes(keyCode) + || keyCode >= KEY_F1 && keyCode <= KEY_F12) { logger.log(keyString); - // Fun stuff - if (ctrlKey && altKey && keyCode === KEY_BACKSPACE) { - // NOTE: We need to call this in a timeout, because we need a clean - // stack in order for this to be a fatal error. - setTimeout(() => { - throw new Error( - 'OOPSIE WOOPSIE!! UwU We made a fucky wucky!! A wittle' - + ' fucko boingo! The code monkeys at our headquarters are' - + ' working VEWY HAWD to fix this!'); - }); + for (let subscriberFn of hotKeySubscribers) { + subscriberFn(store, keyData); } - dispatch({ - type: 'hotKey', - payload: keyData, - }); } }; @@ -224,18 +254,17 @@ const subscribeToKeyPresses = listenerFn => { // Middleware export const hotKeyMiddleware = store => { - const { dispatch } = store; // Subscribe to key events subscribeToKeyPresses((e, eventType) => { // IE8: Can't determine the focused element, so by extension it passes // keypresses when inputs are focused. - if (!IS_IE8) { + if (!Byond.IS_LTE_IE8) { handlePassthrough(e, eventType); } - handleHotKey(e, eventType, dispatch); + handleHotKey(e, eventType, store); }); // IE8: focusin/focusout only available on IE9+ - if (!IS_IE8) { + if (!Byond.IS_LTE_IE8) { // Clean up when browser window completely loses focus subscribeToLossOfFocus(() => { releaseHeldKeys(); @@ -244,27 +273,3 @@ export const hotKeyMiddleware = store => { // Pass through store actions (do nothing) return next => action => next(action); }; - -// Reducer -export const hotKeyReducer = (state, action) => { - const { type, payload } = action; - if (type === 'hotKey') { - const { ctrlKey, altKey, keyCode } = payload; - // Toggle kitchen sink mode - if (ctrlKey && altKey && keyCode === KEY_EQUAL) { - return { - ...state, - showKitchenSink: !state.showKitchenSink, - }; - } - // Toggle layout debugger - if (ctrlKey && altKey && keyCode === KEY_MINUS) { - return { - ...state, - debugLayout: !state.debugLayout, - }; - } - return state; - } - return state; -}; diff --git a/tgui/packages/tgui/index.js b/tgui/packages/tgui/index.js index a83ec4da6e..e4ec6d285d 100644 --- a/tgui/packages/tgui/index.js +++ b/tgui/packages/tgui/index.js @@ -18,78 +18,79 @@ import './polyfills/inferno'; // Themes import './styles/main.scss'; +import './styles/themes/abductor.scss'; import './styles/themes/cardtable.scss'; +import './styles/themes/hackerman.scss'; import './styles/themes/malfunction.scss'; import './styles/themes/ntos.scss'; -import './styles/themes/hackerman.scss'; +import './styles/themes/paper.scss'; import './styles/themes/retro.scss'; import './styles/themes/syndicate.scss'; import './styles/themes/clockcult.scss'; - // import './styles/themes/paper.scss'; PAPER -// "marked": "^1.1.0", PAPER - package.json -// "dompurify": "^2.0.11" -import { loadCSS } from 'fg-loadcss'; +import { perf } from 'common/perf'; import { render } from 'inferno'; import { setupHotReloading } from 'tgui-dev-server/link/client'; -import { backendUpdate } from './backend'; -import { IS_IE8 } from './byond'; +import { backendUpdate, backendSuspendSuccess, selectBackend, sendMessage } from './backend'; import { setupDrag } from './drag'; import { logger } from './logging'; import { createStore, StoreProvider } from './store'; -const enteredBundleAt = Date.now(); +perf.mark('inception', window.__inception__); +perf.mark('init'); + const store = createStore(); let reactRoot; let initialRender = true; const renderLayout = () => { - // Mark the beginning of the render - let startedAt; - if (process.env.NODE_ENV !== 'production') { - startedAt = Date.now(); - } - try { - const state = store.getState(); - // Initial render setup - if (initialRender) { - logger.log('initial render', state); - // Setup dragging - setupDrag(state); + perf.mark('render/start'); + const state = store.getState(); + const { suspended, assets } = selectBackend(state); + // Initial render setup + if (initialRender) { + logger.log('initial render', state); + // Setup dragging + if (initialRender !== 'recycled') { + setupDrag(); } - // Start rendering - const { getRoutedComponent } = require('./routes'); - const Component = getRoutedComponent(state); - const element = ( - - - - ); - if (!reactRoot) { - reactRoot = document.getElementById('react-root'); - } - render(element, reactRoot); } - catch (err) { - logger.error('rendering error', err); - throw err; + // Start rendering + const { getRoutedComponent } = require('./routes'); + const Component = getRoutedComponent(state); + const element = ( + + + + ); + if (!reactRoot) { + reactRoot = document.getElementById('react-root'); } + render(element, reactRoot); + if (suspended) { + return; + } + perf.mark('render/finish'); // Report rendering time if (process.env.NODE_ENV !== 'production') { - const finishedAt = Date.now(); - if (initialRender) { + if (initialRender === 'recycled') { + logger.log('rendered in', + perf.measure('render/start', 'render/finish')); + } + else if (initialRender) { logger.debug('serving from:', location.href); - logger.debug('bundle entered in', timeDiff( - window.__inception__, enteredBundleAt)); - logger.debug('initialized in', timeDiff( - enteredBundleAt, startedAt)); - logger.log('rendered in', timeDiff( - startedAt, finishedAt)); - logger.log('fully loaded in', timeDiff( - window.__inception__, finishedAt)); + logger.debug('bundle entered in', + perf.measure('inception', 'init')); + logger.debug('initialized in', + perf.measure('init', 'render/start')); + logger.log('rendered in', + perf.measure('render/start', 'render/finish')); + logger.log('fully loaded in', + perf.measure('inception', 'render/finish')); } else { - logger.debug('rendered in', timeDiff(startedAt, finishedAt)); + logger.debug('rendered in', + perf.measure('render/start', 'render/finish')); } } if (initialRender) { @@ -97,12 +98,6 @@ const renderLayout = () => { } }; -const timeDiff = (startedAt, finishedAt) => { - const diff = finishedAt - startedAt; - const diffFrames = (diff / 16.6667).toFixed(2); - return `${diff}ms (${diffFrames} frames)`; -}; - // Parse JSON and report all abnormal JSON strings coming from BYOND const parseStateJson = json => { let reviver = (key, value) => { @@ -115,7 +110,7 @@ const parseStateJson = json => { }; // IE8: No reviver for you! // See: https://stackoverflow.com/questions/1288962 - if (IS_IE8) { + if (Byond.IS_LTE_IE8) { reviver = undefined; } try { @@ -136,14 +131,36 @@ const setupApp = () => { }); // Subscribe for bankend updates - window.update = stateJson => { - // NOTE: stateJson can be an object only if called manually from console. + window.update = messageJson => { + const { suspended } = selectBackend(store.getState()); + // NOTE: messageJson can be an object only if called manually from console. // This is useful for debugging tgui in external browsers, like Chrome. - const state = typeof stateJson === 'string' - ? parseStateJson(stateJson) - : stateJson; - // Backend update dispatches a store action - store.dispatch(backendUpdate(state)); + const message = typeof messageJson === 'string' + ? parseStateJson(messageJson) + : messageJson; + logger.debug(`received message '${message?.type}'`); + const { type, payload } = message; + if (type === 'update') { + if (suspended) { + logger.log('resuming'); + initialRender = 'recycled'; + } + // Backend update dispatches a store action + store.dispatch(backendUpdate(payload)); + return; + } + if (type === 'suspend') { + store.dispatch(backendSuspendSuccess()); + return; + } + if (type === 'ping') { + sendMessage({ + type: 'pingReply', + }); + return; + } + // Pass the message directly to the store + store.dispatch(message); }; // Enable hot module reloading @@ -166,9 +183,26 @@ const setupApp = () => { } window.update(stateJson); } +}; - // Dynamically load font-awesome from browser's cache - loadCSS('font-awesome.css'); +// Setup a fatal error reporter +window.__logger__ = { + fatal: (error, stack) => { + // Get last state for debugging purposes + const backendState = selectBackend(store.getState()); + const reportedState = { + config: backendState.config, + suspended: backendState.suspended, + suspending: backendState.suspending, + }; + // Send to development server + logger.log('FatalError:', error || stack); + logger.log('State:', reportedState); + // Append this data to the stack + stack += '\nState: ' + JSON.stringify(reportedState); + // Return an updated stack + return stack; + }, }; if (document.readyState === 'loading') { diff --git a/tgui/packages/tgui/layouts/Layout.js b/tgui/packages/tgui/layouts/Layout.js index 4bb0742c68..a00115e5f9 100644 --- a/tgui/packages/tgui/layouts/Layout.js +++ b/tgui/packages/tgui/layouts/Layout.js @@ -5,7 +5,7 @@ */ import { classes } from 'common/react'; -import { IS_IE8 } from '../byond'; +import { computeBoxProps, computeBoxClassName } from '../components/Box'; /** * Brings Layout__content DOM element back to focus. @@ -14,7 +14,7 @@ import { IS_IE8 } from '../byond'; */ export const refocusLayout = () => { // IE8: Focus method is seemingly fucked. - if (IS_IE8) { + if (Byond.IS_LTE_IE8) { return; } const element = document.getElementById('Layout__content'); @@ -47,6 +47,7 @@ const LayoutContent = props => { className, scrollable, children, + ...rest } = props; return (
{ 'Layout__content', scrollable && 'Layout__content--scrollable', className, - ])}> + ...computeBoxClassName(rest), + ])} + {...computeBoxProps(rest)}> {children}
); diff --git a/tgui/packages/tgui/layouts/NtosWindow.js b/tgui/packages/tgui/layouts/NtosWindow.js index 89b1a43b8c..07f17ecc54 100644 --- a/tgui/packages/tgui/layouts/NtosWindow.js +++ b/tgui/packages/tgui/layouts/NtosWindow.js @@ -4,6 +4,7 @@ * @license MIT */ +import { resolveAsset } from '../assets'; import { useBackend } from '../backend'; import { Box, Button } from '../components'; import { refocusLayout } from './Layout'; @@ -11,12 +12,16 @@ import { Window } from './Window'; export const NtosWindow = (props, context) => { const { + title, + width = 575, + height = 700, resizable, theme = 'ntos', children, } = props; const { act, data } = useBackend(context); const { + PC_device_theme, PC_batteryicon, PC_showbatteryicon, PC_batterypercent, @@ -28,6 +33,9 @@ export const NtosWindow = (props, context) => { } = data; return (
@@ -41,7 +49,8 @@ export const NtosWindow = (props, context) => { {PC_stationtime} - NtOS + {PC_device_theme === 'ntos' && 'NtOS'} + {PC_device_theme === 'syndicate' && 'Syndix'}
@@ -49,14 +58,14 @@ export const NtosWindow = (props, context) => { + src={resolveAsset(header.icon)} /> ))} {PC_ntneticon && ( + src={resolveAsset(PC_ntneticon)} /> )} {!!PC_showbatteryicon && PC_batteryicon && ( @@ -64,7 +73,7 @@ export const NtosWindow = (props, context) => { {PC_batteryicon && ( + src={resolveAsset(PC_batteryicon)} /> )} {PC_batterypercent && ( PC_batterypercent @@ -75,7 +84,7 @@ export const NtosWindow = (props, context) => { + src={resolveAsset(PC_apclinkicon)} /> )} {!!PC_showexitprogram && ( diff --git a/tgui/packages/tgui/layouts/Window.js b/tgui/packages/tgui/layouts/Window.js index 0b49cdde3e..c46a6371e6 100644 --- a/tgui/packages/tgui/layouts/Window.js +++ b/tgui/packages/tgui/layouts/Window.js @@ -7,19 +7,35 @@ import { classes } from 'common/react'; import { decodeHtmlEntities, toTitleCase } from 'common/string'; import { Component, Fragment } from 'inferno'; -import { useBackend } from '../backend'; -import { IS_IE8, runCommand, winset } from '../byond'; -import { Box, Icon } from '../components'; +import { backendSuspendStart, useBackend } from '../backend'; +import { Icon } from '../components'; import { UI_DISABLED, UI_INTERACTIVE, UI_UPDATE } from '../constants'; -import { dragStartHandler, resizeStartHandler } from '../drag'; -import { releaseHeldKeys } from '../hotkeys'; +import { toggleKitchenSink, useDebug } from '../debug'; +import { dragStartHandler, recallWindowGeometry, resizeStartHandler, setWindowKey } from '../drag'; import { createLogger } from '../logging'; +import { useDispatch } from '../store'; import { Layout, refocusLayout } from './Layout'; const logger = createLogger('Window'); +const DEFAULT_SIZE = [400, 600]; + export class Window extends Component { componentDidMount() { + const { config, suspended } = useBackend(this.context); + if (suspended) { + return; + } + logger.log('mounting'); + const options = { + size: DEFAULT_SIZE, + ...config.window, + }; + if (this.props.width && this.props.height) { + options.size = [this.props.width, this.props.height]; + } + setWindowKey(config.window.key); + recallWindowGeometry(config.window.key, options); refocusLayout(); } @@ -27,14 +43,18 @@ export class Window extends Component { const { resizable, theme, + title, children, } = this.props; const { config, - debugLayout, + suspended, } = useBackend(this.context); + const { debugLayout } = useDebug(this.context); + const dispatch = useDispatch(this.context); + const fancy = config.window?.fancy; // Determine when to show dimmer - const showDimmer = config.observer + const showDimmer = config.user.observer ? config.status < UI_DISABLED : config.status < UI_INTERACTIVE; return ( @@ -43,27 +63,25 @@ export class Window extends Component { theme={theme}> { logger.log('pressed close'); - releaseHeldKeys(); - winset(config.window, 'is-visible', false); - runCommand(`uiclose ${config.ref}`); + dispatch(backendSuspendStart()); }} />
- {children} + {!suspended && children} {showDimmer && (
)}
- {config.fancy && resizable && ( + {fancy && resizable && (
@@ -79,15 +97,26 @@ export class Window extends Component { } const WindowContent = props => { - const { scrollable, children } = props; + const { + className, + fitted, + children, + ...rest + } = props; // A bit lazy to actually write styles for it, // so we simply include a Box with margins. return ( - - {children} - + className={classes([ + 'Window__content', + className, + ])} + {...rest}> + {fitted && children || ( +
+ {children} +
+ )} ); }; @@ -106,7 +135,7 @@ const statusToColor = status => { } }; -const TitleBar = props => { +const TitleBar = (props, context) => { const { className, title, @@ -115,6 +144,7 @@ const TitleBar = props => { onDragStart, onClose, } = props; + const dispatch = useDispatch(context); return (
{ color={statusToColor(status)} name="eye" />
- {title === title.toLowerCase() - ? toTitleCase(title) - : title} + {typeof title === 'string' + && title === title.toLowerCase() + && toTitleCase(title) + || title}
fancy && onDragStart(e)} /> + {process.env.NODE_ENV !== 'production' && ( +
dispatch(toggleKitchenSink())}> + +
+ )} {!!fancy && (
{ // IE8: Use a plain character instead of a unicode symbol. // eslint-disable-next-line react/no-unknown-property onclick={onClose}> - {IS_IE8 ? 'x' : '×'} + {Byond.IS_LTE_IE8 ? 'x' : '×'}
)}
diff --git a/tgui/packages/tgui/logging.js b/tgui/packages/tgui/logging.js index 9364d4d967..95921b881d 100644 --- a/tgui/packages/tgui/logging.js +++ b/tgui/packages/tgui/logging.js @@ -5,7 +5,6 @@ */ import { sendLogEntry } from 'tgui-dev-server/link/client'; -import { callByond } from './byond'; const LEVEL_DEBUG = 0; const LEVEL_LOG = 1; @@ -33,10 +32,11 @@ const log = (level, ns, ...args) => { .filter(value => value) .join(' ') + '\nUser Agent: ' + navigator.userAgent; - callByond('', { - src: window.__ref__, - action: 'tgui:log', - log: logEntry, + Byond.topic({ + tgui: 1, + window_id: window.__windowId__, + type: 'log', + message: logEntry, }); } }; diff --git a/tgui/packages/tgui/package.json b/tgui/packages/tgui/package.json index fd2d0a0d86..70c0e0c771 100644 --- a/tgui/packages/tgui/package.json +++ b/tgui/packages/tgui/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "tgui", - "version": "3.0.0", + "version": "3.1.0", "dependencies": { "@babel/core": "^7.6.2", "@babel/plugin-transform-jscript": "^7.2.0", @@ -12,16 +12,18 @@ "core-js": "^3.2.1", "css-loader": "^3.2.0", "cssnano": "^4.1.10", + "dompurify": "^2.0.11", "extract-css-chunks-webpack-plugin": "^4.6.0", "fg-loadcss": "^2.1.0", "file-loader": "^6.0.0", "inferno": "^7.3.2", + "marked": "^1.1.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "regenerator-runtime": "^0.13.3", "sass": "^1.22.12", - "sass-loader": "^8.0.0", + "sass-loader": "^9.0.2", "style-loader": "^1.0.0", - "terser-webpack-plugin": "^2.1.0", + "terser-webpack-plugin": "^3.0.6", "url-loader": "^4.1.0", "webpack": "^4.40.2", "webpack-build-notifier": "^2.0.0", diff --git a/tgui/packages/tgui/public/tgui.html b/tgui/packages/tgui/public/tgui.html index c14d98a5d7..b336e29bac 100644 --- a/tgui/packages/tgui/public/tgui.html +++ b/tgui/packages/tgui/public/tgui.html @@ -5,29 +5,59 @@ - + - - - - + - + @@ -161,7 +259,7 @@ A fatal exception has occurred at 002B:C562F1B7 in TGUI. The current application will be terminated. Please remain calm. Get to the nearest NTNet workstation and send the copy of the following stack trace to: -github.com/Citadel-Station-13/Citadel-Station-13/issues. Thank you for your cooperation. +https://github.com/Citadel-Station-13/Citadel-Station-13/issues Thank you for your cooperation.
diff --git a/tgui/packages/tgui/routes.js b/tgui/packages/tgui/routes.js index 2e88e4ca11..d01340eae2 100644 --- a/tgui/packages/tgui/routes.js +++ b/tgui/packages/tgui/routes.js @@ -4,6 +4,8 @@ * @license MIT */ +import { selectBackend } from './backend'; +import { selectDebug } from './debug'; import { Window } from './layouts'; const requireInterface = require.context('./interfaces', false, /\.js$/); @@ -23,14 +25,27 @@ const routingError = (type, name) => () => { ); }; +const SuspendedWindow = () => { + return ( + + + + ); +}; + export const getRoutedComponent = state => { + const { suspended, config } = selectBackend(state); + if (suspended) { + return SuspendedWindow; + } if (process.env.NODE_ENV !== 'production') { + const debug = selectDebug(state); // Show a kitchen sink - if (state.showKitchenSink) { - return require('./interfaces/manually-routed/KitchenSink').KitchenSink; + if (debug.kitchenSink) { + return require('./debug/KitchenSink').KitchenSink; } } - const name = state.config?.interface; + const name = config?.interface; let esModule; try { esModule = requireInterface(`./${name}.js`); diff --git a/tgui/packages/tgui/store.js b/tgui/packages/tgui/store.js index 078b86fe02..27419e85e1 100644 --- a/tgui/packages/tgui/store.js +++ b/tgui/packages/tgui/store.js @@ -5,24 +5,44 @@ */ import { flow } from 'common/fp'; -import { applyMiddleware, createStore as createReduxStore } from 'common/redux'; +import { applyMiddleware, combineReducers, createStore as createReduxStore } from 'common/redux'; import { Component } from 'inferno'; -import { backendReducer } from './backend'; -import { hotKeyMiddleware, hotKeyReducer } from './hotkeys'; +import { backendMiddleware, backendReducer } from './backend'; +import { debugReducer } from './debug'; +import { hotKeyMiddleware } from './hotkeys'; +import { createLogger } from './logging'; +import { assetMiddleware } from './assets'; + +const logger = createLogger('store'); export const createStore = () => { const reducer = flow([ // State initializer (state = {}, action) => state, - // Global state reducers - backendReducer, - hotKeyReducer, + combineReducers({ + debug: debugReducer, + backend: backendReducer, + }), ]); const middleware = [ - // loggingMiddleware, + process.env.NODE_ENV !== 'production' && loggingMiddleware, + assetMiddleware, hotKeyMiddleware, + backendMiddleware, ]; - return createReduxStore(reducer, applyMiddleware(...middleware)); + return createReduxStore(reducer, + applyMiddleware(...middleware.filter(Boolean))); +}; + +const loggingMiddleware = store => next => action => { + const { type, payload } = action; + if (type === 'backend/update') { + logger.debug('action', { type }); + } + else { + logger.debug('action', action); + } + return next(action); }; export class StoreProvider extends Component { diff --git a/tgui/packages/tgui/styles/atomic/outline.scss b/tgui/packages/tgui/styles/atomic/outline.scss index ee7d5a2d91..a91625de9c 100644 --- a/tgui/packages/tgui/styles/atomic/outline.scss +++ b/tgui/packages/tgui/styles/atomic/outline.scss @@ -7,42 +7,34 @@ .outline-dotted { outline-style: dotted !important; - outline-width: 2px !important; } .outline-dashed { outline-style: dashed !important; - outline-width: 2px !important; } .outline-solid { outline-style: solid !important; - outline-width: 2px !important; } .outline-double { outline-style: double !important; - outline-width: 2px !important; } .outline-groove { outline-style: groove !important; - outline-width: 2px !important; } .outline-ridge { outline-style: ridge !important; - outline-width: 2px !important; } .outline-inset { outline-style: inset !important; - outline-width: 2px !important; } .outline-outset { outline-style: outset !important; - outline-width: 2px !important; } $fg-map: colors.$fg-map !default; @@ -50,6 +42,6 @@ $bg-map: colors.$bg-map !default; @each $color-name, $color-value in $fg-map { .outline-color-#{$color-name} { - outline-color: $color-value !important; + outline: 0.167rem solid $color-value !important; } } diff --git a/tgui/packages/tgui/styles/base.scss b/tgui/packages/tgui/styles/base.scss index 48cae21d49..5c1a20278f 100644 --- a/tgui/packages/tgui/styles/base.scss +++ b/tgui/packages/tgui/styles/base.scss @@ -12,4 +12,15 @@ $color-bg-start: color.adjust( $color-bg, $lightness: $color-bg-grad-spread) !default; $color-bg-end: color.adjust( $color-bg, $lightness: -$color-bg-grad-spread) !default; -$border-radius: 2px !default; + +$unit: 12px; +$font-size: 1 * $unit !default; +$border-radius: 0.16em !default; + +@function em($px) { + @return 1em * ($px / $unit); +} + +@function rem($px) { + @return 1rem * ($px / $unit); +} diff --git a/tgui/packages/tgui/styles/components/BlockQuote.scss b/tgui/packages/tgui/styles/components/BlockQuote.scss index bf4c589cac..4e54030e5b 100644 --- a/tgui/packages/tgui/styles/components/BlockQuote.scss +++ b/tgui/packages/tgui/styles/components/BlockQuote.scss @@ -10,9 +10,9 @@ $color-default: colors.fg(colors.$label) !default; .BlockQuote { color: $color-default; - border-left: 2px solid $color-default; - padding-left: 6px; - margin-bottom: 6px; + border-left: base.em(2px) solid $color-default; + padding-left: 0.5em; + margin-bottom: 0.5em; &:last-child { margin-bottom: 0; diff --git a/tgui/packages/tgui/styles/components/Button.scss b/tgui/packages/tgui/styles/components/Button.scss index cf16126d28..3634b908ab 100644 --- a/tgui/packages/tgui/styles/components/Button.scss +++ b/tgui/packages/tgui/styles/components/Button.scss @@ -45,13 +45,13 @@ $bg-map: colors.$bg-map !default; .Button { position: relative; display: inline-block; - line-height: 20px; - padding: 0 6px; - margin-right: 2px; + line-height: base.em(20px); + padding: 0 0.5em; + margin-right: base.em(2px); white-space: nowrap; outline: 0; border-radius: $border-radius; - margin-bottom: 2px; + margin-bottom: base.em(2px); // Disable selection in buttons user-select: none; -ms-user-select: none; @@ -61,9 +61,9 @@ $bg-map: colors.$bg-map !default; } .fa, .fas, .far { - margin-left: -3px; - margin-right: -3px; - min-width: 16px; + margin-left: -0.25em; + margin-right: -0.25em; + min-width: base.em(16px); text-align: center; } } @@ -71,7 +71,7 @@ $bg-map: colors.$bg-map !default; .Button--hasContent { // Add a margin to the icon to keep it separate from the text .fa, .fas, .far { - margin-right: 3px; + margin-right: 0.25em; } } diff --git a/tgui/packages/tgui/styles/components/ColorBox.scss b/tgui/packages/tgui/styles/components/ColorBox.scss index 40ad78a9bb..739cacee0e 100644 --- a/tgui/packages/tgui/styles/components/ColorBox.scss +++ b/tgui/packages/tgui/styles/components/ColorBox.scss @@ -5,8 +5,8 @@ .ColorBox { display: inline-block; - width: 12px; - height: 12px; - line-height: 12px; + width: 1em; + height: 1em; + line-height: 1em; text-align: center; } diff --git a/tgui/packages/tgui/styles/components/Divider.scss b/tgui/packages/tgui/styles/components/Divider.scss index 5d863471bf..e4df190e62 100644 --- a/tgui/packages/tgui/styles/components/Divider.scss +++ b/tgui/packages/tgui/styles/components/Divider.scss @@ -3,9 +3,11 @@ * SPDX-License-Identifier: MIT */ +@use '../base.scss'; + $color: rgba(255, 255, 255, 0.1) !default; -$thickness: 2px !default; -$spacing: 6px; +$thickness: base.em(2px) !default; +$spacing: 0.5em; .Divider--horizontal { margin: $spacing 0; diff --git a/tgui/packages/tgui/styles/components/Dropdown.scss b/tgui/packages/tgui/styles/components/Dropdown.scss index 378482e6ee..eafbbd2968 100644 --- a/tgui/packages/tgui/styles/components/Dropdown.scss +++ b/tgui/packages/tgui/styles/components/Dropdown.scss @@ -3,6 +3,8 @@ * SPDX-License-Identifier: MIT */ +@use '../base.scss'; + .Dropdown { position: relative; } @@ -11,27 +13,27 @@ position: relative; display: inline-block; font-family: Verdana, sans-serif; - font-size: 12px; - width: 100px; - line-height: 17px; + font-size: base.em(12px); + width: base.em(100px); + line-height: base.em(17px); user-select: none; } .Dropdown__arrow-button { float: right; - padding-left: 6px; - border-left: 1px solid #000; - border-left: 1px solid rgba(0, 0, 0, 0.25); + padding-left: 0.5em; + border-left: base.em(1px) solid #000; + border-left: base.em(1px) solid rgba(0, 0, 0, 0.25); } .Dropdown__menu { position: absolute; overflow-y: auto; z-index: 5; - width: 100px; - max-height: 200px; + width: base.em(100px); + max-height: base.em(200px); overflow-y: scroll; - border-radius: 0 0 2px 2px; + border-radius: 0 0 base.em(2px) base.em(2px); background-color: #000; background-color: rgba(0, 0, 0, 0.75); } @@ -40,18 +42,18 @@ position: absolute; overflow-y: auto; z-index: 5; - width: 100px; - max-height: 200px; - border-radius: 0 0 2px 2px; + width: base.em(100px); + max-height: base.em(200px); + border-radius: 0 0 base.em(2px) base.em(2px); background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .Dropdown__menuentry { - padding: 2px 4px; + padding: base.em(2px) base.em(4px); font-family: Verdana, sans-serif; - font-size: 12px; - line-height: 17px; + font-size: base.em(12px); + line-height: base.em(17px); transition: background-color 100ms; &:hover { background-color: #444; diff --git a/tgui/packages/tgui/styles/components/Flex.scss b/tgui/packages/tgui/styles/components/Flex.scss index bfb9c438a3..cc34ea6746 100644 --- a/tgui/packages/tgui/styles/components/Flex.scss +++ b/tgui/packages/tgui/styles/components/Flex.scss @@ -12,30 +12,30 @@ display: inline-flex; } -.Flex--ie8 { +.Flex--iefix { display: table !important; } -.Flex--ie8--column { +.Flex--iefix--column { display: block !important; & > .Flex__item { display: block !important; - margin-left: 6px; - margin-right: 6px; + margin-left: 0.5em; + margin-right: 0.5em; } } -.Flex__item--ie8 { +.Flex__item--iefix { display: table-cell !important; } @for $i from 1 through 2 { .Flex--spacing--#{$i} { - margin: 0 -3px * $i; + margin: 0 -0.25em * $i; & > .Flex__item { - margin: 0 3px * $i; + margin: 0 0.25em * $i; } } } diff --git a/tgui/packages/tgui/styles/components/Input.scss b/tgui/packages/tgui/styles/components/Input.scss index 33eadc60df..1aaefeec2e 100644 --- a/tgui/packages/tgui/styles/components/Input.scss +++ b/tgui/packages/tgui/styles/components/Input.scss @@ -12,16 +12,16 @@ $border-radius: base.$border-radius !default; .Input { position: relative; display: inline-block; - width: 120px; - border: 1px solid $border-color; - border: 1px solid rgba($border-color, 0.75); + width: base.em(120px); + border: base.em(1px) solid $border-color; + border: base.em(1px) solid rgba($border-color, 0.75); border-radius: $border-radius; color: #fff; background-color: #000; background-color: rgba(0, 0, 0, 0.75); - padding: 0 4px; - margin-right: 2px; - line-height: 17px; + padding: 0 base.em(4px); + margin-right: base.em(2px); + line-height: base.em(17px); overflow: visible; } @@ -45,11 +45,11 @@ $border-radius: base.$border-radius !default; border: 0; outline: 0; width: 100%; - font-size: 12px; - line-height: 17px; - height: 17px; + font-size: base.em(12px); + line-height: base.em(17px); + height: base.em(17px); margin: 0; - padding: 0 6px; + padding: 0 0.5em; font-family: Verdana, sans-serif; background-color: transparent; color: #fff; diff --git a/tgui/packages/tgui/styles/components/Knob.scss b/tgui/packages/tgui/styles/components/Knob.scss index 3840384274..962b4175d4 100644 --- a/tgui/packages/tgui/styles/components/Knob.scss +++ b/tgui/packages/tgui/styles/components/Knob.scss @@ -124,41 +124,3 @@ $pi: 3.1416; } } } - -// .Slider__cursorOffset { -// position: absolute; -// top: 0; -// left: 0; -// bottom: 0; -// transition: none !important; -// } - -// .Slider__cursor { -// position: absolute; -// top: 0; -// right: -1px; -// bottom: 0; -// width: 0; -// border-left: 2px solid #fff; -// } - -// .Slider__pointer { -// position: absolute; -// right: -5px; -// bottom: -4px; -// width: 0; -// height: 0; -// border-left: 5px solid transparent; -// border-right: 5px solid transparent; -// border-bottom: 5px solid #fff; -// } - -// .Slider__popupValue { -// position: absolute; -// right: 0; -// top: -22px; -// padding: 2px 4px; -// background-color: #000; -// transform: translateX(50%); -// white-space: nowrap; -// } diff --git a/tgui/packages/tgui/styles/components/LabeledList.scss b/tgui/packages/tgui/styles/components/LabeledList.scss index 370b23c5e4..bbda277c90 100644 --- a/tgui/packages/tgui/styles/components/LabeledList.scss +++ b/tgui/packages/tgui/styles/components/LabeledList.scss @@ -3,15 +3,17 @@ * SPDX-License-Identifier: MIT */ +@use '../base.scss'; + .LabeledList { display: table; // IE8: Does not support calc width: 100%; // Compensate for negative margin - width: calc(100% + 12px); + width: calc(100% + 1em); border-collapse: collapse; border-spacing: 0; - margin: -3px -6px; + margin: -0.25em -0.5em; margin-bottom: 0; padding: 0; } @@ -27,7 +29,7 @@ .LabeledList__cell { display: table-cell; margin: 0; - padding: 3px 6px; + padding: 0.25em 0.5em; border: 0; text-align: left; vertical-align: baseline; @@ -36,13 +38,13 @@ .LabeledList__label { width: 1%; white-space: nowrap; - min-width: 60px; + min-width: 5em; } .LabeledList__buttons { width: 0.1%; white-space: nowrap; text-align: right; - padding-top: 1px; + padding-top: base.em(1px); padding-bottom: 0; } diff --git a/tgui/packages/tgui/styles/components/NoticeBox.scss b/tgui/packages/tgui/styles/components/NoticeBox.scss index 93ca6b64a5..ac4116d634 100644 --- a/tgui/packages/tgui/styles/components/NoticeBox.scss +++ b/tgui/packages/tgui/styles/components/NoticeBox.scss @@ -4,6 +4,7 @@ */ @use 'sass:color'; +@use '../base.scss'; @use '../colors.scss'; @use '../functions.scss' as *; @@ -20,8 +21,8 @@ $bg-map: colors.$bg-map !default; rgba(0, 0, 0, 1), rgba(255, 255, 255, 1)); - padding: 4px 6px; - margin-bottom: 6px; + padding: 0.33em 0.5em; + margin-bottom: 0.5em; box-shadow: none; font-weight: bold; font-style: italic; @@ -30,9 +31,9 @@ $bg-map: colors.$bg-map !default; background-image: repeating-linear-gradient( -45deg, transparent, - transparent 10px, - $color-stripes 10px, - $color-stripes 20px); + transparent base.em(10px), + $color-stripes base.em(10px), + $color-stripes base.em(20px)); } @mixin box-color($color) { diff --git a/tgui/packages/tgui/styles/components/NumberInput.scss b/tgui/packages/tgui/styles/components/NumberInput.scss index f20ff78cfa..8787a00ec1 100644 --- a/tgui/packages/tgui/styles/components/NumberInput.scss +++ b/tgui/packages/tgui/styles/components/NumberInput.scss @@ -4,6 +4,7 @@ */ @use 'sass:color'; +@use '../base.scss'; @use '../functions.scss' as *; @use './Input.scss'; @@ -13,15 +14,15 @@ $border-radius: Input.$border-radius !default; .NumberInput { position: relative; display: inline-block; - border: 1px solid $border-color; - border: 1px solid rgba($border-color, 0.75); + border: base.em(1px) solid $border-color; + border: base.em(1px) solid rgba($border-color, 0.75); border-radius: $border-radius; color: $border-color; background-color: #000; background-color: rgba(0, 0, 0, 0.75); - padding: 0 4px; - margin-right: 2px; - line-height: 17px; + padding: 0 base.em(4px); + margin-right: base.em(2px); + line-height: base.em(17px); text-align: right; overflow: visible; cursor: n-resize; @@ -32,23 +33,23 @@ $border-radius: Input.$border-radius !default; } .NumberInput__content { - margin-left: 6px; + margin-left: 0.5em; } .NumberInput__barContainer { position: absolute; - top: 2px; - bottom: 2px; - left: 2px; + top: base.em(2px); + bottom: base.em(2px); + left: base.em(2px); } .NumberInput__bar { position: absolute; bottom: 0; left: 0; - width: 3px; + width: base.em(3px); box-sizing: border-box; - border-bottom: 1px solid $border-color; + border-bottom: base.em(1px) solid $border-color; background-color: $border-color; } @@ -62,11 +63,11 @@ $border-radius: Input.$border-radius !default; border: 0; outline: 0; width: 100%; - font-size: 12px; - line-height: 17px; - height: 17px; + font-size: base.em(12px); + line-height: base.em(17px); + height: base.em(17px); margin: 0; - padding: 0 6px; + padding: 0 0.5em; font-family: Verdana, sans-serif; background-color: #000; color: #fff; diff --git a/tgui/packages/tgui/styles/components/ProgressBar.scss b/tgui/packages/tgui/styles/components/ProgressBar.scss index 721db1ddd1..fb77fa9c6d 100644 --- a/tgui/packages/tgui/styles/components/ProgressBar.scss +++ b/tgui/packages/tgui/styles/components/ProgressBar.scss @@ -16,7 +16,7 @@ $bg-map: colors.$bg-map !default; display: inline-block; position: relative; width: 100%; - padding: 0 6px; + padding: 0 0.5em; border-radius: $border-radius; background-color: $color-background; transition: border-color 500ms; @@ -24,9 +24,9 @@ $bg-map: colors.$bg-map !default; .ProgressBar__fill { position: absolute; - top: 0; - left: 0; - bottom: 0; + top: -0.5px; + left: 0px; + bottom: -0.5px; } .ProgressBar__fill--animated { @@ -35,13 +35,13 @@ $bg-map: colors.$bg-map !default; .ProgressBar__content { position: relative; - line-height: 17px; + line-height: base.em(17px); width: 100%; text-align: right; } .ProgressBar--color--default { - border: 1px solid $color-default; + border: base.em(1px) solid $color-default; .ProgressBar__fill { background-color: $color-default; @@ -50,7 +50,7 @@ $bg-map: colors.$bg-map !default; @each $color-name, $color-value in $bg-map { .ProgressBar--color--#{$color-name} { - border: 1px solid $color-value !important; + border: base.em(1px) solid $color-value !important; .ProgressBar__fill { background-color: $color-value; diff --git a/tgui/packages/tgui/styles/components/Section.scss b/tgui/packages/tgui/styles/components/Section.scss index 753716a8ba..1e2ad798fd 100644 --- a/tgui/packages/tgui/styles/components/Section.scss +++ b/tgui/packages/tgui/styles/components/Section.scss @@ -4,6 +4,7 @@ */ @use 'sass:color'; +@use '../base.scss'; @use '../colors.scss'; $color-title: #ffffff !default; @@ -13,7 +14,7 @@ $color-separator: colors.$primary !default; .Section { position: relative; - margin-bottom: 6px; + margin-bottom: 0.5em; // IE8: Does not support rgba colors background-color: color.adjust( $color-background, @@ -30,42 +31,52 @@ $color-separator: colors.$primary !default; .Section__title { position: relative; - padding: 6px; - border-bottom: 2px solid $color-separator; + padding: 0.5em; + border-bottom: base.em(2px) solid $color-separator; } .Section__titleText { - font-size: 14px; + font-size: base.em(14px); font-weight: bold; } .Section__buttons { position: absolute; display: inline-block; - right: 6px; - margin-top: -1px; + right: 0.5em; + margin-top: base.em(-1px); } .Section__content { - padding: 8px 6px; + padding: 0.66em 0.5em; +} + +.Section--fill { + display: flex; + flex-direction: column; + height: 100%; +} + +.Section--fill .Section__content { + flex-grow: 1; } .Section--level--1 .Section__titleText { - font-size: 14px; + font-size: base.em(14px); } .Section--level--2 .Section__titleText { - font-size: 13px; + font-size: base.em(13px); } .Section--level--3 .Section__titleText { - font-size: 12px; + font-size: base.em(12px); } .Section--level--2, .Section--level--3 { background-color: transparent; box-shadow: none; - margin-left: -6px; - margin-right: -6px; + margin-left: -0.5em; + margin-right: -0.5em; } diff --git a/tgui/packages/tgui/styles/components/Slider.scss b/tgui/packages/tgui/styles/components/Slider.scss index 87ee8c9e84..4644129c32 100644 --- a/tgui/packages/tgui/styles/components/Slider.scss +++ b/tgui/packages/tgui/styles/components/Slider.scss @@ -3,6 +3,8 @@ * SPDX-License-Identifier: MIT */ +@use '../base.scss'; + .Slider { cursor: e-resize; } @@ -18,28 +20,29 @@ .Slider__cursor { position: absolute; top: 0; - right: -1px; + right: base.em(-1px); bottom: 0; width: 0; - border-left: 2px solid #fff; + border-left: base.em(2px) solid #fff; } .Slider__pointer { position: absolute; - right: -5px; - bottom: -4px; + right: base.em(-5px); + bottom: base.em(-4px); width: 0; height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #fff; + border-left: base.em(5px) solid transparent; + border-right: base.em(5px) solid transparent; + border-bottom: base.em(5px) solid #fff; } .Slider__popupValue { position: absolute; right: 0; - top: -22px; - padding: 2px 4px; + top: -2rem; + font-size: 1rem; + padding: 0.25rem 0.5rem; background-color: #000; transform: translateX(50%); white-space: nowrap; diff --git a/tgui/packages/tgui/styles/components/Table.scss b/tgui/packages/tgui/styles/components/Table.scss index 14ca9ff340..ecc47e5ba9 100644 --- a/tgui/packages/tgui/styles/components/Table.scss +++ b/tgui/packages/tgui/styles/components/Table.scss @@ -21,7 +21,7 @@ .Table__cell { display: table-cell; - padding: 0 3px; + padding: 0 0.25em; &:first-child { padding-left: 0; @@ -35,7 +35,7 @@ .Table__row--header .Table__cell, .Table__cell--header { font-weight: bold; - padding-bottom: 6px; + padding-bottom: 0.5em; } .Table__cell--collapsing { diff --git a/tgui/packages/tgui/styles/components/Tabs.scss b/tgui/packages/tgui/styles/components/Tabs.scss index ae86f4fba7..6e8a6bcb68 100644 --- a/tgui/packages/tgui/styles/components/Tabs.scss +++ b/tgui/packages/tgui/styles/components/Tabs.scss @@ -8,8 +8,8 @@ $border-radius: base.$border-radius !default; .Tabs--horizontal { - border-bottom: 2px solid rgba(255, 255, 255, 0.1); - margin-bottom: 6px; + border-bottom: base.em(2px) solid rgba(255, 255, 255, 0.1); + margin-bottom: 0.5em; .Tabs__tab--altSelection::after { content: ''; @@ -17,7 +17,7 @@ $border-radius: base.$border-radius !default; bottom: 0; right: 0; left: 0; - height: 2px; + height: base.em(2px); width: 100%; background-color: #fff; border-radius: $border-radius; @@ -25,11 +25,10 @@ $border-radius: base.$border-radius !default; } .Tabs--vertical { - margin-right: 9px; + margin-right: 0.75em; .Tabs__tabBox { - // padding-right: 2px; - border-right: 2px solid rgba(255, 255, 255, 0.1); + border-right: base.em(2px) solid rgba(255, 255, 255, 0.1); // Disable baseline alignment when doing vertical tabs vertical-align: top; } @@ -40,8 +39,8 @@ $border-radius: base.$border-radius !default; // Override to stop themed buttons from taking priority over it. margin-right: 0 !important; margin-bottom: 0; - padding: 1px 9px 0px 6px; - border-bottom: 2px solid rgba(255, 255, 255, 0.1); + padding: base.em(1px) base.em(9px) 0px 0.5em; + border-bottom: base.em(2px) solid rgba(255, 255, 255, 0.1); &:last-child { border-bottom: 0; @@ -55,7 +54,7 @@ $border-radius: base.$border-radius !default; bottom: 0; right: 0; height: 100%; - width: 3px; + width: 0.25em; background-color: #fff; border-radius: $border-radius; } diff --git a/tgui/packages/tgui/styles/components/TextArea.scss b/tgui/packages/tgui/styles/components/TextArea.scss index 6e140b382d..61597c1623 100644 --- a/tgui/packages/tgui/styles/components/TextArea.scss +++ b/tgui/packages/tgui/styles/components/TextArea.scss @@ -3,96 +3,96 @@ * SPDX-License-Identifier: MIT */ - @use '../base.scss'; - @use '../functions.scss' as *; +@use '../base.scss'; +@use '../functions.scss' as *; - $text-color: #272727 !default; - $border-color: #88bfff !default; - $border-radius: base.$border-radius !default; - $color-background: #bb9b68 !default; - $color-border: #272727 !default; +$text-color: #272727 !default; +$border-color: #88bfff !default; +$border-radius: base.$border-radius !default; +$color-background: #bb9b68 !default; +$color-border: #272727 !default; - .TextArea { - overflow: hidden; - position: relative; - display: inline-block; - height: "100%"; - border: 1px solid $border-color; - border: 1px solid rgba($border-color, 0.75); - border-radius: $border-radius; - background-color: $color-background; - margin-right: 2px; - line-height: 17px; - overflow: visible; - -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ - -moz-box-sizing: border-box; /* Firefox, other Gecko */ - box-sizing: border-box; /* Opera/IE 8+ */ - width:100%; +.TextArea { + overflow: hidden; + position: relative; + display: inline-block; + height: "100%"; + border: 1px solid $border-color; + border: 1px solid rgba($border-color, 0.75); + border-radius: $border-radius; + background-color: $color-background; + margin-right: 2px; + line-height: 17px; + overflow: visible; + -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ + -moz-box-sizing: border-box; /* Firefox, other Gecko */ + box-sizing: border-box; /* Opera/IE 8+ */ + width:100%; - .TextArea_filler { - word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */ - box-sizing: border-box; - padding: 2px; - width: 100%; +.TextArea_filler { + word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */ + box-sizing: border-box; + padding: 2px; + width: 100%; - padding-bottom: 1.5em; /* A bit more than one additional line of text. */ - visibility: hidden; - } + padding-bottom: 1.5em; /* A bit more than one additional line of text. */ + visibility: hidden; +} - .TextArea--fluid { - display: block; - width: auto; - height: auto; - } +.TextArea--fluid { + display: block; + width: auto; + height: auto; +} - .TextArea__baseline { - display: inline-block; - color: transparent; - } +.TextArea__baseline { + display: inline-block; + color: transparent; +} - .TextArea__textarea { - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: 0; - outline: 0; - width: 100%; - height: 100%; - font-size: 12px; - line-height: 17px; - height: 17px; - margin: 0; - padding: 0 6px; - font-family: inherit; - background-color: transparent; - color: inherit; - box-sizing: border-box; - width: 100%; +.TextArea__textarea { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: 0; + outline: 0; + width: 100%; + height: 100%; + font-size: 12px; + line-height: 17px; + height: 17px; + margin: 0; + padding: 0 6px; + font-family: inherit; + background-color: transparent; + color: inherit; + box-sizing: border-box; + width: 100%; - /* Cut and paste to auto resize the textarea */ - word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */ - box-sizing: border-box; - -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ - -moz-box-sizing: border-box; /* Firefox, other Gecko */ - box-sizing: border-box; /* Opera/IE 8+ */ + /* Cut and paste to auto resize the textarea */ + word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */ + box-sizing: border-box; + -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ + -moz-box-sizing: border-box; /* Firefox, other Gecko */ + box-sizing: border-box; /* Opera/IE 8+ */ - padding: 2px; - width: 100%; + padding: 2px; + width: 100%; - overflow: hidden; - position: absolute; - height: 100%; + overflow: hidden; + position: absolute; + height: 100%; - &:-ms-input-placeholder { - font-style: italic; - color: #777; - /* color: rgba(255, 255, 255, 0.45);*/ - } - } + &:-ms-input-placeholder { + font-style: italic; + color: #777; + /* color: rgba(255, 255, 255, 0.45);*/ + } +} - } +} diff --git a/tgui/packages/tgui/styles/components/Tooltip.scss b/tgui/packages/tgui/styles/components/Tooltip.scss index 01bd646e4e..505209ac00 100644 --- a/tgui/packages/tgui/styles/components/Tooltip.scss +++ b/tgui/packages/tgui/styles/components/Tooltip.scss @@ -23,7 +23,7 @@ $border-radius: base.$border-radius !default; display: block; white-space: nowrap; z-index: 2; - padding: 6px 10px; + padding: 0.5em 0.75em; transform: translateX(-50%); pointer-events: none; visibility: hidden; @@ -32,7 +32,7 @@ $border-radius: base.$border-radius !default; content: attr(data-tooltip); transition: all 150ms; background-color: $color-background; - box-shadow: 1px 1px 15px -1px rgba(0, 0, 0, 0.5); + box-shadow: 0.1em 0.1em 1.25em -0.1em rgba(0, 0, 0, 0.5); border-radius: $border-radius; } @@ -46,7 +46,7 @@ $border-radius: base.$border-radius !default; .Tooltip--long { &::after { - width: 250px; + width: base.em(250px); white-space: normal; } } @@ -54,59 +54,59 @@ $border-radius: base.$border-radius !default; .Tooltip--top::after { bottom: 100%; left: 50%; - transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(0.5em); } .Tooltip--top:hover::after { - transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-0.5em); } .Tooltip--bottom::after { top: 100%; left: 50%; - transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-0.5em); } .Tooltip--bottom:hover::after { - transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(0.5em); } .Tooltip--bottom-left::after { top: 100%; right: 50%; - transform: translateX(12px) translateY(-8px); + transform: translateX(12px) translateY(-0.5em); } .Tooltip--bottom-left:hover::after { - transform: translateX(12px) translateY(8px); + transform: translateX(12px) translateY(0.5em); } .Tooltip--bottom-right::after { top: 100%; left: 50%; - transform: translateX(-12px) translateY(-8px); + transform: translateX(-12px) translateY(-0.5em); } .Tooltip--bottom-right:hover::after { - transform: translateX(-12px) translateY(8px); + transform: translateX(-12px) translateY(0.5em); } .Tooltip--left::after { top: 50%; right: 100%; - transform: translateX(8px) translateY(-50%); + transform: translateX(0.5em) translateY(-50%); } .Tooltip--left:hover::after { - transform: translateX(-8px) translateY(-50%); + transform: translateX(-0.5em) translateY(-50%); } .Tooltip--right::after { top: 50%; left: 100%; - transform: translateX(-8px) translateY(-50%); + transform: translateX(-0.5em) translateY(-50%); } .Tooltip--right:hover::after { - transform: translateX(8px) translateY(-50%); + transform: translateX(0.5em) translateY(-50%); } diff --git a/tgui/packages/tgui/styles/interfaces/CameraConsole.scss b/tgui/packages/tgui/styles/interfaces/CameraConsole.scss index f5239ff687..26fae61bb5 100644 --- a/tgui/packages/tgui/styles/interfaces/CameraConsole.scss +++ b/tgui/packages/tgui/styles/interfaces/CameraConsole.scss @@ -1,3 +1,5 @@ +@use '../base.scss'; + $color-background: rgba(0, 0, 0, 0.33) !default; .CameraConsole__left { @@ -5,14 +7,14 @@ $color-background: rgba(0, 0, 0, 0.33) !default; top: 0; bottom: 0; left: 0; - width: 220px; + width: base.em(220px); } .CameraConsole__right { position: absolute; top: 0; bottom: 0; - left: 220px; + left: base.em(220px); right: 0; background-color: $color-background; } @@ -22,33 +24,30 @@ $color-background: rgba(0, 0, 0, 0.33) !default; top: 0; left: 0; right: 0; - height: 24px; - line-height: 24px; - margin: 3px 12px 0; - // background-color: #0a0; + height: 2em; + line-height: 2em; + margin: 0.25em 1em 0; } .CameraConsole__toolbarRight { position: absolute; top: 0; right: 0; - height: 24px; - line-height: 24px; - margin: 4px 6px 0; - // background-color: #aa0; + height: 2em; + line-height: 2em; + margin: 0.33em 0.5em 0; } .CameraConsole__map { position: absolute; - top: 26px; + top: base.em(26px); bottom: 0; left: 0; right: 0; - // background-color: #00a; - margin: 6px; + margin: 0.5em; text-align: center; .NoticeBox { - margin-top: calc(50% - 24px); + margin-top: calc(50% - 2em); } } diff --git a/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss b/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss index c0afcfb1f5..255ab7cb3d 100644 --- a/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss +++ b/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss @@ -9,11 +9,18 @@ $background-beige: #E8E4C9; .NuclearBomb__displayBox { background-color: #002003; - border: 4px inset $background-beige; + border: 0.167em inset $background-beige; color: #03e017; - font-size: 24px; + font-size: 2em; font-family: monospace; - padding: 6px; + padding: 0.25em; +} + +.NuclearBomb__Button { + outline-width: 0.25rem !important; + border-width: 0.65rem !important; + padding-left: 0 !important; + padding-right: 0 !important; } .NuclearBomb__Button--keypad { diff --git a/tgui/packages/tgui/styles/interfaces/Roulette.scss b/tgui/packages/tgui/styles/interfaces/Roulette.scss index 32b96a259c..04e39db7c6 100644 --- a/tgui/packages/tgui/styles/interfaces/Roulette.scss +++ b/tgui/packages/tgui/styles/interfaces/Roulette.scss @@ -1,3 +1,4 @@ +@use '../base.scss'; @use '../colors.scss'; .Roulette { diff --git a/tgui/packages/tgui/styles/layouts/Layout.scss b/tgui/packages/tgui/styles/layouts/Layout.scss index 81ba101531..7368b24f24 100644 --- a/tgui/packages/tgui/styles/layouts/Layout.scss +++ b/tgui/packages/tgui/styles/layouts/Layout.scss @@ -6,16 +6,8 @@ @use 'sass:color'; @use '../base.scss'; -.Layout__content { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow-x: hidden; - overflow-y: hidden; - margin-bottom: -6px; - +.Layout, +.Layout * { // Fancy scrollbar scrollbar-base-color: color.scale( base.$color-bg, @@ -40,6 +32,16 @@ $lightness: 10%); } +.Layout__content { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-x: hidden; + overflow-y: hidden; +} + .Layout__content--scrollable { overflow-y: scroll; margin-bottom: 0; diff --git a/tgui/packages/tgui/styles/layouts/NtosHeader.scss b/tgui/packages/tgui/styles/layouts/NtosHeader.scss index 9c99d31cb8..2a429051f5 100644 --- a/tgui/packages/tgui/styles/layouts/NtosHeader.scss +++ b/tgui/packages/tgui/styles/layouts/NtosHeader.scss @@ -5,16 +5,16 @@ .NtosHeader__left { position: absolute; - left: 12px; + left: 1em; } .NtosHeader__right { position: absolute; - right: 12px; + right: 1em; } .NtosHeader__icon { - margin-top: -9px; - margin-bottom: -6px; + margin-top: -0.75em; + margin-bottom: -0.5em; vertical-align: middle; } diff --git a/tgui/packages/tgui/styles/layouts/NtosWindow.scss b/tgui/packages/tgui/styles/layouts/NtosWindow.scss index 539e42913a..bed4abab53 100644 --- a/tgui/packages/tgui/styles/layouts/NtosWindow.scss +++ b/tgui/packages/tgui/styles/layouts/NtosWindow.scss @@ -3,22 +3,24 @@ * SPDX-License-Identifier: MIT */ +@use '../base.scss'; + .NtosWindow__header { position: absolute; top: 0; left: 0; right: 0; - height: 28px; - line-height: 27px; + height: 2em; + line-height: 1.928em; background-color: rgba(0, 0, 0, 0.5); font-family: Consolas, monospace; - font-size: 14px; + font-size: base.em(14px); user-select: none; -ms-user-select: none; } .NtosWindow__content .Layout__content { - margin-top: 28px; + margin-top: 2em; font-family: Consolas, monospace; - font-size: 14px; + font-size: base.em(14px); } diff --git a/tgui/packages/tgui/styles/layouts/TitleBar.scss b/tgui/packages/tgui/styles/layouts/TitleBar.scss index fcf778c503..4333a54357 100644 --- a/tgui/packages/tgui/styles/layouts/TitleBar.scss +++ b/tgui/packages/tgui/styles/layouts/TitleBar.scss @@ -4,6 +4,8 @@ */ @use 'sass:color'; +@use '../base.scss'; +@use '../colors.scss'; $color-text: rgba(255, 255, 255, 0.75) !default; $color-background: #363636 !default; @@ -14,6 +16,7 @@ $color-shadow: rgba(0, 0, 0, 0.1) !default; background-color: $color-background; border-bottom: 1px solid $color-shadow-core; box-shadow: 0 2px 2px $color-shadow; + box-shadow: 0 base.rem(2px) base.rem(2px) $color-shadow; user-select: none; -ms-user-select: none; } @@ -34,9 +37,12 @@ $color-shadow: rgba(0, 0, 0, 0.1) !default; position: absolute; top: 0; left: 46px; + left: base.rem(46px); color: $color-text; font-size: 14px; + font-size: base.rem(14px); line-height: 31px; + line-height: base.rem(31px); white-space: nowrap; } @@ -46,21 +52,19 @@ $color-shadow: rgba(0, 0, 0, 0.1) !default; left: 0; right: 0; height: 32px; + height: base.rem(32px); } .TitleBar__statusIcon { position: absolute; top: 0; left: 12px; + left: base.rem(12px); transition: color 0.5s; font-size: 20px; + font-size: base.rem(20px); line-height: 32px !important; -} - -.TitleBar__minimize { - position: absolute; - top: 6px; - right: 46px; + line-height: base.rem(32px) !important; } .TitleBar__close { @@ -68,8 +72,27 @@ $color-shadow: rgba(0, 0, 0, 0.1) !default; top: -1px; right: 0; width: 45px; + width: base.rem(45px); height: 32px; + height: base.rem(32px); font-size: 20px; + font-size: base.rem(20px); line-height: 31px; + line-height: base.rem(31px); + text-align: center; +} + +.TitleBar__devBuildIndicator { + position: absolute; + top: 6px; + top: base.rem(6px); + right: 52px; + right: base.rem(52px); + min-width: 20px; + min-width: base.rem(20px); + padding: 2px 4px; + padding: base.rem(2px) base.rem(4px); + background-color: rgba(colors.$good, 0.75); + color: #fff; text-align: center; } diff --git a/tgui/packages/tgui/styles/layouts/Window.scss b/tgui/packages/tgui/styles/layouts/Window.scss index cdbd5cc5b1..f67bc7d131 100644 --- a/tgui/packages/tgui/styles/layouts/Window.scss +++ b/tgui/packages/tgui/styles/layouts/Window.scss @@ -27,17 +27,36 @@ left: 0; width: 100%; height: 32px; + height: base.rem(32px); } // Everything after the title bar .Window__rest { position: fixed; top: 32px; + top: base.rem(32px); bottom: 0; left: 0; right: 0; } +.Window__contentPadding { + margin: 0.5rem; + // 0.01 is needed to make the scrollbar not appear + // due to rem rendering inaccuracies in IE11. + height: calc(100% - 1.01rem); +} + +.Window__contentPadding:after { + height: 0; +} + +.Layout__content--scrollable .Window__contentPadding:after { + display: block; + content: ''; + height: 0.5rem; +} + .Window__dimmer { position: fixed; top: 0; @@ -48,25 +67,14 @@ pointer-events: none; } -.Window__toast { - position: fixed; - bottom: 0; - left: 0; - right: 0; - font-size: 12px; - height: 40px; - line-height: 39px; - padding: 0 12px; - background-color: color.scale(base.$color-bg, $lightness: -50%); - color: rgba(255, 255, 255, 0.8); -} - .Window__resizeHandle__se { position: fixed; bottom: 0; right: 0; width: 20px; + width: base.rem(20px); height: 20px; + height: base.rem(20px); cursor: se-resize; } @@ -76,6 +84,7 @@ left: 0; right: 0; height: 6px; + height: base.rem(6px); cursor: s-resize; } @@ -85,5 +94,6 @@ bottom: 0; right: 0; width: 3px; + width: base.rem(3px); cursor: e-resize; } diff --git a/tgui/packages/tgui/styles/main.scss b/tgui/packages/tgui/styles/main.scss index cdc1993c3d..060291bce9 100644 --- a/tgui/packages/tgui/styles/main.scss +++ b/tgui/packages/tgui/styles/main.scss @@ -13,10 +13,7 @@ @include meta.load-css('./atomic/candystripe.scss'); @include meta.load-css('./atomic/color.scss'); @include meta.load-css('./atomic/debug-layout.scss'); -@include meta.load-css('./atomic/display.scss'); -@include meta.load-css('./atomic/margin.scss'); @include meta.load-css('./atomic/outline.scss'); -@include meta.load-css('./atomic/position.scss'); @include meta.load-css('./atomic/text.scss'); // Components @@ -39,6 +36,7 @@ @include meta.load-css('./components/Slider.scss'); @include meta.load-css('./components/Table.scss'); @include meta.load-css('./components/Tabs.scss'); +@include meta.load-css('./components/TextArea.scss'); @include meta.load-css('./components/Tooltip.scss'); // Interfaces diff --git a/tgui/packages/tgui/styles/reset.scss b/tgui/packages/tgui/styles/reset.scss index c48bd700a6..80d2a13780 100644 --- a/tgui/packages/tgui/styles/reset.scss +++ b/tgui/packages/tgui/styles/reset.scss @@ -3,11 +3,13 @@ * SPDX-License-Identifier: MIT */ +@use './base.scss'; + html, body { box-sizing: border-box; height: 100%; margin: 0; - font-size: 12px; + font-size: base.$font-size; } html { @@ -28,22 +30,27 @@ h1, h2, h3, h4, h5, h6 { display: block; margin: 0; padding: 6px 0; + padding: 0.5rem 0; } h1 { font-size: 18px; + font-size: 1.5rem; } h2 { font-size: 16px; + font-size: 1.333rem; } h3 { font-size: 14px; + font-size: 1.167rem; } h4 { font-size: 12px; + font-size: 1rem; } td, th { diff --git a/tgui/packages/tgui/styles/themes/abductor.scss b/tgui/packages/tgui/styles/themes/abductor.scss new file mode 100644 index 0000000000..c0d339d264 --- /dev/null +++ b/tgui/packages/tgui/styles/themes/abductor.scss @@ -0,0 +1,59 @@ +/** + * Copyright (c) 2020 Aleksej Komarov + * SPDX-License-Identifier: MIT + */ + +@use 'sass:color'; +@use 'sass:meta'; + +@use '../colors.scss' with ( + $primary: #ad2350, + $fg-map-keys: (), + $bg-map-keys: (), +); +@use '../base.scss' with ( + $color-bg: #2a314a, + $color-bg-grad-spread: 6%, + $border-radius: 2px, +); + +.theme-abductor { + // Atomic classes + @include meta.load-css('../atomic/color.scss'); + + // Components + @include meta.load-css('../components/Button.scss', $with: ( + 'color-default': colors.$primary, + 'color-disabled': #363636, + 'color-selected': #465899, + 'color-caution': #be6209, + 'color-danger': #9a9d00, + )); + @include meta.load-css('../components/Input.scss', $with: ( + 'border-color': #404b6e, + )); + @include meta.load-css('../components/NoticeBox.scss', $with: ( + 'color-background': #a82d55, + )); + @include meta.load-css('../components/NumberInput.scss', $with: ( + 'border-color': #404b6e, + )); + @include meta.load-css('../components/ProgressBar.scss', $with: ( + 'color-background': rgba(0, 0, 0, 0.5), + )); + @include meta.load-css('../components/Section.scss'); + @include meta.load-css('../components/Tooltip.scss', $with: ( + 'color-background': #a82d55, + )); + + // Layouts + @include meta.load-css('../layouts/Layout.scss'); + @include meta.load-css('../layouts/Window.scss'); + @include meta.load-css('../layouts/TitleBar.scss', $with: ( + 'color-background': #9e1b46, + )); + + .Layout__content { + background-image: none; + } +} diff --git a/tgui/packages/tgui/styles/themes/cardtable.scss b/tgui/packages/tgui/styles/themes/cardtable.scss index b3f4b42d9e..45427076ba 100644 --- a/tgui/packages/tgui/styles/themes/cardtable.scss +++ b/tgui/packages/tgui/styles/themes/cardtable.scss @@ -14,7 +14,7 @@ @use '../base.scss' with ( $color-bg: #117039, $color-bg-grad-spread: 0%, - $border-radius: 0px, + $border-radius: 0, ); //Made for the roulette table, probably requires a bunch of manual hacks to work for anything else @@ -31,7 +31,7 @@ 'color-danger': #9a9d00, )); @include meta.load-css('../components/NumberInput.scss', $with: ( - 'border-color': #FFFFFF, + 'border-color': #fff, )); @include meta.load-css('../components/ProgressBar.scss', $with: ( 'color-background': rgba(0, 0, 0, 0.5), @@ -46,8 +46,6 @@ )); .Button { - border-color: #FFFFFF; - border-width: 2px; - border-style: solid; + border: base.em(2px) solid #fff; } } diff --git a/tgui/packages/tgui/styles/themes/hackerman.scss b/tgui/packages/tgui/styles/themes/hackerman.scss index 39ec740197..719f35f45f 100644 --- a/tgui/packages/tgui/styles/themes/hackerman.scss +++ b/tgui/packages/tgui/styles/themes/hackerman.scss @@ -14,7 +14,6 @@ @use '../base.scss' with ( $color-bg: #121b12, $color-bg-grad-spread: 0%, - $border-radius: 2px, ); .theme-hackerman { @@ -46,10 +45,10 @@ .Button { font-family: monospace; - border-width: 2px; + border-width: base.em(2px); border-style: outset; border-color: #00AA00; - outline: 1px solid rgb(0, 122, 0); + outline: base.em(1px) solid rgb(0, 122, 0); } .candystripe:nth-child(odd) { diff --git a/tgui/packages/tgui/styles/themes/malfunction.scss b/tgui/packages/tgui/styles/themes/malfunction.scss index e19cfc8894..3389785491 100644 --- a/tgui/packages/tgui/styles/themes/malfunction.scss +++ b/tgui/packages/tgui/styles/themes/malfunction.scss @@ -14,7 +14,6 @@ @use '../base.scss' with ( $color-bg: #1b3443, $color-bg-grad-spread: 6%, - $border-radius: 2px, ); .theme-malfunction { diff --git a/tgui/packages/tgui/styles/themes/ntos.scss b/tgui/packages/tgui/styles/themes/ntos.scss index 06f0e9c65b..4891b4d163 100644 --- a/tgui/packages/tgui/styles/themes/ntos.scss +++ b/tgui/packages/tgui/styles/themes/ntos.scss @@ -14,7 +14,6 @@ $nanotrasen: #384e68; ); @use '../base.scss' with ( $color-bg: color.scale($nanotrasen, $lightness: -45%), - $border-radius: 2px, ); .theme-ntos { diff --git a/tgui/packages/tgui/styles/themes/paper.scss b/tgui/packages/tgui/styles/themes/paper.scss index fad2d8b7a2..cfbe451110 100644 --- a/tgui/packages/tgui/styles/themes/paper.scss +++ b/tgui/packages/tgui/styles/themes/paper.scss @@ -1,52 +1,171 @@ /** - * @file - * @copyright 2020 Paul Bruner - * @license MIT + * Copyright (c) 2020 Paul Bruner + * SPDX-License-Identifier: MIT */ - @use 'sass:color'; - @use 'sass:meta'; +@use 'sass:color'; +@use 'sass:meta'; - @use '../colors.scss' with ( - $primary: #ffffff, - $fg-map-keys: (), - $bg-map-keys: (), - ); - @use '../base.scss' with ( - $color-fg: rgb(0,0,0), - $color-bg: rgb(255, 255, 255), - $color-bg-grad-spread: 0%, - $border-radius: 0px, - ); +@use '../colors.scss' with ( + $primary: #ffffff, + $bg-lightness: -25%, + $fg-lightness: -10%, + // Commenting out color maps will adjust all colors based on the lightness + // settings above, but will add extra 10KB to the theme. + $fg-map-keys: (), + $bg-map-keys: (), +); +@use '../base.scss' with ( + $color-fg: #000000, + $color-bg: #ffffff, + $color-bg-grad-spread: 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-paper { - // Atomic classes - @include meta.load-css('../atomic/color.scss'); +$font-size: 24px; - // Components - @include meta.load-css('../components/Tabs.scss'); +// 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-paper { + // Atomic classes + @include meta.load-css('../atomic/color.scss'); + // Components + @include meta.load-css('../components/Tabs.scss'); + @include meta.load-css('../components/Section.scss', $with: ( + 'color-background': rgba(0, 0, 0, 0.1), + 'color-shadow': rgba(0, 0, 0, 0.2), + )); + @include meta.load-css('../components/Button.scss', $with: ( + 'color-default': #E8E4C9, + 'color-disabled': #363636, + 'color-selected': #9d0808, + 'color-caution': #be6209, + 'color-danger': #9a9d00, + 'color-transparent-text': rgba(0, 0, 0, 0.5), + )); - @include meta.load-css('../components/Button.scss', $with: ( - 'color-default': #E8E4C9, - 'color-disabled': #363636, - 'color-selected': #9d0808, - 'color-caution': #be6209, - 'color-danger': #9a9d00, - )); - // Layouts - @include meta.load-css('../layouts/Layout.scss'); + // Layouts + @include meta.load-css('../layouts/Layout.scss'); + @include meta.load-css('../layouts/Window.scss'); + @include meta.load-css('../layouts/TitleBar.scss', $with: ( + 'color-text': rgba(0, 0, 0, 0.75), + 'color-background': base.$color-bg, + 'color-shadow-core': rgba(0, 0, 0, 0.25), + )); - @include meta.load-css('../layouts/Window.scss'); + .PaperInput { + position: relative; + display: inline-block; + width: 120px; + border: none; + background: transparent; + border-bottom: 1px solid #000; + outline: none; + background-color:rgba(255, 255, 62, 0.8); + padding: 0 4px; + margin-right: 2px; + line-height: 17px; + overflow: visible; + } - @include meta.load-css('../layouts/TitleBar.scss', $with: ( - 'color-background': #ffffff, - )); + .PaperInput__baseline { + display: inline-block; + color: transparent; + } - .Layout__content { - background-image: none; - } + .PaperInput__input { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: 0; + outline: 0; + width: 100%; + font-size: 12px; + line-height: 17px; + height: 17px; + margin: 0; + padding: 0 6px; + font-family: Verdana, sans-serif; + background-color: transparent; + color: #fff; + color: inherit; - } + &:-ms-input-placeholder { + font-style: italic; + color: #777; + color: rgba(255, 255, 255, 0.45); + } + } + + .Layout__content { + background-image: none; + } + + .Window { + background-image: none; + color: base.$color-fg; + } + + .paper-text { + input:disabled { + position: relative; + display: inline-block; + border: none; + background: transparent; + border-bottom: 1px solid #000; + outline: none; + background-color:rgba(255, 255, 62, 0.8); + padding: 0 4px; + margin-right: 2px; + line-height: 17px; + overflow: visible; + } + + input { + position: relative; + display: inline-block; + border: none; + background: transparent; + border-bottom: 1px solid #000; + outline: none; + background-color:rgba(255, 255, 62, 0.8); + padding: 0 4px; + margin-right: 2px; + line-height: 17px; + overflow: visible; + } + } + + .paper-field { + position: relative; + display: inline-block; + + border: none; + background: transparent; + border-bottom: 1px solid #000; + outline: none; + background-color:rgba(255, 255, 62, 0.8); + padding: 0 4px; + margin-right: 2px; + line-height: 17px; + overflow: visible; + + input:disabled { + position: relative; + display: inline-block; + + border: none; + background: transparent; + border-bottom: 1px solid #000; + outline: none; + background-color:rgba(255, 255, 62, 0.8); + padding: 0 4px; + margin-right: 2px; + line-height: 17px; + overflow: visible; + } + } +} diff --git a/tgui/packages/tgui/styles/themes/retro.scss b/tgui/packages/tgui/styles/themes/retro.scss index 1e4967b907..da666a3638 100644 --- a/tgui/packages/tgui/styles/themes/retro.scss +++ b/tgui/packages/tgui/styles/themes/retro.scss @@ -14,7 +14,7 @@ @use '../base.scss' with ( $color-bg: #E8E4C9, $color-bg-grad-spread: 0%, - $border-radius: 0px, + $border-radius: 0, ); // A fat warning to anyone who wants to use this: this only half works. @@ -46,10 +46,8 @@ .Button { font-family: monospace; color: #161613; - border-width: 8px; - border-style: outset; - border-color: #E8E4C9; - outline: 3px solid #161613; + border: base.em(2px) outset #E8E4C9; + outline: base.em(1px) solid #161613; } .Layout__content { diff --git a/tgui/packages/tgui/styles/themes/syndicate.scss b/tgui/packages/tgui/styles/themes/syndicate.scss index 097fec3e8c..eca28f8aba 100644 --- a/tgui/packages/tgui/styles/themes/syndicate.scss +++ b/tgui/packages/tgui/styles/themes/syndicate.scss @@ -14,7 +14,6 @@ @use '../base.scss' with ( $color-bg: #550202, $color-bg-grad-spread: 6%, - $border-radius: 2px, ); .theme-syndicate { From 5b73178ba0d5360a9bbdf1331cc1cc361e338ef1 Mon Sep 17 00:00:00 2001 From: Letter N <24603524+LetterN@users.noreply.github.com> Date: Tue, 21 Jul 2020 22:20:31 +0800 Subject: [PATCH 012/112] "noo dont copypaste it" no --- tgui/packages/tgui/interfaces/Achievements.js | 6 +- tgui/packages/tgui/interfaces/AiAirlock.js | 4 +- tgui/packages/tgui/interfaces/AiRestorer.js | 5 +- tgui/packages/tgui/interfaces/AirAlarm.js | 173 +------ .../tgui/interfaces/AirlockElectronics.js | 8 +- tgui/packages/tgui/interfaces/Apc.js | 60 +-- .../tgui/interfaces/AtmosAlertConsole.js | 7 +- .../tgui/interfaces/AtmosControlConsole.js | 5 +- tgui/packages/tgui/interfaces/AtmosFilter.js | 4 +- tgui/packages/tgui/interfaces/AtmosMixer.js | 4 +- tgui/packages/tgui/interfaces/AtmosPump.js | 4 +- .../tgui/interfaces/AutomatedAnnouncement.js | 5 +- tgui/packages/tgui/interfaces/BankMachine.js | 7 +- tgui/packages/tgui/interfaces/Bepis.js | 4 +- tgui/packages/tgui/interfaces/Biogenerator.js | 8 +- .../tgui/interfaces/BlackmarketUplink.js | 4 +- .../tgui/interfaces/BluespaceArtillery.js | 4 +- tgui/packages/tgui/interfaces/BorgPanel.js | 6 +- tgui/packages/tgui/interfaces/BrigTimer.js | 5 +- .../packages/tgui/interfaces/CameraConsole.js | 7 +- tgui/packages/tgui/interfaces/Canister.js | 4 +- tgui/packages/tgui/interfaces/Canvas.js | 22 +- tgui/packages/tgui/interfaces/Cargo.js | 5 +- tgui/packages/tgui/interfaces/CargoExpress.js | 5 +- .../tgui/interfaces/CargoHoldTerminal.js | 5 +- .../tgui/interfaces/CellularEmporium.js | 5 +- .../tgui/interfaces/CentcomPodLauncher.js | 52 +- .../tgui/interfaces/ChemAcclimator.js | 4 +- .../tgui/interfaces/ChemDebugSynthesizer.js | 5 +- .../packages/tgui/interfaces/ChemDispenser.js | 9 +- tgui/packages/tgui/interfaces/ChemFilter.js | 5 +- tgui/packages/tgui/interfaces/ChemHeater.js | 5 +- tgui/packages/tgui/interfaces/ChemMaster.js | 129 +++-- .../tgui/interfaces/ChemReactionChamber.js | 5 +- tgui/packages/tgui/interfaces/ChemSplitter.js | 4 +- .../tgui/interfaces/ChemSynthesizer.js | 4 +- tgui/packages/tgui/interfaces/CodexGigas.js | 4 +- .../tgui/interfaces/ComputerFabricator.js | 16 +- tgui/packages/tgui/interfaces/Crayon.js | 5 +- tgui/packages/tgui/interfaces/CrewConsole.js | 6 +- tgui/packages/tgui/interfaces/Cryo.js | 5 +- tgui/packages/tgui/interfaces/DecalPainter.js | 4 +- tgui/packages/tgui/interfaces/DisposalUnit.js | 4 +- tgui/packages/tgui/interfaces/DnaConsole.js | 9 +- tgui/packages/tgui/interfaces/DnaVault.js | 4 +- .../packages/tgui/interfaces/EightBallVote.js | 4 +- tgui/packages/tgui/interfaces/Electrolyzer.js | 6 +- tgui/packages/tgui/interfaces/Electropack.js | 4 +- .../interfaces/EmergencyShuttleConsole.js | 13 +- .../tgui/interfaces/EngravedMessage.js | 5 +- .../tgui/interfaces/ExosuitControlConsole.js | 5 +- tgui/packages/tgui/interfaces/Gps.js | 6 +- .../tgui/interfaces/GravityGenerator.js | 4 +- .../tgui/interfaces/GulagItemReclaimer.js | 5 +- .../tgui/interfaces/GulagTeleporterConsole.js | 4 +- tgui/packages/tgui/interfaces/Holodeck.js | 5 +- tgui/packages/tgui/interfaces/HypnoChair.js | 4 +- tgui/packages/tgui/interfaces/ImplantChair.js | 4 +- .../tgui/interfaces/InfraredEmitter.js | 4 +- tgui/packages/tgui/interfaces/Intellicard.js | 5 +- tgui/packages/tgui/interfaces/KeycardAuth.js | 4 +- .../tgui/interfaces/LaborClaimConsole.js | 4 +- tgui/packages/tgui/interfaces/LanguageMenu.js | 6 +- .../tgui/interfaces/LaunchpadConsole.js | 5 +- .../tgui/interfaces/LaunchpadRemote.js | 6 +- tgui/packages/tgui/interfaces/MafiaPanel.js | 193 +++++--- .../interfaces/MalfunctionModulePicker.js | 2 + .../tgui/interfaces/MechBayPowerConsole.js | 4 +- tgui/packages/tgui/interfaces/MedicalKiosk.js | 31 +- tgui/packages/tgui/interfaces/MiningVendor.js | 7 +- tgui/packages/tgui/interfaces/Mule.js | 6 +- .../tgui/interfaces/NaniteChamberControl.js | 5 +- .../tgui/interfaces/NaniteCloudControl.js | 38 +- .../tgui/interfaces/NaniteProgramHub.js | 5 +- .../tgui/interfaces/NaniteProgrammer.js | 9 +- tgui/packages/tgui/interfaces/NaniteRemote.js | 11 +- .../interfaces/NotificationPreferences.js | 8 +- tgui/packages/tgui/interfaces/NtnetRelay.js | 7 +- .../tgui/interfaces/NtosAiRestorer.js | 5 +- tgui/packages/tgui/interfaces/NtosArcade.js | 7 +- tgui/packages/tgui/interfaces/NtosAtmos.js | 5 +- .../tgui/interfaces/NtosBountyConsole.js | 119 +++++ tgui/packages/tgui/interfaces/NtosCard.js | 5 +- .../tgui/interfaces/NtosConfiguration.js | 12 +- .../tgui/interfaces/NtosCrewManifest.js | 9 +- .../interfaces/NtosCyborgRemoteMonitor.js | 9 +- .../NtosCyborgRemoteMonitorSyndicate.js | 8 +- .../tgui/interfaces/NtosFileManager.js | 3 +- .../tgui/interfaces/NtosJobManager.js | 17 +- tgui/packages/tgui/interfaces/NtosMain.js | 12 +- tgui/packages/tgui/interfaces/NtosNetChat.js | 18 +- tgui/packages/tgui/interfaces/NtosNetDos.js | 14 +- .../tgui/interfaces/NtosNetDownloader.js | 7 +- .../tgui/interfaces/NtosPowerMonitor.js | 5 +- tgui/packages/tgui/interfaces/NtosRadar.js | 28 +- .../tgui/interfaces/NtosRadarSyndicate.js | 11 +- .../tgui/interfaces/NtosRevelation.js | 28 +- .../tgui/interfaces/NtosRoboControl.js | 5 +- tgui/packages/tgui/interfaces/NtosShipping.js | 5 +- .../interfaces/NtosStationAlertConsole.js | 5 +- .../tgui/interfaces/NtosSupermatterMonitor.js | 5 +- tgui/packages/tgui/interfaces/NuclearBomb.js | 25 +- .../tgui/interfaces/OperatingComputer.js | 5 +- tgui/packages/tgui/interfaces/Orbit.js | 41 +- tgui/packages/tgui/interfaces/OreBox.js | 5 +- .../tgui/interfaces/OreRedemptionMachine.js | 8 +- tgui/packages/tgui/interfaces/Pandemic.js | 39 +- tgui/packages/tgui/interfaces/PaperSheet.js | 241 +++++---- .../tgui/interfaces/ParticleAccelerator.js | 4 +- .../tgui/interfaces/PersonalCrafting.js | 7 +- .../tgui/interfaces/PortableGenerator.js | 8 +- tgui/packages/tgui/interfaces/PortablePump.js | 8 +- .../tgui/interfaces/PortableScrubber.js | 9 +- tgui/packages/tgui/interfaces/PowerMonitor.js | 28 +- .../tgui/interfaces/ProximitySensor.js | 4 +- tgui/packages/tgui/interfaces/Radio.js | 14 +- .../tgui/interfaces/RadioactiveMicrolaser.js | 6 +- .../tgui/interfaces/RapidPipeDispenser.js | 5 +- .../tgui/interfaces/RemoteRobotControl.js | 8 +- .../tgui/interfaces/RoboticsControlConsole.js | 5 +- tgui/packages/tgui/interfaces/Roulette.js | 14 +- .../tgui/interfaces/SatelliteControl.js | 11 +- tgui/packages/tgui/interfaces/ScannerGate.js | 5 +- .../packages/tgui/interfaces/SeedExtractor.js | 7 +- .../tgui/interfaces/ShuttleManipulator.js | 6 +- tgui/packages/tgui/interfaces/Signaler.js | 9 +- tgui/packages/tgui/interfaces/SkillPanel.js | 52 +- .../tgui/interfaces/SlimeBodySwapper.js | 31 +- tgui/packages/tgui/interfaces/SmartVend.js | 5 +- tgui/packages/tgui/interfaces/Smes.js | 4 +- tgui/packages/tgui/interfaces/SmokeMachine.js | 4 +- tgui/packages/tgui/interfaces/SolarControl.js | 6 +- tgui/packages/tgui/interfaces/SpaceHeater.js | 4 +- tgui/packages/tgui/interfaces/SpawnersMenu.js | 6 +- .../tgui/interfaces/StationAlertConsole.js | 5 +- .../tgui/interfaces/SuitStorageUnit.js | 4 +- .../tgui/interfaces/SyndContractor.js | 7 +- tgui/packages/tgui/interfaces/Tank.js | 4 +- .../packages/tgui/interfaces/TankDispenser.js | 4 +- tgui/packages/tgui/interfaces/Teleporter.js | 4 +- .../packages/tgui/interfaces/ThermoMachine.js | 4 +- tgui/packages/tgui/interfaces/Timer.js | 4 +- .../packages/tgui/interfaces/TransferValve.js | 4 +- .../tgui/interfaces/TurbineComputer.js | 4 +- tgui/packages/tgui/interfaces/Uplink.js | 3 + .../tgui/interfaces/VaultController.js | 6 +- tgui/packages/tgui/interfaces/Vending.js | 87 ++-- tgui/packages/tgui/interfaces/Wires.js | 4 +- .../tgui/interfaces/common/AtmosControls.js | 178 +++++++ .../interfaces/manually-routed/KitchenSink.js | 457 ------------------ 150 files changed, 1477 insertions(+), 1362 deletions(-) create mode 100644 tgui/packages/tgui/interfaces/NtosBountyConsole.js create mode 100644 tgui/packages/tgui/interfaces/common/AtmosControls.js delete mode 100644 tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js diff --git a/tgui/packages/tgui/interfaces/Achievements.js b/tgui/packages/tgui/interfaces/Achievements.js index 464708d248..512c39fb59 100644 --- a/tgui/packages/tgui/interfaces/Achievements.js +++ b/tgui/packages/tgui/interfaces/Achievements.js @@ -12,7 +12,11 @@ export const Achievements = (props, context) => { const achievements = data.achievements .filter(x => x.category === selectedCategory); return ( - + {categories.map(category => ( diff --git a/tgui/packages/tgui/interfaces/AiAirlock.js b/tgui/packages/tgui/interfaces/AiAirlock.js index 4886e71034..a48ce24402 100644 --- a/tgui/packages/tgui/interfaces/AiAirlock.js +++ b/tgui/packages/tgui/interfaces/AiAirlock.js @@ -24,7 +24,9 @@ export const AiAirlock = (props, context) => { const statusBackup = dangerMap[data.power.backup] || dangerMap[0]; const statusElectrify = dangerMap[data.shock] || dangerMap[0]; return ( - +
diff --git a/tgui/packages/tgui/interfaces/AiRestorer.js b/tgui/packages/tgui/interfaces/AiRestorer.js index e91d392d10..9dfacda0c8 100644 --- a/tgui/packages/tgui/interfaces/AiRestorer.js +++ b/tgui/packages/tgui/interfaces/AiRestorer.js @@ -5,7 +5,10 @@ import { Window } from '../layouts'; export const AiRestorer = () => { return ( - + diff --git a/tgui/packages/tgui/interfaces/AirAlarm.js b/tgui/packages/tgui/interfaces/AirAlarm.js index c6f440985a..e669d8d948 100644 --- a/tgui/packages/tgui/interfaces/AirAlarm.js +++ b/tgui/packages/tgui/interfaces/AirAlarm.js @@ -6,12 +6,16 @@ import { Box, Button, LabeledList, NumberInput, Section } from '../components'; import { getGasLabel } from '../constants'; import { Window } from '../layouts'; import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox'; +import { Vent, Scrubber } from './common/AtmosControls'; export const AirAlarm = (props, context) => { const { act, data } = useBackend(context); const locked = data.locked && !data.siliconUser; return ( - + @@ -202,108 +206,6 @@ const AirAlarmControlVents = (props, context) => { )); }; -const Vent = (props, context) => { - const { vent } = props; - const { act } = useBackend(context); - const { - id_tag, - long_name, - power, - checks, - excheck, - incheck, - direction, - external, - internal, - extdefault, - intdefault, - } = vent; - return ( -
act('power', { - id_tag, - val: Number(!power), - })} /> - )}> - - - {direction === 'release' ? 'Pressurizing' : 'Releasing'} - - -
- ); -}; - - // Scrubbers // -------------------------------------------------------- @@ -320,71 +222,6 @@ const AirAlarmControlScrubbers = (props, context) => { )); }; -const Scrubber = (props, context) => { - const { scrubber } = props; - const { act } = useBackend(context); - const { - long_name, - power, - scrubbing, - id_tag, - widenet, - filter_types, - } = scrubber; - return ( -
act('power', { - id_tag, - val: Number(!power), - })} /> - )}> - - -
- ); -}; - - // Modes // -------------------------------------------------------- diff --git a/tgui/packages/tgui/interfaces/AirlockElectronics.js b/tgui/packages/tgui/interfaces/AirlockElectronics.js index 1575bdeb45..a448f55e9b 100644 --- a/tgui/packages/tgui/interfaces/AirlockElectronics.js +++ b/tgui/packages/tgui/interfaces/AirlockElectronics.js @@ -12,7 +12,9 @@ export const AirlockElectronics = (props, context) => { const regions = data.regions || []; const accesses = data.accesses || []; return ( - +
@@ -34,14 +36,14 @@ export const AirlockElectronics = (props, context) => { })} />
); diff --git a/tgui/packages/tgui/interfaces/AtmosAlertConsole.js b/tgui/packages/tgui/interfaces/AtmosAlertConsole.js index 58d4cc7456..1d55ccf595 100644 --- a/tgui/packages/tgui/interfaces/AtmosAlertConsole.js +++ b/tgui/packages/tgui/interfaces/AtmosAlertConsole.js @@ -7,7 +7,10 @@ export const AtmosAlertConsole = (props, context) => { const priorityAlerts = data.priority || []; const minorAlerts = data.minor || []; return ( - +
    @@ -25,7 +28,7 @@ export const AtmosAlertConsole = (props, context) => { onClick={() => act('clear', { zone: alert })} /> ))} - {minorAlerts.length > 0 && ( + {minorAlerts.length === 0 && (
  • No Minor Alerts
    • diff --git a/tgui/packages/tgui/interfaces/AtmosControlConsole.js b/tgui/packages/tgui/interfaces/AtmosControlConsole.js index 7a35db6870..454866aa2f 100644 --- a/tgui/packages/tgui/interfaces/AtmosControlConsole.js +++ b/tgui/packages/tgui/interfaces/AtmosControlConsole.js @@ -8,7 +8,10 @@ export const AtmosControlConsole = (props, context) => { const { act, data } = useBackend(context); const sensors = data.sensors || []; return ( - +
    diff --git a/tgui/packages/tgui/interfaces/AtmosFilter.js b/tgui/packages/tgui/interfaces/AtmosFilter.js index 1bc7e8f63b..8b382cbad9 100644 --- a/tgui/packages/tgui/interfaces/AtmosFilter.js +++ b/tgui/packages/tgui/interfaces/AtmosFilter.js @@ -7,7 +7,9 @@ export const AtmosFilter = (props, context) => { const { act, data } = useBackend(context); const filterTypes = data.filter_types || []; return ( - +
    diff --git a/tgui/packages/tgui/interfaces/AtmosMixer.js b/tgui/packages/tgui/interfaces/AtmosMixer.js index 067118dea1..9ac9dbb878 100644 --- a/tgui/packages/tgui/interfaces/AtmosMixer.js +++ b/tgui/packages/tgui/interfaces/AtmosMixer.js @@ -5,7 +5,9 @@ import { Window } from '../layouts'; export const AtmosMixer = (props, context) => { const { act, data } = useBackend(context); return ( - +
    diff --git a/tgui/packages/tgui/interfaces/AtmosPump.js b/tgui/packages/tgui/interfaces/AtmosPump.js index ec3285cd44..3d3a7de10c 100644 --- a/tgui/packages/tgui/interfaces/AtmosPump.js +++ b/tgui/packages/tgui/interfaces/AtmosPump.js @@ -5,7 +5,9 @@ import { Window } from '../layouts'; export const AtmosPump = (props, context) => { const { act, data } = useBackend(context); return ( - +
    diff --git a/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js b/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js index d7b517d961..0baea4de97 100644 --- a/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js +++ b/tgui/packages/tgui/interfaces/AutomatedAnnouncement.js @@ -17,7 +17,10 @@ export const AutomatedAnnouncement = (props, context) => { newhead, } = data; return ( - +
    { station_name, } = data; return ( - +
    - { amount, } = data; return ( - +
    { processing, } = data; return ( - + {!!processing && ( @@ -77,6 +80,7 @@ export const BiogeneratorContent = (props, context) => { Search setSearchText(value)} mx={1} /> diff --git a/tgui/packages/tgui/interfaces/BlackmarketUplink.js b/tgui/packages/tgui/interfaces/BlackmarketUplink.js index 0d51cc4c36..8cfcff5756 100644 --- a/tgui/packages/tgui/interfaces/BlackmarketUplink.js +++ b/tgui/packages/tgui/interfaces/BlackmarketUplink.js @@ -1,5 +1,5 @@ import { useBackend } from '../backend'; -import { AnimatedNumber, Box, Button, Flex, Modal, Section, Table, Tabs } from '../components'; +import { AnimatedNumber, Box, Button, Flex, Modal, Section, Tabs } from '../components'; import { formatMoney } from '../format'; import { Window } from '../layouts'; @@ -15,6 +15,8 @@ export const BlackMarketUplink = (props, context) => { } = data; return ( diff --git a/tgui/packages/tgui/interfaces/BluespaceArtillery.js b/tgui/packages/tgui/interfaces/BluespaceArtillery.js index 6d2d94f7bf..91f7c50761 100644 --- a/tgui/packages/tgui/interfaces/BluespaceArtillery.js +++ b/tgui/packages/tgui/interfaces/BluespaceArtillery.js @@ -12,7 +12,9 @@ export const BluespaceArtillery = (props, context) => { target, } = data; return ( - + {!!notice && ( diff --git a/tgui/packages/tgui/interfaces/BorgPanel.js b/tgui/packages/tgui/interfaces/BorgPanel.js index 1661940196..7e7aa60d83 100644 --- a/tgui/packages/tgui/interfaces/BorgPanel.js +++ b/tgui/packages/tgui/interfaces/BorgPanel.js @@ -13,7 +13,11 @@ export const BorgPanel = (props, context) => { const ais = data.ais || []; const laws = data.laws || []; return ( - +
    { const { act, data } = useBackend(context); return ( - +
    { nextCameraName, ] = prevNextCamera(cameras, activeCamera); return ( - +
    @@ -81,7 +84,6 @@ export const CameraConsole = (props, context) => { className="CameraConsole__map" params={{ id: mapRef, - parent: config.window, type: 'map', }} />
    @@ -100,6 +102,7 @@ export const CameraConsoleContent = (props, context) => { return ( { restricted, } = data; return ( - +
    this.clickwrapper(e)}> Canvas failed to render. @@ -76,10 +76,20 @@ class PaintCanvas extends Component { } } +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 [width, height] = getImageSize(data.grid); return ( - + { const cart = data.cart || []; const requests = data.requests || []; return ( - + diff --git a/tgui/packages/tgui/interfaces/CargoExpress.js b/tgui/packages/tgui/interfaces/CargoExpress.js index 4e4ccf6a88..685569f6d5 100644 --- a/tgui/packages/tgui/interfaces/CargoExpress.js +++ b/tgui/packages/tgui/interfaces/CargoExpress.js @@ -8,7 +8,10 @@ import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox'; export const CargoExpress = (props, context) => { const { act, data } = useBackend(context); return ( - + diff --git a/tgui/packages/tgui/interfaces/CargoHoldTerminal.js b/tgui/packages/tgui/interfaces/CargoHoldTerminal.js index aaf66e701c..b20c0c9f9b 100644 --- a/tgui/packages/tgui/interfaces/CargoHoldTerminal.js +++ b/tgui/packages/tgui/interfaces/CargoHoldTerminal.js @@ -12,7 +12,10 @@ export const CargoHoldTerminal = (props, context) => { status_report, } = data; return ( - +
    diff --git a/tgui/packages/tgui/interfaces/CellularEmporium.js b/tgui/packages/tgui/interfaces/CellularEmporium.js index 8e8d58cb94..07989d8bad 100644 --- a/tgui/packages/tgui/interfaces/CellularEmporium.js +++ b/tgui/packages/tgui/interfaces/CellularEmporium.js @@ -7,7 +7,10 @@ export const CellularEmporium = (props, context) => { const { act, data } = useBackend(context); const { abilities } = data; return ( - +
    diff --git a/tgui/packages/tgui/interfaces/CentcomPodLauncher.js b/tgui/packages/tgui/interfaces/CentcomPodLauncher.js index 28ff827f78..05982b2fbf 100644 --- a/tgui/packages/tgui/interfaces/CentcomPodLauncher.js +++ b/tgui/packages/tgui/interfaces/CentcomPodLauncher.js @@ -6,7 +6,11 @@ import { Window } from '../layouts'; export const CentcomPodLauncher = () => { return ( - + @@ -57,6 +61,42 @@ export const CentcomPodLauncherContent = (props, context) => { `} onClick={() => act('bay5')} /> + {!!data.effectReverse && ( + +
    ); @@ -389,7 +393,7 @@ const CfStep3 = (props, context) => { color="good" textAlign="center" fontSize="20px" - lineHeight="28px" + lineHeight={2} onClick={() => act('purchase')} />
    ); diff --git a/tgui/packages/tgui/interfaces/Crayon.js b/tgui/packages/tgui/interfaces/Crayon.js index 68d3bb46fc..05191f8c66 100644 --- a/tgui/packages/tgui/interfaces/Crayon.js +++ b/tgui/packages/tgui/interfaces/Crayon.js @@ -7,7 +7,10 @@ export const Crayon = (props, context) => { const capOrChanges = data.has_cap || data.can_change_colour; const drawables = data.drawables || []; return ( - + {!!capOrChanges && (
    diff --git a/tgui/packages/tgui/interfaces/CrewConsole.js b/tgui/packages/tgui/interfaces/CrewConsole.js index 754574a641..2bdeb43ce6 100644 --- a/tgui/packages/tgui/interfaces/CrewConsole.js +++ b/tgui/packages/tgui/interfaces/CrewConsole.js @@ -60,7 +60,11 @@ const HealthStat = props => { export const CrewConsole = () => { return ( - +
    diff --git a/tgui/packages/tgui/interfaces/Cryo.js b/tgui/packages/tgui/interfaces/Cryo.js index 4ec29490c1..ddcf0d88a7 100644 --- a/tgui/packages/tgui/interfaces/Cryo.js +++ b/tgui/packages/tgui/interfaces/Cryo.js @@ -25,7 +25,10 @@ const damageTypes = [ export const Cryo = () => { return ( - + diff --git a/tgui/packages/tgui/interfaces/DecalPainter.js b/tgui/packages/tgui/interfaces/DecalPainter.js index 36e764bc66..90ab589208 100644 --- a/tgui/packages/tgui/interfaces/DecalPainter.js +++ b/tgui/packages/tgui/interfaces/DecalPainter.js @@ -8,7 +8,9 @@ export const DecalPainter = (props, context) => { const color_list = data.color_list || []; const dir_list = data.dir_list || []; return ( - +
    {decal_list.map(decal => ( diff --git a/tgui/packages/tgui/interfaces/DisposalUnit.js b/tgui/packages/tgui/interfaces/DisposalUnit.js index e734e3b30e..46ef63a993 100644 --- a/tgui/packages/tgui/interfaces/DisposalUnit.js +++ b/tgui/packages/tgui/interfaces/DisposalUnit.js @@ -23,7 +23,9 @@ export const DisposalUnit = (props, context) => { stateText = 'Off'; } return ( - +
    diff --git a/tgui/packages/tgui/interfaces/DnaConsole.js b/tgui/packages/tgui/interfaces/DnaConsole.js index f4fd255120..194b9a4a6b 100644 --- a/tgui/packages/tgui/interfaces/DnaConsole.js +++ b/tgui/packages/tgui/interfaces/DnaConsole.js @@ -3,6 +3,7 @@ import { flow } from 'common/fp'; import { classes } from 'common/react'; import { capitalize } from 'common/string'; import { Fragment } from 'inferno'; +import { resolveAsset } from '../assets'; import { useBackend } from '../backend'; import { Box, Button, Collapsible, Dimmer, Divider, Dropdown, Flex, Icon, LabeledList, NumberInput, ProgressBar, Section } from '../components'; import { Window } from '../layouts'; @@ -75,7 +76,11 @@ export const DnaConsole = (props, context) => { } = data; const { consoleMode } = data.view; return ( - + {!!isPulsingRads && ( { {mutations.map(mutation => ( { act('set_view', { diff --git a/tgui/packages/tgui/interfaces/DnaVault.js b/tgui/packages/tgui/interfaces/DnaVault.js index 6ce2093086..37d6d22737 100644 --- a/tgui/packages/tgui/interfaces/DnaVault.js +++ b/tgui/packages/tgui/interfaces/DnaVault.js @@ -17,7 +17,9 @@ export const DnaVault = (props, context) => { animals_max, } = data; return ( - +
    diff --git a/tgui/packages/tgui/interfaces/EightBallVote.js b/tgui/packages/tgui/interfaces/EightBallVote.js index 340751e1fa..f8ce25f6f8 100644 --- a/tgui/packages/tgui/interfaces/EightBallVote.js +++ b/tgui/packages/tgui/interfaces/EightBallVote.js @@ -9,7 +9,9 @@ export const EightBallVote = (props, context) => { shaking, } = data; return ( - + {!shaking && ( diff --git a/tgui/packages/tgui/interfaces/Electrolyzer.js b/tgui/packages/tgui/interfaces/Electrolyzer.js index f60319269c..4a8641e83b 100644 --- a/tgui/packages/tgui/interfaces/Electrolyzer.js +++ b/tgui/packages/tgui/interfaces/Electrolyzer.js @@ -1,12 +1,14 @@ import { Fragment } from 'inferno'; import { useBackend } from '../backend'; -import { Box, Button, LabeledList, NumberInput, ProgressBar, Section } from '../components'; +import { Button, LabeledList, ProgressBar, Section } from '../components'; import { Window } from '../layouts'; export const Electrolyzer = (props, context) => { const { act, data } = useBackend(context); return ( - +
    { maxFrequency, } = data; return ( - +
    diff --git a/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js b/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js index be64709a19..a476907058 100644 --- a/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js +++ b/tgui/packages/tgui/interfaces/EmergencyShuttleConsole.js @@ -13,7 +13,9 @@ export const EmergencyShuttleConsole = (props, context) => { authorizations = [], } = data; return ( - +
    { No Active Authorizations )} - {authorizations.map(authorization => ( - - {authorization.name} ({authorization.job}) - - ))}
    diff --git a/tgui/packages/tgui/interfaces/EngravedMessage.js b/tgui/packages/tgui/interfaces/EngravedMessage.js index 40d34d0427..e62fbf0ff7 100644 --- a/tgui/packages/tgui/interfaces/EngravedMessage.js +++ b/tgui/packages/tgui/interfaces/EngravedMessage.js @@ -18,7 +18,10 @@ export const EngravedMessage = (props, context) => { realdate, } = data; return ( - +
    { mechs = [], } = data; return ( - + {mechs.length === 0 && ( diff --git a/tgui/packages/tgui/interfaces/Gps.js b/tgui/packages/tgui/interfaces/Gps.js index a5fcb8d194..beffdad9c4 100644 --- a/tgui/packages/tgui/interfaces/Gps.js +++ b/tgui/packages/tgui/interfaces/Gps.js @@ -37,7 +37,11 @@ export const Gps = (props, context) => { signal => signal.entrytag), ])(data.signals || []); return ( - +
    { operational, } = data; return ( - + {!operational && ( diff --git a/tgui/packages/tgui/interfaces/GulagItemReclaimer.js b/tgui/packages/tgui/interfaces/GulagItemReclaimer.js index 846b465998..6f47eed342 100644 --- a/tgui/packages/tgui/interfaces/GulagItemReclaimer.js +++ b/tgui/packages/tgui/interfaces/GulagItemReclaimer.js @@ -8,7 +8,10 @@ export const GulagItemReclaimer = (props, context) => { mobs = [], } = data; return ( - + {mobs.length === 0 && ( diff --git a/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js b/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js index 3b709cbcb0..abb8da8b64 100644 --- a/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js +++ b/tgui/packages/tgui/interfaces/GulagTeleporterConsole.js @@ -19,7 +19,9 @@ export const GulagTeleporterConsole = (props, context) => { prisoner = {}, } = data; return ( - +
    { program, } = data; return ( - +
    { const { act, data } = useBackend(context); return ( - +
    { const { act, data } = useBackend(context); return ( - +
    { visible, } = data; return ( - +
    diff --git a/tgui/packages/tgui/interfaces/Intellicard.js b/tgui/packages/tgui/interfaces/Intellicard.js index 99e653ed31..1a6e3885d9 100644 --- a/tgui/packages/tgui/interfaces/Intellicard.js +++ b/tgui/packages/tgui/interfaces/Intellicard.js @@ -16,7 +16,10 @@ export const Intellicard = (props, context) => { } = data; const offline = isDead || isBraindead; return ( - +
    { const { act, data } = useBackend(context); return ( - +
    diff --git a/tgui/packages/tgui/interfaces/LaborClaimConsole.js b/tgui/packages/tgui/interfaces/LaborClaimConsole.js index b3ee427844..5483b1dd70 100644 --- a/tgui/packages/tgui/interfaces/LaborClaimConsole.js +++ b/tgui/packages/tgui/interfaces/LaborClaimConsole.js @@ -13,7 +13,9 @@ export const LaborClaimConsole = (props, context) => { unclaimed_points, } = data; return ( - +
    diff --git a/tgui/packages/tgui/interfaces/LanguageMenu.js b/tgui/packages/tgui/interfaces/LanguageMenu.js index 80e0168c42..656d4a818e 100644 --- a/tgui/packages/tgui/interfaces/LanguageMenu.js +++ b/tgui/packages/tgui/interfaces/LanguageMenu.js @@ -13,7 +13,11 @@ export const LanguageMenu = (props, context) => { unknown_languages = [], } = data; return ( - +
    diff --git a/tgui/packages/tgui/interfaces/LaunchpadConsole.js b/tgui/packages/tgui/interfaces/LaunchpadConsole.js index 1fd24e981d..83f8d0aa59 100644 --- a/tgui/packages/tgui/interfaces/LaunchpadConsole.js +++ b/tgui/packages/tgui/interfaces/LaunchpadConsole.js @@ -197,7 +197,10 @@ export const LaunchpadConsole = (props, context) => { selected_id, } = data; return ( - + {launchpads.length === 0 && ( diff --git a/tgui/packages/tgui/interfaces/LaunchpadRemote.js b/tgui/packages/tgui/interfaces/LaunchpadRemote.js index 2720914611..2173630c08 100644 --- a/tgui/packages/tgui/interfaces/LaunchpadRemote.js +++ b/tgui/packages/tgui/interfaces/LaunchpadRemote.js @@ -10,7 +10,11 @@ export const LaunchpadRemote = (props, context) => { pad_closed, } = data; return ( - + {!has_pad && ( diff --git a/tgui/packages/tgui/interfaces/MafiaPanel.js b/tgui/packages/tgui/interfaces/MafiaPanel.js index 3412cfed11..e3c2c893ec 100644 --- a/tgui/packages/tgui/interfaces/MafiaPanel.js +++ b/tgui/packages/tgui/interfaces/MafiaPanel.js @@ -1,8 +1,7 @@ -import { useBackend } from '../backend'; -import { Flex, Button, LabeledList, Section, Box, Table, TimeDisplay } from '../components'; import { Fragment } from 'inferno'; +import { useBackend } from '../backend'; +import { Box, Button, Flex, LabeledList, Section, TimeDisplay } from '../components'; import { Window } from '../layouts'; -import { FlexItem } from '../components/Flex'; export const MafiaPanel = (props, context) => { const { act, data } = useBackend(context); @@ -10,97 +9,155 @@ export const MafiaPanel = (props, context) => { players, actions, phase, - role_info, + roleinfo, + role_theme, admin_controls, + judgement_phase, timeleft, - all_roles } = data; + all_roles, + } = data; return ( - +
    - {!!role_info && ( - - - - - - - - - You are a {role_info.role} - - - - - {role_info.desc} - - - {!!role_info.action_log && role_info.action_log.map(log_line => ( - - - {role_info.action_log} - - - ))} -
    + {!!roleinfo && ( + + + + + + You are a {roleinfo.role} + + + {roleinfo.desc} + + )}
    - {!!actions && actions.map(action => { - return ( - - - ); - })} - { !!admin_controls && ( - - - - - - - - )} + {!!actions && actions.map(action => ( + + + + ))} + {!!admin_controls && ( +
    + THESE ARE DEBUG, THEY WILL BREAK THE GAME, DO NOT TOUCH
    + Also because an admin did it: do not gib/delete/etc + anyone! It will runtime the game to death!
    + + + +
    + +
    + )}
    - {!!players && players.map(player => { return ( + {!!players && players.map(player => ( - {player.votes !== undefined + {!player.alive && (DEAD)} + {player.votes !== undefined && !!player.alive && (Votes : {player.votes} )} { !!player.actions && player.actions.map(action => { return ( ); }) } - ); - })} + ) + )}
    -
    - - {!!all_roles && all_roles.map(r => ( - - - {r} - - - ))} -
    -
    + {!!judgement_phase && ( +
    + + + Use these buttons to vote the accused innocent or guilty! + + +
    + )} + + +
    + {!!all_roles && all_roles.map(r => ( + + + {r} +
    +     + +
    + {roleinfo !== undefined && !!roleinfo.action_log + && roleinfo.action_log.map(log_line => ( + + {log_line} + + ))} +
    +     +     ); diff --git a/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js b/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js index 298e56655d..70a1716ed6 100644 --- a/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js +++ b/tgui/packages/tgui/interfaces/MalfunctionModulePicker.js @@ -9,6 +9,8 @@ export const MalfunctionModulePicker = (props, context) => { } = data; return ( diff --git a/tgui/packages/tgui/interfaces/MechBayPowerConsole.js b/tgui/packages/tgui/interfaces/MechBayPowerConsole.js index bed15d261e..22a440791c 100644 --- a/tgui/packages/tgui/interfaces/MechBayPowerConsole.js +++ b/tgui/packages/tgui/interfaces/MechBayPowerConsole.js @@ -8,7 +8,9 @@ export const MechBayPowerConsole = (props, context) => { const mech = recharge_port && recharge_port.mech; const cell = mech && mech.cell; return ( - +
    { active_status_4, } = data; return ( - + @@ -97,7 +100,9 @@ const MedicalKioskScanButton = (props, context) => { tooltipPosition="right" content={name} onClick={() => { - act(`beginScan_${index}`); + if (!paid) { + act(`beginScan_${index}`); + } setScanIndex(index); }} /> @@ -247,8 +252,10 @@ const MedicalKioskScanResults3 = (props, context) => { clone_health, brain_damage, brain_health, - rad_status, - rad_value, + rad_contamination_status, + rad_contamination_value, + rad_sickness_status, + rad_sickness_value, trauma_status, } = data; return ( @@ -282,12 +289,20 @@ const MedicalKioskScanResults3 = (props, context) => { - {rad_status} + label="Radiation Sickness Status"> + {rad_sickness_status} - {rad_value}% + label="Radiation Sickness Percentage"> + {rad_sickness_value}% + + + {rad_contamination_status} + + + {rad_contamination_value}%
    diff --git a/tgui/packages/tgui/interfaces/MiningVendor.js b/tgui/packages/tgui/interfaces/MiningVendor.js index 950deb196b..39ff2969b1 100644 --- a/tgui/packages/tgui/interfaces/MiningVendor.js +++ b/tgui/packages/tgui/interfaces/MiningVendor.js @@ -9,7 +9,10 @@ export const MiningVendor = (props, context) => { ...data.product_records, ]; return ( - +
    {data.user && ( @@ -27,7 +30,7 @@ export const MiningVendor = (props, context) => { )}
    -
    +
    {inventory.map((product => { return ( diff --git a/tgui/packages/tgui/interfaces/Mule.js b/tgui/packages/tgui/interfaces/Mule.js index b6ae6c1f24..71c14ed3b1 100644 --- a/tgui/packages/tgui/interfaces/Mule.js +++ b/tgui/packages/tgui/interfaces/Mule.js @@ -1,6 +1,6 @@ import { Fragment } from 'inferno'; import { useBackend } from '../backend'; -import { Button, Dropdown, Grid, Input, LabeledList, ProgressBar, Section, Flex } from '../components'; +import { Button, Dropdown, Flex, Input, LabeledList, ProgressBar, Section } from '../components'; import { Window } from '../layouts'; import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox'; @@ -24,7 +24,9 @@ export const Mule = (props, context) => { } = data; const locked = data.locked && !data.siliconUser; return ( - +
    { return ( - + diff --git a/tgui/packages/tgui/interfaces/NaniteCloudControl.js b/tgui/packages/tgui/interfaces/NaniteCloudControl.js index 3ecfcef92c..e9eb566464 100644 --- a/tgui/packages/tgui/interfaces/NaniteCloudControl.js +++ b/tgui/packages/tgui/interfaces/NaniteCloudControl.js @@ -10,7 +10,6 @@ export const NaniteDiskBox = (props, context) => { has_program, disk, } = data; - if (!has_disk) { return ( @@ -18,7 +17,6 @@ export const NaniteDiskBox = (props, context) => { ); } - if (!has_program) { return ( @@ -26,7 +24,6 @@ export const NaniteDiskBox = (props, context) => { ); } - return ( ); @@ -34,7 +31,6 @@ export const NaniteDiskBox = (props, context) => { export const NaniteInfoBox = (props, context) => { const { program } = props; - const { name, desc, @@ -52,9 +48,7 @@ export const NaniteInfoBox = (props, context) => { timer_trigger, timer_trigger_delay, } = program; - const extra_settings = program.extra_settings || []; - return (
    { export const NaniteCloudBackupList = (props, context) => { const { act, data } = useBackend(context); const cloud_backups = data.cloud_backups || []; - return ( - cloud_backups.map(backup => ( -
    + + + Bounty Object + + + Description + + + Progress + + + Value + + + Claim + + + {bountydata.map(bounty => ( + + + {bounty.name} + + + {bounty.description} + + + {bounty.priority === 1 + ? High Priority + : ""} + {bounty.completion_string} + + + {bounty.reward_string} + + +
    +
    + + + ); +}; + +const BountyHeader = (props, context) => { + const { act, data } = useBackend(context); + const { + stored_cash, + } = data; + return ( + + formatMoney(value)} /> + {' credits'} + + ); +}; diff --git a/tgui/packages/tgui/interfaces/NtosCard.js b/tgui/packages/tgui/interfaces/NtosCard.js index 95d7754b83..3b114589a9 100644 --- a/tgui/packages/tgui/interfaces/NtosCard.js +++ b/tgui/packages/tgui/interfaces/NtosCard.js @@ -6,7 +6,10 @@ import { AccessList } from './common/AccessList'; export const NtosCard = (props, context) => { return ( - + diff --git a/tgui/packages/tgui/interfaces/NtosConfiguration.js b/tgui/packages/tgui/interfaces/NtosConfiguration.js index 0a86ccb728..2d60a6dd76 100644 --- a/tgui/packages/tgui/interfaces/NtosConfiguration.js +++ b/tgui/packages/tgui/interfaces/NtosConfiguration.js @@ -5,8 +5,8 @@ import { NtosWindow } from '../layouts'; export const NtosConfiguration = (props, context) => { const { act, data } = useBackend(context); - const { + PC_device_theme, power_usage, battery_exists, battery = {}, @@ -14,9 +14,12 @@ export const NtosConfiguration = (props, context) => { disk_used, hardware = [], } = data; - return ( - +
    { mr={1} onClick={() => act('PC_toggle_component', { name: component.name, - })} - /> + })} /> )} { const { act, data } = useBackend(context); - const { have_printer, manifest = {}, } = data; - return ( - +
    { - const { data } = useBackend(context); - const { - theme, - } = data; return ( - + diff --git a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js index 07a0038544..efa93513e7 100644 --- a/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js +++ b/tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitorSyndicate.js @@ -1,12 +1,12 @@ -import { Fragment } from 'inferno'; -import { useBackend } from '../backend'; -import { Box, Button, LabeledList, NoticeBox, Section } from '../components'; import { NtosWindow } from '../layouts'; import { NtosCyborgRemoteMonitorContent } from './NtosCyborgRemoteMonitor'; export const NtosCyborgRemoteMonitorSyndicate = (props, context) => { return ( - + diff --git a/tgui/packages/tgui/interfaces/NtosFileManager.js b/tgui/packages/tgui/interfaces/NtosFileManager.js index 9e5da68298..da762e459f 100644 --- a/tgui/packages/tgui/interfaces/NtosFileManager.js +++ b/tgui/packages/tgui/interfaces/NtosFileManager.js @@ -6,12 +6,13 @@ import { NtosWindow } from '../layouts'; export const NtosFileManager = (props, context) => { const { act, data } = useBackend(context); const { + PC_device_theme, usbconnected, files = [], usbfiles = [], } = data; return ( - +
    { return ( - + @@ -14,14 +17,12 @@ export const NtosJobManager = (props, context) => { export const NtosJobManagerContent = (props, context) => { const { act, data } = useBackend(context); - const { authed, cooldown, slots = [], prioritized = [], } = data; - if (!authed) { return ( @@ -29,7 +30,6 @@ export const NtosJobManagerContent = (props, context) => { ); } - return (
    {cooldown > 0 && ( @@ -64,8 +64,7 @@ export const NtosJobManagerContent = (props, context) => { checked={slot.total > 0 && prioritized.includes(slot.title)} onClick={() => act('PRG_priority', { target: slot.title, - })} - /> + })} /> {slot.current} / {slot.total} @@ -76,15 +75,13 @@ export const NtosJobManagerContent = (props, context) => { disabled={!slot.status_open} onClick={() => act('PRG_open_job', { target: slot.title, - })} - /> + })} />
    + ); +}; + + +export const Scrubber = (props, context) => { + const { scrubber } = props; + const { act } = useBackend(context); + const { + long_name, + power, + scrubbing, + id_tag, + widenet, + filter_types, + } = scrubber; + return ( +
    act('power', { + id_tag, + val: Number(!power), + })} /> + )}> + + +
    + ); +}; diff --git a/tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js b/tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js deleted file mode 100644 index fcca031fe9..0000000000 --- a/tgui/packages/tgui/interfaces/manually-routed/KitchenSink.js +++ /dev/null @@ -1,457 +0,0 @@ -import { Fragment } from 'inferno'; -import { useBackend, useLocalState } from '../../backend'; -import { BlockQuote, Box, Button, ByondUi, Collapsible, Flex, Icon, Input, Knob, LabeledList, NumberInput, ProgressBar, Section, Slider, Tabs, Tooltip } from '../../components'; -import { DraggableControl } from '../../components/DraggableControl'; -import { Window } from '../../layouts'; - -const COLORS_ARBITRARY = [ - 'red', - 'orange', - 'yellow', - 'olive', - 'green', - 'teal', - 'blue', - 'violet', - 'purple', - 'pink', - 'brown', - 'grey', -]; - -const COLORS_STATES = [ - 'good', - 'average', - 'bad', - 'black', - 'white', -]; - -const PAGES = [ - { - title: 'Button', - component: () => KitchenSinkButton, - }, - { - title: 'Box', - component: () => KitchenSinkBox, - }, - { - title: 'ProgressBar', - component: () => KitchenSinkProgressBar, - }, - { - title: 'Tabs', - component: () => KitchenSinkTabs, - }, - { - title: 'Tooltip', - component: () => KitchenSinkTooltip, - }, - { - title: 'Input / Control', - component: () => KitchenSinkInput, - }, - { - title: 'Collapsible', - component: () => KitchenSinkCollapsible, - }, - { - title: 'BlockQuote', - component: () => KitchenSinkBlockQuote, - }, - { - title: 'ByondUi', - component: () => KitchenSinkByondUi, - }, - { - title: 'Themes', - component: () => KitchenSinkThemes, - }, -]; - -export const KitchenSink = (props, context) => { - const [theme] = useLocalState(context, 'kitchenSinkTheme'); - const [pageIndex, setPageIndex] = useLocalState(context, 'pageIndex', 0); - const PageComponent = PAGES[pageIndex].component(); - return ( - - -
    - - - - {PAGES.map((page, i) => ( - setPageIndex(i)}> - {page.title} - - ))} - - - - - - -
    -     -     - ); -}; - -const KitchenSinkButton = props => { - return ( - - -
    + ); +}; + +const VestSettings = (props, context) => { + const { act, data } = useBackend(context); + const { + vest, + vest_mode, + vest_lock, + } = data; + + if (!vest) { + return ( + + No Agent Vest Detected + + ); + } + + return ( +
    act('toggle_vest')} /> + )}> + + +
    + ); +}; diff --git a/tgui/packages/tgui/interfaces/ApcControl.js b/tgui/packages/tgui/interfaces/ApcControl.js new file mode 100644 index 0000000000..449101d529 --- /dev/null +++ b/tgui/packages/tgui/interfaces/ApcControl.js @@ -0,0 +1,306 @@ +import { map, sortBy } from 'common/collections'; +import { flow } from 'common/fp'; +import { pureComponentHooks } from 'common/react'; +import { useBackend, useLocalState } from '../backend'; +import { Box, Button, Dimmer, Flex, Icon, Table, Tabs } from '../components'; +import { Fragment, Window } from '../layouts'; +import { AreaCharge, powerRank } from './PowerMonitor'; + +export const ApcControl = (props, context) => { + const { data } = useBackend(context); + return ( + + {data.authenticated === 1 && ( + + )} + {data.authenticated === 0 && ( + + )} + + ); +}; + +const ApcLoggedOut = (props, context) => { + const { act, data } = useBackend(context); + const { emagged } = data; + const text = emagged === 1 ? 'Open' : 'Log In'; + return ( + +
    + + + ); +}; + +const BountyHeader = (props, context) => { + const { act, data } = useBackend(context); + const { + stored_cash, + } = data; + return ( + + formatMoney(value)} /> + {' credits'} + + ); +}; diff --git a/tgui/packages/tgui/interfaces/CivCargoHoldTerminal.js b/tgui/packages/tgui/interfaces/CivCargoHoldTerminal.js new file mode 100644 index 0000000000..5fe3874422 --- /dev/null +++ b/tgui/packages/tgui/interfaces/CivCargoHoldTerminal.js @@ -0,0 +1,103 @@ +import { Fragment } from 'inferno'; +import { useBackend } from '../backend'; +import { AnimatedNumber, Box, Button, Flex, LabeledList, NoticeBox, Section } from '../components'; +import { Window } from '../layouts'; + +export const CivCargoHoldTerminal = (props, context) => { + const { act, data } = useBackend(context); + const { + pad, + sending, + status_report, + id_inserted, + id_bounty_info, + id_bounty_value, + id_bounty_num, + } = data; + const in_text = "Welcome valued employee."; + const out_text = "To begin, insert your ID into the console."; + return ( + + + + + + {id_inserted ? in_text : out_text} + +
    + + + {pad ? "Online" : "Not Found"} + + + {status_report} + + +
    + +     + + +
    + )) + ); +}; + +const Queue = (props, context) => { + const { act, data } = useBackend(context); + + const { isProcessingQueue } = data; + + const queue = data.queue || []; + + const { + queueMaterials, + missingMaterials, + textColors, + } = props; + + return ( + + +
    + act("clear_queue")} /> + {(!!isProcessingQueue && ( +
    +     + {!!queue.length && ( + +
    + +
    +     + )} +     + ); +}; + +const QueueMaterials = (props, context) => { + const { + queueMaterials, + missingMaterials, + } = props; + + return ( + + {Object.keys(queueMaterials).map(material => ( + + + {(!!missingMaterials[material] && ( + + {formatMoney(missingMaterials[material])} + + ))} + + ))} + + ); +}; + +const QueueList = (props, context) => { + const { act, data } = useBackend(context); + + const { + textColors, + } = props; + + const queue = data.queue || []; + + if (!queue.length) { + return ( + + No parts in queue. + + ); + } + + return ( + queue.map((part, index) => ( + + + +
    + )) + ) : ( + + No more knowledge can be found + + )} +
    +     +     + ); +}; diff --git a/tgui/packages/tgui/interfaces/GlandDispenser.js b/tgui/packages/tgui/interfaces/GlandDispenser.js new file mode 100644 index 0000000000..f572a92f06 --- /dev/null +++ b/tgui/packages/tgui/interfaces/GlandDispenser.js @@ -0,0 +1,37 @@ +import { useBackend } from '../backend'; +import { Button, Section } from '../components'; +import { Window } from '../layouts'; + +export const GlandDispenser = (props, context) => { + const { act, data } = useBackend(context); + const { + glands = [], + } = data; + return ( + + +
    + {glands.map(gland => ( +
    +     +     + ); +}; diff --git a/tgui/packages/tgui/interfaces/Holopad.js b/tgui/packages/tgui/interfaces/Holopad.js new file mode 100644 index 0000000000..4066544bd0 --- /dev/null +++ b/tgui/packages/tgui/interfaces/Holopad.js @@ -0,0 +1,159 @@ +import { Fragment } from 'inferno'; +import { useBackend } from '../backend'; +import { Box, Button, Flex, Icon, LabeledList, Modal, NoticeBox, Section } from '../components'; +import { Window } from '../layouts'; + +export const Holopad = (props, context) => { + const { act, data } = useBackend(context); + const { + calling, + } = data; + return ( + + {!!calling && ( + + + + + + + {'Dialing...'} + + + +
    +
    act('disk_eject')} /> + }> + {!disk && ( + + No holodisk + + ) || ( + + +
    + + ); +}; diff --git a/tgui/packages/tgui/interfaces/Jukebox.js b/tgui/packages/tgui/interfaces/Jukebox.js new file mode 100644 index 0000000000..b23e55469b --- /dev/null +++ b/tgui/packages/tgui/interfaces/Jukebox.js @@ -0,0 +1,109 @@ +import { sortBy } from 'common/collections'; +import { flow } from 'common/fp'; +import { useBackend } from '../backend'; +import { Box, Button, Dropdown, Section, Knob, LabeledControls, LabeledList } from '../components'; +import { Window } from '../layouts'; + +export const Jukebox = (props, context) => { + const { act, data } = useBackend(context); + const { + active, + track_selected, + track_length, + track_beat, + volume, + } = data; + const songs = flow([ + sortBy( + song => song.name), + ])(data.songs || []); + return ( + + +
    act('toggle')} /> + )}> + + + song.name)} + disabled={active} + selected={track_selected || "Select a Track"} + onSelected={value => act('select_track', { + track: value, + })} /> + + + {track_selected ? track_length : "No Track Selected"} + + + {track_selected ? track_beat : "No Track Selected"} + {track_beat === 1 ? " beat" : " beats"} + + +
    +
    + + + + = 50 ? 'red' : 'green'} + value={volume} + unit="%" + minValue={0} + maxValue={100} + step={1} + stepPixelSize={1} + disabled={active} + onDrag={(e, value) => act('set_volume', { + volume: value, + })} /> +
    +     +     + ); +}; diff --git a/tgui/packages/tgui/interfaces/NtosRequestKiosk.js b/tgui/packages/tgui/interfaces/NtosRequestKiosk.js new file mode 100644 index 0000000000..63a8dc63f6 --- /dev/null +++ b/tgui/packages/tgui/interfaces/NtosRequestKiosk.js @@ -0,0 +1,15 @@ +import { RequestKioskContent } from './RequestKiosk'; +import { NtosWindow } from '../layouts'; + +export const NtosRequestKiosk = (props, context) => { + return ( + + + + + + ); +}; diff --git a/tgui/packages/tgui/interfaces/PortableChemMixer.js b/tgui/packages/tgui/interfaces/PortableChemMixer.js new file mode 100644 index 0000000000..0cef29e5a3 --- /dev/null +++ b/tgui/packages/tgui/interfaces/PortableChemMixer.js @@ -0,0 +1,114 @@ +import { toTitleCase } from 'common/string'; +import { Fragment } from 'inferno'; +import { useBackend } from '../backend'; +import { AnimatedNumber, Box, Button, LabeledList, Section } from '../components'; +import { Window } from '../layouts'; +import { sortBy } from 'common/collections'; + +export const PortableChemMixer = (props, context) => { + const { act, data } = useBackend(context); + const recording = !!data.recordingRecipe; + const beakerTransferAmounts = data.beakerTransferAmounts || []; + const beakerContents = recording + && Object.keys(data.recordingRecipe) + .map(id => ({ + id, + name: toTitleCase(id.replace(/_/, ' ')), + volume: data.recordingRecipe[id], + })) + || data.beakerContents + || []; + const chemicals = sortBy(chem => chem.title)(data.chemicals); + return ( + + +
    ( +
    +
    ( +
    +     +     + ); +}; diff --git a/tgui/packages/tgui/interfaces/PortableTurret.js b/tgui/packages/tgui/interfaces/PortableTurret.js new file mode 100644 index 0000000000..bb6700743c --- /dev/null +++ b/tgui/packages/tgui/interfaces/PortableTurret.js @@ -0,0 +1,108 @@ +import { Fragment } from 'inferno'; +import { useBackend } from '../backend'; +import { Button, LabeledList, NoticeBox, Section } from '../components'; +import { Window } from '../layouts'; + +export const PortableTurret = (props, context) => { + const { act, data } = useBackend(context); + const { + silicon_user, + locked, + on, + check_weapons, + neutralize_criminals, + neutralize_all, + neutralize_unidentified, + neutralize_nonmindshielded, + neutralize_cyborgs, + ignore_heads, + manual_control, + allow_manual_control, + lasertag_turret, + } = data; + return ( + + + + Swipe an ID card to {locked ? 'unlock' : 'lock'} this interface. + + +
    + + act('manual')} /> + )}> +
    + {!lasertag_turret && ( +
    act('shootheads')} /> + )}> + act('shootall')} /> + act('authweapon')} /> + act('checkxenos')} /> + act('checkloyal')} /> + act('shootcriminals')} /> + act('shootborgs')} /> +
    + )} +     +     +     + ); +}; diff --git a/tgui/packages/tgui/interfaces/ProbingConsole.js b/tgui/packages/tgui/interfaces/ProbingConsole.js new file mode 100644 index 0000000000..4115be4e4b --- /dev/null +++ b/tgui/packages/tgui/interfaces/ProbingConsole.js @@ -0,0 +1,83 @@ +import { useBackend } from '../backend'; +import { Button, LabeledList, NoticeBox, Section } from '../components'; +import { Window } from '../layouts'; + +export const ProbingConsole = (props, context) => { + const { act, data } = useBackend(context); + const { + open, + feedback, + occupant, + occupant_name, + occupant_status, + } = data; + return ( + + +
    + + + {feedback} + + +
    +
    act('door')} /> + )}> + {occupant && ( + + + {occupant_name} + + + {occupant_status === 3 + ? 'Deceased' + : occupant_status === 2 + ? 'Unconcious' + : 'Concious'} + + +
    +     +     + ); +}; diff --git a/tgui/packages/tgui/interfaces/RequestKiosk.js b/tgui/packages/tgui/interfaces/RequestKiosk.js new file mode 100644 index 0000000000..4d2a563742 --- /dev/null +++ b/tgui/packages/tgui/interfaces/RequestKiosk.js @@ -0,0 +1,155 @@ +import { Fragment } from 'inferno'; +import { useBackend } from '../backend'; +import { Box, Button, Collapsible, Flex, LabeledList, NumberInput, Section, TextArea } from '../components'; +import { formatMoney } from '../format'; +import { Window } from '../layouts'; + +export const RequestKiosk = (props, context) => { + return ( + + + + + + ); +}; + +export const RequestKioskContent = (props, context) => { + const { act, data } = useBackend(context); + const { + accountName, + requests = [], + applicants = [], + bountyValue, + bountyText, + } = data; + const color = 'rgba(13, 13, 213, 0.7)'; + const backColor = 'rgba(0, 0, 69, 0.5)'; + return ( + +
    + + act('clear')} /> + )}> + {accountName || 'N/A'} + + +
    + + + {requests?.map(request => ( + +
    + + + {request.owner} + + + {formatMoney(request.value) + ' cr'} + + +
    +
    + + ))} + + + +
    +