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 || []; return (
const chems = preSortChems.sort((a, b) => { <Window style="clockwork">
const descA = a.name.toLowerCase(); <Section>
const descB = b.name.toLowerCase(); <Button
if (descA < descB) { content={recollection ? "Recital" : "Recollection"}
return -1; onClick={() => act('toggle')}
} />
if (descA > descB) { </Section>
return 1; {!!recollection && (
} <Section title="Recollection">
return 0; {rec_text}
}); {recollection_categories.map(categories => {
const damageTypes = [
{
label: 'Brute',
type: 'bruteLoss',
},
{
label: 'Burn',
type: 'fireLoss',
},
{
label: 'Toxin',
type: 'toxLoss',
},
{
label: 'Oxygen',
type: 'oxyLoss',
},
];
return ( return (
<Window> <Window>
<Window.Content> <br key='weh'/>
<Section
title={occupant.name ? occupant.name : 'No Occupant'}
minHeight="210px"
buttons={!!occupant.stat && (
<Box
inline
bold
color={occupant.statstate}>
{occupant.stat}
</Box>
)}>
{!!occupied && (
<Fragment>
<ProgressBar
value={occupant.health}
minValue={occupant.minHealth}
maxValue={occupant.maxHealth}
ranges={{
good: [50, Infinity],
average: [0, 50],
bad: [-Infinity, 0],
}} />
<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
title="Medicines"
minHeight="205px"
buttons={(
<Button <Button
icon={open ? 'door-open' : 'door-closed'} content={`${categories.name} - ${categories.desc}`}
content={open ? 'Open' : 'Closed'} onClick={() => act('rec_category', {
onClick={() => act('door')} /> "category": categories.name,
)}> })} />
{chems.map(chem => ( </Window>
<Button );
key={chem.name}
icon="flask"
content={chem.name}
disabled={!(occupied && chem.allowed)}
width="140px"
onClick={() => act('inject', {
chem: chem.id,
})} })}
/> {rec_section}
))} {rec_binds}
</Section> </Section>
</Window.Content> )}
{recollection && (
<Window>
<Section title="Power">
{data.power}
</Section>
<Section title="Recital">
{data.tier_info}
{data.scripturecolors}
<Tabs>
<Tabs.Tab
key="driver"
label="Driver">
{() => (
<Section>
<LabeledList>
{data.scripture.driver.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="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">