Skip to content

Updates the character preview box #1013

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
desertmote wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Updates the character preview box #1013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1f5ba81
initial
desertmote Apr 22, 2026
9a123c2
more backgrounds
desertmote Apr 22, 2026
43b79c0
update
desertmote Apr 22, 2026
54b6d96
fixie
desertmote Apr 22, 2026
97b0be9
nits bounding boxes
desertmote Apr 22, 2026
b6ba96f
clean up organ var better
desertmote Apr 22, 2026
b98876d
removes some garbage
desertmote Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions code/datums/sprite_accessories.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@
/// Determines if this is considered "sane" for the purpose of [/proc/randomize_human_normie]
/// Basically this is to blacklist the extremely wacky stuff from being picked in random human generation.
var/natural_spawn = TRUE
// DOPPLER SHIFT ADDITION START
/// If set TRUE, equipping this sprite accessory to your character will zoom out the character preview box. ONLY WORKS ON TAIL/HORNS/EARS
var/zooms_out_character_preview = FALSE
// DOPPLER SHIFT ADDITION END

/datum/sprite_accessory/blank
name = SPRITE_ACCESSORY_NONE
Expand Down
57 changes: 56 additions & 1 deletion code/modules/client/preferences.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,9 @@ GLOBAL_LIST_EMPTY(preferences_datums)
preview_pref = params["updated_preview"]
character_preview_view.update_body()
return TRUE

if("update_background")
update_preference(GLOB.preference_entries[/datum/preference/choiced/background_state], params["new_background"])
return TRUE
if ("set_tricolor_preference")
var/requested_preference_key = params["preference"]
var/index_key = params["value"]
Expand Down Expand Up @@ -391,12 +393,21 @@ GLOBAL_LIST_EMPTY(preferences_datums)
var/datum/preferences/preferences
/// Whether we show current job clothes or nude/loadout only
var/show_job_clothes = TRUE
// DOPPLER SHIFT ADDITION START: Better character preview
var/image/canvas
var/last_canvas_size
var/last_canvas_state
Comment on lines +397 to +399

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these should have /// autodocs

// DOPPLER SHIFT ADDITION END

/atom/movable/screen/map_view/char_preview/Initialize(mapload, datum/preferences/preferences)
. = ..()
src.preferences = preferences

/atom/movable/screen/map_view/char_preview/Destroy()
// DOPPLER SHIFT ADDITION START
canvas?.cut_overlays()
canvas = null
// DOPPLER SHIFT ADDITION END
QDEL_NULL(body)
preferences?.character_preview_view = null
preferences = null
Expand All @@ -411,6 +422,50 @@ GLOBAL_LIST_EMPTY(preferences_datums)

appearance = preferences.render_new_preview_appearance(body, show_job_clothes)

// DOPPLER SHIFT ADDITION BEGIN: Better character preview
var/canvas_state = preferences.read_preference(/datum/preference/choiced/background_state)
var/canvas_size = 0
if ((body.dna.features[FEATURE_TAUR] != /datum/sprite_accessory/taur/none::name))
Comment thread
desertmote marked this conversation as resolved.
canvas_size = 1
if (body.mob_height > 12)

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

define for the 12 value here, with a comment explaining Why 12?
like I have no idea why 12 specifically reading just this

canvas_size = 1
if (("Oversized" in preferences.all_quirks))

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably should At Least refer to the quirk's actual name ala typepath::name rather than a clean string?

canvas_size = 2
if(canvas_size == 0)
var/obj/item/organ/ears/ears = body.get_organ_slot(ORGAN_SLOT_EARS)
if(ears && ears?.bodypart_overlay?.sprite_datum?.zooms_out_character_preview)
canvas_size = 1
LAZYNULL(ears)

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are we using LAZYNULL(L), or like any null bit at all really, on a temporary var that's not even a list?

DopplerShift/code/__HELPERS/_lists.dm

Lines 75 to 76 in 4ecf316

///Sets a list to null
#define LAZYNULL(L) L = null

var/obj/item/organ/tail/tail = body.get_organ_slot(ORGAN_SLOT_EXTERNAL_TAIL)
if(tail && tail?.bodypart_overlay?.sprite_datum?.zooms_out_character_preview)
canvas_size = 1
LAZYNULL(tail)

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto on LAZYNULL(L)

var/obj/item/organ/horns/horns = body.get_organ_slot(ORGAN_SLOT_EXTERNAL_HORNS)
if(horns && horns?.bodypart_overlay?.sprite_datum?.zooms_out_character_preview)
canvas_size = 1
LAZYNULL(horns)
Comment on lines +427 to +446

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this may all be best handled as a separate get_canvas_size(...) proc, which starts with the higher value canvas sizes and just early returns.
like if we already set it to 2 from oversized, there's no reason to do ANY of the 1 checks
if we already set it to 1 from any of the other options, there's no reason to doany of the other 1 checks
this means we don't need to do the awkward if(canvas_size == 0) bit either, and also don't need to check for horns or tail after already checking for ears

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto on LAZYNULL(L)

body.pixel_x = canvas_size * 16

if (isnull(canvas) || last_canvas_size != canvas_size || last_canvas_state != canvas_state)
switch (canvas_size)
if (0)
canvas = image('modular_doppler/character_preview_background/icons/background_32x32.dmi', icon_state = canvas_state)
if (1)
canvas = image('modular_doppler/character_preview_background/icons/background_64x64.dmi', icon_state = canvas_state)
if (2)
Comment on lines +451 to +455

@00-Steven 00-Steven Apr 25, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all these canvas size bits should probably be defines that clarify what they actually mean, like CANVAS_SIZE_32x or w/e
cause right now it's a bunch of 0 1 2 with little to no context that're gonna be very very easy to accidentally mistype

canvas = image('modular_doppler/character_preview_background/icons/background_96x96.dmi', icon_state = canvas_state)

// Update the map view bounds when canvas size changes to properly display the scaled preview
set_position(1, 1)
last_canvas_size = canvas_size
last_canvas_state = canvas_state

canvas.cut_overlays()
canvas.add_overlay(body.appearance)

appearance = canvas.appearance
// DOPPLER SHIFT ADDITION END

/atom/movable/screen/map_view/char_preview/proc/create_body()
QDEL_NULL(body)

Expand Down
26 changes: 26 additions & 0 deletions modular_doppler/character_preview_background/code/character_preview_background.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/// Enables the choice of background in the character preview menu
/datum/preference/choiced/background_state
savefile_key = "background_state"
savefile_identifier = PREFERENCE_CHARACTER

GLOBAL_LIST_INIT(background_state_options, list(
"Black",
"Grey",
"White",
"Dark Tiles",
"Grey Tiles",
"White Tiles",
"Plating",
"Reinforced Floor",
"Grass",
"4CA",
))

/datum/preference/choiced/background_state/create_default_value()
return GLOB.background_state_options["Grey"]

/datum/preference/choiced/background_state/init_possible_values()
return GLOB.background_state_options

/datum/preference/choiced/background_state/apply_to_human(mob/living/carbon/human/target, value, datum/preferences/preferences)
return
Binary file added modular_doppler/character_preview_background/icons/background_32x32.dmi
View file
Open in desktop
Binary file not shown.
Binary file added modular_doppler/character_preview_background/icons/background_64x64.dmi
View file
Open in desktop
Binary file not shown.
Binary file added modular_doppler/character_preview_background/icons/background_96x96.dmi
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions modular_doppler/modular_customization/accessories/code/human_accessories/human_horns.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@
name = "Painted Points"
icon = 'modular_doppler/modular_customization/accessories/icons/human/horns_big.dmi'
icon_state = "paintedpoints"
zooms_out_character_preview = TRUE

/datum/sprite_accessory/horns/humanoid/big/whoshorns
name = "Who's Horns"
Expand Down
1 change: 1 addition & 0 deletions modular_doppler/modular_customization/accessories/code/lizard_accessories/lizard_tail.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
icon_state = "shadekin_large"
dimension_x = 64
center = TRUE
zooms_out_character_preview = TRUE

/datum/sprite_accessory/tails/lizard/big/shadekin_long
name = "Shadekin (Big)(Long)"
Expand Down
1 change: 1 addition & 0 deletions modular_doppler/modular_customization/accessories/code/monkey_accessories/monkey_tail.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@
icon_state = "bigring_large"
dimension_x = 64
center = TRUE
zooms_out_character_preview = TRUE
2 changes: 2 additions & 0 deletions ...lar_customization/accessories/code/non_species_specific/canine_accessories/canine_ears.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
icon = 'modular_doppler/modular_customization/accessories/icons/non_species_specific/canine/canine_ears_big.dmi'
name = "Acrador"
icon_state = "acrador"
zooms_out_character_preview = TRUE

/datum/sprite_accessory/ears_more/dog/large/acrador_large
name = "Acrador (Big)"
Expand All @@ -29,6 +30,7 @@
icon = 'modular_doppler/modular_customization/accessories/icons/non_species_specific/canine/canine_ears_big.dmi'
name = "Sandfox"
icon_state = "sandfox"
zooms_out_character_preview = TRUE

/datum/sprite_accessory/ears_more/dog/wolf
name = "Wolf"
Expand Down
1 change: 1 addition & 0 deletions ...ar_customization/accessories/code/non_species_specific/cervid_accessories/cervid_horns.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
icon = 'modular_doppler/modular_customization/accessories/icons/non_species_specific/cervid/cervid_horns_big.dmi'
name = "Antlers"
icon_state = "antlers"
zooms_out_character_preview = TRUE

/datum/sprite_accessory/horns/deer/big/wide
name = "Antlers (Wide)"
Expand Down
3 changes: 3 additions & 0 deletions ...r_customization/accessories/code/non_species_specific/leporid_accessories/leporid_ears.dm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@
icon = 'modular_doppler/modular_customization/accessories/icons/non_species_specific/leporid/leporid_ears_big.dmi'
name = "Lop (Big)"
icon_state = "rabbit_large"
zooms_out_character_preview = FALSE //ok this is a little awkward
// because these are the parent of the big subtype but also lop ears so niche case that doesn't need zooming. lol

/datum/sprite_accessory/ears_more/bunny/big/rabbit
name = "Bunny (Tall)"
icon_state = "bunny_large"
zooms_out_character_preview = TRUE
1 change: 1 addition & 0 deletions tgstation.dme
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6873,6 +6873,7 @@
#include "modular_doppler\carp_infusion\code\carp_organs.dm"
#include "modular_doppler\cell_component\code\cell_component.dm"
#include "modular_doppler\chamtoggle\code\datums\mutations\chameleon.dm"
#include "modular_doppler\character_preview_background\code\character_preview_background.dm"
#include "modular_doppler\chatroom_soul\code\chatroom_keybinding.dm"
#include "modular_doppler\chatroom_soul\code\irc_checks.dm"
#include "modular_doppler\chatroom_soul\code\irc_verbs.dm"
Expand Down
13 changes: 13 additions & 0 deletions tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/MainPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -621,6 +621,19 @@ export function MainPage(props: MainPageProps) {
})
}
/>
</Stack.Item>
{/* DOPPLER ADDITION START */}

@00-Steven 00-Steven Apr 25, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

already in a doppler edit a few lines up?

<Stack.Item position="relative">
<Dropdown
width="100%"
selected={data.character_preferences.misc.background_state}
options={serverData?.background_state.choices || []}
onSelected={(value) =>
act('update_background', {
new_background: value,
})
}
/>
</Stack.Item>
{/* DOPPLER ADDITION END */}
<Stack.Item position="relative">
Expand Down
24 changes: 23 additions & 1 deletion tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/QuirksPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Tooltip,
} from 'tgui-core/components';
import { createSearch } from 'tgui-core/string';
import { CharacterPreview } from '../../common/CharacterPreview'; // DOPPLER EDIT ADDITION

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto, comment for why


import {
type PreferencesMenuData,
Expand Down Expand Up @@ -95,6 +96,7 @@ function QuirkDisplay(props: QuirkDisplayProps) {
const { icon, value, name, description, customizable, failTooltip } = quirk;

const [customizationExpanded, setCustomizationExpanded] = useState(false);
const { data } = useBackend<PreferencesMenuData>(); // DOPPLER EDIT ADDITION

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto, comment for why


const className = 'PreferencesMenu__Quirks__QuirkList__quirk';

Expand Down Expand Up @@ -455,7 +457,27 @@ function QuirkPage() {
</Stack.Item>

<Stack.Item align="center">
<Icon name="exchange-alt" size={1.5} ml={2} mr={2} />
{/* <Icon name="exchange-alt" size={1.5} ml={2} mr={2} /> // DOPPLER EDIT REMOVAL - moved down */}
{/* DOPPLER EDIT ADDITION START */}

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto, comment for why

<Stack vertical fill align="center">
{/* Keep the CharacterPreview alive but "hidden", so that traits that affect appearance (e.g. Oversized) refresh rendering calculations immediately. */}
<Stack.Item
style={{
padding: '-1px',
width: 1,
height: 1,
opacity: 0.0,
}}
>
<CharacterPreview
id={data.character_preview_view}
height="1px"
width="1px"
/>
</Stack.Item>
<Icon name="exchange-alt" size={1.5} ml={2} mr={2} />
</Stack>
{/* DOPPLER EDIT ADDITION END */}
</Stack.Item>

<Stack.Item basis="50%">
Expand Down
1 change: 1 addition & 0 deletions tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/SpeciesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,7 @@ function SpeciesPageInner(props: SpeciesPageInnerProps) {
<CharacterPreview
id={data.character_preview_view}
height="100%"
width="179px" // DOPPLER SHIFT ADDITION

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto, comment for why
also

                      width="179px" // DOPPLER EDIT ADDITION - comment for why

/>
</Stack.Item>
</Stack>
Expand Down
2 changes: 1 addition & 1 deletion tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/loadout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ function LoadoutPreviewSection() {
>
<Stack vertical fill>
<Stack.Item grow align="center">
<CharacterPreview height="100%" id={data.character_preview_view} />
<CharacterPreview height="100%" width="240px" id={data.character_preview_view} /> {/* DOPPLER SHIFT CHANGE - ORIGINAL: <CharacterPreview height="100%" id={data.character_preview_view} /> */}

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

          <CharacterPreview height="100%" width="240px" id={data.character_preview_view} /> {/* DOPPLER EDIT CHANGE - ORIGINAL: <CharacterPreview height="100%" id={data.character_preview_view} /> */}

</Stack.Item>
<Stack.Divider />
<Stack.Item align="center">
Expand Down
9 changes: 9 additions & 0 deletions ...sMenu/preferences/features/character_preferences/doppler/character_preview_background.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import type { FeatureChoiced } from '../../base';
import { FeatureDropdownInput } from '../../dropdowns';

export const bgstate: FeatureChoiced = {
name: 'Character Preview Background',
description:
'What would you like the background for the character preview in the character creator to be?',
component: FeatureDropdownInput,
};
2 changes: 2 additions & 0 deletions tgui/packages/tgui/interfaces/PreferencesMenu/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@ export type PreferencesMenuData = {
species: string;
loadout_list: LoadoutList;
job_clothes: BooleanLike;
background_state: string; // DOPPLER SHIFT ADDITION: Swappable character editor backgrounds

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

      background_state: string; // DOPPLER EDIT ADDITION - Swappable character editor backgrounds

};

randomization: Record<string, RandomSetting>;
Expand Down Expand Up @@ -270,5 +271,6 @@ export type ServerData = {
loadout_tabs: LoadoutCategory[];
};
species: Record<string, Species>;
background_state: { choices: string[] }; // DOPPLER SHIFT ADDITION

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto, comment for why

  background_state: { choices: string[] }; // DOPPLER EDIT ADDITION - comment for why

[otherKey: string]: unknown;
};
5 changes: 5 additions & 0 deletions tgui/packages/tgui/interfaces/PreferencesMenu/useServerPrefs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ export const ServerPrefs = createContext<ServerData | undefined>({
loadout_tabs: [],
},
species: {},
// DOPPLER SHIFT ADDITION START - Background Selection
background_state: {
choices: [],
},
// DOPPLER SHIFT ADDITION END
Comment on lines +30 to +34

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// DOPPLER SHIFT ADDITION START - Background Selection
background_state: {
choices: [],
},
// DOPPLER SHIFT ADDITION END
// DOPPLER EDIT ADDITION START - Background Selection
background_state: {
choices: [],
},
// DOPPLER EDIT ADDITION END

});

export function useServerPrefs() {
Expand Down
11 changes: 9 additions & 2 deletions tgui/packages/tgui/interfaces/common/CharacterPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import { ByondUi } from 'tgui-core/components';

export const CharacterPreview = (props: { height: string; id: string }) => {
export const CharacterPreview = (props: {
width?: string; // DOPPLER SHIFT EDIT
height: string;
id: string;
}) => {
Comment on lines -3 to +7

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

turning this from a single line to a multiline sounds like it's gonna be awkward when pulling parity changes to this file
I'm not proficient enough in tgui to propose a good method, but it really should be marked in some way. Potentially commenting out the single line and making it a like

// DOPPLER EDIT CHANGE START - what we do / why
new code here
// DOPPLER EDIT CHANGE END
// DOPPLER EDIT CHANGE ORIGINAL START
// commented out single line
// DOPPLER EDIT CHANGE ORIGINAL END

or the other way around, for that matter

// DOPPLER SHIFT ADDITION START
const { width = '300px' } = props;
// DOPPLER SHIFT ADDITION END
Comment on lines +8 to +10

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

  // DOPPLER EDIT ADDITION START - why we make this change
  const { width = '300px' } = props;
  // DOPPLER EDIT ADDITION END

alternatively: single line edit, cause it's a single line

  const { width = '300px' } = props; // DOPPLER EDIT ADDITION START - why we make this change

return (
<ByondUi
width="220px"
width={width} // DOPPLER SHIFT EDIT

@00-Steven 00-Steven Apr 27, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

      width={width} // DOPPLER EDIT ADDITION - why we make this change - Original: width="220px"

height={props.height}
params={{
id: props.id,
Expand Down
Loading