cyberpresidentvanellope/CHOMPStation2
1
0
Fork 0
mirror of https://github.com/CHOMPStation2/CHOMPStation2.git synced 2025-12-11 10:43:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

[MIRROR] Vore Panel tweaks and fixes (#8856)

Browse Source 
Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>
Co-authored-by: Kashargul <KashL@t-online.de>
This commit is contained in:
CHOMPStation2
2024-08-31 20:07:26 -07:00
committed by GitHub
parent 5209bc4158
commit 4c0c25c489
10 changed files with 496 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
code/modules/vore/eating/vorepanel_vr.dm
View File

@@ -3798,7 +3798,7 @@ var/global/list/belly_colorable_only_fullscreens = list("a_synth_flesh_mono",
host.vore_selected.update_internal_overlay()
. = TRUE
if("b_fullscreen_alpha")
var/newalpha = tgui_input_number(user, "Set alpha transparency between 0-255", "Vore Alpha",255,255,0,0,1) //ChompEDIT - user, not usr
var/newalpha = tgui_input_number(user, "Set alpha transparency between 0-255", "Vore Alpha",host.vore_selected.belly_fullscreen_alpha,255,0,0,1) //ChompEDIT - user, not usr
if(newalpha)
host.vore_selected.belly_fullscreen_alpha = newalpha
host.vore_selected.update_internal_overlay()

8
tgui/packages/tgui/interfaces/VorePanel/VoreBellySelectionAndCustomization.tsx
View File

@@ -17,9 +17,9 @@ export const VoreBellySelectionAndCustomization = (props: {
const { our_bellies, selected, show_pictures, host_mobtype } = props;
return (
<Flex>
<Flex.Item shrink>
<Section title="My Bellies" scrollable>
<Flex height="83%">
<Flex.Item shrink basis="30%">
<Section title="My Bellies" scrollable fill>
<Tabs vertical>
<Tabs.Tab onClick={() => act('newbelly')}>
New
@@ -53,7 +53,7 @@ export const VoreBellySelectionAndCustomization = (props: {
</Flex.Item>
<Flex.Item grow>
{selected && (
<Section title={selected.belly_name}>
<Section title={selected.belly_name} fill scrollable>
<VoreSelectedBelly
belly={selected}
show_pictures={show_pictures}

269
tgui/packages/tgui/interfaces/VorePanel/VoreSelectedBellyTabs/VoreSelectedBellyDescriptions.tsx
View File

@@ -1,5 +1,8 @@
import { useBackend } from '../../../backend';
import { Button, LabeledList } from '../../../components';
import { ReactNode, useEffect, useState } from 'react';
import { useBackend } from 'tgui/backend';
import { Box, Button, LabeledList } from 'tgui/components';
import { SYNTAX_COLOR, SYNTAX_REGEX } from '../constants';
import { selectedData } from '../types';
import { VoreSelectedBellyDescriptionsBellymode } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsBellymode';
import { VoreSelectedBellyDescriptionsEscape } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsEscape';
@@ -8,6 +11,39 @@ import { VoreSelectedBellyDescriptionsInteractionChance } from '../VoreSelectedB
import { VoreSelectedBellyDescriptionsStruggle } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsStruggle';
import { VoreSelectedBellyDescriptionsTransfer } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsTransfer';
const DescriptionSyntaxHighlighting = (props: { desc: string }) => {
const { desc } = props;
const [htmlDesc, setHtmlDesc] = useState<ReactNode[]>([]);
useEffect(() => {
if (!desc || desc.length === 0) {
return;
}
let elements: ReactNode[] = [];
const regexCopy = new RegExp(SYNTAX_REGEX);
let lastIndex = 0;
let result;
while ((result = regexCopy.exec(desc)) !== null) {
elements.push(<>{desc.substring(lastIndex, result.index)}</>);
elements.push(
<Box inline color={SYNTAX_COLOR[result[0]]}>
{result[0]}
</Box>,
);
lastIndex = result.index + result[0].length;
}
elements.push(<>{desc.substring(lastIndex)}</>);
setHtmlDesc(elements);
}, [desc]);
return <Box preserveWhitespace>{htmlDesc}</Box>;
};
export const VoreSelectedBellyDescriptions = (props: {
belly: selectedData;
}) => {
@@ -27,127 +63,128 @@ export const VoreSelectedBellyDescriptions = (props: {
} = belly;
return (
<LabeledList>
<LabeledList.Item
label="Description"
buttons={
<Button
onClick={() => act('set_attribute', { attribute: 'b_desc' })}
icon="pen"
/>
}
>
{desc}
</LabeledList.Item>
<LabeledList.Item
label="Description (Absorbed)"
buttons={
<Box>
<LabeledList>
<LabeledList.Item label="Vore Verb">
<Button onClick={() => act('set_attribute', { attribute: 'b_verb' })}>
{verb}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Release Verb">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_absorbed_desc' })
act('set_attribute', { attribute: 'b_release_verb' })
}
icon="pen"
/>
}
>
{absorbed_desc}
</LabeledList.Item>
<LabeledList.Item label="Vore Verb">
<Button onClick={() => act('set_attribute', { attribute: 'b_verb' })}>
{verb}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Release Verb">
<Button
onClick={() => act('set_attribute', { attribute: 'b_release_verb' })}
>
{release_verb}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Show All Messages">
<Button
onClick={() =>
act('set_attribute', {
attribute: 'b_message_mode',
})
}
icon={message_mode ? 'toggle-on' : 'toggle-off'}
selected={message_mode}
>
{message_mode ? 'True' : 'False'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Examine Messages">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'em' })
}
>
Examine Message (when full)
</Button>
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'ema' })
}
>
Examine Message (with absorbed victims)
</Button>
</LabeledList.Item>
{message_mode || escapable ? (
<>
<VoreSelectedBellyDescriptionsStruggle />
<VoreSelectedBellyDescriptionsEscape
>
{release_verb}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Show All Messages">
<Button
onClick={() =>
act('set_attribute', {
attribute: 'b_message_mode',
})
}
icon={message_mode ? 'toggle-on' : 'toggle-off'}
selected={message_mode}
>
{message_mode ? 'True' : 'False'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Examine Messages">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'em' })
}
>
Examine Message (when full)
</Button>
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'ema' })
}
>
Examine Message (with absorbed victims)
</Button>
</LabeledList.Item>
{message_mode || escapable ? (
<>
<VoreSelectedBellyDescriptionsStruggle />
<VoreSelectedBellyDescriptionsEscape
message_mode={message_mode}
interacts={interacts}
/>
{(message_mode ||
!!interacts.transferlocation ||
!!interacts.transferlocation_secondary) && (
<VoreSelectedBellyDescriptionsTransfer
message_mode={message_mode}
interacts={interacts}
/>
)}
{(message_mode ||
interacts.digestchance > 0 ||
interacts.absorbchance > 0) && (
<VoreSelectedBellyDescriptionsInteractionChance
message_mode={message_mode}
interacts={interacts}
/>
)}
</>
) : (
''
)}
{(message_mode ||
mode === 'Digest' ||
mode === 'Selective' ||
mode === 'Absorb' ||
mode === 'Unabsorb') && (
<VoreSelectedBellyDescriptionsBellymode
message_mode={message_mode}
interacts={interacts}
mode={mode}
/>
{(message_mode ||
!!interacts.transferlocation ||
!!interacts.transferlocation_secondary) && (
<VoreSelectedBellyDescriptionsTransfer
message_mode={message_mode}
interacts={interacts}
/>
)}
{(message_mode ||
interacts.digestchance > 0 ||
interacts.absorbchance > 0) && (
<VoreSelectedBellyDescriptionsInteractionChance
message_mode={message_mode}
interacts={interacts}
/>
)}
</>
) : (
''
)}
{(message_mode ||
mode === 'Digest' ||
mode === 'Selective' ||
mode === 'Absorb' ||
mode === 'Unabsorb') && (
<VoreSelectedBellyDescriptionsBellymode
message_mode={message_mode}
mode={mode}
/>
)}
{emote_active ? (
<VoreSelectedBellyDescriptionsIdle
message_mode={message_mode}
mode={mode}
/>
) : (
''
)}
<LabeledList.Item label="Reset Messages">
)}
{emote_active ? (
<VoreSelectedBellyDescriptionsIdle
message_mode={message_mode}
mode={mode}
/>
) : (
''
)}
<LabeledList.Item label="Reset Messages">
<Button
color="red"
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'reset' })
}
>
Reset Messages
</Button>
</LabeledList.Item>
</LabeledList>
<Box color="label" mt={1} mb={1}>
Description:{' '}
<Button
color="red"
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'reset' })
}
icon="pencil"
onClick={() => act('set_attribute', { attribute: 'b_desc' })}
>
Reset Messages
Edit
</Button>
</LabeledList.Item>
</LabeledList>
</Box>
<DescriptionSyntaxHighlighting desc={desc} />
<Box color="label" mt={2} mb={1}>
Description (Absorbed):{' '}
<Button
icon="pencil"
onClick={() => act('set_attribute', { attribute: 'b_absorbed_desc' })}
>
Edit
</Button>
</Box>
<DescriptionSyntaxHighlighting desc={absorbed_desc} />
<Box mb={2} />
</Box>
);
};

168
tgui/packages/tgui/interfaces/VorePanel/VoreSelectedBellyTabs/VoreSelectedBellyVisuals.tsx
View File

@@ -1,7 +1,14 @@
import { classes } from 'common/react';
import { useBackend } from '../../../backend';
import { Box, Button, Flex, LabeledList, Section } from '../../../components';
import {
Box,
Button,
Flex,
LabeledList,
Section,
Stack,
} from '../../../components';
import { selectedData } from '../types';
export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
@@ -211,85 +218,104 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
</Flex>
</Section>
<Section title="Belly Fullscreens Preview and Coloring">
<Flex direction="row">
<Box
backgroundColor={belly_fullscreen_color}
width="20px"
height="20px"
/>
<Button
icon="eye-dropper"
onClick={() =>
act('set_attribute', {
attribute: 'b_fullscreen_color',
val: null,
})
}
>
Select Primary Color
</Button>
<Box
backgroundColor={belly_fullscreen_color_secondary}
width="20px"
height="20px"
/>
<Button
icon="eye-dropper"
onClick={() =>
act('set_attribute', {
attribute: 'b_fullscreen_color_secondary',
val: null,
})
}
>
Select Secondary Color
</Button>
<Box
backgroundColor={belly_fullscreen_color_trinary}
width="20px"
height="20px"
/>
<Button
icon="eye-dropper"
onClick={() =>
act('set_attribute', {
attribute: 'b_fullscreen_color_trinary',
val: null,
})
}
>
Select Trinary Color
</Button>
<LabeledList.Item label="Enable Coloration">
<Stack align="center">
<Stack.Item shrink>
<Box
backgroundColor={belly_fullscreen_color}
width="20px"
height="20px"
/>
</Stack.Item>
<Stack.Item grow>
<Button
fluid
icon="eye-dropper"
onClick={() =>
act('set_attribute', { attribute: 'b_colorization_enabled' })
}
icon={colorization_enabled ? 'toggle-on' : 'toggle-off'}
selected={colorization_enabled}
>
{colorization_enabled ? 'Yes' : 'No'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Preview Belly">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_preview_belly' })
act('set_attribute', {
attribute: 'b_fullscreen_color',
val: null,
})
}
>
Preview
Select Primary Color
</Button>
</LabeledList.Item>
<LabeledList.Item label="Clear Preview">
</Stack.Item>
<Stack.Item shrink>
<Box
backgroundColor={belly_fullscreen_color_secondary}
width="20px"
height="20px"
/>
</Stack.Item>
<Stack.Item grow>
<Button
fluid
icon="eye-dropper"
onClick={() =>
act('set_attribute', { attribute: 'b_clear_preview' })
act('set_attribute', {
attribute: 'b_fullscreen_color_secondary',
val: null,
})
}
>
Clear
Select Secondary Color
</Button>
</LabeledList.Item>
</Flex>
</Stack.Item>
<Stack.Item shrink>
<Box
backgroundColor={belly_fullscreen_color_trinary}
width="20px"
height="20px"
/>
</Stack.Item>
<Stack.Item grow>
<Button
fluid
icon="eye-dropper"
onClick={() =>
act('set_attribute', {
attribute: 'b_fullscreen_color_trinary',
val: null,
})
}
>
Select Trinary Color
</Button>
</Stack.Item>
</Stack>
<Box mt={1}>
<LabeledList>
<LabeledList.Item label="Enable Coloration">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_colorization_enabled' })
}
icon={colorization_enabled ? 'toggle-on' : 'toggle-off'}
selected={colorization_enabled}
>
{colorization_enabled ? 'Yes' : 'No'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Preview Belly">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_preview_belly' })
}
>
Preview
</Button>
</LabeledList.Item>
<LabeledList.Item label="Clear Preview">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_clear_preview' })
}
>
Clear
</Button>
</LabeledList.Item>
</LabeledList>
</Box>
</Section>
<Section>
<Section title="Vore FX">
@@ -307,7 +333,7 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
</LabeledList.Item>
</LabeledList>
</Section>
<Section title="Belly Fullscreens Styles" width="800px">
<Section title="Belly Fullscreens Styles">
Belly styles:
<Button
fluid

7
tgui/packages/tgui/interfaces/VorePanel/constants.ts
View File

@@ -27,3 +27,10 @@ export const digestModeToPreyMode = {
Heal: 'being healed.',
'Encase In Egg': 'being encased in an egg.',
};
export const SYNTAX_REGEX = /%belly|%pred|%prey/g;
export const SYNTAX_COLOR = {
'%belly': 'average',
'%pred': 'bad',
'%prey': 'good',
};

2
tgui/packages/tgui/interfaces/VorePanel/index.tsx
View File

@@ -37,7 +37,7 @@ export const VorePanel = (props) => {
return (
<Window width={890} height={660} theme="abstract">
<Window.Content scrollable>
<Window.Content>
{(data.unsaved_changes && (
<NoticeBox danger>
<Flex>

47
tgui/packages/tgui/interfaces/chompstation/VorePanel/FeatureColorInput.tsx
View File

@@ -12,27 +12,30 @@ export const FeatureColorInput = (props: {
const { act } = useBackend();
const { action_name, value_of, back_color, name_of } = props;
return (
<Button
onClick={() => {
act('set_attribute', { attribute: action_name, val: value_of });
}}
>
<Stack align="center" fill>
<Stack.Item>
<Box
style={{
background: back_color.startsWith('#')
? back_color
: `#${back_color}`,
border: '2px solid white',
boxSizing: 'content-box',
height: '11px',
width: '11px',
}}
/>
</Stack.Item>
<Stack.Item>Change {name_of}</Stack.Item>
</Stack>
</Button>
<>
<Stack.Item shrink>
<Box
backgroundColor={
back_color.startsWith('#') ? back_color : `#${back_color}`
}
style={{
border: '2px solid white',
}}
width="20px"
height="20px"
/>
</Stack.Item>
<Stack.Item grow>
<Button
fluid
icon="eye-dropper"
onClick={() => {
act('set_attribute', { attribute: action_name, val: value_of });
}}
>
Change {name_of}
</Button>
</Stack.Item>
</>
);
};

287
tgui/packages/tgui/interfaces/chompstation/VorePanel/VoreSelectedBellyTabs/VoreSelectedBellyDescriptions.tsx
View File

@@ -1,5 +1,8 @@
import { useBackend } from '../../../../backend';
import { Button, LabeledList } from '../../../../components';
import { ReactNode, useEffect, useState } from 'react';
import { useBackend } from 'tgui/backend';
import { Box, Button, LabeledList } from 'tgui/components';
import { SYNTAX_COLOR, SYNTAX_REGEX } from '../constants';
import { selectedData } from '../types';
import { VoreSelectedBellyDescriptionsBellymode } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsBellymode';
import { VoreSelectedBellyDescriptionsEscape } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsEscape';
@@ -8,6 +11,39 @@ import { VoreSelectedBellyDescriptionsInteractionChance } from '../VoreSelectedB
import { VoreSelectedBellyDescriptionsStruggle } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsStruggle';
import { VoreSelectedBellyDescriptionsTransfer } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsTransfer';
const DescriptionSyntaxHighlighting = (props: { desc: string }) => {
const { desc } = props;
const [htmlDesc, setHtmlDesc] = useState<ReactNode[]>([]);
useEffect(() => {
if (!desc || desc.length === 0) {
return;
}
let elements: ReactNode[] = [];
const regexCopy = new RegExp(SYNTAX_REGEX);
let lastIndex = 0;
let result;
while ((result = regexCopy.exec(desc)) !== null) {
elements.push(<>{desc.substring(lastIndex, result.index)}</>);
elements.push(
<Box inline color={SYNTAX_COLOR[result[0]]}>
{result[0]}
</Box>,
);
lastIndex = result.index + result[0].length;
}
elements.push(<>{desc.substring(lastIndex)}</>);
setHtmlDesc(elements);
}, [desc]);
return <Box preserveWhitespace>{htmlDesc}</Box>;
};
export const VoreSelectedBellyDescriptions = (props: {
belly: selectedData;
}) => {
@@ -29,135 +65,136 @@ export const VoreSelectedBellyDescriptions = (props: {
} = belly;
return (
<LabeledList>
<LabeledList.Item
label="Description"
buttons={
<Button
onClick={() => act('set_attribute', { attribute: 'b_desc' })}
icon="pen"
/>
}
>
{desc}
</LabeledList.Item>
<LabeledList.Item
label="Description (Absorbed)"
buttons={
<Box>
<Box color="label" mt={1} mb={1}>
Description:{' '}
<Button
icon="pencil"
onClick={() => act('set_attribute', { attribute: 'b_desc' })}
>
Edit
</Button>
</Box>
<DescriptionSyntaxHighlighting desc={desc} />
<Box color="label" mt={2} mb={1}>
Description (Absorbed):{' '}
<Button
icon="pencil"
onClick={() => act('set_attribute', { attribute: 'b_absorbed_desc' })}
>
Edit
</Button>
</Box>
<DescriptionSyntaxHighlighting desc={absorbed_desc} />
<Box mb={2} />
<LabeledList>
<LabeledList.Item label="Vore Verb">
<Button onClick={() => act('set_attribute', { attribute: 'b_verb' })}>
{verb}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Release Verb">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_absorbed_desc' })
act('set_attribute', { attribute: 'b_release_verb' })
}
icon="pen"
>
{release_verb}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Show All Messages">
<Button
onClick={() =>
act('set_attribute', {
attribute: 'b_message_mode',
})
}
icon={message_mode ? 'toggle-on' : 'toggle-off'}
selected={message_mode}
>
{message_mode ? 'True' : 'False'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Examine Messages">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'em' })
}
>
Examine Message (when full)
</Button>
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'ema' })
}
>
Examine Message (with absorbed victims)
</Button>
</LabeledList.Item>
{message_mode || escapable ? (
<>
<VoreSelectedBellyDescriptionsStruggle />
<VoreSelectedBellyDescriptionsEscape
message_mode={message_mode}
interacts={interacts}
/>
</>
) : (
''
)}
{message_mode ||
!!interacts.transferlocation ||
!!interacts.transferlocation_secondary ||
(autotransfer_enabled &&
(!!autotransfer.autotransferlocation ||
!!autotransfer.autotransferlocation_secondary)) ? (
<VoreSelectedBellyDescriptionsTransfer
message_mode={message_mode}
interacts={interacts}
autotransfer={autotransfer}
/>
}
>
{absorbed_desc}
</LabeledList.Item>
<LabeledList.Item label="Vore Verb">
<Button onClick={() => act('set_attribute', { attribute: 'b_verb' })}>
{verb}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Release Verb">
<Button
onClick={() => act('set_attribute', { attribute: 'b_release_verb' })}
>
{release_verb}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Show All Messages">
<Button
onClick={() =>
act('set_attribute', {
attribute: 'b_message_mode',
})
}
icon={message_mode ? 'toggle-on' : 'toggle-off'}
selected={message_mode}
>
{message_mode ? 'True' : 'False'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Examine Messages">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'em' })
}
>
Examine Message (when full)
</Button>
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'ema' })
}
>
Examine Message (with absorbed victims)
</Button>
</LabeledList.Item>
{message_mode || escapable ? (
<>
<VoreSelectedBellyDescriptionsStruggle />
<VoreSelectedBellyDescriptionsEscape
) : (
''
)}
{message_mode ||
(escapable &&
(interacts.digestchance > 0 || interacts.absorbchance > 0)) ? (
<VoreSelectedBellyDescriptionsInteractionChance
message_mode={message_mode}
interacts={interacts}
/>
</>
) : (
''
)}
{message_mode ||
!!interacts.transferlocation ||
!!interacts.transferlocation_secondary ||
(autotransfer_enabled &&
(!!autotransfer.autotransferlocation ||
!!autotransfer.autotransferlocation_secondary)) ? (
<VoreSelectedBellyDescriptionsTransfer
message_mode={message_mode}
interacts={interacts}
autotransfer={autotransfer}
/>
) : (
''
)}
{message_mode ||
(escapable &&
(interacts.digestchance > 0 || interacts.absorbchance > 0)) ? (
<VoreSelectedBellyDescriptionsInteractionChance
message_mode={message_mode}
interacts={interacts}
/>
) : (
''
)}
{(message_mode ||
mode === 'Digest' ||
mode === 'Selective' ||
mode === 'Absorb' ||
mode === 'Unabsorb') && (
<VoreSelectedBellyDescriptionsBellymode
message_mode={message_mode}
mode={mode}
/>
)}
{emote_active ? (
<VoreSelectedBellyDescriptionsIdle
message_mode={message_mode}
mode={mode}
/>
) : (
''
)}
<LabeledList.Item label="Reset Messages">
<Button
color="red"
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'reset' })
}
>
Reset Messages
</Button>
</LabeledList.Item>
</LabeledList>
) : (
''
)}
{(message_mode ||
mode === 'Digest' ||
mode === 'Selective' ||
mode === 'Absorb' ||
mode === 'Unabsorb') && (
<VoreSelectedBellyDescriptionsBellymode
message_mode={message_mode}
mode={mode}
/>
)}
{emote_active ? (
<VoreSelectedBellyDescriptionsIdle
message_mode={message_mode}
mode={mode}
/>
) : (
''
)}
<LabeledList.Item label="Reset Messages">
<Button
color="red"
onClick={() =>
act('set_attribute', { attribute: 'b_msgs', msgtype: 'reset' })
}
>
Reset Messages
</Button>
</LabeledList.Item>
</LabeledList>
</Box>
);
};

73
tgui/packages/tgui/interfaces/chompstation/VorePanel/VoreSelectedBellyTabs/VoreSelectedBellyVisuals.tsx
View File

@@ -1,13 +1,14 @@
import { classes } from 'common/react';
import { useBackend } from '../../../../backend';
import { useBackend } from 'tgui/backend';
import {
Box,
Button,
Flex,
LabeledList,
Section,
} from '../../../../components';
Stack,
} from 'tgui/components';
import { FeatureColorInput } from '../FeatureColorInput';
import { selectedData } from '../types';
@@ -254,7 +255,7 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
</Flex>
</Section>
<Section title="Belly Fullscreens Preview and Coloring">
<Flex direction="row">
<Stack align="center">
<FeatureColorInput
action_name="b_fullscreen_color"
value_of={null}
@@ -285,36 +286,40 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
back_color="#FFFFFF"
name_of="Alpha"
/>
</Flex>
<LabeledList.Item label="Enable Coloration">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_colorization_enabled' })
}
icon={colorization_enabled ? 'toggle-on' : 'toggle-off'}
selected={colorization_enabled}
>
{colorization_enabled ? 'Yes' : 'No'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Preview Belly">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_preview_belly' })
}
>
Preview
</Button>
</LabeledList.Item>
<LabeledList.Item label="Clear Preview">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_clear_preview' })
}
>
Clear
</Button>
</LabeledList.Item>
</Stack>
<Box mt={1}>
<LabeledList>
<LabeledList.Item label="Enable Coloration">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_colorization_enabled' })
}
icon={colorization_enabled ? 'toggle-on' : 'toggle-off'}
selected={colorization_enabled}
>
{colorization_enabled ? 'Yes' : 'No'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Preview Belly">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_preview_belly' })
}
>
Preview
</Button>
</LabeledList.Item>
<LabeledList.Item label="Clear Preview">
<Button
onClick={() =>
act('set_attribute', { attribute: 'b_clear_preview' })
}
>
Clear
</Button>
</LabeledList.Item>
</LabeledList>
</Box>
</Section>
<Section>
<Section title="Vore FX">

7
tgui/packages/tgui/interfaces/chompstation/VorePanel/constants.ts
View File

@@ -49,3 +49,10 @@ export const digestModeToPreyMode = {
Heal: 'being healed.',
'Encase In Egg': 'being encased in an egg.',
};
export const SYNTAX_REGEX = /%belly|%pred|%prey/g;
export const SYNTAX_COLOR = {
'%belly': 'average',
'%pred': 'bad',
'%prey': 'good',
};