mirror of
https://github.com/CHOMPStation2/CHOMPStation2.git
synced 2025-12-11 02:34:00 +00:00
[MIRROR] Adds config Input to the colorMatrix (#8922)
Co-authored-by: Heroman3003 <31296024+Heroman3003@users.noreply.github.com> Co-authored-by: CHOMPStation2 <chompsation2@gmail.com>
This commit is contained in:
@@ -108,6 +108,16 @@
|
|||||||
if("set_matrix_color")
|
if("set_matrix_color")
|
||||||
color_matrix_last[params["color"]] = params["value"]
|
color_matrix_last[params["color"]] = params["value"]
|
||||||
return TRUE
|
return TRUE
|
||||||
|
if("set_matrix_string")
|
||||||
|
if(params["value"])
|
||||||
|
var/list/colours = splittext(params["value"], ",")
|
||||||
|
if(colours.len > 12)
|
||||||
|
colours.Cut(13)
|
||||||
|
for(var/i = 1, i <= colours.len, i++)
|
||||||
|
var/number = text2num(colours[i])
|
||||||
|
if(isnum(number))
|
||||||
|
color_matrix_last[i] = clamp(number, -10, 10)
|
||||||
|
return TRUE
|
||||||
if("set_hue")
|
if("set_hue")
|
||||||
build_hue = clamp(text2num(params["buildhue"]), 0, 360)
|
build_hue = clamp(text2num(params["buildhue"]), 0, 360)
|
||||||
return TRUE
|
return TRUE
|
||||||
|
|||||||
@@ -189,6 +189,16 @@
|
|||||||
if("set_matrix_color")
|
if("set_matrix_color")
|
||||||
color_matrix_last[params["color"]] = params["value"]
|
color_matrix_last[params["color"]] = params["value"]
|
||||||
return TRUE
|
return TRUE
|
||||||
|
if("set_matrix_string")
|
||||||
|
if(params["value"])
|
||||||
|
var/list/colours = splittext(params["value"], ",")
|
||||||
|
if(colours.len > 12)
|
||||||
|
colours.Cut(13)
|
||||||
|
for(var/i = 1, i <= colours.len, i++)
|
||||||
|
var/number = text2num(colours[i])
|
||||||
|
if(isnum(number))
|
||||||
|
color_matrix_last[i] = clamp(number, -10, 10)
|
||||||
|
return TRUE
|
||||||
if("set_hue")
|
if("set_hue")
|
||||||
build_hue = clamp(text2num(params["buildhue"]), 0, 360)
|
build_hue = clamp(text2num(params["buildhue"]), 0, 360)
|
||||||
return TRUE
|
return TRUE
|
||||||
|
|||||||
@@ -1,7 +1,14 @@
|
|||||||
import { toFixed } from 'common/math';
|
import { toFixed } from 'common/math';
|
||||||
|
|
||||||
import { useBackend } from '../../backend';
|
import { useBackend } from '../../backend';
|
||||||
import { Icon, NumberInput, Table } from '../../components';
|
import {
|
||||||
|
Box,
|
||||||
|
Icon,
|
||||||
|
Input,
|
||||||
|
LabeledList,
|
||||||
|
NumberInput,
|
||||||
|
Table,
|
||||||
|
} from '../../components';
|
||||||
import { Data } from './types';
|
import { Data } from './types';
|
||||||
|
|
||||||
export const ColorMateMatrix = (props) => {
|
export const ColorMateMatrix = (props) => {
|
||||||
@@ -10,226 +17,241 @@ export const ColorMateMatrix = (props) => {
|
|||||||
const { matrixcolors } = data;
|
const { matrixcolors } = data;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Table>
|
<>
|
||||||
<Table.Cell>
|
<Table>
|
||||||
<Table.Row>
|
<Table.Cell>
|
||||||
RR:
|
<Table.Row>
|
||||||
<NumberInput
|
RR:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.rr}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.rr}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 1,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 1,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
<Table.Row>
|
</Table.Row>
|
||||||
GR:
|
<Table.Row>
|
||||||
<NumberInput
|
GR:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.gr}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.gr}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 4,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 4,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
<Table.Row>
|
</Table.Row>
|
||||||
BR:
|
<Table.Row>
|
||||||
<NumberInput
|
BR:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.br}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.br}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 7,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 7,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
</Table.Cell>
|
</Table.Row>
|
||||||
<Table.Cell>
|
</Table.Cell>
|
||||||
<Table.Row>
|
<Table.Cell>
|
||||||
RG:
|
<Table.Row>
|
||||||
<NumberInput
|
RG:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.rg}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.rg}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 2,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 2,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
<Table.Row>
|
</Table.Row>
|
||||||
GG:
|
<Table.Row>
|
||||||
<NumberInput
|
GG:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.gg}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.gg}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 5,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 5,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
<Table.Row>
|
</Table.Row>
|
||||||
BG:
|
<Table.Row>
|
||||||
<NumberInput
|
BG:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.bg}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.bg}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 8,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 8,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
</Table.Cell>
|
</Table.Row>
|
||||||
<Table.Cell>
|
</Table.Cell>
|
||||||
<Table.Row>
|
<Table.Cell>
|
||||||
RB:
|
<Table.Row>
|
||||||
<NumberInput
|
RB:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.rb}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.rb}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 3,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 3,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
<Table.Row>
|
</Table.Row>
|
||||||
GB:
|
<Table.Row>
|
||||||
<NumberInput
|
GB:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.gb}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.gb}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 6,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 6,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
<Table.Row>
|
</Table.Row>
|
||||||
BB:
|
<Table.Row>
|
||||||
<NumberInput
|
BB:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.bb}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.bb}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 9,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 9,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
</Table.Cell>
|
</Table.Row>
|
||||||
<Table.Cell>
|
</Table.Cell>
|
||||||
<Table.Row>
|
<Table.Cell>
|
||||||
CR:
|
<Table.Row>
|
||||||
<NumberInput
|
CR:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.cr}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.cr}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 10,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 10,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
<Table.Row>
|
</Table.Row>
|
||||||
CG:
|
<Table.Row>
|
||||||
<NumberInput
|
CG:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.cg}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.cg}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 11,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 11,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
<Table.Row>
|
</Table.Row>
|
||||||
CB:
|
<Table.Row>
|
||||||
<NumberInput
|
CB:
|
||||||
width="50px"
|
<NumberInput
|
||||||
minValue={-10}
|
width="50px"
|
||||||
maxValue={10}
|
minValue={-10}
|
||||||
step={0.01}
|
maxValue={10}
|
||||||
value={matrixcolors.cb}
|
step={0.01}
|
||||||
format={(value: number) => toFixed(value, 2)}
|
value={matrixcolors.cb}
|
||||||
onChange={(value: number) =>
|
format={(value: number) => toFixed(value, 2)}
|
||||||
act('set_matrix_color', {
|
onChange={(value: number) =>
|
||||||
color: 12,
|
act('set_matrix_color', {
|
||||||
value,
|
color: 12,
|
||||||
})
|
value,
|
||||||
}
|
})
|
||||||
/>
|
}
|
||||||
</Table.Row>
|
/>
|
||||||
</Table.Cell>
|
</Table.Row>
|
||||||
<Table.Cell width="40%">
|
</Table.Cell>
|
||||||
<Icon name="question-circle" color="blue" /> RG means red will become
|
<Table.Cell width="40%">
|
||||||
this much green.
|
<Icon name="question-circle" color="blue" /> RG means red will become
|
||||||
<br />
|
this much green.
|
||||||
<Icon name="question-circle" color="blue" /> CR means this much red will
|
<br />
|
||||||
be added.
|
<Icon name="question-circle" color="blue" /> CR means this much red
|
||||||
</Table.Cell>
|
will be added.
|
||||||
</Table>
|
</Table.Cell>
|
||||||
|
</Table>
|
||||||
|
<Box mt={3}>
|
||||||
|
<LabeledList>
|
||||||
|
<LabeledList.Item label="Config">
|
||||||
|
<Input
|
||||||
|
fluid
|
||||||
|
value={Object.values(matrixcolors).toString()}
|
||||||
|
onChange={(e, value: string) =>
|
||||||
|
act('set_matrix_string', { value })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</LabeledList.Item>
|
||||||
|
</LabeledList>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user