Add belly overlay coloring

code/modules/vore/eating/belly_obj_ch.dm

@@ -12,6 +12,8 @@
 		"Draining Liquids" = DM_FLAG_REAGENTSDRAIN
 		)
 
+	var/belly_fullscreen_color = "#823232"
+
 	var/show_liquids = FALSE //Moved from vorepanel_ch to be a belly var
 	var/show_fullness_messages = FALSE //Moved from vorepanel_ch to be a belly var
 

code/modules/vore/eating/belly_obj_vr.dm

@@ -291,7 +291,7 @@
 	if(belly_fullscreen)
 		var/obj/screen/fullscreen/F = L.overlay_fullscreen("belly", /obj/screen/fullscreen/belly)
 		F.icon_state = belly_fullscreen
-		// F.color = belly_fullscreen_color
+		F.color = belly_fullscreen_color //CHOMPEdit
 	else
 		L.clear_fullscreen("belly")
 

code/modules/vore/eating/vorepanel_ch.dm

@@ -3,4 +3,38 @@
 /datum/vore_look
 	var/show_liquids = FALSE
 	var/show_fullness_messages = FALSE
-*/ 
+*/ 
+
+/obj/screen/belly_fullscreen_preview
+	icon = 'icons/mob/screen_full_vore.dmi'
+	icon_state = ""
+	appearance_flags = 0
+
+/datum/vore_look
+	var/scloc = "1,1"
+	var/map_name
+	var/obj/screen/belly_fullscreen_preview/fullscreen_preview
+
+/*/datum/vore_look/tgui_static_data(mob/user)
+	var/list/data = ..()
+	data["mapRef"] = map_name
+	return data*/
+
+/datum/vore_look/New()
+	. = ..()
+	map_name = "belly_fullscreen_[REF(src)]_map"
+	fullscreen_preview = new()
+	fullscreen_preview.name = ""
+	fullscreen_preview.assigned_map = map_name
+	fullscreen_preview.del_on_map_removal = FALSE
+	fullscreen_preview.screen_loc = "[map_name]:[scloc]"
+
+/datum/vore_look/proc/update_preview_icon()
+	if(host.vore_selected)
+		var/obj/belly/selected = host.vore_selected
+		fullscreen_preview.icon_state = selected.belly_fullscreen
+		fullscreen_preview.color = selected.belly_fullscreen_color
+		fullscreen_preview.screen_loc = "[map_name]:[scloc]"
+
+/datum/vore_look/proc/give_client_previews(client/C)
+	C.register_map_obj(fullscreen_preview)

code/modules/vore/eating/vorepanel_vr.dm

@@ -49,6 +49,8 @@
 /datum/vore_look/tgui_interact(mob/user, datum/tgui/ui)
 	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
+		update_preview_icon()	//CHOMPEdit
+		give_client_previews(user.client) //CHOMPEdit
 		ui = new(user, src, "VorePanel", "Inside!")
 		ui.open()
 
@@ -134,7 +136,6 @@
 			"digest_mode" = B.digest_mode,
 			"contents" = LAZYLEN(B.contents),
 		)))
-
 	data["selected"] = null
 	if(host.vore_selected)
 		var/obj/belly/selected = host.vore_selected
@@ -158,6 +159,8 @@
 			"bulge_size" = selected.bulge_size,
 			"shrink_grow_size" = selected.shrink_grow_size,
 			"belly_fullscreen" = selected.belly_fullscreen,
+			"belly_fullscreen_color" = selected.belly_fullscreen_color,	//CHOMPEdit
+			"mapRef" = map_name,	//CHOMPEdit
 			"possible_fullscreens" = icon_states('icons/mob/screen_full_vore.dmi'),
 			"vorespawn_blacklist" = selected.vorespawn_blacklist
 		) //CHOMP Addition: vorespawn blacklist
@@ -906,6 +909,13 @@
 			. = TRUE
 		if("b_fullscreen")
 			host.vore_selected.belly_fullscreen = params["val"]
+			update_preview_icon()	//CHOMPEdit
+			. = TRUE
+		if("b_fullscreen_color") //CHOMPEdit Begin
+			var/newcolor = input(usr, "Choose a color.", "", host.vore_selected.belly_fullscreen_color) as color|null
+			if(newcolor)
+				host.vore_selected.belly_fullscreen_color = newcolor
+			update_preview_icon()	//CHOMPEdit
 			. = TRUE
 		if("b_disable_hud")
 			host.vore_selected.disable_hud = !host.vore_selected.disable_hud

tgui/packages/tgui/interfaces/VorePanel.js

@@ -2,7 +2,7 @@ import { round } from 'common/math';
 import { capitalize } from 'common/string';
 import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from "../backend";
-import { Box, Button, Flex, Collapsible, Icon, LabeledList, NoticeBox, Section, Tabs } from "../components";
+import { Box, Button, ByondUi, Flex, Collapsible, Icon, LabeledList, NoticeBox, Section, Tabs } from "../components";
 import { Window } from "../layouts";
 import { classes } from 'common/react';
 
@@ -91,13 +91,85 @@ const digestModeToPreyMode = {
  *          content={liq_giv ? "Taking Liquids Allowed" : "Do Not Allow Taking Liquids"} />
  *      </Flex.Item>
  *
+ * NEW EDITS 2/25/21: COLORED BELLY OVERLAYS
+ * 
+ * LINE 5 - import { Box, Button, ByondUi, Flex, Collapsible, Icon, LabeledList, NoticeBox, Section, Tabs } from "../components";
+ *
+ * LINE 172 - <Window width={700} height={800} resizable>
+ *
+ * LINE 301 - belly_fullscreen_color,
+ * mapRef,
+ *
+ * LINE 604 - <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 Color
+ *             </Button>
+ *           </Flex>
+ *           <ByondUi
+ *             style={{
+ *               width: '200px',
+ *               height: '200px',
+ *             }}
+ *             params={{
+ *               id: mapRef,
+ *               type: 'map',
+ *             }} />
+ *         </Section>
+ *         <Section height="260px" style={{ overflow: "auto" }}>
+ *           <Section title="Vore FX">
+ *             <LabeledList>
+ *               <LabeledList.Item label="Disable Prey HUD">
+ *                 <Button
+ *                   onClick={() => act("set_attribute", { attribute: "b_disable_hud" })}
+ *                   icon={disable_hud ? "toggle-on" : "toggle-off"}
+ *                   selected={disable_hud}
+ *                   content={disable_hud ? "Yes" : "No"} />
+ *               </LabeledList.Item>
+ *             </LabeledList>
+ *           </Section>
+ *           <Section title="Belly Fullscreens Styles">
+ *             Belly styles:
+ *             <Button
+ *               fluid
+ *               selected={belly_fullscreen === "" || belly_fullscreen === null}
+ *               onClick={() => act("set_attribute", { attribute: "b_fullscreen", val: null })}>
+ *               Disabled
+ *             </Button>
+ *             {Object.keys(possible_fullscreens).map(key => (
+ *               <Button
+ *                 key={key}
+ *                 width="256px"
+ *                 height="256px"
+ *                 selected={key === belly_fullscreen}
+ *                 onClick={() => act("set_attribute", { attribute: "b_fullscreen", val: key })}>
+ *                 <Box
+ *                   className={classes([
+ *                     'vore240x240',
+ *                     key,
+ *                   ])}
+ *                   style={{
+ *                     transform: 'translate(0%, 4%)',
+ *                   }} />
+ *               </Button>
+ *             ))}
+ *           </Section>
+ *         </Section>
+ *
+ * LINE 900 - const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
+ *
+ * return tabIndex===4 ? null : (
+ *
  * That's everything so far.
  *
  */
 export const VorePanel = (props, context) => {
   const { act, data } = useBackend(context);
   return (
-    <Window width={700} height={660} resizable>
+    <Window width={700} height={800} resizable>
       <Window.Content scrollable>
         {data.unsaved_changes && (
           <NoticeBox danger>
@@ -226,6 +298,8 @@ const VoreSelectedBelly = (props, context) => {
     interacts,
     contents,
     belly_fullscreen,
+    belly_fullscreen_color,
+    mapRef,
     possible_fullscreens,
     disable_hud,
     show_liq,
@@ -527,41 +601,63 @@ const VoreSelectedBelly = (props, context) => {
         </Section>
       ) || tabIndex === 4 && (
         <Fragment>
-          <Section title="Vore FX">
+          <Section title="Belly Fullscreens Preview and Coloring">
-            <LabeledList>
+            <Flex direction="row">
-              <LabeledList.Item label="Disable Prey HUD">
+              <Box backgroundColor={belly_fullscreen_color} width="20px" height="20px" />
-                <Button
-                  onClick={() => act("set_attribute", { attribute: "b_disable_hud" })}
-                  icon={disable_hud ? "toggle-on" : "toggle-off"}
-                  selected={disable_hud}
-                  content={disable_hud ? "Yes" : "No"} />
-              </LabeledList.Item>
-            </LabeledList>
-          </Section>
-          <Section title="Belly Fullscreens">
-            <Button
-              fluid
-              selected={belly_fullscreen === "" || belly_fullscreen === null}
-              onClick={() => act("set_attribute", { attribute: "b_fullscreen", val: null })}>
-              Disabled
-            </Button>
-            {Object.keys(possible_fullscreens).map(key => (
               <Button
-                key={key}
+                icon="eye-dropper"
-                width="256px"
+                onClick={() => act("set_attribute", { attribute: "b_fullscreen_color", val: null })}>
-                height="256px"
+                Select Color
-                selected={key === belly_fullscreen}
-                onClick={() => act("set_attribute", { attribute: "b_fullscreen", val: key })}>
-                <Box
-                  className={classes([
-                    'vore240x240',
-                    key,
-                  ])}
-                  style={{
-                    transform: 'translate(0%, 4%)',
-                  }} />
               </Button>
-            ))}
+            </Flex>
+            <ByondUi
+              style={{
+                width: '200px',
+                height: '200px',
+              }}
+              params={{
+                id: mapRef,
+                type: 'map',
+              }} />
+          </Section>
+          <Section height="260px" style={{ overflow: "auto" }}>
+            <Section title="Vore FX">
+              <LabeledList>
+                <LabeledList.Item label="Disable Prey HUD">
+                  <Button
+                    onClick={() => act("set_attribute", { attribute: "b_disable_hud" })}
+                    icon={disable_hud ? "toggle-on" : "toggle-off"}
+                    selected={disable_hud}
+                    content={disable_hud ? "Yes" : "No"} />
+                </LabeledList.Item>
+              </LabeledList>
+            </Section>
+            <Section title="Belly Fullscreens Styles">
+              Belly styles:
+              <Button
+                fluid
+                selected={belly_fullscreen === "" || belly_fullscreen === null}
+                onClick={() => act("set_attribute", { attribute: "b_fullscreen", val: null })}>
+                Disabled
+              </Button>
+              {Object.keys(possible_fullscreens).map(key => (
+                <Button
+                  key={key}
+                  width="256px"
+                  height="256px"
+                  selected={key === belly_fullscreen}
+                  onClick={() => act("set_attribute", { attribute: "b_fullscreen", val: key })}>
+                  <Box
+                    className={classes([
+                      'vore240x240',
+                      key,
+                    ])}
+                    style={{
+                      transform: 'translate(0%, 4%)',
+                    }} />
+                </Button>
+              ))}
+            </Section>
           </Section>
         </Fragment>
       ) || tabIndex === 5 && (
@@ -801,7 +897,9 @@ const VoreUserPreferences = (props, context) => {
     show_pictures,
   } = data;
 
-  return (
+  const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0);
+
+  return tabIndex===4 ? null : (
     <Section title="Preferences" buttons={
       <Button icon="eye" selected={show_pictures} onClick={() => act("show_pictures")}>
         Contents Preference: {show_pictures ? "Show Pictures" : "Show List"}