Fucked up a little

This commit is contained in:
Artur
2020-05-14 14:13:54 +03:00
parent 1682cfd3fd
commit d1d3774e1a
2 changed files with 148 additions and 116 deletions

View File

@@ -1,124 +1,157 @@
import { Window } from 'inferno';
import { useBackend } from '../backend'; import { useBackend } from '../backend';
import { Box, Section, LabeledList, Button, ProgressBar } from '../components'; import { Button, LabeledList, Section, Tabs, Input } from '../components';
import { Fragment } from 'inferno';
import { Window } from '../layouts';
export const Sleeper = (props, context) => {
const { act, data } = useBackend(context);
export const ClockworkSlab = props => {
const { act, data } = useBackend(props);
const { const {
open, recollection,
occupant = {}, rec_text,
occupied, recollection_categories,
rec_section,
rec_binds,
} = data; } = data;
const preSortChems = data.chems || [];
const chems = preSortChems.sort((a, b) => {
const descA = a.name.toLowerCase();
const descB = b.name.toLowerCase();
if (descA < descB) {
return -1;
}
if (descA > descB) {
return 1;
}
return 0;
});
const damageTypes = [
{
label: 'Brute',
type: 'bruteLoss',
},
{
label: 'Burn',
type: 'fireLoss',
},
{
label: 'Toxin',
type: 'toxLoss',
},
{
label: 'Oxygen',
type: 'oxyLoss',
},
];
return ( return (
<Window> <Window style="clockwork">
<Window.Content> <Section>
<Section <Button
title={occupant.name ? occupant.name : 'No Occupant'} content={recollection ? "Recital" : "Recollection"}
minHeight="210px" onClick={() => act('toggle')}
buttons={!!occupant.stat && ( />
<Box </Section>
inline {!!recollection && (
bold <Section title="Recollection">
color={occupant.statstate}> {rec_text}
{occupant.stat} {recollection_categories.map(categories => {
</Box> return (
)}> <Window>
{!!occupied && ( <br key='weh'/>
<Fragment> <Button
<ProgressBar content={`${categories.name} - ${categories.desc}`}
value={occupant.health} onClick={() => act('rec_category', {
minValue={occupant.minHealth} "category": categories.name,
maxValue={occupant.maxHealth} })} />
ranges={{ </Window>
good: [50, Infinity], );
average: [0, 50], })}
bad: [-Infinity, 0], {rec_section}
}} /> {rec_binds}
<Box mt={1} />
<LabeledList>
{damageTypes.map(type => (
<LabeledList.Item
key={type.type}
label={type.label}>
<ProgressBar
value={occupant[type.type]}
minValue={0}
maxValue={occupant.maxHealth}
color="bad" />
</LabeledList.Item>
))}
<LabeledList.Item
label="Cells"
color={occupant.cloneLoss ? 'bad' : 'good'}>
{occupant.cloneLoss ? 'Damaged' : 'Healthy'}
</LabeledList.Item>
<LabeledList.Item
label="Brain"
color={occupant.brainLoss ? 'bad' : 'good'}>
{occupant.brainLoss ? 'Abnormal' : 'Healthy'}
</LabeledList.Item>
</LabeledList>
</Fragment>
)}
</Section> </Section>
<Section )}
title="Medicines" {recollection && (
minHeight="205px" <Window>
buttons={( <Section title="Power">
<Button {data.power}
icon={open ? 'door-open' : 'door-closed'} </Section>
content={open ? 'Open' : 'Closed'} <Section title="Recital">
onClick={() => act('door')} /> {data.tier_info}
)}> {data.scripturecolors}
{chems.map(chem => ( <Tabs>
<Button <Tabs.Tab
key={chem.name} key="driver"
icon="flask" label="Driver">
content={chem.name} {() => (
disabled={!(occupied && chem.allowed)} <Section>
width="140px" <LabeledList>
onClick={() => act('inject', { {data.scripture.driver.map(script => { // HEY! Make sure the data gets built byondside!
chem: chem.id, return (
})} <LabeledList.Item
/> key={script.name}
))} label={script.name} // should i just md5 this and cut
</Section> buttons={(
</Window.Content> <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 => { // HEY! Make sure the data gets built byondside!
return (
<LabeledList.Item
key={script.name}
label={script.name} // should i just md5 this and cut
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 => { // HEY! Make sure the data gets built byondside!
return (
<LabeledList.Item
key={script.name}
label={script.name} // should i just md5 this and cut
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>
)}
</Window> </Window>
); );
}; };

View File

@@ -1,6 +1,5 @@
import { useBackend } from '../backend'; import { useBackend } from '../backend';
import { Box, Section, LabeledList, Button, ProgressBar, AnimatedNumber } from '../components'; import { Box, Section, LabeledList, Button, ProgressBar, AnimatedNumber } from '../components';
import { Fragment } from 'inferno';
import { Window } from '../layouts'; import { Window } from '../layouts';
export const Sleeper = props => { export const Sleeper = props => {
@@ -70,7 +69,7 @@ export const Sleeper = props => {
</Box> </Box>
)}> )}>
{!!occupied && ( {!!occupied && (
<Fragment> <Window>
<ProgressBar <ProgressBar
value={occupant.health} value={occupant.health}
minValue={occupant.minHealth} minValue={occupant.minHealth}
@@ -113,7 +112,7 @@ export const Sleeper = props => {
{occupant.brainLoss ? 'Abnormal' : 'Healthy'} {occupant.brainLoss ? 'Abnormal' : 'Healthy'}
</LabeledList.Item> </LabeledList.Item>
</LabeledList> </LabeledList>
</Fragment> </Window>
)} )}
</Section> </Section>
<Section title="Chemical Analysis"> <Section title="Chemical Analysis">