Clockwerkslab

Doesnt work yet.
This commit is contained in:
Artur
2020-05-06 21:23:12 +03:00
parent 2ec9068cbf
commit f3ee184672
3 changed files with 159 additions and 138 deletions

View File

@@ -1,144 +1,165 @@
import { map } from 'common/collections';
import { Fragment } from 'inferno'; import { Fragment } from 'inferno';
import { useBackend, useSharedState } from '../backend'; import { useBackend } from '../backend';
import { Button, Flex, LabeledList, NoticeBox, Section, Tabs } from '../components'; import { Button, LabeledList, Section, Tabs, Input } from '../components';
import { Window } from '../layouts';
export const ClockworkSlab = (props, context) => {
const { act, data } = useBackend(context); export const ClockworkSlab = props => {
const { act, data } = useBackend(props);
const { const {
detail_view, recollection,
disk, rec_text,
has_disk, recollection_categories,
has_program, rec_section,
scriptures = {}, rec_binds,
} = data; } = data;
const [
selectedCategory,
setSelectedCategory,
] = useSharedState(context, 'category');
const scriptureInCategory = scriptures
&& scriptures[selectedCategory]
|| [];
return ( return (
<Window resizable> <Fragment theme="syndicate">
<Window.Content scrollable> <Section>
<Section <Button
title="Program Disk" content={recollection ? "Recital" : "Recollection"}
buttons={( onClick={() => act('toggle')}
<Fragment> />
<Button </Section>
icon="eject" {!!recollection && (
content="Eject" <Section title="Recollection">
onClick={() => act('eject')} /> {rec_text}
<Button {recollection_categories.map(categories => {
icon="minus-circle" return (
content="Delete Program" <Fragment key={categories.name} >
onClick={() => act('clear')} /> <br />
</Fragment> <Button
)}> content={`${categories.name} - ${categories.desc}`}
{has_disk ? ( onClick={() => act('rec_category', {
has_program ? ( "category": categories.name,
<LabeledList> })} />
<LabeledList.Item label="Program Name"> </Fragment>
{disk.name} );
</LabeledList.Item> })}
<LabeledList.Item label="Description"> {rec_section}
{disk.desc} {rec_binds}
</LabeledList.Item>
</LabeledList>
) : (
<NoticeBox>
No Program Installed
</NoticeBox>
)
) : (
<NoticeBox>
Insert Disk
</NoticeBox>
)}
</Section> </Section>
<Section )}
title="Scripture" {recollection && (
buttons={( <Fragment>
<Fragment> <Section title="Power">
<Button {data.power}
icon={detail_view ? 'info' : 'list'} </Section>
content={detail_view ? 'Detailed' : 'Compact'} <Section title="Recital">
onClick={() => act('toggle_details')} /> {data.tier_info}
<Button {data.scripturecolors}
icon="sync" <Tabs>
content="Sync Research" <Tabs.Tab
onClick={() => act('refresh')} /> key="driver"
</Fragment> label="Driver">
)}> {() => (
{scriptures !== null ? ( <Section>
<Flex> <LabeledList>
<Flex.Item minWidth="110px"> {data.scripture.driver.map(script => {
<Tabs vertical> return (
{map((cat_contents, category) => { <LabeledList.Item
const progs = cat_contents || []; key={script.name}
// Backend was sending stupid data that would have been label={script.name}
// annoying to fix buttons={(
const tabLabel = category <Fragment>
.substring(0, category.length - 8); <Button
return ( content={`Recite (${script.required} W)`}
<Tabs.Tab onClick={() => act('recite', {
key={category} 'category': script.name,
selected={category === selectedCategory} })} />
onClick={() => setSelectedCategory(category)}> <Button
{tabLabel} content={
</Tabs.Tab> script.quickbind
); ? `Unbind ${script.quickbind}`
})(scriptures)} : 'Quickbind'
</Tabs> }
</Flex.Item> onClick={() => act('bind', {
<Flex.Item grow={1} basis={0}> 'category': script.name,
{detail_view ? ( })} />
scriptureInCategory.map(program => ( </Fragment>
<Section )}>
key={program.id} {`${script.descname} ${script.invokers}`}
title={program.name} </LabeledList.Item>
level={2} );
buttons={( })}
<Button </LabeledList>
icon="download" </Section>
content="Download"
disabled={!has_disk}
onClick={() => act('download', {
program_id: program.id,
})} />
)}>
{program.desc}
</Section>
))
) : (
<LabeledList>
{scriptureInCategory.map(program => (
<LabeledList.Item
key={program.id}
label={program.name}
buttons={(
<Button
icon="download"
content="Download"
disabled={!has_disk}
onClick={() => act('download', {
program_id: program.id,
})} />
)} />
))}
</LabeledList>
)} )}
</Flex.Item> </Tabs.Tab>
</Flex> <Tabs.Tab
) : ( key="script"
<NoticeBox> label="Script">
No nanite scriptures are currently researched. {() => (
</NoticeBox> <Section>
)} <LabeledList>
</Section> {data.scripture.script.map(script => {
</Window.Content> return (
</Window> <LabeledList.Item
key={script.name}
label={script.name}
buttons={(
<Fragment>
<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,
})} />
</Fragment>
)}>
{`${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={(
<Fragment>
<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,
})} />
</Fragment>
)}>
{`${script.descname} ${script.invokers}`}
</LabeledList.Item>
);
})}
</LabeledList>
</Section>
)}
</Tabs.Tab>
</Tabs>
</Section>
</Fragment>
)}
</Fragment>
); );
}; };

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long