mirror of
https://github.com/fulpstation/fulpstation.git
synced 2025-12-10 10:01:40 +00:00
404 lines
12 KiB
JavaScript
404 lines
12 KiB
JavaScript
import { multiline } from 'common/string';
|
|
import { Fragment } from 'inferno';
|
|
import { useBackend } from '../backend';
|
|
import { Box, Button, Grid, Section, Table, Tooltip } from '../components';
|
|
|
|
export const ComputerFabricator = props => {
|
|
const { state } = props;
|
|
const { act, data } = useBackend(props);
|
|
return (
|
|
<Fragment>
|
|
<Section italic fontSize="20px">
|
|
Your perfect device, only three steps away...
|
|
</Section>
|
|
{data.state !== 0 && (
|
|
<Button
|
|
fluid
|
|
mb={1}
|
|
icon="circle"
|
|
content="Clear Order"
|
|
onClick={() => act('clean_order')} />
|
|
)}
|
|
<CFScreen state={state} />
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
// This had a pretty gross backend so this was unfortunately one of the
|
|
// best ways of doing it.
|
|
const CFScreen = props => {
|
|
const { act, data } = useBackend(props);
|
|
if (data.state === 0) {
|
|
return (
|
|
<Section
|
|
title="Step 1"
|
|
minHeight={51}>
|
|
<Box
|
|
mt={5}
|
|
bold
|
|
textAlign="center"
|
|
fontSize="40px">
|
|
Choose your Device
|
|
</Box>
|
|
<Box mt={3}>
|
|
<Grid width="100%">
|
|
<Grid.Column>
|
|
<Button
|
|
fluid
|
|
icon="laptop"
|
|
content="Laptop"
|
|
textAlign="center"
|
|
fontSize="30px"
|
|
lineHeight="50px"
|
|
onClick={() => act('pick_device', {
|
|
pick: '1',
|
|
})} />
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Button
|
|
fluid
|
|
icon="tablet-alt"
|
|
content="Tablet"
|
|
textAlign="center"
|
|
fontSize="30px"
|
|
lineHeight="50px"
|
|
onClick={() => act('pick_device', {
|
|
pick: '2',
|
|
})} />
|
|
</Grid.Column>
|
|
</Grid>
|
|
</Box>
|
|
</Section>
|
|
);
|
|
}
|
|
if (data.state === 1) {
|
|
return (
|
|
<Section
|
|
title="Step 2: Customize your device"
|
|
minHeight={47}
|
|
buttons={(
|
|
<Box bold color="good">
|
|
{data.totalprice} cr
|
|
</Box>
|
|
)}>
|
|
<Table>
|
|
<Table.Row>
|
|
<Table.Cell
|
|
bold
|
|
position="relative">
|
|
Battery:
|
|
<Tooltip
|
|
content={multiline`
|
|
Allows your device to operate without external utility power
|
|
source. Advanced batteries increase battery life.
|
|
`}
|
|
position="right" />
|
|
</Table.Cell>
|
|
<Table.Cell >
|
|
<Button
|
|
content="Standard"
|
|
selected={data.hw_battery === 1}
|
|
onClick={() => act('hw_battery', {
|
|
battery: '1',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Upgraded"
|
|
selected={data.hw_battery === 2}
|
|
onClick={() => act('hw_battery', {
|
|
battery: '2',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Advanced"
|
|
selected={data.hw_battery === 3}
|
|
onClick={() => act('hw_battery', {
|
|
battery: '3',
|
|
})} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell
|
|
bold
|
|
position="relative">
|
|
Hard Drive:
|
|
<Tooltip
|
|
content={multiline`
|
|
Stores file on your device. Advanced drives can store more
|
|
files, but use more power, shortening battery life.
|
|
`}
|
|
position="right" />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Standard"
|
|
selected={data.hw_disk === 1}
|
|
onClick={() => act('hw_disk', {
|
|
disk: '1',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Upgraded"
|
|
selected={data.hw_disk === 2}
|
|
onClick={() => act('hw_disk', {
|
|
disk: '2',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Advanced"
|
|
selected={data.hw_disk === 3}
|
|
onClick={() => act('hw_disk', {
|
|
disk: '3',
|
|
})} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell bold position="relative">
|
|
Network Card:
|
|
<Tooltip
|
|
content={multiline`
|
|
Allows your device to wirelessly connect to stationwide NTNet
|
|
network. Basic cards are limited to on-station use, while
|
|
advanced cards can operate anywhere near the station, which
|
|
includes asteroid outposts
|
|
`}
|
|
position="right" />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="None"
|
|
selected={data.hw_netcard === 0}
|
|
onClick={() => act('hw_netcard', {
|
|
netcard: '0',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Standard"
|
|
selected={data.hw_netcard === 1}
|
|
onClick={() => act('hw_netcard', {
|
|
netcard: '1',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Advanced"
|
|
selected={data.hw_netcard === 2}
|
|
onClick={() => act('hw_netcard', {
|
|
netcard: '2',
|
|
})} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell bold position="relative">
|
|
Nano Printer:
|
|
<Tooltip
|
|
content={multiline`
|
|
A device that allows for various paperwork manipulations,
|
|
such as, scanning of documents or printing new ones.
|
|
This device was certified EcoFriendlyPlus and is capable of
|
|
recycling existing paper for printing purposes.
|
|
`}
|
|
position="right" />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="None"
|
|
selected={data.hw_nanoprint === 0}
|
|
onClick={() => act('hw_nanoprint', {
|
|
print: '0',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Standard"
|
|
selected={data.hw_nanoprint === 1}
|
|
onClick={() => act('hw_nanoprint', {
|
|
print: '1',
|
|
})} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell bold position="relative">
|
|
Card Reader:
|
|
<Tooltip
|
|
content={multiline`
|
|
Adds a slot that allows you to manipulate RFID cards.
|
|
Please note that this is not necessary to allow the device
|
|
to read your identification, it is just necessary to
|
|
manipulate other cards.
|
|
`}
|
|
position="right" />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="None"
|
|
selected={data.hw_card === 0}
|
|
onClick={() => act('hw_card', {
|
|
card: '0',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Standard"
|
|
selected={data.hw_card === 1}
|
|
onClick={() => act('hw_card', {
|
|
card: '1',
|
|
})} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{data.devtype !== 2 && (
|
|
<Fragment>
|
|
<Table.Row>
|
|
<Table.Cell bold position="relative">
|
|
Processor Unit:
|
|
<Tooltip
|
|
content={multiline`
|
|
A component critical for your device's functionality.
|
|
It allows you to run programs from your hard drive.
|
|
Advanced CPUs use more power, but allow you to run
|
|
more programs on background at once.
|
|
`}
|
|
position="right" />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Standard"
|
|
selected={data.hw_cpu === 1}
|
|
onClick={() => act('hw_cpu', {
|
|
cpu: '1',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Advanced"
|
|
selected={data.hw_cpu === 2}
|
|
onClick={() => act('hw_cpu', {
|
|
cpu: '2',
|
|
})} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
<Table.Row>
|
|
<Table.Cell bold position="relative">
|
|
Tesla Relay:
|
|
<Tooltip
|
|
content={multiline`
|
|
An advanced wireless power relay that allows your device
|
|
to connect to nearby area power controller to provide
|
|
alternative power source. This component is currently
|
|
unavailable on tablet computers due to size restrictions.
|
|
`}
|
|
position="right" />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="None"
|
|
selected={data.hw_tesla === 0}
|
|
onClick={() => act('hw_tesla', {
|
|
tesla: '0',
|
|
})} />
|
|
</Table.Cell>
|
|
<Table.Cell>
|
|
<Button
|
|
content="Standard"
|
|
selected={data.hw_tesla === 1}
|
|
onClick={() => act('hw_tesla', {
|
|
tesla: '1',
|
|
})} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
</Fragment>
|
|
)}
|
|
</Table>
|
|
<Button
|
|
fluid
|
|
mt={3}
|
|
content="Confirm Order"
|
|
color="good"
|
|
textAlign="center"
|
|
fontSize="18px"
|
|
lineHeight="26px"
|
|
onClick={() => act('confirm_order')} />
|
|
</Section>
|
|
);
|
|
}
|
|
if (data.state === 2) {
|
|
return (
|
|
<Section
|
|
title="Step 3: Payment"
|
|
minHeight={47}>
|
|
<Box
|
|
italic
|
|
textAlign="center"
|
|
fontSize="20px">
|
|
Your device is ready for fabrication...
|
|
</Box>
|
|
<Box
|
|
bold
|
|
mt={2}
|
|
textAlign="center"
|
|
fontSize="16px">
|
|
<Box inline>
|
|
Please insert the required
|
|
</Box>
|
|
{' '}
|
|
<Box inline color="good">
|
|
{data.totalprice} cr
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
bold
|
|
mt={1}
|
|
textAlign="center"
|
|
fontSize="18px">
|
|
Current:
|
|
</Box>
|
|
<Box
|
|
bold
|
|
mt={0.5}
|
|
textAlign="center"
|
|
fontSize="18px"
|
|
color={data.credits >= data.totalprice ? "good" : "bad"}>
|
|
{data.credits} cr
|
|
</Box>
|
|
<Button
|
|
fluid
|
|
content="Purchase"
|
|
disabled={data.credits < data.totalprice}
|
|
mt={8}
|
|
color="good"
|
|
textAlign="center"
|
|
fontSize="20px"
|
|
lineHeight="28px"
|
|
onClick={() => act('purchase')} />
|
|
</Section>
|
|
);
|
|
}
|
|
if (data.state === 3) {
|
|
return (
|
|
<Section
|
|
minHeight={47}>
|
|
<Box
|
|
bold
|
|
textAlign="center"
|
|
fontSize="28px"
|
|
mt={10}>
|
|
Thank you for your purchase!
|
|
</Box>
|
|
<Box
|
|
italic
|
|
mt={1}
|
|
textAlign="center">
|
|
If you experience any difficulties with your new device, please
|
|
contact your local network administrator.
|
|
</Box>
|
|
</Section>
|
|
);
|
|
}
|
|
return null;
|
|
};
|