[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:
GoldenAlpharex
2021-10-08 23:18:10 +01:00
committed by GitHub
co-authored by Gandalf
parent d8d9cf7fde
commit 09dd38bb2d
9 changed files with 156 additions and 93 deletions
+7
View File
@@ -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
@@ -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",
},
};