some tweaks!
This commit is contained in:
SandPoot
@@ -1,5 +1,5 @@
|
||||
import { useBackend } from '../backend';
|
||||
import { Button, Flex, Icon, NoticeBox, NumberInput, Section, Tabs } from '../components';
|
||||
import { Button, Icon, NoticeBox, NumberInput, Section, Table, Tabs, Slider } from '../components';
|
||||
import { Window } from '../layouts';
|
||||
|
||||
export const Colormate = (props, context) => {
|
||||
@@ -9,34 +9,38 @@ export const Colormate = (props, context) => {
|
||||
return (
|
||||
<Window width="980" height="720" resizable>
|
||||
<Window.Content overflow="auto">
|
||||
{temp ? (
|
||||
<NoticeBox>{temp}</NoticeBox>
|
||||
) : (null)}
|
||||
{Object.keys(item).length ? (
|
||||
<>
|
||||
<Flex fill>
|
||||
<Section width="50%" height="20%">
|
||||
<center>Item:</center>
|
||||
<img
|
||||
src={"data:image/jpeg;base64, " + item.sprite}
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{
|
||||
'-ms-interpolation-mode': 'nearest-neighbor',
|
||||
}} />
|
||||
</Section>
|
||||
<Section width="50%" height="20%">
|
||||
<center>Preview:</center>
|
||||
<img
|
||||
src={"data:image/jpeg;base64, " + item.preview}
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{
|
||||
'-ms-interpolation-mode': 'nearest-neighbor',
|
||||
}} />
|
||||
</Section>
|
||||
</Flex>
|
||||
<Section>
|
||||
<Section>
|
||||
{temp ? (
|
||||
<NoticeBox>{temp}</NoticeBox>
|
||||
) : (null)}
|
||||
{Object.keys(item).length ? (
|
||||
<>
|
||||
<Table>
|
||||
<Table.Cell width="50%">
|
||||
<Section>
|
||||
<center>Item:</center>
|
||||
<img
|
||||
src={"data:image/jpeg;base64, " + item.sprite}
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{
|
||||
'-ms-interpolation-mode': 'nearest-neighbor',
|
||||
}} />
|
||||
</Section>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Section>
|
||||
<center>Preview:</center>
|
||||
<img
|
||||
src={"data:image/jpeg;base64, " + item.preview}
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{
|
||||
'-ms-interpolation-mode': 'nearest-neighbor',
|
||||
}} />
|
||||
</Section>
|
||||
</Table.Cell>
|
||||
</Table>
|
||||
<Tabs fluid>
|
||||
<Tabs.Tab
|
||||
key="1"
|
||||
@@ -63,68 +67,54 @@ export const Colormate = (props, context) => {
|
||||
Matrix coloring (Advanced)
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
{}
|
||||
{activemode === 3 ? (
|
||||
<>
|
||||
<center>Coloring: {item.name}</center>
|
||||
<ColormateMatrix />
|
||||
</>
|
||||
) : activemode === 2 ? (
|
||||
<>
|
||||
<center>Coloring: {item.name}</center>
|
||||
<ColormateHSL />
|
||||
</>
|
||||
)
|
||||
: (
|
||||
<>
|
||||
<center>Coloring: {item.name}</center>
|
||||
<ColormateNoMatrix />
|
||||
</>
|
||||
)}
|
||||
</Section>
|
||||
</>
|
||||
) : (
|
||||
<Section>
|
||||
<center>Coloring: {item.name}</center>
|
||||
<Table mt={1}>
|
||||
<Table.Cell width="33%">
|
||||
<Button
|
||||
fluid
|
||||
content="Paint"
|
||||
icon="fill"
|
||||
onClick={() => act('paint')} />
|
||||
<Button
|
||||
fluid
|
||||
content="Clear"
|
||||
icon="eraser"
|
||||
onClick={() => act('clear')} />
|
||||
<Button
|
||||
fluid
|
||||
content="Eject"
|
||||
icon="eject"
|
||||
onClick={() => act('drop')} />
|
||||
</Table.Cell>
|
||||
<Table.Cell width="66%">
|
||||
{activemode === 1 ? (
|
||||
<ColormateTint />
|
||||
) : activemode === 2 ? (
|
||||
<ColormateHSV />
|
||||
) : (
|
||||
<ColormateMatrix />
|
||||
)}
|
||||
</Table.Cell>
|
||||
</Table>
|
||||
</>
|
||||
) : (
|
||||
<center>No item inserted.</center>
|
||||
</Section>
|
||||
)}
|
||||
)}
|
||||
</Section>
|
||||
</Window.Content>
|
||||
</Window>
|
||||
);
|
||||
};
|
||||
|
||||
export const ColormateNoMatrix = (props, context) => {
|
||||
export const ColormateTint = (props, context) => {
|
||||
const { act, data } = useBackend(context);
|
||||
return (
|
||||
<Section>
|
||||
<Flex grow={1} fill>
|
||||
<Flex.Item width="33%">
|
||||
<Button
|
||||
fluid
|
||||
content="Paint"
|
||||
icon="fill"
|
||||
onClick={() => act('paint')} />
|
||||
<Button
|
||||
fluid
|
||||
content="Clear"
|
||||
icon="eraser"
|
||||
onClick={() => act('clear')} />
|
||||
<Button
|
||||
fluid
|
||||
content="Eject"
|
||||
icon="eject"
|
||||
onClick={() => act('drop')} />
|
||||
</Flex.Item>
|
||||
<Flex.Item width="66%">
|
||||
<Button
|
||||
fluid
|
||||
height="100%"
|
||||
content="Select new color"
|
||||
icon="paint-brush"
|
||||
onClick={() => act('choose_color')} />
|
||||
</Flex.Item>
|
||||
</Flex>
|
||||
</Section>
|
||||
<Button
|
||||
fluid
|
||||
content="Select new color"
|
||||
icon="paint-brush"
|
||||
onClick={() => act('choose_color')}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -132,242 +122,211 @@ export const ColormateMatrix = (props, context) => {
|
||||
const { act, data } = useBackend(context);
|
||||
const matrixcolors = data.matrixcolors || [];
|
||||
return (
|
||||
<Section>
|
||||
<Flex>
|
||||
<Flex.Item width="33%">
|
||||
<Button
|
||||
fluid
|
||||
content="Paint"
|
||||
icon="fill"
|
||||
onClick={() => act('matrix_paint')} />
|
||||
<Button
|
||||
fluid
|
||||
content="Clear"
|
||||
icon="eraser"
|
||||
onClick={() => act('clear')} />
|
||||
<Button
|
||||
fluid
|
||||
content="Eject"
|
||||
icon="eject"
|
||||
onClick={() => act('drop')} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
<Flex.Item>
|
||||
RR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.rr}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 1,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
GR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.gr}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 4,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
BR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.br}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 7,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
<Flex.Item>
|
||||
RG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.rg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 2,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
GG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.gg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 5,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
BG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.bg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 8,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
<Flex.Item>
|
||||
RB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.rb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 3,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
GB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.gb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 6,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
BB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.bb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 9,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
<Flex.Item>
|
||||
CR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.cr}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 10,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
CG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.cg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 11,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
CB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.cb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 12,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
</Flex.Item>
|
||||
<Flex.Item width="33%">
|
||||
<Icon name="question-circle" color="blue" /> RG means red will become this much green.<br />
|
||||
<Icon name="question-circle" color="blue" /> CR means this much red will be added.
|
||||
</Flex.Item>
|
||||
</Flex>
|
||||
</Section>
|
||||
<Table>
|
||||
<Table.Cell>
|
||||
<Table.Row>
|
||||
RR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.rr}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 1,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
GR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.gr}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 4,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
BR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.br}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 7,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Table.Row>
|
||||
RG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.rg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 2,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
GG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.gg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 5,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
BG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.bg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 8,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Table.Row>
|
||||
RB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.rb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 3,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
GB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.gb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 6,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
BB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.bb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 9,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Table.Row>
|
||||
CR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.cr}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 10,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
CG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.cg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 11,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
CB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={matrixcolors.cb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 12,
|
||||
value,
|
||||
})} />
|
||||
</Table.Row>
|
||||
</Table.Cell>
|
||||
<Table.Cell width="40%">
|
||||
<Icon name="question-circle" color="blue" /> RG means red will become this much green.<br />
|
||||
<Icon name="question-circle" color="blue" /> CR means this much red will be added.
|
||||
</Table.Cell>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
export const ColormateHSL = (props, context) => {
|
||||
export const ColormateHSV = (props, context) => {
|
||||
const { act, data } = useBackend(context);
|
||||
const { buildhue, buildsat, buildval } = data;
|
||||
return (
|
||||
<Section>
|
||||
<Flex grow={1} fill>
|
||||
<Flex.Item width="33%">
|
||||
<Button
|
||||
fluid
|
||||
content="Paint"
|
||||
icon="fill"
|
||||
onClick={() => act('paint')} />
|
||||
<Button
|
||||
fluid
|
||||
content="Clear"
|
||||
icon="eraser"
|
||||
onClick={() => act('clear')} />
|
||||
<Button
|
||||
fluid
|
||||
content="Eject"
|
||||
icon="eject"
|
||||
onClick={() => act('drop')} />
|
||||
</Flex.Item>
|
||||
<Flex.Item width="66%">
|
||||
<Flex.Item>
|
||||
Hue: <NumberInput
|
||||
minValue={0}
|
||||
maxValue={360}
|
||||
step={1}
|
||||
value={buildhue}
|
||||
onDrag={(e, value) => act('set_hue', {
|
||||
buildhue: value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
Saturation: <NumberInput
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={buildsat}
|
||||
onDrag={(e, value) => act('set_sat', {
|
||||
buildsat: value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
Value: <NumberInput
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={buildval}
|
||||
onDrag={(e, value) => act('set_val', {
|
||||
buildval: value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
</Flex.Item>
|
||||
</Flex>
|
||||
</Section>
|
||||
<Table>
|
||||
<Table.Row>
|
||||
<center>Hue:</center>
|
||||
<Table.Cell width="85%">
|
||||
<Slider
|
||||
minValue={0}
|
||||
maxValue={360}
|
||||
step={1}
|
||||
value={buildhue}
|
||||
onDrag={(e, value) => act('set_hue', {
|
||||
buildhue: value,
|
||||
})} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<center>Saturation:</center>
|
||||
<Table.Cell>
|
||||
<Slider
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={buildsat}
|
||||
onDrag={(e, value) => act('set_sat', {
|
||||
buildsat: value,
|
||||
})} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<center>Value:</center>
|
||||
<Table.Cell>
|
||||
<Slider
|
||||
minValue={-10}
|
||||
maxValue={10}
|
||||
step={0.01}
|
||||
value={buildval}
|
||||
onDrag={(e, value) => act('set_val', {
|
||||
buildval: value,
|
||||
})} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user