mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2026-08-22 20:48:56 +01:00
[MODULAR] Prefs Menu Refactor: Fine, I'll Do It Myself Edition (#8695)
* We're getting there. * It's ugly but it works * Ladies and gentlemen, we got 'em. * Marking my Skyrat Edits and removing debug shit * A fix for the Other gender button * Augmented folks rejoice! * Update tgui/packages/tgui/interfaces/PreferencesMenu/MainPage.tsx Co-authored-by: Gandalf <jzo123@hotmail.com>
This commit is contained in:
co-authored by
Gandalf
parent
d8d9cf7fde
commit
09dd38bb2d
@@ -166,6 +166,9 @@ GLOBAL_LIST_EMPTY(preferences_datums)
|
||||
//SKYRAT EDIT BEGIN
|
||||
data["preview_options"] = list(PREVIEW_PREF_JOB, PREVIEW_PREF_LOADOUT, PREVIEW_PREF_UNDERWEAR, PREVIEW_PREF_NAKED, PREVIEW_PREF_NAKED_AROUSED)
|
||||
data["preview_selection"] = preview_pref
|
||||
|
||||
data["quirks_balance"] = GetQuirkBalance()
|
||||
data["positive_quirk_count"] = GetPositiveQuirkCount()
|
||||
//SKYRAT EDIT END
|
||||
|
||||
data["character_preferences"] = compile_character_preferences(user)
|
||||
@@ -332,6 +335,10 @@ GLOBAL_LIST_EMPTY(preferences_datums)
|
||||
return FALSE
|
||||
|
||||
return TRUE
|
||||
|
||||
// For the quirks in the prefs menu.
|
||||
if ("get_quirks_balance")
|
||||
return TRUE
|
||||
//SKYRAT EDIT END
|
||||
|
||||
|
||||
|
||||
+28
-7
@@ -30,7 +30,8 @@
|
||||
"liver" = "Liver",
|
||||
"stomach" = "Stomach",
|
||||
"eyes" = "Eyes",
|
||||
"tongue" = "Tongue"
|
||||
"tongue" = "Tongue",
|
||||
"Mouth implant" = "Mouth implant"
|
||||
)
|
||||
|
||||
var/list/aug_support = list(
|
||||
@@ -41,10 +42,14 @@
|
||||
"chest" = FALSE, // TODO: figure out why head/chest augs dont render, needed for IPC head on non IPC body
|
||||
"head" = FALSE,
|
||||
"l_hand" = FALSE,
|
||||
"r_hand" = FALSE
|
||||
"r_hand" = FALSE,
|
||||
)
|
||||
var/list/nice_aug_names = list()
|
||||
var/list/augment_to_path = list()
|
||||
var/list/costs = list(
|
||||
AUGMENT_CATEGORY_LIMBS = list(),
|
||||
AUGMENT_CATEGORY_ORGANS = list(),
|
||||
)
|
||||
var/list/robotic_styles
|
||||
|
||||
/datum/preference_middleware/limbs_and_markings/proc/set_limb_aug(list/params, mob/user)
|
||||
@@ -179,8 +184,15 @@
|
||||
nice_aug_names[limb] = list()
|
||||
for(var/augments in GLOB.augment_slot_to_items[limbs_to_process[limb]])
|
||||
var/obj/item/aug = augments
|
||||
nice_aug_names[limb][augments] = initial(aug.name)
|
||||
augment_to_path[initial(aug.name)] = augments
|
||||
var/cost = 0
|
||||
if(GLOB.augment_items[augments])
|
||||
var/datum/augment_item/expensive_augment = GLOB.augment_items[augments]
|
||||
cost = expensive_augment.cost
|
||||
// To display the cost of the limb, if it's anything aside from 0.
|
||||
var/aug_name = cost != 0 ? initial(aug.name) + " ([cost])" : initial(aug.name)
|
||||
costs[AUGMENT_CATEGORY_LIMBS][aug_name] = cost
|
||||
nice_aug_names[limb][augments] = aug_name
|
||||
augment_to_path[aug_name] = augments
|
||||
nice_aug_names[limb]["none"] = "None"
|
||||
var/chosen_augment
|
||||
if(preferences.augments[limbs_to_process[limb]] && !isnull(nice_aug_names[limb][preferences.augments[limbs_to_process[limb]]]))
|
||||
@@ -194,6 +206,7 @@
|
||||
"chosen_aug" = chosen_augment,
|
||||
"chosen_style" = preferences.augment_limb_styles[limbs_to_process[limb]] ? preferences.augment_limb_styles[limbs_to_process[limb]] : "None",
|
||||
"aug_choices" = nice_aug_names[limb],
|
||||
"costs" = costs[AUGMENT_CATEGORY_LIMBS],
|
||||
"markings" = list(
|
||||
"marking_choices" = GLOB.body_markings_per_limb[limb],
|
||||
"markings_list" = fix_colors_on_markings_to_tgui(preferences.body_markings[limb], limb)
|
||||
@@ -208,8 +221,15 @@
|
||||
nice_aug_names[organ] = list()
|
||||
for(var/augments in GLOB.augment_slot_to_items[organs_to_process[organ]])
|
||||
var/obj/item/aug = augments
|
||||
nice_aug_names[organ][augments] = initial(aug.name)
|
||||
augment_to_path[initial(aug.name)] = augments
|
||||
var/cost = 0
|
||||
if(GLOB.augment_items[augments])
|
||||
var/datum/augment_item/expensive_augment = GLOB.augment_items[augments]
|
||||
cost = expensive_augment.cost
|
||||
// To display the cost of the limb, if it's anything aside from 0.
|
||||
var/aug_name = cost != 0 ? initial(aug.name) + " ([cost])" : initial(aug.name)
|
||||
costs[AUGMENT_CATEGORY_ORGANS][aug_name] = cost
|
||||
nice_aug_names[organ][augments] = aug_name
|
||||
augment_to_path[aug_name] = augments
|
||||
nice_aug_names[organ]["organic"] = "Organic"
|
||||
var/chosen_organ
|
||||
if(preferences.augments[organs_to_process[organ]] && !isnull(nice_aug_names[organ][preferences.augments[organs_to_process[organ]]]))
|
||||
@@ -220,7 +240,8 @@
|
||||
"slot" = organ,
|
||||
"name" = organs_to_process[organ],
|
||||
"chosen_organ" = chosen_organ,
|
||||
"organ_choices" = nice_aug_names[organ]
|
||||
"organ_choices" = nice_aug_names[organ],
|
||||
"costs" = costs[AUGMENT_CATEGORY_ORGANS]
|
||||
))
|
||||
|
||||
data["organs_data"] = organs_data
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
augment_limb_styles = SANITIZE_LIST(augment_limb_styles)
|
||||
//validating limb styles
|
||||
for(var/key in augment_limb_styles)
|
||||
if(!GLOB.robotic_styles_list[key])
|
||||
if(!GLOB.robotic_styles_list[augment_limb_styles[key]])
|
||||
augment_limb_styles -= key
|
||||
|
||||
|
||||
|
||||
@@ -157,7 +157,7 @@ export const CharacterPreferenceWindow = (props, context) => {
|
||||
page={Page.Limbs}
|
||||
setPage={setCurrentPage}
|
||||
>
|
||||
Limb Augumentation/Marking
|
||||
Augments+
|
||||
</PageButton>
|
||||
</Stack.Item>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Stack, Section, Dropdown, Button, ColorBox } from "../../components";
|
||||
import { Box, Stack, Section, Dropdown, Button, ColorBox } from "../../components";
|
||||
import { useBackend } from "../../backend";
|
||||
import { PreferencesMenuData } from "./data";
|
||||
import { CharacterPreview } from "./CharacterPreview";
|
||||
@@ -6,13 +6,13 @@ import { CharacterPreview } from "./CharacterPreview";
|
||||
export const Markings = (props, context) => {
|
||||
const { act } = useBackend<PreferencesMenuData>(context);
|
||||
return (
|
||||
<Stack vertical>
|
||||
<Stack fill vertical>
|
||||
<Stack.Item>
|
||||
Markings:
|
||||
</Stack.Item>
|
||||
{props.limb.markings.markings_list.map((marking, index) => (
|
||||
<Stack.Item key={marking.marking_id}>
|
||||
<Stack>
|
||||
<Stack fill>
|
||||
<Stack.Item grow>
|
||||
<Dropdown
|
||||
width="100%"
|
||||
@@ -55,60 +55,70 @@ export const Markings = (props, context) => {
|
||||
export const LimbPage = (props, context) => {
|
||||
const { act } = useBackend<PreferencesMenuData>(context);
|
||||
return (
|
||||
<Section title={props.limb.name}>
|
||||
<Stack fill vertical>
|
||||
<Stack.Item>
|
||||
<Markings
|
||||
limb={props.limb}
|
||||
/>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Section>
|
||||
<div>
|
||||
<Section fill title={props.limb.name}>
|
||||
<Stack vertical fill>
|
||||
<Stack.Item>
|
||||
<Markings
|
||||
limb={props.limb}
|
||||
/>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AugmentationPage = (props, context) => {
|
||||
const { act } = useBackend<PreferencesMenuData>(context);
|
||||
const { data } = useBackend<PreferencesMenuData>(context);
|
||||
let balance = -data.quirks_balance;
|
||||
if (props.limb.can_augment) {
|
||||
return (
|
||||
<Section title={props.limb.name}>
|
||||
<Stack fill vertical>
|
||||
<Stack.Item>
|
||||
<Stack vertical>
|
||||
<Stack.Item>
|
||||
<Stack fill>
|
||||
<Stack.Item>
|
||||
Augumentation:
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>
|
||||
<Dropdown grow
|
||||
width="100%"
|
||||
options={Object.values(props.limb.aug_choices)}
|
||||
displayText={props.limb.chosen_aug}
|
||||
onSelected={(value) => act("set_limb_aug", { limb_slot: props.limb.slot, augment_name: value })}
|
||||
/>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Stack fill vertical>
|
||||
<Stack.Item>
|
||||
Style:
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>
|
||||
<Dropdown grow
|
||||
width="100%"
|
||||
options={props.data.robotic_styles}
|
||||
displayText={props.limb.chosen_style}
|
||||
onSelected={(value) => act("set_limb_aug_style", { limb_slot: props.limb.slot, style_name: value })}
|
||||
/>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Section>
|
||||
<div style={{ "margin-bottom": "1.5em" }}>
|
||||
<Section fill title={props.limb.name}>
|
||||
<Stack fill vertical>
|
||||
<Stack.Item>
|
||||
<Stack fill>
|
||||
<Stack.Item>
|
||||
Augumentation:
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>
|
||||
<Dropdown grow
|
||||
width="100%"
|
||||
options={Object.values(props.limb.aug_choices)}
|
||||
displayText={props.limb.chosen_aug}
|
||||
onSelected={(value) =>
|
||||
{
|
||||
// Since the costs are positive,
|
||||
// it's added and not substracted
|
||||
if (balance + props.limb.costs[value] > 0) {
|
||||
return;
|
||||
}
|
||||
act("set_limb_aug", { limb_slot: props.limb.slot, augment_name: value });
|
||||
}}
|
||||
/>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Stack fill vertical>
|
||||
<Stack.Item>
|
||||
Style:
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>
|
||||
<Dropdown grow
|
||||
width="100%"
|
||||
options={props.data.robotic_styles}
|
||||
displayText={props.limb.chosen_style}
|
||||
onSelected={(value) => act("set_limb_aug_style", { limb_slot: props.limb.slot, style_name: value })}
|
||||
/>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
@@ -116,6 +126,8 @@ export const AugmentationPage = (props, context) => {
|
||||
|
||||
export const OrganPage = (props, context) => {
|
||||
const { act } = useBackend<PreferencesMenuData>(context);
|
||||
const { data } = useBackend<PreferencesMenuData>(context);
|
||||
let balance = -data.quirks_balance;
|
||||
return (
|
||||
<Stack.Item>
|
||||
<Stack fill>
|
||||
@@ -127,7 +139,14 @@ export const OrganPage = (props, context) => {
|
||||
width="100%"
|
||||
options={Object.values(props.organ.organ_choices)}
|
||||
displayText={props.organ.chosen_organ}
|
||||
onSelected={(value) => act("set_organ_aug", { organ_slot: props.organ.slot, augment_name: value })}
|
||||
onSelected={(value) =>
|
||||
{
|
||||
// Since the costs are positive, it's added and not substracted
|
||||
if (balance + props.organ.costs[value] > 0) {
|
||||
return;
|
||||
}
|
||||
act("set_organ_aug", { organ_slot: props.organ.slot, augment_name: value });
|
||||
}}
|
||||
/>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
@@ -139,19 +158,20 @@ export const LimbsPage = (props, context) => {
|
||||
const { data } = useBackend<PreferencesMenuData>(context);
|
||||
const { act } = useBackend<PreferencesMenuData>(context);
|
||||
const markings = data.marking_presets ? data.marking_presets : [];
|
||||
let balance = -data.quirks_balance;
|
||||
return (
|
||||
<Stack fill>
|
||||
<Stack.Item minWidth="33%">
|
||||
<Section title="Markings">
|
||||
<Stack.Item>
|
||||
<Stack minHeight="100%">
|
||||
<Stack.Item minWidth="33%" minHeight="100%">
|
||||
<Section fill scrollable title="Markings" height="237%">
|
||||
<div>
|
||||
<Dropdown grow
|
||||
width="100%"
|
||||
options={Object.values(markings)}
|
||||
displayText="Pick a preset:"
|
||||
onSelected={(value) => act("set_preset", { preset: value })}
|
||||
/>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
</div>
|
||||
<div>
|
||||
{data.limbs_data.map(val => (
|
||||
<LimbPage
|
||||
key={val.slot}
|
||||
@@ -159,20 +179,39 @@ export const LimbsPage = (props, context) => {
|
||||
data={data}
|
||||
/>
|
||||
))}
|
||||
</Stack.Item>
|
||||
</div>
|
||||
</Section>
|
||||
</Stack.Item>
|
||||
<Stack.Item minWidth="33%">
|
||||
<Section fill title="Character Preview">
|
||||
<Section title="Character Preview" fill align="center" height="237%">
|
||||
<CharacterPreview
|
||||
id={data.character_preview_view}
|
||||
height="25%"
|
||||
width="100%"
|
||||
/>
|
||||
<Box style={{
|
||||
"margin-top": "3em",
|
||||
}}>
|
||||
<Section title="Quirk Points Balance" />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
backgroundColor="#eee"
|
||||
bold
|
||||
color="black"
|
||||
fontSize="1.2em"
|
||||
py={0.5}
|
||||
style={{
|
||||
"width": "20%",
|
||||
"align-items": "center",
|
||||
}}
|
||||
>
|
||||
{balance}
|
||||
</Box>
|
||||
</Section>
|
||||
</Stack.Item>
|
||||
<Stack.Item minWidth="33%">
|
||||
<Section title="Organs">
|
||||
<Section fill title="Organs" height="87%">
|
||||
<Stack fill vertical>
|
||||
{data.organs_data.map(val => (
|
||||
<OrganPage
|
||||
@@ -183,7 +222,7 @@ export const LimbsPage = (props, context) => {
|
||||
))}
|
||||
</Stack>
|
||||
</Section>
|
||||
<Section title="Augmentations">
|
||||
<Section fill scrollable title="Augmentations" height="148%">
|
||||
{data.limbs_data.map(val => (
|
||||
<AugmentationPage
|
||||
key={val.slot}
|
||||
|
||||
@@ -13,7 +13,7 @@ import { filterMap, sortBy } from "common/collections";
|
||||
import { useRandomToggleState } from "./useRandomToggleState";
|
||||
|
||||
const CLOTHING_CELL_SIZE = 48;
|
||||
const CLOTHING_SIDEBAR_ROWS = 9;
|
||||
const CLOTHING_SIDEBAR_ROWS = 13.4; // SKYRAT EDIT CHANGE - ORIGINAL: 9
|
||||
|
||||
const CLOTHING_SELECTION_CELL_SIZE = 48;
|
||||
const CLOTHING_SELECTION_WIDTH = 5.4;
|
||||
@@ -525,13 +525,14 @@ export const MainPage = (props: {
|
||||
|
||||
<Stack.Item grow>
|
||||
<CharacterPreview
|
||||
height="100%"
|
||||
height="80%" // SKYRAT EDIT - ORIGINAL: height="100%"
|
||||
id={data.character_preview_view} />
|
||||
</Stack.Item>
|
||||
|
||||
<Dropdown
|
||||
// SKYRAT EDIT ADDITION
|
||||
width="100%"
|
||||
position="relative"
|
||||
selected={data.preview_selection}
|
||||
options={data.preview_options}
|
||||
onSelected={value => act('update_preview', {
|
||||
|
||||
@@ -109,7 +109,7 @@ const QuirkList = (props: {
|
||||
);
|
||||
};
|
||||
|
||||
const StatDisplay: StatelessComponent<{}> = (props) => {
|
||||
export const StatDisplay: StatelessComponent<{}> = (props) => { // SKYRAT EDIT
|
||||
return (
|
||||
<Box
|
||||
backgroundColor="#eee"
|
||||
@@ -135,8 +135,9 @@ export const QuirksPage = (props, context) => {
|
||||
|
||||
return (
|
||||
<ServerPreferencesFetcher
|
||||
render={data => {
|
||||
if (!data) {
|
||||
// SKYRAT EDIT START - Quirks balance refactor
|
||||
render={quirks_data => {
|
||||
if (!quirks_data) { // SKYRAT EDIT END
|
||||
return <Box>Loading quirks...</Box>;
|
||||
}
|
||||
|
||||
@@ -144,7 +145,7 @@ export const QuirksPage = (props, context) => {
|
||||
max_positive_quirks: maxPositiveQuirks,
|
||||
quirk_blacklist: quirkBlacklist,
|
||||
quirk_info: quirkInfo,
|
||||
} = data.quirks;
|
||||
} = quirks_data.quirks; // SKYRAT EDIT - Quirks balance refactor
|
||||
|
||||
const quirks = Object.entries(quirkInfo);
|
||||
quirks.sort(([_, quirkA], [__, quirkB]) => {
|
||||
@@ -155,21 +156,10 @@ export const QuirksPage = (props, context) => {
|
||||
}
|
||||
});
|
||||
|
||||
let balance = 0;
|
||||
let positiveQuirks = 0;
|
||||
|
||||
for (const selectedQuirkName of selectedQuirks) {
|
||||
const selectedQuirk = quirkInfo[selectedQuirkName];
|
||||
if (!selectedQuirk) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (selectedQuirk.value > 0) {
|
||||
positiveQuirks += 1;
|
||||
}
|
||||
|
||||
balance += selectedQuirk.value;
|
||||
}
|
||||
// SKYRAT EDIT START - Better Quirk Count Code
|
||||
let balance = -data.quirks_balance;
|
||||
let positiveQuirks = data.positive_quirk_count;
|
||||
// SKYRAT EDIT END
|
||||
|
||||
const getReasonToNotAdd = (quirkName: string) => {
|
||||
const quirk = quirkInfo[quirkName];
|
||||
|
||||
@@ -55,7 +55,7 @@ export type Quirk = {
|
||||
value: number;
|
||||
};
|
||||
|
||||
// SKYRAT EDIT
|
||||
// SKYRAT EDIT START
|
||||
export type Language = {
|
||||
description: string;
|
||||
name: string;
|
||||
@@ -80,6 +80,7 @@ export type Limb = {
|
||||
chosen_aug: string;
|
||||
chosen_style: string;
|
||||
aug_choices: Record<string, string>;
|
||||
costs: Record<string, number>;
|
||||
markings: MarkingData;
|
||||
};
|
||||
|
||||
@@ -88,6 +89,7 @@ export type Organ = {
|
||||
name: string;
|
||||
chosen_organ: string;
|
||||
organ_choices: Record<string, string>
|
||||
costs: Record<string, number>;
|
||||
};
|
||||
|
||||
// SKYRAT EDIT END
|
||||
@@ -182,6 +184,9 @@ export type PreferencesMenuData = {
|
||||
selected_languages: Language[];
|
||||
unselected_languages: Language[];
|
||||
total_language_points: number;
|
||||
|
||||
quirks_balance: number;
|
||||
positive_quirk_count: number;
|
||||
// SKYRAT EDIT END
|
||||
keybindings: Record<string, string[]>;
|
||||
overflow_role: string;
|
||||
|
||||
@@ -16,7 +16,7 @@ export const GENDERS = {
|
||||
},
|
||||
|
||||
[Gender.Other]: {
|
||||
icon: "tg-non-binary",
|
||||
icon: "question", // SKYRAT EDIT CHANGE - ORIGINAL: icon: "tg-non-binary"
|
||||
text: "Other",
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user