cyberpresidentvanellope/CHOMPStation2
1
0
Fork 0
mirror of https://github.com/CHOMPStation2/CHOMPStation2.git synced 2025-12-13 03:33:21 +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() host.vore_selected.update_internal_overlay()
. = TRUE . = TRUE
if("b_fullscreen_alpha") 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) if(newalpha)
host.vore_selected.belly_fullscreen_alpha = newalpha host.vore_selected.belly_fullscreen_alpha = newalpha
host.vore_selected.update_internal_overlay() 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; const { our_bellies, selected, show_pictures, host_mobtype } = props;
return ( return (
<Flex> <Flex height="83%">
<Flex.Item shrink> <Flex.Item shrink basis="30%">
<Section title="My Bellies" scrollable> <Section title="My Bellies" scrollable fill>
<Tabs vertical> <Tabs vertical>
<Tabs.Tab onClick={() => act('newbelly')}> <Tabs.Tab onClick={() => act('newbelly')}>
New New
@@ -53,7 +53,7 @@ export const VoreBellySelectionAndCustomization = (props: {
</Flex.Item> </Flex.Item>
<Flex.Item grow> <Flex.Item grow>
{selected && ( {selected && (
<Section title={selected.belly_name}> <Section title={selected.belly_name} fill scrollable>
<VoreSelectedBelly <VoreSelectedBelly
belly={selected} belly={selected}
show_pictures={show_pictures} show_pictures={show_pictures}

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

@@ -1,5 +1,8 @@
import { useBackend } from '../../../backend'; import { ReactNode, useEffect, useState } from 'react';
import { Button, LabeledList } from '../../../components'; import { useBackend } from 'tgui/backend';
import { Box, Button, LabeledList } from 'tgui/components';
import { SYNTAX_COLOR, SYNTAX_REGEX } from '../constants';
import { selectedData } from '../types'; import { selectedData } from '../types';
import { VoreSelectedBellyDescriptionsBellymode } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsBellymode'; import { VoreSelectedBellyDescriptionsBellymode } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsBellymode';
import { VoreSelectedBellyDescriptionsEscape } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsEscape'; import { VoreSelectedBellyDescriptionsEscape } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsEscape';
@@ -8,6 +11,39 @@ import { VoreSelectedBellyDescriptionsInteractionChance } from '../VoreSelectedB
import { VoreSelectedBellyDescriptionsStruggle } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsStruggle'; import { VoreSelectedBellyDescriptionsStruggle } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsStruggle';
import { VoreSelectedBellyDescriptionsTransfer } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsTransfer'; 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: { export const VoreSelectedBellyDescriptions = (props: {
belly: selectedData; belly: selectedData;
}) => { }) => {
@@ -27,127 +63,128 @@ export const VoreSelectedBellyDescriptions = (props: {
} = belly; } = belly;
return ( return (
<LabeledList> <Box>
<LabeledList.Item <LabeledList>
label="Description" <LabeledList.Item label="Vore Verb">
buttons={ <Button onClick={() => act('set_attribute', { attribute: 'b_verb' })}>
<Button {verb}
onClick={() => act('set_attribute', { attribute: 'b_desc' })} </Button>
icon="pen" </LabeledList.Item>
/> <LabeledList.Item label="Release Verb">
}
>
{desc}
</LabeledList.Item>
<LabeledList.Item
label="Description (Absorbed)"
buttons={
<Button <Button
onClick={() => onClick={() =>
act('set_attribute', { attribute: 'b_absorbed_desc' }) act('set_attribute', { attribute: 'b_release_verb' })
} }
icon="pen" >
/> {release_verb}
} </Button>
> </LabeledList.Item>
{absorbed_desc} <LabeledList.Item label="Show All Messages">
</LabeledList.Item> <Button
<LabeledList.Item label="Vore Verb"> onClick={() =>
<Button onClick={() => act('set_attribute', { attribute: 'b_verb' })}> act('set_attribute', {
{verb} attribute: 'b_message_mode',
</Button> })
</LabeledList.Item> }
<LabeledList.Item label="Release Verb"> icon={message_mode ? 'toggle-on' : 'toggle-off'}
<Button selected={message_mode}
onClick={() => act('set_attribute', { attribute: 'b_release_verb' })} >
> {message_mode ? 'True' : 'False'}
{release_verb} </Button>
</Button> </LabeledList.Item>
</LabeledList.Item> <LabeledList.Item label="Examine Messages">
<LabeledList.Item label="Show All Messages"> <Button
<Button onClick={() =>
onClick={() => act('set_attribute', { attribute: 'b_msgs', msgtype: 'em' })
act('set_attribute', { }
attribute: 'b_message_mode', >
}) Examine Message (when full)
} </Button>
icon={message_mode ? 'toggle-on' : 'toggle-off'} <Button
selected={message_mode} onClick={() =>
> act('set_attribute', { attribute: 'b_msgs', msgtype: 'ema' })
{message_mode ? 'True' : 'False'} }
</Button> >
</LabeledList.Item> Examine Message (with absorbed victims)
<LabeledList.Item label="Examine Messages"> </Button>
<Button </LabeledList.Item>
onClick={() => {message_mode || escapable ? (
act('set_attribute', { attribute: 'b_msgs', msgtype: 'em' }) <>
} <VoreSelectedBellyDescriptionsStruggle />
> <VoreSelectedBellyDescriptionsEscape
Examine Message (when full) message_mode={message_mode}
</Button> interacts={interacts}
<Button />
onClick={() => {(message_mode ||
act('set_attribute', { attribute: 'b_msgs', msgtype: 'ema' }) !!interacts.transferlocation ||
} !!interacts.transferlocation_secondary) && (
> <VoreSelectedBellyDescriptionsTransfer
Examine Message (with absorbed victims) message_mode={message_mode}
</Button> interacts={interacts}
</LabeledList.Item> />
{message_mode || escapable ? ( )}
<> {(message_mode ||
<VoreSelectedBellyDescriptionsStruggle /> interacts.digestchance > 0 ||
<VoreSelectedBellyDescriptionsEscape 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} message_mode={message_mode}
interacts={interacts} mode={mode}
/> />
{(message_mode || )}
!!interacts.transferlocation || {emote_active ? (
!!interacts.transferlocation_secondary) && ( <VoreSelectedBellyDescriptionsIdle
<VoreSelectedBellyDescriptionsTransfer message_mode={message_mode}
message_mode={message_mode} mode={mode}
interacts={interacts} />
/> ) : (
)} ''
{(message_mode || )}
interacts.digestchance > 0 || <LabeledList.Item label="Reset Messages">
interacts.absorbchance > 0) && ( <Button
<VoreSelectedBellyDescriptionsInteractionChance color="red"
message_mode={message_mode} onClick={() =>
interacts={interacts} act('set_attribute', { attribute: 'b_msgs', msgtype: 'reset' })
/> }
)} >
</> Reset Messages
) : ( </Button>
'' </LabeledList.Item>
)} </LabeledList>
{(message_mode || <Box color="label" mt={1} mb={1}>
mode === 'Digest' || Description:{' '}
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 <Button
color="red" icon="pencil"
onClick={() => onClick={() => act('set_attribute', { attribute: 'b_desc' })}
act('set_attribute', { attribute: 'b_msgs', msgtype: 'reset' })
}
> >
Reset Messages Edit
</Button> </Button>
</LabeledList.Item> </Box>
</LabeledList> <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 { classes } from 'common/react';
import { useBackend } from '../../../backend'; 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'; import { selectedData } from '../types';
export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => { export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
@@ -211,85 +218,104 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
</Flex> </Flex>
</Section> </Section>
<Section title="Belly Fullscreens Preview and Coloring"> <Section title="Belly Fullscreens Preview and Coloring">
<Flex direction="row"> <Stack align="center">
<Box <Stack.Item shrink>
backgroundColor={belly_fullscreen_color} <Box
width="20px" backgroundColor={belly_fullscreen_color}
height="20px" width="20px"
/> height="20px"
<Button />
icon="eye-dropper" </Stack.Item>
onClick={() => <Stack.Item grow>
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">
<Button <Button
fluid
icon="eye-dropper"
onClick={() => onClick={() =>
act('set_attribute', { attribute: 'b_colorization_enabled' }) act('set_attribute', {
} attribute: 'b_fullscreen_color',
icon={colorization_enabled ? 'toggle-on' : 'toggle-off'} val: null,
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 Select Primary Color
</Button> </Button>
</LabeledList.Item> </Stack.Item>
<LabeledList.Item label="Clear Preview"> <Stack.Item shrink>
<Box
backgroundColor={belly_fullscreen_color_secondary}
width="20px"
height="20px"
/>
</Stack.Item>
<Stack.Item grow>
<Button <Button
fluid
icon="eye-dropper"
onClick={() => onClick={() =>
act('set_attribute', { attribute: 'b_clear_preview' }) act('set_attribute', {
attribute: 'b_fullscreen_color_secondary',
val: null,
})
} }
> >
Clear Select Secondary Color
</Button> </Button>
</LabeledList.Item> </Stack.Item>
</Flex> <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> <Section>
<Section title="Vore FX"> <Section title="Vore FX">
@@ -307,7 +333,7 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
</LabeledList.Item> </LabeledList.Item>
</LabeledList> </LabeledList>
</Section> </Section>
<Section title="Belly Fullscreens Styles" width="800px"> <Section title="Belly Fullscreens Styles">
Belly styles: Belly styles:
<Button <Button
fluid fluid

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

@@ -27,3 +27,10 @@ export const digestModeToPreyMode = {
Heal: 'being healed.', Heal: 'being healed.',
'Encase In Egg': 'being encased in an egg.', '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 ( return (
<Window width={890} height={660} theme="abstract"> <Window width={890} height={660} theme="abstract">
<Window.Content scrollable> <Window.Content>
{(data.unsaved_changes && ( {(data.unsaved_changes && (
<NoticeBox danger> <NoticeBox danger>
<Flex> <Flex>

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

@@ -12,27 +12,30 @@ export const FeatureColorInput = (props: {
const { act } = useBackend(); const { act } = useBackend();
const { action_name, value_of, back_color, name_of } = props; const { action_name, value_of, back_color, name_of } = props;
return ( return (
<Button <>
onClick={() => { <Stack.Item shrink>
act('set_attribute', { attribute: action_name, val: value_of }); <Box
}} backgroundColor={
> back_color.startsWith('#') ? back_color : `#${back_color}`
<Stack align="center" fill> }
<Stack.Item> style={{
<Box border: '2px solid white',
style={{ }}
background: back_color.startsWith('#') width="20px"
? back_color height="20px"
: `#${back_color}`, />
border: '2px solid white', </Stack.Item>
boxSizing: 'content-box', <Stack.Item grow>
height: '11px', <Button
width: '11px', fluid
}} icon="eye-dropper"
/> onClick={() => {
</Stack.Item> act('set_attribute', { attribute: action_name, val: value_of });
<Stack.Item>Change {name_of}</Stack.Item> }}
</Stack> >
</Button> 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 { ReactNode, useEffect, useState } from 'react';
import { Button, LabeledList } from '../../../../components'; import { useBackend } from 'tgui/backend';
import { Box, Button, LabeledList } from 'tgui/components';
import { SYNTAX_COLOR, SYNTAX_REGEX } from '../constants';
import { selectedData } from '../types'; import { selectedData } from '../types';
import { VoreSelectedBellyDescriptionsBellymode } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsBellymode'; import { VoreSelectedBellyDescriptionsBellymode } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsBellymode';
import { VoreSelectedBellyDescriptionsEscape } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsEscape'; import { VoreSelectedBellyDescriptionsEscape } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsEscape';
@@ -8,6 +11,39 @@ import { VoreSelectedBellyDescriptionsInteractionChance } from '../VoreSelectedB
import { VoreSelectedBellyDescriptionsStruggle } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsStruggle'; import { VoreSelectedBellyDescriptionsStruggle } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsStruggle';
import { VoreSelectedBellyDescriptionsTransfer } from '../VoreSelectedBellyDescriptionTexts/VoreSelectedBellyDescriptionsTransfer'; 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: { export const VoreSelectedBellyDescriptions = (props: {
belly: selectedData; belly: selectedData;
}) => { }) => {
@@ -29,135 +65,136 @@ export const VoreSelectedBellyDescriptions = (props: {
} = belly; } = belly;
return ( return (
<LabeledList> <Box>
<LabeledList.Item <Box color="label" mt={1} mb={1}>
label="Description" Description:{' '}
buttons={ <Button
<Button icon="pencil"
onClick={() => act('set_attribute', { attribute: 'b_desc' })} onClick={() => act('set_attribute', { attribute: 'b_desc' })}
icon="pen" >
/> Edit
} </Button>
> </Box>
{desc} <DescriptionSyntaxHighlighting desc={desc} />
</LabeledList.Item> <Box color="label" mt={2} mb={1}>
<LabeledList.Item Description (Absorbed):{' '}
label="Description (Absorbed)" <Button
buttons={ 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 <Button
onClick={() => 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> {message_mode ||
<LabeledList.Item label="Vore Verb"> (escapable &&
<Button onClick={() => act('set_attribute', { attribute: 'b_verb' })}> (interacts.digestchance > 0 || interacts.absorbchance > 0)) ? (
{verb} <VoreSelectedBellyDescriptionsInteractionChance
</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={message_mode} message_mode={message_mode}
interacts={interacts} interacts={interacts}
/> />
</> ) : (
) : ( ''
'' )}
)} {(message_mode ||
{message_mode || mode === 'Digest' ||
!!interacts.transferlocation || mode === 'Selective' ||
!!interacts.transferlocation_secondary || mode === 'Absorb' ||
(autotransfer_enabled && mode === 'Unabsorb') && (
(!!autotransfer.autotransferlocation || <VoreSelectedBellyDescriptionsBellymode
!!autotransfer.autotransferlocation_secondary)) ? ( message_mode={message_mode}
<VoreSelectedBellyDescriptionsTransfer mode={mode}
message_mode={message_mode} />
interacts={interacts} )}
autotransfer={autotransfer} {emote_active ? (
/> <VoreSelectedBellyDescriptionsIdle
) : ( message_mode={message_mode}
'' mode={mode}
)} />
{message_mode || ) : (
(escapable && ''
(interacts.digestchance > 0 || interacts.absorbchance > 0)) ? ( )}
<VoreSelectedBellyDescriptionsInteractionChance <LabeledList.Item label="Reset Messages">
message_mode={message_mode} <Button
interacts={interacts} color="red"
/> onClick={() =>
) : ( act('set_attribute', { attribute: 'b_msgs', msgtype: 'reset' })
'' }
)} >
{(message_mode || Reset Messages
mode === 'Digest' || </Button>
mode === 'Selective' || </LabeledList.Item>
mode === 'Absorb' || </LabeledList>
mode === 'Unabsorb') && ( </Box>
<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>
); );
}; };

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

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