Converts some js to tsx (#78946)

This commit is contained in:
tattle
2023-10-24 19:37:15 -04:00
committed by GitHub
parent d9715c2ada
commit 31457e18db
8 changed files with 164 additions and 61 deletions
@@ -13,7 +13,6 @@
var/efficiency = 20
var/on = FALSE
var/cooldown = 0
var/screen = "home"
var/useramount = 30 // Last used amount
var/setting = 1 // displayed range is 3 * setting
var/max_range = 3 // displayed max range is 3 * max range
@@ -126,18 +125,16 @@
/obj/machinery/smoke_machine/ui_data(mob/user)
var/data = list()
var/TankContents[0]
var/TankCurrentVolume = 0
var/tank_contents = list()
var/tank_current_volume = 0
for(var/datum/reagent/R in reagents.reagent_list)
TankContents.Add(list(list("name" = R.name, "volume" = R.volume))) // list in a list because Byond merges the first list...
TankCurrentVolume += R.volume
data["TankContents"] = TankContents
data["isTankLoaded"] = reagents.total_volume ? TRUE : FALSE
data["TankCurrentVolume"] = reagents.total_volume ? reagents.total_volume : null
data["TankMaxVolume"] = reagents.maximum_volume
tank_contents += list(list("name" = R.name, "volume" = R.volume)) // list in a list because Byond merges the first list...
tank_current_volume += R.volume
data["tankContents"] = tank_contents
data["tankCurrentVolume"] = reagents.total_volume ? reagents.total_volume : null
data["tankMaxVolume"] = reagents.maximum_volume
data["active"] = on
data["setting"] = setting
data["screen"] = screen
data["maxSetting"] = max_range
return data
@@ -163,8 +160,5 @@
message_admins("[ADMIN_LOOKUPFLW(usr)] activated a smoke machine that contains [english_list(reagents.reagent_list)] at [ADMIN_VERBOSEJMP(src)].")
usr.log_message("activated a smoke machine that contains [english_list(reagents.reagent_list)]", LOG_GAME)
log_combat(usr, src, "has activated [src] which contains [english_list(reagents.reagent_list)] at [AREACOORD(src)].")
if("goScreen")
screen = params["screen"]
. = TRUE
#undef REAGENTS_BASE_VOLUME
@@ -3,8 +3,39 @@ import { AnimatedNumber, Box, Button, Modal, Section, Stack, Tabs } from '../com
import { formatMoney } from '../format';
import { Window } from '../layouts';
type Data = {
categories: string[];
markets: Market[];
items: Item[];
money: number;
viewing_market: string;
viewing_category: string;
buying: boolean;
ltsrbt_built: boolean;
delivery_methods: DeliveryMethod[];
delivery_method_description: Record<string, string>;
};
type Market = {
id: string;
name: string;
};
type Item = {
id: string;
name: string;
desc: string;
amount: number;
cost: number;
};
type DeliveryMethod = {
name: string;
price: number;
};
export const BlackMarketUplink = (props, context) => {
const { act, data } = useBackend(context);
const { act, data } = useBackend<Data>(context);
const {
categories = [],
markets = [],
@@ -94,7 +125,7 @@ export const BlackMarketUplink = (props, context) => {
};
const ShipmentSelector = (props, context) => {
const { act, data } = useBackend(context);
const { act, data } = useBackend<Data>(context);
const { buying, ltsrbt_built, money } = data;
if (!buying) {
return null;
@@ -4,6 +4,33 @@ import { BlockQuote, Box, Button, Collapsible, Flex, NumberInput, Section, Stack
import { formatMoney } from '../format';
import { Window } from '../layouts';
type Data = {
accountName: string;
requests: Request[];
applicants: Applicant[];
bountyValue: number;
bountyText: string;
user: User;
};
type Request = {
name: string;
owner: string;
description: string;
value: number;
acc_number: number;
};
type Applicant = {
name: string;
request_id: number;
requestee_id: number;
};
type User = {
name: string;
};
export const BountyBoard = (props, context) => {
return (
<Window width={550} height={600}>
@@ -15,7 +42,7 @@ export const BountyBoard = (props, context) => {
};
export const BountyBoardContent = (props, context) => {
const { act, data } = useBackend(context);
const { act, data } = useBackend<Data>(context);
const {
accountName,
requests = [],
@@ -1,9 +1,18 @@
import { BooleanLike } from 'common/react';
import { useBackend } from '../backend';
import { Button, Section } from '../components';
import { Window } from '../layouts';
type Data = {
timing: BooleanLike;
minutes: number;
seconds: number;
flash_charging: BooleanLike;
};
export const BrigTimer = (props, context) => {
const { act, data } = useBackend(context);
const { act, data } = useBackend<Data>(context);
const { timing, minutes, seconds, flash_charging } = data;
return (
<Window width={300} height={138}>
<Window.Content scrollable>
@@ -13,14 +22,14 @@ export const BrigTimer = (props, context) => {
<>
<Button
icon="clock-o"
content={data.timing ? 'Stop' : 'Start'}
selected={data.timing}
onClick={() => act(data.timing ? 'stop' : 'start')}
content={timing ? 'Stop' : 'Start'}
selected={timing}
onClick={() => act(timing ? 'stop' : 'start')}
/>
<Button
icon="lightbulb-o"
content={data.flash_charging ? 'Recharging' : 'Flash'}
disabled={data.flash_charging}
content={flash_charging ? 'Recharging' : 'Flash'}
disabled={flash_charging}
onClick={() => act('flash')}
/>
</>
@@ -33,8 +42,7 @@ export const BrigTimer = (props, context) => {
icon="backward"
onClick={() => act('time', { adjust: -100 })}
/>{' '}
{String(data.minutes).padStart(2, '0')}:
{String(data.seconds).padStart(2, '0')}{' '}
{String(minutes).padStart(2, '0')}:{String(seconds).padStart(2, '0')}{' '}
<Button icon="forward" onClick={() => act('time', { adjust: 100 })} />
<Button
icon="fast-forward"
@@ -1,9 +1,19 @@
import { BooleanLike } from 'common/react';
import { useBackend } from '../backend';
import { Box, Button, Divider, LabeledList, Flex, Section } from '../components';
import { Window } from '../layouts';
type Data = {
pen: string;
integrated_pen: BooleanLike;
top_paper: string;
top_paper_ref: string;
paper: string[];
paper_ref: string[];
};
export const Clipboard = (props, context) => {
const { act, data } = useBackend(context);
const { act, data } = useBackend<Data>(context);
const { pen, integrated_pen, top_paper, top_paper_ref, paper, paper_ref } =
data;
return (
@@ -2,9 +2,22 @@ import { useBackend } from '../backend';
import { Box, Button, Grid, Section, NoticeBox } from '../components';
import { toTitleCase } from 'common/string';
import { Window } from '../layouts';
import { BooleanLike } from 'common/react';
type Data = {
shaking: BooleanLike;
question: string;
answers: Answer[];
};
type Answer = {
answer: string;
amount: number;
selected: BooleanLike;
};
export const EightBallVote = (props, context) => {
const { act, data } = useBackend(context);
const { act, data } = useBackend<Data>(context);
const { shaking } = data;
return (
<Window width={400} height={600}>
@@ -18,7 +31,7 @@ export const EightBallVote = (props, context) => {
};
const EightBallVoteQuestion = (props, context) => {
const { act, data } = useBackend(context);
const { act, data } = useBackend<Data>(context);
const { question, answers = [] } = data;
return (
<Section>
@@ -1,12 +1,20 @@
import { toFixed } from 'common/math';
import { useBackend } from '../backend';
import { Button, Grid, NumberInput, Section } from '../components';
import { Button, Stack, NumberInput, Section } from '../components';
import { Window } from '../layouts';
type Data = {
code: number;
frequency: number;
cooldown: number;
minFrequency: number;
maxFrequency: number;
};
export const Signaler = (props, context) => {
const { act, data } = useBackend(context);
return (
<Window width={280} height={132}>
<Window width={280} height={128}>
<Window.Content>
<SignalerContent />
</Window.Content>
@@ -15,17 +23,16 @@ export const Signaler = (props, context) => {
};
export const SignalerContent = (props, context) => {
const { act, data } = useBackend(context);
const { act, data } = useBackend<Data>(context);
const { code, frequency, cooldown, minFrequency, maxFrequency } = data;
const color = 'rgba(13, 13, 213, 0.7)';
const backColor = 'rgba(0, 0, 69, 0.5)';
return (
<Section>
<Grid>
<Grid.Column size={1.4} color="label">
Frequency:
</Grid.Column>
<Grid.Column>
<Stack>
<Stack.Item color="label">Frequency:</Stack.Item>
<Stack.Item>
<NumberInput
animate
unit="kHz"
@@ -42,8 +49,8 @@ export const SignalerContent = (props, context) => {
})
}
/>
</Grid.Column>
<Grid.Column>
</Stack.Item>
<Stack.Item>
<Button
ml={1.3}
icon="sync"
@@ -54,13 +61,13 @@ export const SignalerContent = (props, context) => {
})
}
/>
</Grid.Column>
</Grid>
<Grid mt={0.6}>
<Grid.Column size={1.4} color="label">
</Stack.Item>
</Stack>
<Stack mt={0.6}>
<Stack.Item pr={5.3} color="label">
Code:
</Grid.Column>
<Grid.Column>
</Stack.Item>
<Stack.Item>
<NumberInput
animate
step={1}
@@ -75,8 +82,8 @@ export const SignalerContent = (props, context) => {
})
}
/>
</Grid.Column>
<Grid.Column>
</Stack.Item>
<Stack.Item>
<Button
ml={1.3}
icon="sync"
@@ -87,10 +94,10 @@ export const SignalerContent = (props, context) => {
})
}
/>
</Grid.Column>
</Grid>
<Grid mt={0.8}>
<Grid.Column>
</Stack.Item>
</Stack>
<Stack mt={0.8}>
<Stack.Item ml={10.5}>
<Button
mb={-0.1}
fluid
@@ -100,8 +107,8 @@ export const SignalerContent = (props, context) => {
textAlign="center"
onClick={() => act('signal')}
/>
</Grid.Column>
</Grid>
</Stack.Item>
</Stack>
</Section>
);
};
@@ -1,17 +1,30 @@
import { BooleanLike } from 'common/react';
import { useBackend } from '../backend';
import { AnimatedNumber, Box, Button, LabeledList, ProgressBar, Section } from '../components';
import { Window } from '../layouts';
type Data = {
tankContents: Reagent[];
tankCurrentVolume: number;
tankMaxVolume: number;
active: BooleanLike;
setting: number;
maxSetting: number;
};
type Reagent = {
name: string;
volume: number;
};
export const SmokeMachine = (props, context) => {
const { act, data } = useBackend(context);
const { act, data } = useBackend<Data>(context);
const {
TankContents,
isTankLoaded,
TankCurrentVolume,
TankMaxVolume,
tankContents,
tankCurrentVolume,
tankMaxVolume,
active,
setting,
screen,
maxSetting = [],
} = data;
return (
@@ -28,12 +41,12 @@ export const SmokeMachine = (props, context) => {
/>
}>
<ProgressBar
value={TankCurrentVolume / TankMaxVolume}
value={tankCurrentVolume / tankMaxVolume}
ranges={{
bad: [-Infinity, 0.3],
}}>
<AnimatedNumber initial={0} value={TankCurrentVolume || 0} />
{' / ' + TankMaxVolume}
<AnimatedNumber initial={0} value={tankCurrentVolume || 0} />
{' / ' + tankMaxVolume}
</ProgressBar>
<Box mt={1}>
<LabeledList>
@@ -57,7 +70,7 @@ export const SmokeMachine = (props, context) => {
buttons={
<Button icon="trash" content="Purge" onClick={() => act('purge')} />
}>
{TankContents.map((chemical) => (
{tankContents.map((chemical) => (
<Box key={chemical.name} color="label">
<AnimatedNumber initial={0} value={chemical.volume} /> units of{' '}
{chemical.name}