-
- Temperature Selection:
-
-
- {{if data.emagged}}
-
- {{:helper.link('Scalding', 'arrow-circle-up', { 'temp' : 'Scalding' }, data.currentTemp == "scalding" ? 'selected' : null)}}
-
- {{/if}}
-
-
- {{:helper.link('Warm', 'arrow-circle-up', { 'temp' : 'Warm' }, data.currentTemp == "warm" ? 'selected' : null)}}
-
-
-
- {{:helper.link('Normal', 'arrow-circle-right', { 'temp' : 'Normal' }, data.currentTemp == "normal" ? 'selected' : null)}}
-
-
-
- {{:helper.link('Cool', 'arrow-circle-down', { 'temp' : 'Cool' }, data.currentTemp == "cool" ? 'selected' : null)}}
-
-
- {{if data.emagged}}
-
- {{:helper.link('Frigid', 'arrow-circle-down', { 'temp' : 'Frigid' }, data.currentTemp == "frigid" ? 'selected' : null)}}
-
- {{/if}}
-
\ No newline at end of file
diff --git a/tgui/packages/tgui/interfaces/PoolController.js b/tgui/packages/tgui/interfaces/PoolController.js
new file mode 100644
index 00000000000..97623dd3ddb
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/PoolController.js
@@ -0,0 +1,82 @@
+import { useBackend } from "../backend";
+import { Button, Flex, LabeledList, Section, Box, Icon } from '../components';
+import { Window } from "../layouts";
+
+const TEMPS = {
+ scalding: { label: 'Scalding', color: '#FF0000', icon: 'fa fa-arrow-circle-up', requireEmag: true },
+ warm: { label: 'Warm', color: '#990000', icon: 'fa fa-arrow-circle-up' },
+ normal: { label: 'Normal', color: null, icon: 'fa fa-arrow-circle-right' },
+ cool: { label: 'Cool', color: '#009999', icon: 'fa fa-arrow-circle-down' },
+ frigid: { label: 'Frigid', color: '#00CCCC', icon: 'fa fa-arrow-circle-down', requireEmag: true },
+};
+
+const TempButton = (properties, context) => {
+ const { tempKey, ...buttonProps } = properties;
+ const temp = TEMPS[tempKey];
+ if (!temp) {
+ return null;
+ }
+ const { data, act } = useBackend(context);
+ const { currentTemp } = data;
+ const { label, icon } = temp;
+ const selected = tempKey === currentTemp;
+ const setTemp = () => {
+ act('setTemp', { temp: tempKey });
+ };
+ return (
+