cyberpresidentvanellope/S.P.L.U.R.T-Station-13
1
0
Fork 0
mirror of https://github.com/SPLURT-Station/S.P.L.U.R.T-Station-13.git synced 2025-12-09 16:07:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updates clockworkslab

Browse Source
This commit is contained in:
Artur
2020-05-22 17:15:57 +03:00
parent ff57c5a294
commit d5b891552f
1 changed files with 102 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
tgui/packages/tgui/interfaces/ClockworkSlab.js
View File

@@ -1,165 +1,111 @@
import { Window } from 'inferno';
import { useBackend } from '../backend';
import { Button, LabeledList, Section, Tabs, Input } from '../components';
import { round } from 'common/math';
import { map } from 'common/collections';
import { Section, Tabs, LabeledList, Button } from '../components';
import { Fragment } from 'inferno';
import { Window } from '../layouts';
export const ClockworkSlab = props => {
const { act, data } = useBackend(props);
export const ClockworkSlab = (props, context) => {
const { act, data } = useBackend(context);
const {
recollection,
rec_text,
recollection_categories,
rec_section,
rec_binds,
recollection = true,
recollection_categories = [],
scripture = null,
power = 0,
} = data;
return (
<Window
theme="clockwork"
resizable>
<Section>
<Button
content={recollection ? "Recital" : "Recollection"}
onClick={() => act('toggle')}
/>
</Section>
{!!recollection && (
<Section title="Recollection">
{rec_text}
{recollection_categories.map(categories => {
return (
<Window key={rec_section} >
<br />
<Button
content={`${categories.name} - ${categories.desc}`}
onClick={() => act('rec_category', {
"category": categories.name,
})} />
</Window>
);
})}
{rec_section}
{rec_binds}
</Section>
)}
{recollection && (
<Window>
<Section title="Power">
{data.power}
<Window>
<Window.Content>
<Fragment theme="clockwork">
<Section>
<Button
content={recollection
? "Recital"
: "Recollection"}
onClick={() => act('toggle')}
/>
</Section>
<Section title="Recital">
{data.tier_info}
{data.scripturecolors}
<Tabs>
<Tabs.Tab
key="driver"
label="Driver">
{() => (
<Section>
<LabeledList>
{data.scripture.driver.map(script => {
return (
<LabeledList.Item
key={script.name}
label={script.name}
buttons={(
<Window>
<Button
content={`Recite (${script.required} W)`}
onClick={() => act('recite', {
'category': script.name,
})} />
<Button
content={script.quickbind
? `Unbind ${script.quickbind}`
: 'Quickbind'}
onClick={() => act('bind', {
'category': script.name,
})} />
</Window>
)}>
{`${script.descname} ${script.invokers}`}
</LabeledList.Item>
);
})}
</LabeledList>
</Section>
)}
</Tabs.Tab>
<Tabs.Tab
key="script"
label="Script">
{() => (
<Section>
<LabeledList>
{data.scripture.script.map(script => {
return (
<LabeledList.Item
key={script.name}
label={script.name}
buttons={(
<Window>
<Button
content={`Recite (${script.required} W)`}
onClick={() => act('recite', {
'category': script.name,
})} />
<Button
content={script.quickbind
? `Unbind ${script.quickbind}`
: 'Quickbind'}
onClick={() => act('bind', {
'category': script.name,
})} />
</Window>
)}>
{`${script.descname} ${script.invokers}`}
</LabeledList.Item>
);
})}
</LabeledList>
</Section>
)}
</Tabs.Tab>
<Tabs.Tab
key="application"
label="Application">
{() => (
<Section>
<LabeledList>
{data.scripture.application.map(script => {
return (
<LabeledList.Item
key={script.name}
label={script.name}
buttons={(
<Window>
<Button
content={`Recite (${script.required} W)`}
onClick={() => act('recite', {
'category': script.name,
})} />
<Button
content={script.quickbind
? `Unbind ${script.quickbind}`
: 'Quickbind'}
onClick={() => act('bind', {
'category': script.name,
})} />
</Window>
)}>
{`${script.descname} ${script.invokers}`}
</LabeledList.Item>
);
})}
</LabeledList>
</Section>
)}
</Tabs.Tab>
</Tabs>
</Section>
</Window>
)}
{recollection ? ( // tutorial
<Section title="Recollection">
{data.rec_text}
{recollection_categories.map(cat => {
return (
<Fragment key={cat.name} >
<br />
<Button
content={`${cat.name} - ${cat.desc}`}
onClick={() => act('rec_category', {
"category": cat.name,
})} />
</Fragment>
);
})}
{data.rec_section}
{data.rec_binds}
</Section>
) : (
<Fragment>
<Section title="Power">
<b>
{power <= 1000 ? (
`${power} W`
) : (
`${round(power/1000, 2)} kW`
)}
</b>
</Section>
<Section title="Recital">
{data.tier_info}
{data.scripturecolors}
<Tabs>
{map((cat_contents, category) => {
const contents = cat_contents || [];
return (
<Tabs.Tab
key={category}
label={category}>
<Section>
<LabeledList>
{contents.map(script => {
return (
<LabeledList.Item
key={script.name}
label={script.name}
buttons={(
<Fragment>
<Button
content={`Recite
(${script.required} W)`}
disabled={script.required < power}
onClick={() => act('recite', {
'script': script.name,
})} />
<Button
content={script.quickbind ? (
`Unbind ${script.quickbind}`
) : (
'Quickbind'
)}
onClick={() => act('bind', {
'script': script.name,
})} />
</Fragment>
)}>
{`${script.descname} ${script.invokers}`}
</LabeledList.Item>
);
})}
</LabeledList>
</Section>
</Tabs.Tab>
);
})(scripture)}
</Tabs>
</Section>
</Fragment>
)}
</Fragment>
</Window.Content>
</Window>
);
};