[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:
CHOMPStation2
2024-09-07 13:50:23 -07:00
committed by GitHub
parent f368c0af3b
commit 1e8be29c71
3 changed files with 264 additions and 222 deletions

View File

@@ -108,6 +108,16 @@
if("set_matrix_color")
color_matrix_last[params["color"]] = params["value"]
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")
build_hue = clamp(text2num(params["buildhue"]), 0, 360)
return TRUE

View File

@@ -189,6 +189,16 @@
if("set_matrix_color")
color_matrix_last[params["color"]] = params["value"]
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")
build_hue = clamp(text2num(params["buildhue"]), 0, 360)
return TRUE

View File

@@ -1,7 +1,14 @@
import { toFixed } from 'common/math';
import { useBackend } from '../../backend';
import { Icon, NumberInput, Table } from '../../components';
import {
Box,
Icon,
Input,
LabeledList,
NumberInput,
Table,
} from '../../components';
import { Data } from './types';
export const ColorMateMatrix = (props) => {
@@ -10,226 +17,241 @@ export const ColorMateMatrix = (props) => {
const { matrixcolors } = data;
return (
<Table>
<Table.Cell>
<Table.Row>
RR:
<NumberInput
width="50px"
minValue={-10}
maxValue={10}
step={0.01}
value={matrixcolors.rr}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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>
<>
<Table>
<Table.Cell>
<Table.Row>
RR:
<NumberInput
width="50px"
minValue={-10}
maxValue={10}
step={0.01}
value={matrixcolors.rr}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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}
format={(value: number) => toFixed(value, 2)}
onChange={(value: number) =>
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>
<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>
</>
);
};