145 lines
3.9 KiB
JavaScript
145 lines
3.9 KiB
JavaScript
import { toTitleCase } from 'common/string';
|
|
import { Component, Fragment } from 'inferno';
|
|
import { useBackend } from '../backend';
|
|
import { BlockQuote, Box, Button, NumberInput, Section, Table } from '../components';
|
|
|
|
export const OreRedemptionMachine = props => {
|
|
const { act, data } = useBackend(props);
|
|
const {
|
|
unclaimedPoints,
|
|
materials,
|
|
alloys,
|
|
diskDesigns,
|
|
hasDisk,
|
|
} = data;
|
|
return (
|
|
<Fragment>
|
|
<Section>
|
|
<BlockQuote mb={1}>
|
|
This machine only accepts ore.<br />
|
|
Gibtonite and Slag are not accepted.
|
|
</BlockQuote>
|
|
<Box>
|
|
<Box inline color="label" mr={1}>
|
|
Unclaimed points:
|
|
</Box>
|
|
{unclaimedPoints}
|
|
<Button
|
|
ml={2}
|
|
content="Claim"
|
|
disabled={unclaimedPoints === 0}
|
|
onClick={() => act('Claim')} />
|
|
</Box>
|
|
</Section>
|
|
<Section>
|
|
{hasDisk && (
|
|
<Fragment>
|
|
<Box mb={1}>
|
|
<Button
|
|
icon="eject"
|
|
content="Eject design disk"
|
|
onClick={() => act('diskEject')} />
|
|
</Box>
|
|
<Table>
|
|
{diskDesigns.map(design => (
|
|
<Table.Row key={design.index}>
|
|
<Table.Cell>
|
|
File {design.index}: {design.name}
|
|
</Table.Cell>
|
|
<Table.Cell collapsing>
|
|
<Button
|
|
disabled={!design.canupload}
|
|
content="Upload"
|
|
onClick={() => act('diskUpload', {
|
|
design: design.index,
|
|
})} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
))}
|
|
</Table>
|
|
</Fragment>
|
|
) || (
|
|
<Button
|
|
icon="save"
|
|
content="Insert design disk"
|
|
onClick={() => act('diskInsert')} />
|
|
)}
|
|
</Section>
|
|
<Section title="Materials">
|
|
<Table>
|
|
{materials.map(material => (
|
|
<MaterialRow
|
|
key={material.id}
|
|
material={material}
|
|
onRelease={amount => act('Release', {
|
|
id: material.id,
|
|
sheets: amount,
|
|
})} />
|
|
))}
|
|
</Table>
|
|
</Section>
|
|
<Section title="Alloys">
|
|
<Table>
|
|
{alloys.map(material => (
|
|
<MaterialRow
|
|
key={material.id}
|
|
material={material}
|
|
onRelease={amount => act('Smelt', {
|
|
id: material.id,
|
|
sheets: amount,
|
|
})} />
|
|
))}
|
|
</Table>
|
|
</Section>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
class MaterialRow extends Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
amount: 1,
|
|
};
|
|
}
|
|
|
|
render() {
|
|
const { amount } = this.state;
|
|
const { material, onRelease } = this.props;
|
|
const amountAvailable = Math.floor(material.amount);
|
|
return (
|
|
<Table.Row>
|
|
<Table.Cell>
|
|
{toTitleCase(material.name).replace('Alloy', '')}
|
|
</Table.Cell>
|
|
<Table.Cell collapsing textAlign="right">
|
|
<Box mr={2} color="label" inline>
|
|
{material.value && material.value + ' cr'}
|
|
</Box>
|
|
</Table.Cell>
|
|
<Table.Cell collapsing textAlign="right">
|
|
<Box mr={2} color="label" inline>
|
|
{amountAvailable} sheets
|
|
</Box>
|
|
</Table.Cell>
|
|
<Table.Cell collapsing>
|
|
<NumberInput
|
|
width="32px"
|
|
step={1}
|
|
stepPixelSize={5}
|
|
minValue={1}
|
|
maxValue={50}
|
|
value={amount}
|
|
onChange={(e, value) => this.setState({
|
|
amount: value,
|
|
})} />
|
|
<Button
|
|
disabled={amountAvailable < 1}
|
|
content="Release"
|
|
onClick={() => onRelease(amount)} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
);
|
|
}
|
|
}
|