-
-
-
- {!!theme && (
-
- )}
-
-
-
-
-
- );
- }
-}
diff --git a/tgui/packages/tgui-say/package.json b/tgui/packages/tgui-say/package.json
index 71510fd609b8..b9af63f82509 100644
--- a/tgui/packages/tgui-say/package.json
+++ b/tgui/packages/tgui-say/package.json
@@ -4,10 +4,8 @@
"version": "1.0.0",
"dependencies": {
"common": "workspace:*",
- "dompurify": "^2.3.1",
"inferno": "^8.2.1",
"tgui": "workspace:*",
- "tgui-dev-server": "workspace:*",
"tgui-polyfill": "workspace:*"
}
}
diff --git a/tgui/packages/tgui-say/styles/button.scss b/tgui/packages/tgui-say/styles/button.scss
index c592d4cdbd9e..89e1cceca943 100644
--- a/tgui/packages/tgui-say/styles/button.scss
+++ b/tgui/packages/tgui-say/styles/button.scss
@@ -1,46 +1,29 @@
@use 'sass:color';
-@use 'sass:selector';
@use './colors.scss';
.button {
+ align-items: center;
background-color: colors.$button;
+ border-radius: 0.3rem;
border: thin solid;
- border-radius: 2px;
- color: colors.$background;
- font-family: 'Consolas', monospace;
- font-weight: bold;
+ display: flex;
+ flex-grow: 1;
+ font-family: inherit;
font-size: 0.9rem;
- height: 100%;
+ font-weight: bold;
+ justify-content: center;
padding: 0;
- text-align: center;
- vertical-align: middle;
- width: 4rem;
-
+ width: 2.6rem;
&:hover {
background-color: lighten(colors.$button, 10%);
}
}
.button-lightMode {
- @extend .button;
background-color: colors.$lightBorder;
border: none;
color: black;
-
&:hover {
background-color: colors.$lightHover;
}
}
-
-/** Creates a button for each channel */
-@each $channel, $color in colors.$channel-map {
- .button-#{$channel} {
- color: $color;
- border-color: darken($color, 10%);
-
- &:hover {
- border-color: lighten($color, 10%);
- color: lighten($color, 5%);
- }
- }
-}
diff --git a/tgui/packages/tgui-say/styles/colors.scss b/tgui/packages/tgui-say/styles/colors.scss
index dd7b580255c9..b5de439d052a 100644
--- a/tgui/packages/tgui-say/styles/colors.scss
+++ b/tgui/packages/tgui-say/styles/colors.scss
@@ -1,4 +1,3 @@
-@use 'sass:color';
@use 'sass:map';
$background: #131313;
@@ -7,53 +6,27 @@ $lightMode: #ffffff;
$lightBorder: #bbbbbb;
$lightHover: #eaeaea;
-////////////////////////////////////////////////
-// Normal chat colors
-$say: #a4bad6;
-$radio: #1ecc43;
-$me: #5975da;
-$ooc: #cca300;
-$looc: #fafa3b; // monke: looc
-
-////////////////////////////////////////////////
-// Subchannel chat colors
-$ai: #d65d95;
-$admin: #ffbbff;
-$mentor: #d3df68;
-$binary: #1e90ff;
-$centcom: #2681a5;
-$changeling: #4c701f;
-$command: #fcdf03;
-$engi: #f37746;
-$hive: #855d85;
-$medical: #57b8f0;
-$science: #c68cfa;
-$security: #dd3535;
-$syndicate: #8f4a4b;
-$service: #6ca729;
-$supply: #b88646;
-
$_channel_map: (
- 'say': $say,
- 'radio': $radio,
- 'me': $me,
- 'ooc': $ooc,
- 'looc': $looc,
- 'ai': $ai,
- 'admin': $admin,
- 'mentor': $mentor,
- 'binary': $binary,
- 'centcom': $centcom,
- 'changeling': $changeling,
- 'command': $command,
- 'engi': $engi,
- 'hive': $hive,
- 'medical': $medical,
- 'science': $science,
- 'security': $security,
- 'syndicate': $syndicate,
- 'service': $service,
- 'supply': $supply,
+ 'Admin': #ffbbff,
+ 'AI': #d65d95,
+ 'CCom': #2681a5,
+ 'Cling': #4c701f,
+ 'Cmd': #fcdf03,
+ 'Engi': #f37746,
+ 'Hive': #855d85,
+ 'io': #1e90ff,
+ 'Me': #5975da,
+ 'Med': #57b8f0,
+ 'OOC': #cca300,
+ 'LOOC': #fafa3b,
+ 'Mentor': #ff00ff,
+ 'Radio': #1ecc43,
+ 'Say': #a4bad6,
+ 'Sci': #c68cfa,
+ 'Sec': #dd3535,
+ 'Supp': #b88646,
+ 'Svc': #6ca729,
+ 'Synd': #8f4a4b,
);
$channel_keys: map.keys($_channel_map) !default;
diff --git a/tgui/packages/tgui-say/styles/content.scss b/tgui/packages/tgui-say/styles/content.scss
new file mode 100644
index 000000000000..91f4fe136d78
--- /dev/null
+++ b/tgui/packages/tgui-say/styles/content.scss
@@ -0,0 +1,14 @@
+.center {
+ display: flex;
+ flex: 1 1 0;
+ height: 100%;
+ width: 100%;
+}
+
+.input {
+ display: flex;
+ flex: 1 1 0;
+ height: 100%;
+ width: 100%;
+ font-family: 'Consolas', monospace;
+}
diff --git a/tgui/packages/tgui-say/styles/dragzone.scss b/tgui/packages/tgui-say/styles/dragzone.scss
index 13ccf7701988..314b57c4e493 100644
--- a/tgui/packages/tgui-say/styles/dragzone.scss
+++ b/tgui/packages/tgui-say/styles/dragzone.scss
@@ -1,72 +1,39 @@
@use 'sass:color';
@use './colors.scss';
+$dragSize: 0.6rem;
+$borderSize: 0.2rem;
+
.dragzone-horizontal {
+ border-left: $borderSize solid;
+ border-right: $borderSize solid;
color: transparent;
- height: 5px;
width: 100%;
+ height: $dragSize;
}
-
-.dragzone-vertical {
- color: transparent;
- height: 100%;
- position: absolute;
- top: 0;
- width: 5px;
+.dragzone-left {
+ border-left: $borderSize solid;
}
-@each $channel, $color in colors.$channel-map {
- $darkened: darken($color, 20%);
-
- .dragzone-bottom-#{$channel} {
- @extend .dragzone-horizontal;
- border-left: 2px solid $darkened;
- border-right: 2px solid $darkened;
- }
-
- .dragzone-left-#{$channel} {
- @extend .dragzone-vertical;
- left: 0;
- border-left: 2px solid $darkened;
- }
-
- .dragzone-right-#{$channel} {
- @extend .dragzone-vertical;
- right: 0;
- border-right: 2px solid $darkened;
- }
-
- .dragzone-top-#{$channel} {
- @extend .dragzone-horizontal;
- border-left: 2px solid $darkened;
- border-right: 2px solid $darkened;
- border-top: 2px solid $darkened;
- }
+.dragzone-right {
+ border-right: $borderSize solid;
}
-/** Lightmode static theme */
-.dragzone-bottom-lightMode {
- @extend .dragzone-horizontal;
- border-left: 2px solid colors.$lightBorder;
- border-right: 2px solid colors.$lightBorder;
- border-bottom: 2px solid colors.$lightBorder;
+.dragzone-vertical {
+ color: transparent;
+ height: 100%;
+ width: $dragSize;
}
-.dragzone-left-lightMode {
- @extend .dragzone-vertical;
- left: 0;
- border-left: 2px solid colors.$lightBorder;
+.dragzone-top {
+ border-top: $borderSize solid;
}
-.dragzone-right-lightMode {
- @extend .dragzone-vertical;
- right: 0;
- border-right: 2px solid colors.$lightBorder;
+.dragzone-bottom {
+ border-bottom: $borderSize solid;
}
-.dragzone-top-lightMode {
- @extend .dragzone-horizontal;
- border-left: 2px solid colors.$lightBorder;
- border-right: 2px solid colors.$lightBorder;
- border-top: 2px solid colors.$lightBorder;
+/** Lightmode static theme */
+.dragzone-lightMode {
+ border-color: colors.$lightBorder;
}
diff --git a/tgui/packages/tgui-say/styles/main.scss b/tgui/packages/tgui-say/styles/main.scss
index db460291f66c..8c7ca885c904 100644
--- a/tgui/packages/tgui-say/styles/main.scss
+++ b/tgui/packages/tgui-say/styles/main.scss
@@ -1,4 +1,6 @@
@use 'sass:meta';
+@use 'sass:color';
+@use './colors.scss';
// Core styles
@include meta.load-css('~tgui/styles/reset.scss');
@@ -8,6 +10,61 @@
@include meta.load-css('~tgui/styles/components/TextArea.scss');
// Local styles
@include meta.load-css('./button.scss');
+@include meta.load-css('./content.scss');
@include meta.load-css('./dragzone.scss');
-@include meta.load-css('./modal.scss');
@include meta.load-css('./textarea.scss');
+@include meta.load-css('./window.scss');
+
+@keyframes gradient {
+ 0% {
+ background-position: 0 0;
+ }
+
+ 100% {
+ background-position: 100% 0;
+ }
+}
+
+@each $channel, $color in colors.$channel-map {
+ $darkened: darken($color, 20%);
+
+ .button-#{$channel} {
+ border-color: darken($color, 10%);
+ color: $color;
+ &:hover {
+ border-color: lighten($color, 10%);
+ color: lighten($color, 5%);
+ }
+ }
+
+ .dragzone-#{$channel} {
+ border-color: $darkened;
+ }
+
+ .textarea-#{$channel} {
+ color: $color;
+ }
+
+ .window-#{$channel} {
+ &:after {
+ animation: gradient 10s linear infinite;
+ background: linear-gradient(
+ to right,
+ darken($color, 35%),
+ $color,
+ lighten($color, 10%),
+ $color,
+ darken($color, 35%)
+ );
+ background-position: 0% 0%;
+ background-size: 500% auto;
+ bottom: 0px;
+ content: '';
+ height: 2px;
+ left: 0px;
+ position: absolute;
+ right: 0px;
+ z-index: 999;
+ }
+ }
+}
diff --git a/tgui/packages/tgui-say/styles/modal.scss b/tgui/packages/tgui-say/styles/modal.scss
deleted file mode 100644
index 33a4ef67bbfb..000000000000
--- a/tgui/packages/tgui-say/styles/modal.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@use 'sass:color';
-@use './colors.scss';
-
-@keyframes gradient {
- 0% {
- background-position: 0 0;
- }
-
- 100% {
- background-position: 100% 0;
- }
-}
-
-.modal {
- background-color: colors.$background;
- display: flex;
- flex-direction: column;
- max-width: 231px;
- width: 100%;
-}
-
-.modal-lightMode {
- @extend .modal;
- background-color: colors.$lightMode;
-}
-
-.modal__content {
- display: flex;
- flex-direction: row;
- height: 100%;
- padding: 1px 0 1px 5px;
-}
-
-/** Window sizes */
-.modal-30 {
- height: 30px;
-}
-
-.modal-50 {
- height: 50px;
-}
-
-.modal-70 {
- height: 70px;
-}
-
-/** Creates an animated border for each channel */
-@each $channel, $color in colors.$channel-map {
- .modal-#{$channel} {
- &:after {
- animation: gradient 10s linear infinite;
- background: linear-gradient(
- to right,
- darken($color, 35%),
- $color,
- lighten($color, 10%),
- $color,
- darken($color, 35%)
- );
- background-position: 0% 0%;
- background-size: 500% auto;
- bottom: 0px;
- content: '';
- height: 2px;
- left: 0px;
- position: absolute;
- right: 0px;
- z-index: 999;
- }
- }
-}
diff --git a/tgui/packages/tgui-say/styles/textarea.scss b/tgui/packages/tgui-say/styles/textarea.scss
index 20b901e1be1b..d33c4a9939fa 100644
--- a/tgui/packages/tgui-say/styles/textarea.scss
+++ b/tgui/packages/tgui-say/styles/textarea.scss
@@ -1,23 +1,11 @@
-@use './colors.scss';
-
.textarea {
- background-color: transparent;
+ align-items: center;
+ background: transparent;
border: none;
- color: colors.$background;
- flex-grow: 1;
- font-family: 'Lucida Console', monospace;
+ display: flex;
+ flex-grow: 4;
+ font-family: inherit;
font-size: 1.1rem;
- margin-top: 2px;
-}
-
-.textarea-lightMode {
- @extend .textarea;
- color: black;
-}
-
-/** Creates an input for each channel */
-@each $channel, $color in colors.$channel-map {
- .textarea-#{$channel} {
- color: $color;
- }
+ overflow: hidden;
+ margin: 0.1rem 0 0 0.4rem;
}
diff --git a/tgui/packages/tgui-say/styles/window.scss b/tgui/packages/tgui-say/styles/window.scss
new file mode 100644
index 000000000000..1ce4dfffb09b
--- /dev/null
+++ b/tgui/packages/tgui-say/styles/window.scss
@@ -0,0 +1,29 @@
+@use 'sass:color';
+@use './colors.scss';
+
+.window {
+ background-color: colors.$background;
+ display: flex;
+ flex-direction: column;
+ max-width: 231px;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+}
+
+.window-lightMode {
+ background-color: colors.$lightMode;
+}
+
+/** Window sizes */
+.window-30 {
+ height: 30px;
+}
+
+.window-50 {
+ height: 50px;
+}
+
+.window-70 {
+ height: 70px;
+}
diff --git a/tgui/packages/tgui-say/timers.ts b/tgui/packages/tgui-say/timers.ts
new file mode 100644
index 000000000000..7b9fffc87fc2
--- /dev/null
+++ b/tgui/packages/tgui-say/timers.ts
@@ -0,0 +1,19 @@
+import { debounce, throttle } from 'common/timer';
+
+const SECONDS = 1000;
+
+/** Timers: Prevents overloading the server, throttles messages */
+export const byondMessages = {
+ // Debounce: Prevents spamming the server
+ channelIncrementMsg: debounce(
+ (visible: boolean) => Byond.sendMessage('thinking', { visible }),
+ 0.4 * SECONDS
+ ),
+ forceSayMsg: debounce(
+ (entry: string) => Byond.sendMessage('force', { entry, channel: 'Say' }),
+ 1 * SECONDS,
+ true
+ ),
+ // Throttle: Prevents spamming the server
+ typingMsg: throttle(() => Byond.sendMessage('typing'), 4 * SECONDS),
+} as const;
diff --git a/tgui/packages/tgui-say/types/index.tsx b/tgui/packages/tgui-say/types/index.tsx
deleted file mode 100644
index 45927abc4db7..000000000000
--- a/tgui/packages/tgui-say/types/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { RefObject } from 'inferno';
-
-export type Modal = {
- events: Events;
- fields: Fields;
- setState: (state: {}) => void;
- state: State;
- timers: Timers;
-};
-
-type Events = {
- onArrowKeys: (direction: number, value: string) => void;
- onBackspaceDelete: () => void;
- onClick: () => void;
- onEscape: () => void;
- onEnter: (event: KeyboardEvent, value: string) => void;
- onForce: () => void;
- onKeyDown: (event: KeyboardEvent) => void;
- onIncrementChannel: () => void;
- onInput: (event: InputEvent, value: string) => void;
- onComponentMount: () => void;
- onComponentUpdate: () => void;
- onRadioPrefix: () => void;
- onReset: (channel?: number) => void;
- onSetSize: (size: number) => void;
- onViewHistory: () => void;
-};
-
-type Fields = {
- historyCounter: number;
- innerRef: RefObject