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

Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>
Co-authored-by: Kashargul <KashL@t-online.de>

code/modules/vore/eating/vorepanel_vr.dm

@@ -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()

tgui/packages/tgui/interfaces/VorePanel/VoreBellySelectionAndCustomization.tsx

@@ -17,9 +17,9 @@ export const VoreBellySelectionAndCustomization = (props: {
   const { our_bellies, selected, show_pictures, host_mobtype } = props;
 
   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.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}

tgui/packages/tgui/interfaces/VorePanel/VoreSelectedBellyTabs/VoreSelectedBellyDescriptions.tsx

@@ -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 { 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,31 +63,8 @@ export const VoreSelectedBellyDescriptions = (props: {
   } = belly;
 
   return (
+    <Box>
       <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={
-          <Button
-            onClick={() =>
-              act('set_attribute', { attribute: 'b_absorbed_desc' })
-            }
-            icon="pen"
-          />
-        }
-      >
-        {absorbed_desc}
-      </LabeledList.Item>
         <LabeledList.Item label="Vore Verb">
           <Button onClick={() => act('set_attribute', { attribute: 'b_verb' })}>
             {verb}
@@ -59,7 +72,9 @@ export const VoreSelectedBellyDescriptions = (props: {
         </LabeledList.Item>
         <LabeledList.Item label="Release Verb">
           <Button
-          onClick={() => act('set_attribute', { attribute: 'b_release_verb' })}
+            onClick={() =>
+              act('set_attribute', { attribute: 'b_release_verb' })
+            }
           >
             {release_verb}
           </Button>
@@ -149,5 +164,27 @@ export const VoreSelectedBellyDescriptions = (props: {
           </Button>
         </LabeledList.Item>
       </LabeledList>
+      <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} />
+    </Box>
   );
 };

tgui/packages/tgui/interfaces/VorePanel/VoreSelectedBellyTabs/VoreSelectedBellyVisuals.tsx

@@ -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,13 +218,17 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
         </Flex>
       </Section>
       <Section title="Belly Fullscreens Preview and Coloring">
-        <Flex direction="row">
+        <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', {
@@ -228,12 +239,17 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
             >
               Select Primary Color
             </Button>
+          </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', {
@@ -244,12 +260,17 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
             >
               Select Secondary Color
             </Button>
+          </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', {
@@ -260,6 +281,10 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
             >
               Select Trinary Color
             </Button>
+          </Stack.Item>
+        </Stack>
+        <Box mt={1}>
+          <LabeledList>
             <LabeledList.Item label="Enable Coloration">
               <Button
                 onClick={() =>
@@ -289,7 +314,8 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
                 Clear
               </Button>
             </LabeledList.Item>
-        </Flex>
+          </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

tgui/packages/tgui/interfaces/VorePanel/constants.ts

@@ -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',
+};

tgui/packages/tgui/interfaces/VorePanel/index.tsx

@@ -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>

tgui/packages/tgui/interfaces/chompstation/VorePanel/FeatureColorInput.tsx

@@ -12,27 +12,30 @@ export const FeatureColorInput = (props: {
   const { act } = useBackend();
   const { action_name, value_of, back_color, name_of } = props;
   return (
+    <>
+      <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 });
           }}
         >
-      <Stack align="center" fill>
+          Change {name_of}
-        <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>
+    </>
   );
 };

tgui/packages/tgui/interfaces/chompstation/VorePanel/VoreSelectedBellyTabs/VoreSelectedBellyDescriptions.tsx

@@ -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 { 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,31 +65,29 @@ export const VoreSelectedBellyDescriptions = (props: {
   } = belly;
 
   return (
-    <LabeledList>
+    <Box>
-      <LabeledList.Item
+      <Box color="label" mt={1} mb={1}>
-        label="Description"
+        Description:{' '}
-        buttons={
         <Button
+          icon="pencil"
           onClick={() => act('set_attribute', { attribute: 'b_desc' })}
-            icon="pen"
-          />
-        }
         >
-        {desc}
+          Edit
-      </LabeledList.Item>
+        </Button>
-      <LabeledList.Item
+      </Box>
-        label="Description (Absorbed)"
+      <DescriptionSyntaxHighlighting desc={desc} />
-        buttons={
+      <Box color="label" mt={2} mb={1}>
+        Description (Absorbed):{' '}
         <Button
-            onClick={() =>
+          icon="pencil"
-              act('set_attribute', { attribute: 'b_absorbed_desc' })
+          onClick={() => act('set_attribute', { attribute: 'b_absorbed_desc' })}
-            }
-            icon="pen"
-          />
-        }
         >
-        {absorbed_desc}
+          Edit
-      </LabeledList.Item>
+        </Button>
+      </Box>
+      <DescriptionSyntaxHighlighting desc={absorbed_desc} />
+      <Box mb={2} />
+      <LabeledList>
         <LabeledList.Item label="Vore Verb">
           <Button onClick={() => act('set_attribute', { attribute: 'b_verb' })}>
             {verb}
@@ -61,7 +95,9 @@ export const VoreSelectedBellyDescriptions = (props: {
         </LabeledList.Item>
         <LabeledList.Item label="Release Verb">
           <Button
-          onClick={() => act('set_attribute', { attribute: 'b_release_verb' })}
+            onClick={() =>
+              act('set_attribute', { attribute: 'b_release_verb' })
+            }
           >
             {release_verb}
           </Button>
@@ -159,5 +195,6 @@ export const VoreSelectedBellyDescriptions = (props: {
           </Button>
         </LabeledList.Item>
       </LabeledList>
+    </Box>
   );
 };

tgui/packages/tgui/interfaces/chompstation/VorePanel/VoreSelectedBellyTabs/VoreSelectedBellyVisuals.tsx

@@ -1,13 +1,14 @@
 import { classes } from 'common/react';
-
+import { useBackend } from 'tgui/backend';
-import { useBackend } from '../../../../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,7 +286,9 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
             back_color="#FFFFFF"
             name_of="Alpha"
           />
-        </Flex>
+        </Stack>
+        <Box mt={1}>
+          <LabeledList>
             <LabeledList.Item label="Enable Coloration">
               <Button
                 onClick={() =>
@@ -315,6 +318,8 @@ export const VoreSelectedBellyVisuals = (props: { belly: selectedData }) => {
                 Clear
               </Button>
             </LabeledList.Item>
+          </LabeledList>
+        </Box>
       </Section>
       <Section>
         <Section title="Vore FX">

tgui/packages/tgui/interfaces/chompstation/VorePanel/constants.ts

@@ -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',
+};