Merge branch 'master' of https://github.com/Citadel-Station-13/Citadel-Station-13 into station_traits
This commit is contained in:
Putnam3145
@@ -98,3 +98,24 @@ $color-bg-section: base.$color-bg-section !default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: rgba($text-color, 0.05);
|
||||
border-left: 0.15em solid;
|
||||
border-color: $text-color;
|
||||
padding-left: 0.3em;
|
||||
padding-right: 0.3em;
|
||||
margin-bottom: 0.15em;
|
||||
margin-left: 0.3em;
|
||||
margin-right: 0em;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: rgba($text-color, 0.25);
|
||||
height: 0.15em;
|
||||
border-style: none;
|
||||
margin-left: 1em;
|
||||
margin-right: 2em;
|
||||
margin-bottom: 0.3em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
||||
@@ -447,6 +447,10 @@ em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote.warning {
|
||||
border-color: #c51e1e;
|
||||
}
|
||||
|
||||
.alertwarning {
|
||||
color: #FF0000;
|
||||
font-weight: bold;
|
||||
@@ -486,10 +490,18 @@ em {
|
||||
color: #9ab0ff;
|
||||
}
|
||||
|
||||
blockquote.info {
|
||||
border-color: #9ab0ff;
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: #6685f5;
|
||||
}
|
||||
|
||||
blockquote.notice {
|
||||
border-color: #6685f5;
|
||||
}
|
||||
|
||||
.tinynotice {
|
||||
color: #6685f5;
|
||||
font-size: 85%;
|
||||
@@ -545,18 +557,34 @@ em {
|
||||
color: #059223;
|
||||
}
|
||||
|
||||
blockquote.green {
|
||||
border-color: #059223;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
blockquote.red {
|
||||
border-color: #FF0000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #215cff;
|
||||
}
|
||||
|
||||
blockquote.blue {
|
||||
border-color: #215cff;
|
||||
}
|
||||
|
||||
.nicegreen {
|
||||
color: #059223;
|
||||
}
|
||||
|
||||
blockquote.nicegreen {
|
||||
border-color: #059223;
|
||||
}
|
||||
|
||||
/* hornichems */
|
||||
.userlove {
|
||||
color: #ff42a6;
|
||||
@@ -575,6 +603,10 @@ em {
|
||||
color: #973e3b;
|
||||
}
|
||||
|
||||
blockquote.cult {
|
||||
border-color: #973e3b;
|
||||
}
|
||||
|
||||
.cultitalic {
|
||||
color: #973e3b;
|
||||
font-style: italic;
|
||||
@@ -630,6 +662,10 @@ em {
|
||||
color: #9956d3;
|
||||
}
|
||||
|
||||
blockquote.purple {
|
||||
border-color: #9956d3;
|
||||
}
|
||||
|
||||
.holoparasite {
|
||||
color: #88809c;
|
||||
}
|
||||
@@ -693,6 +729,10 @@ em {
|
||||
color: #BE8700;
|
||||
}
|
||||
|
||||
blockquote.brass {
|
||||
border-color: #BE8700;
|
||||
}
|
||||
|
||||
.heavy_brass {
|
||||
color: #BE8700;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -484,6 +484,10 @@ h1.alert, h2.alert {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote.warning {
|
||||
border-color: #ff0000;
|
||||
}
|
||||
|
||||
.alertwarning {
|
||||
color: #FF0000;
|
||||
font-weight: bold;
|
||||
@@ -522,11 +526,18 @@ h1.alert, h2.alert {
|
||||
.info {
|
||||
color: #0000CC;
|
||||
}
|
||||
blockquote.info {
|
||||
border-color: #0000CC;
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: #000099;
|
||||
}
|
||||
|
||||
blockquote.notice {
|
||||
border-color: #000099;
|
||||
}
|
||||
|
||||
.tinynotice {
|
||||
color: #000099;
|
||||
font-size: 85%;
|
||||
@@ -582,18 +593,33 @@ h1.alert, h2.alert {
|
||||
color: #03ff39;
|
||||
}
|
||||
|
||||
blockquote.green {
|
||||
border-color: #03ff39;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #FF0000;
|
||||
}
|
||||
blockquote.red {
|
||||
border-color: #FF0000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #0000FF;
|
||||
}
|
||||
|
||||
blockquote.blue {
|
||||
border-color: #0000FF;
|
||||
}
|
||||
|
||||
.nicegreen {
|
||||
color: #14a833;
|
||||
}
|
||||
|
||||
blockquote.nicegreen {
|
||||
border-color: #14a833;
|
||||
}
|
||||
|
||||
.userlove {
|
||||
color: #FF1493;
|
||||
font-style: italic;
|
||||
@@ -611,6 +637,10 @@ h1.alert, h2.alert {
|
||||
color: #973e3b;
|
||||
}
|
||||
|
||||
blockquote.cult {
|
||||
border-color: #973e3b;
|
||||
}
|
||||
|
||||
.cultitalic {
|
||||
color: #973e3b;
|
||||
font-style: italic;
|
||||
@@ -666,6 +696,10 @@ h1.alert, h2.alert {
|
||||
color: #5e2d79;
|
||||
}
|
||||
|
||||
blockquote.purple {
|
||||
border-color: #5e2d79;
|
||||
}
|
||||
|
||||
.holoparasite {
|
||||
color: #35333a;
|
||||
}
|
||||
@@ -730,6 +764,10 @@ h1.alert, h2.alert {
|
||||
color: #BE8700;
|
||||
}
|
||||
|
||||
blockquote.brass {
|
||||
border-color: #BE8700;
|
||||
}
|
||||
|
||||
.heavy_brass {
|
||||
color: #BE8700;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -181,6 +181,12 @@ const GASES = [
|
||||
'label': 'N₂O',
|
||||
'color': 'red',
|
||||
},
|
||||
{
|
||||
'id': 'no',
|
||||
'name': 'Nitric Oxide',
|
||||
'label': 'NO',
|
||||
'color': 'red',
|
||||
},
|
||||
{
|
||||
'id': 'no2',
|
||||
'name': 'Nitryl',
|
||||
@@ -223,6 +229,24 @@ const GASES = [
|
||||
'label': 'H₂',
|
||||
'color': 'white',
|
||||
},
|
||||
{
|
||||
'id': 'methane',
|
||||
'name': 'Methane',
|
||||
'label': 'CH₄',
|
||||
'color': 'grey',
|
||||
},
|
||||
{
|
||||
'id': 'methyl_bromide',
|
||||
'name': 'Methyl Bromide',
|
||||
'label': 'CH₃Br',
|
||||
'color': 'brown',
|
||||
},
|
||||
{
|
||||
'id': 'qcd',
|
||||
'name': 'Quark Matter',
|
||||
'label': 'QGP',
|
||||
'color': 'pink',
|
||||
},
|
||||
];
|
||||
|
||||
export const getGasLabel = (gasId, fallbackValue) => {
|
||||
|
||||
@@ -1,115 +1,120 @@
|
||||
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) => {
|
||||
const { act, data } = useBackend(context);
|
||||
const { matrixactive, temp } = data;
|
||||
const { activemode, temp } = data;
|
||||
const item = data.item || [];
|
||||
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="0"
|
||||
selected={!matrixactive}
|
||||
key="1"
|
||||
selected={activemode === 1}
|
||||
onClick={() => act('switch_modes', {
|
||||
mode: "0",
|
||||
mode: 1,
|
||||
})} >
|
||||
Regular coloring
|
||||
Tint coloring (Simple)
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
key="1"
|
||||
selected={matrixactive}
|
||||
key="2"
|
||||
selected={activemode === 2}
|
||||
onClick={() => act('switch_modes', {
|
||||
mode: "1",
|
||||
mode: 2,
|
||||
})} >
|
||||
Matrixed coloring
|
||||
HSV coloring (Normal)
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
key="3"
|
||||
selected={activemode === 3}
|
||||
onClick={() => act('switch_modes', {
|
||||
mode: 3,
|
||||
})} >
|
||||
Matrix coloring (Advanced)
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
{matrixactive ? (
|
||||
<>
|
||||
<center>Coloring: {item.name}</center>
|
||||
<ColormateMatrix />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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')}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -117,170 +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={-1000}
|
||||
maxValue={1000}
|
||||
value={matrixcolors.rr}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 1,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
GR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
value={matrixcolors.gr}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 4,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
BR: <NumberInput
|
||||
width="50px"
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
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={-1000}
|
||||
maxValue={1000}
|
||||
value={matrixcolors.rg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 2,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
GG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
value={matrixcolors.gg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 5,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
BG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
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={-1000}
|
||||
maxValue={1000}
|
||||
value={matrixcolors.rb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 3,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
GB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
value={matrixcolors.gb}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 6,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
BB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
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={-1000}
|
||||
maxValue={1000}
|
||||
value={matrixcolors.cr}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 10,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
CG: <NumberInput
|
||||
width="50px"
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
value={matrixcolors.cg}
|
||||
onChange={(e, value) => act('set_matrix_color', {
|
||||
color: 11,
|
||||
value,
|
||||
})} />
|
||||
</Flex.Item>
|
||||
<Flex.Item>
|
||||
CB: <NumberInput
|
||||
width="50px"
|
||||
minValue={-1000}
|
||||
maxValue={1000}
|
||||
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 that red will have this much constrast applied to it.
|
||||
</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 ColormateHSV = (props, context) => {
|
||||
const { act, data } = useBackend(context);
|
||||
const { buildhue, buildsat, buildval } = data;
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { sortBy } from 'common/collections';
|
||||
import { flow } from 'common/fp';
|
||||
import { useBackend } from '../backend';
|
||||
import { Box, Button, Dropdown, Section, Knob, LabeledControls, LabeledList } from '../components';
|
||||
import { Box, Button, Dropdown, Section, Knob, LabeledControls, LabeledList, Stack, Tabs } from '../components';
|
||||
import { Window } from '../layouts';
|
||||
|
||||
export const Jukebox = (props, context) => {
|
||||
@@ -10,98 +10,134 @@ export const Jukebox = (props, context) => {
|
||||
active,
|
||||
track_selected,
|
||||
track_length,
|
||||
track_beat,
|
||||
volume,
|
||||
is_emagged,
|
||||
cost_for_play,
|
||||
has_access,
|
||||
} = data;
|
||||
const songs = flow([
|
||||
sortBy(
|
||||
song => song.name),
|
||||
])(data.songs || []);
|
||||
const queued_tracks = data.queued_tracks || [];
|
||||
return (
|
||||
<Window
|
||||
width={370}
|
||||
height={313}>
|
||||
width={420}
|
||||
height={480}>
|
||||
<Window.Content>
|
||||
<Section
|
||||
title="Song Player"
|
||||
title="Machine Controls"
|
||||
buttons={(
|
||||
<Button
|
||||
icon={active ? 'pause' : 'play'}
|
||||
content={active ? 'Stop' : 'Play'}
|
||||
selected={active}
|
||||
disabled={!has_access}
|
||||
onClick={() => act('toggle')} />
|
||||
)}>
|
||||
<Stack>
|
||||
<Stack.Item>
|
||||
<LabeledList>
|
||||
<LabeledList.Item label="Current Track">
|
||||
{track_selected ? track_selected : "No Track Selected"}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Track Length">
|
||||
{track_selected ? track_length : "No Track Selected"}
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<LabeledControls justify="center">
|
||||
<LabeledControls.Item label="Volume">
|
||||
<Box position="relative">
|
||||
<Knob
|
||||
size={2.4}
|
||||
color={volume > 140 ? 'red' : 'green'}
|
||||
value={volume}
|
||||
unit="%"
|
||||
minValue={0}
|
||||
maxValue={is_emagged ? 210 : 100}
|
||||
step={1}
|
||||
stepPixelSize={1}
|
||||
disabled={!has_access}
|
||||
onDrag={(e, value) => act('set_volume', {
|
||||
volume: value,
|
||||
})} />
|
||||
<Button
|
||||
fluid
|
||||
position="absolute"
|
||||
top="67px"
|
||||
right="62px"
|
||||
color="transparent"
|
||||
icon="fast-backward"
|
||||
disabled={!has_access}
|
||||
onClick={() => act('set_volume', {
|
||||
volume: "min",
|
||||
})} />
|
||||
<Button
|
||||
fluid
|
||||
position="absolute"
|
||||
top="67px"
|
||||
right="-8px"
|
||||
color="transparent"
|
||||
icon="fast-forward"
|
||||
disabled={!has_access}
|
||||
onClick={() => act('set_volume', {
|
||||
volume: "max",
|
||||
})} />
|
||||
<Button
|
||||
fluid
|
||||
position="absolute"
|
||||
top="67px"
|
||||
right="84px"
|
||||
color="transparent"
|
||||
icon="undo"
|
||||
disabled={!has_access}
|
||||
onClick={() => act('set_volume', {
|
||||
volume: "reset",
|
||||
})} />
|
||||
</Box>
|
||||
</LabeledControls.Item>
|
||||
</LabeledControls>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<LabeledList>
|
||||
<LabeledList.Item label="Track Selected">
|
||||
<Dropdown
|
||||
overflow-y="scroll"
|
||||
width="240px"
|
||||
options={songs.map(song => song.name)}
|
||||
disabled={active}
|
||||
selected={track_selected || "Select a Track"}
|
||||
onSelected={value => act('select_track', {
|
||||
track: value,
|
||||
})} />
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Track Length">
|
||||
{track_selected ? track_length : "No Track Selected"}
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Track Beat">
|
||||
{track_selected ? track_beat : "No Track Selected"}
|
||||
{track_beat === 1 ? " beat" : " beats"}
|
||||
<LabeledList.Item label="Cost to Queue">
|
||||
{cost_for_play} CR {has_access ? "(Cost waived)" : ""}
|
||||
</LabeledList.Item>
|
||||
</LabeledList>
|
||||
</Section>
|
||||
<Section title="Machine Settings">
|
||||
<LabeledControls justify="center">
|
||||
<LabeledControls.Item label="Volume">
|
||||
<Box position="relative">
|
||||
<Knob
|
||||
size={3.2}
|
||||
color={volume >= 50 ? 'red' : 'green'}
|
||||
value={volume}
|
||||
unit="%"
|
||||
minValue={0}
|
||||
maxValue={100}
|
||||
step={1}
|
||||
stepPixelSize={1}
|
||||
disabled={active}
|
||||
onDrag={(e, value) => act('set_volume', {
|
||||
volume: value,
|
||||
})} />
|
||||
<Button
|
||||
fluid
|
||||
position="absolute"
|
||||
top="-2px"
|
||||
right="-22px"
|
||||
color="transparent"
|
||||
icon="fast-backward"
|
||||
onClick={() => act('set_volume', {
|
||||
volume: "min",
|
||||
})} />
|
||||
<Button
|
||||
fluid
|
||||
position="absolute"
|
||||
top="16px"
|
||||
right="-22px"
|
||||
color="transparent"
|
||||
icon="fast-forward"
|
||||
onClick={() => act('set_volume', {
|
||||
volume: "max",
|
||||
})} />
|
||||
<Button
|
||||
fluid
|
||||
position="absolute"
|
||||
top="34px"
|
||||
right="-22px"
|
||||
color="transparent"
|
||||
icon="undo"
|
||||
onClick={() => act('set_volume', {
|
||||
volume: "reset",
|
||||
})} />
|
||||
</Box>
|
||||
</LabeledControls.Item>
|
||||
</LabeledControls>
|
||||
<Section fill vertical>
|
||||
<Stack>
|
||||
<Stack.Item grow>
|
||||
<Dropdown
|
||||
width="100%"
|
||||
overflow-y="scroll"
|
||||
options={songs.map(song => song.name)}
|
||||
selected="Select a Track"
|
||||
onSelected={value => act('select_track', {
|
||||
track: value,
|
||||
})} />
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Button
|
||||
icon="play"
|
||||
content="Queue"
|
||||
onClick={() => act('add_to_queue')}
|
||||
/>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Section fill vertical>
|
||||
<Tabs vertical>
|
||||
{queued_tracks.map(song => (
|
||||
<Tabs.Tab
|
||||
key={song.name}
|
||||
>
|
||||
{song.name}
|
||||
</Tabs.Tab>
|
||||
))}
|
||||
</Tabs>
|
||||
</Section>
|
||||
</Section>
|
||||
</Window.Content>
|
||||
</Window>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { filter } from 'common/collections';
|
||||
import { flow } from 'common/fp';
|
||||
import { classes } from 'common/react';
|
||||
import { useBackend } from '../backend';
|
||||
import { Box, Button, Section, Table } from '../components';
|
||||
import { createSearch } from 'common/string';
|
||||
import { useBackend, useLocalState } from '../backend';
|
||||
import { Box, Button, Icon, Input, Section, Table } from '../components';
|
||||
import { Window } from '../layouts';
|
||||
|
||||
type VendingData = {
|
||||
@@ -23,6 +26,7 @@ type ProductRecord = {
|
||||
price: number;
|
||||
max_amount: number;
|
||||
ref: string;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
type CoinRecord = {
|
||||
@@ -83,7 +87,7 @@ const VendingRow = (props, context) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Row className="candystripe">
|
||||
<Table.Cell collapsing>
|
||||
{product.img && (
|
||||
<img
|
||||
@@ -174,6 +178,10 @@ export const Vending = (props, context) => {
|
||||
hidden_records = [],
|
||||
stock,
|
||||
} = data;
|
||||
const [
|
||||
searchText,
|
||||
setSearchText,
|
||||
] = useLocalState(context, 'searchText', '');
|
||||
let inventory;
|
||||
let custom = false;
|
||||
if (data.vending_machine_input) {
|
||||
@@ -194,6 +202,8 @@ export const Vending = (props, context) => {
|
||||
}
|
||||
// Just in case we still have undefined values in the list
|
||||
inventory = inventory.filter(item => !!item);
|
||||
// Filter by search text
|
||||
inventory = prepareSearch(inventory, searchText);
|
||||
return (
|
||||
<Window
|
||||
title="Vending Machine"
|
||||
@@ -219,6 +229,17 @@ export const Vending = (props, context) => {
|
||||
</Section>
|
||||
)}
|
||||
<Section title="Products">
|
||||
<Table mb={1}>
|
||||
<Table.Cell width="8%">
|
||||
<Icon name="search" ml={1.5} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Input
|
||||
fluid
|
||||
placeholder="Search for products..."
|
||||
onInput={(e, value) => setSearchText(value)} />
|
||||
</Table.Cell>
|
||||
</Table>
|
||||
<Table>
|
||||
{inventory.map(product => (
|
||||
<VendingRow
|
||||
@@ -233,3 +254,15 @@ export const Vending = (props, context) => {
|
||||
</Window>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Search box
|
||||
*/
|
||||
export const prepareSearch = (products, searchText = '') => {
|
||||
const testSearch = createSearch<ProductRecord>(searchText,
|
||||
product => product.name);
|
||||
return flow([
|
||||
// Optional search term
|
||||
searchText && filter(testSearch),
|
||||
])(products);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user