From 5dac4b7d0ff5d8afd630dc889249ff43279ae7c8 Mon Sep 17 00:00:00 2001 From: MrMelbert <51863163+MrMelbert@users.noreply.github.com> Date: Sun, 16 Jul 2023 23:13:13 -0500 Subject: [PATCH] Cuts copypaste from Antag Info UIs (#76736) ## About The Pull Request Instead of copy-pasting this `Objective` type and component into every UI, let's just import it yeah? The only one I didn't remove this from is the one Blob uses, because it did some unique things. Left it be.
UIs work ![image](https://github.com/tgstation/tgstation/assets/51863163/4bd47675-98d5-4f02-825c-50cd3aa2fa63)
Also removed a now-unused Family antag info ui. ## Why It's Good For The Game Cleaner code ## Changelog :cl: Melbert refactor: Refactored display-ing of antag objectives in their UIs /:cl: --- .../tgui/interfaces/AntagInfoBlob.tsx | 13 +- .../tgui/interfaces/AntagInfoBrainwashed.tsx | 54 +++----- .../tgui/interfaces/AntagInfoBrother.tsx | 33 +---- .../tgui/interfaces/AntagInfoChangeling.tsx | 27 +--- .../tgui/interfaces/AntagInfoDemon.tsx | 36 +----- .../tgui/interfaces/AntagInfoGangmember.tsx | 115 ------------------ .../tgui/interfaces/AntagInfoGeneric.tsx | 33 +---- .../tgui/interfaces/AntagInfoHeretic.tsx | 44 ++----- .../tgui/interfaces/AntagInfoMalf.tsx | 33 ++--- .../tgui/interfaces/AntagInfoSeparatist.tsx | 32 +---- .../tgui/interfaces/AntagInfoTraitor.tsx | 29 +---- .../tgui/interfaces/AntagInfoWizard.tsx | 54 +++----- .../tgui/interfaces/common/Objectives.tsx | 56 +++++++++ 13 files changed, 130 insertions(+), 429 deletions(-) delete mode 100644 tgui/packages/tgui/interfaces/AntagInfoGangmember.tsx create mode 100644 tgui/packages/tgui/interfaces/common/Objectives.tsx diff --git a/tgui/packages/tgui/interfaces/AntagInfoBlob.tsx b/tgui/packages/tgui/interfaces/AntagInfoBlob.tsx index e8efba04ac5..e8471a6a5ac 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoBlob.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoBlob.tsx @@ -1,6 +1,6 @@ -import { BooleanLike } from 'common/react'; import { useBackend } from '../backend'; import { Box, Collapsible, Divider, LabeledList, Section, Stack } from '../components'; +import { Objective } from './common/Objectives'; import { Window } from '../layouts'; @@ -9,16 +9,7 @@ type Data = { description: string; effects: string; name: string; - objectives: Objectives[]; -}; - -type Objectives = { - count: number; - name: string; - explanation: string; - complete: BooleanLike; - was_uncompleted: BooleanLike; - reward: number; + objectives: Objective[]; }; const BLOB_COLOR = '#556b2f'; diff --git a/tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx b/tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx index b24a3c2aa2c..bc7be496827 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx @@ -1,22 +1,15 @@ import { useBackend } from '../backend'; -import { Icon, Section, Stack } from '../components'; -import { BooleanLike } from 'common/react'; +import { Box, Icon, Section, Stack } from '../components'; import { Window } from '../layouts'; +import { ObjectivePrintout, Objective } from './common/Objectives'; -type Objective = { - count: number; - name: string; - explanation: string; - complete: BooleanLike; - was_uncompleted: BooleanLike; - reward: number; -}; - -type Info = { +type Data = { objectives: Objective[]; }; -export const AntagInfoBrainwashed = () => { +export const AntagInfoBrainwashed = (porps, context) => { + const { data } = useBackend(context); + return ( @@ -40,7 +33,15 @@ export const AntagInfoBrainwashed = () => { It is focusing on a single purpose... - + + This Directive must be followed. + + } + /> Follow the directives at any cost! @@ -54,28 +55,3 @@ export const AntagInfoBrainwashed = () => { ); }; - -const ObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { objectives } = data; - return ( - - - Your current objectives: - - - {(!objectives && 'None!') || - objectives.map((objective) => ( - <> - - {objective.count}. {objective.explanation} - - - This Directive must be followed. - - - ))} - - - ); -}; diff --git a/tgui/packages/tgui/interfaces/AntagInfoBrother.tsx b/tgui/packages/tgui/interfaces/AntagInfoBrother.tsx index 2a2305a67db..327c46c8df9 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoBrother.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoBrother.tsx @@ -1,16 +1,7 @@ import { useBackend } from '../backend'; import { Section, Stack } from '../components'; -import { BooleanLike } from 'common/react'; import { Window } from '../layouts'; - -type Objective = { - count: number; - name: string; - explanation: string; - complete: BooleanLike; - was_uncompleted: BooleanLike; - reward: number; -}; +import { ObjectivePrintout, Objective } from './common/Objectives'; type Info = { antag_name: string; @@ -20,7 +11,7 @@ type Info = { export const AntagInfoBrother = (props, context) => { const { data } = useBackend(context); - const { antag_name, brothers } = data; + const { antag_name, brothers, objectives } = data; return ( @@ -30,7 +21,7 @@ export const AntagInfoBrother = (props, context) => { You are the {antag_name} of {brothers}! - + @@ -38,21 +29,3 @@ export const AntagInfoBrother = (props, context) => { ); }; - -const ObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { objectives } = data; - return ( - - Your objectives: - - {(!objectives && 'None!') || - objectives.map((objective) => ( - - #{objective.count}: {objective.explanation} - - ))} - - - ); -}; diff --git a/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx b/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx index 88eb71cd5a5..82b3fe2ff53 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoChangeling.tsx @@ -2,6 +2,7 @@ import { multiline } from 'common/string'; import { useBackend, useSharedState } from '../backend'; import { Button, Dimmer, Dropdown, Section, Stack, NoticeBox } from '../components'; import { Window } from '../layouts'; +import { ObjectivePrintout, Objective } from './common/Objectives'; const hivestyle = { fontWeight: 'bold', @@ -38,12 +39,6 @@ const fallenstyle = { fontWeight: 'bold', }; -type Objective = { - count: number; - name: string; - explanation: string; -}; - type Memory = { name: string; story: string; @@ -90,24 +85,6 @@ export const AntagInfoChangeling = (props, context) => { ); }; -const ObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { objectives } = data; - return ( - - Your current objectives: - - {(!objectives && 'None!') || - objectives.map((objective) => ( - - #{objective.count}: {objective.explanation} - - ))} - - - ); -}; - const HivemindSection = (props, context) => { const { act, data } = useBackend(context); const { true_name } = data; @@ -150,7 +127,7 @@ const IntroductionSection = (props, context) => { {hive_name}. - + diff --git a/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx b/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx index 2759fa5e9cb..c780beedf63 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoDemon.tsx @@ -2,6 +2,7 @@ import { useBackend } from '../backend'; import { Box, Section, Stack } from '../components'; import { BooleanLike } from 'common/react'; import { Window } from '../layouts'; +import { ObjectivePrintout, Objective } from './common/Objectives'; const jauntstyle = { color: 'lightblue', @@ -11,15 +12,6 @@ const injurestyle = { color: 'yellow', }; -type Objective = { - count: number; - name: string; - explanation: string; - complete: BooleanLike; - was_uncompleted: BooleanLike; - reward: number; -}; - type Info = { fluff: string; explain_attack: BooleanLike; @@ -48,7 +40,11 @@ export const AntagInfoDemon = (props, context) => { {fluff} - + @@ -88,26 +84,6 @@ export const AntagInfoDemon = (props, context) => { ); }; -const ObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { objectives } = data; - return ( - - - It is in your nature to accomplish these goals: - - - {(!objectives && 'None!') || - objectives.map((objective) => ( - - #{objective.count}: {objective.explanation} - - ))} - - - ); -}; - const DemonRunes = (props, context) => { return (
diff --git a/tgui/packages/tgui/interfaces/AntagInfoGangmember.tsx b/tgui/packages/tgui/interfaces/AntagInfoGangmember.tsx deleted file mode 100644 index cc0abefb13f..00000000000 --- a/tgui/packages/tgui/interfaces/AntagInfoGangmember.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { useBackend } from '../backend'; -import { BlockQuote, Icon, Section, Stack } from '../components'; -import { Window } from '../layouts'; - -type Info = { - antag_name: string; - gang_name: string; - gang_objective: string; - gang_clothes: string[]; -}; - -export const AntagInfoGangmember = (props, context) => { - const { data } = useBackend(context); - const { gang_name, antag_name } = data; - return ( - - -
- - - {gang_name} for life! You are a {antag_name}! - - - As a gang member, support your family above all! Tag turf with a - spraycan, wear your family's clothes, induct new members with - induction packages, and accomplish your family objective. - - - - - - - - - - - - - - - - - -
- - - ); -}; - -const GangClothesPrintout = (props, context) => { - const { data } = useBackend(context); - const { gang_name, gang_clothes } = data; - return ( - - - - - - - - Wear the following to represent the {gang_name}: - - - -
- {gang_clothes && gang_clothes.length - ? gang_clothes.map((clothes_item) => ( - - {clothes_item} - )) - : '- Anything!'} -
- - ); -}; - -const GangPhonePrintout = () => { - return ( - - - - - - - - You were given a cell phone with your induction package! - - - - -
- Use it in hand to activate it, then speak into it to talk with your - other family members. -
- - - ); -}; - -const GangObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { gang_objective } = data; - return ( - - - Your family's goal: - - - {gang_objective || 'No objective set! This is a problem!'} - - - ); -}; diff --git a/tgui/packages/tgui/interfaces/AntagInfoGeneric.tsx b/tgui/packages/tgui/interfaces/AntagInfoGeneric.tsx index a4941f8aa04..33b7623c44f 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoGeneric.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoGeneric.tsx @@ -1,16 +1,7 @@ import { useBackend } from '../backend'; import { Section, Stack } from '../components'; -import { BooleanLike } from 'common/react'; import { Window } from '../layouts'; - -type Objective = { - count: number; - name: string; - explanation: string; - complete: BooleanLike; - was_uncompleted: BooleanLike; - reward: number; -}; +import { ObjectivePrintout, Objective } from './common/Objectives'; type Info = { antag_name: string; @@ -19,7 +10,7 @@ type Info = { export const AntagInfoGeneric = (props, context) => { const { data } = useBackend(context); - const { antag_name } = data; + const { antag_name, objectives } = data; return ( @@ -29,7 +20,7 @@ export const AntagInfoGeneric = (props, context) => { You are the {antag_name}! - +
@@ -37,21 +28,3 @@ export const AntagInfoGeneric = (props, context) => { ); }; - -const ObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { objectives } = data; - return ( - - Your objectives: - - {(!objectives && 'None!') || - objectives.map((objective) => ( - - #{objective.count}: {objective.explanation} - - ))} - - - ); -}; diff --git a/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx b/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx index 34ed5f5ed07..19fb285b905 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoHeretic.tsx @@ -2,6 +2,7 @@ import { useBackend, useLocalState } from '../backend'; import { Section, Stack, Box, Tabs, Button, BlockQuote } from '../components'; import { Window } from '../layouts'; import { BooleanLike } from 'common/react'; +import { ObjectivePrintout, Objective } from './common/Objectives'; const hereticRed = { color: '#e03c3c', @@ -43,12 +44,6 @@ type KnowledgeInfo = { learnedKnowledge: Knowledge[]; }; -type Objective = { - count: number; - name: string; - explanation: string; -}; - type Info = { charges: number; total_sacrifices: number; @@ -56,7 +51,10 @@ type Info = { objectives: Objective[]; }; -const IntroductionSection = () => { +const IntroductionSection = (props, context) => { + const { data } = useBackend(context); + const { objectives } = data; + return ( @@ -71,7 +69,13 @@ const IntroductionSection = () => { - + + + @@ -194,28 +198,6 @@ const InformationSection = (props, context) => { ); }; -const ObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { objectives } = data; - return ( - - - - In order to ascend, you have these tasks to fulfill: - - - {(!objectives && 'None!') || - objectives.map((objective) => ( - - {objective.count}: {objective.explanation} - - ))} - - - - ); -}; - const ResearchedKnowledge = (props, context) => { const { data } = useBackend(context); const { learnedKnowledge } = data; @@ -313,8 +295,6 @@ export const AntagInfoHeretic = (props, context) => { { - const { data } = useBackend(context); - const { objectives } = data; - return ( - - Your prime objectives: - - {(!objectives && 'None!') || - objectives.map((objective) => ( - - ≥-{objective.count}: {objective.explanation} - - ))} - - - ); -}; - const IntroductionSection = (props, context) => { const { act, data } = useBackend(context); - const { intro } = data; + const { intro, objectives } = data; return (
{intro} - +
diff --git a/tgui/packages/tgui/interfaces/AntagInfoSeparatist.tsx b/tgui/packages/tgui/interfaces/AntagInfoSeparatist.tsx index d7f3843c318..4475adba4e5 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoSeparatist.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoSeparatist.tsx @@ -1,12 +1,7 @@ import { useBackend } from '../backend'; import { Icon, Section, Stack } from '../components'; import { Window } from '../layouts'; - -type Objective = { - count: number; - name: string; - explanation: string; -}; +import { ObjectivePrintout, Objective } from './common/Objectives'; type Info = { objectives: Objective[]; @@ -35,7 +30,7 @@ export const AntagInfoSeparatist = (props, context) => { const IntroductionObjectives = (props, context) => { const { data } = useBackend(context); - const { nation } = data; + const { nation, objectives } = data; return (
@@ -43,7 +38,10 @@ const IntroductionObjectives = (props, context) => { You are the Separatist for a free {nation}! - +
@@ -88,21 +86,3 @@ const FrequentlyAskedQuestions = (props, context) => { ); }; - -const ObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { nation, objectives } = data; - return ( - - {nation}'s objectives: - - {(!objectives && 'None!') || - objectives.map((objective) => ( - - #{objective.count}: {objective.explanation} - - ))} - - - ); -}; diff --git a/tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx b/tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx index e083857062d..cc62986c085 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx @@ -3,6 +3,7 @@ import { multiline } from 'common/string'; import { BlockQuote, Button, Dimmer, Section, Stack } from '../components'; import { BooleanLike } from 'common/react'; import { Window } from '../layouts'; +import { ObjectivePrintout, Objective } from './common/Objectives'; const allystyle = { fontWeight: 'bold', @@ -19,12 +20,6 @@ const goalstyle = { fontWeight: 'bold', }; -type Objective = { - count: number; - name: string; - explanation: string; -}; - type Info = { has_codewords: BooleanLike; phrases: string; @@ -43,33 +38,15 @@ type Info = { objectives: Objective[]; }; -const ObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { objectives } = data; - return ( - - Your current objectives: - - {(!objectives && 'None!') || - objectives.map((objective) => ( - - #{objective.count}: {objective.explanation} - - ))} - - - ); -}; - const IntroductionSection = (props, context) => { const { act, data } = useBackend(context); - const { intro } = data; + const { intro, objectives } = data; return (
{intro} - +
diff --git a/tgui/packages/tgui/interfaces/AntagInfoWizard.tsx b/tgui/packages/tgui/interfaces/AntagInfoWizard.tsx index b7adc2f78c9..81e1e12994e 100644 --- a/tgui/packages/tgui/interfaces/AntagInfoWizard.tsx +++ b/tgui/packages/tgui/interfaces/AntagInfoWizard.tsx @@ -1,7 +1,7 @@ import { useBackend } from '../backend'; -import { Section, Stack } from '../components'; -import { BooleanLike } from 'common/react'; +import { Box, Section, Stack } from '../components'; import { Window } from '../layouts'; +import { ObjectivePrintout, Objective } from './common/Objectives'; const teleportstyle = { color: 'yellow', @@ -36,15 +36,6 @@ const grandritualstyle = { color: '#bd54e0', }; -type Objective = { - count: number; - name: string; - explanation: string; - complete: BooleanLike; - was_uncompleted: BooleanLike; - reward: number; -}; - type GrandRitual = { remaining: number; next_area: string; @@ -56,6 +47,9 @@ type Info = { }; export const AntagInfoWizard = (props, context) => { + const { data } = useBackend(context); + const { ritual, objectives } = data; + return ( @@ -67,7 +61,11 @@ export const AntagInfoWizard = (props, context) => { You are the Space Wizard! - + } + /> @@ -143,35 +141,13 @@ export const AntagInfoWizard = (props, context) => { ); }; -const ObjectivePrintout = (props, context) => { - const { data } = useBackend(context); - const { objectives, ritual } = data; - return ( - - - The Space Wizards Federation has given you the following tasks: - - - {(!objectives && 'None!') || - objectives.map((objective) => ( - - #{objective.count}: {objective.explanation} - - ))} - - - - ); -}; - -const RitualPrintout = (props, context) => { - const { data } = useBackend(context); - const { objectives, ritual } = data; +const RitualPrintout = (props: { ritual: GrandRitual }, context) => { + const { ritual } = props; if (!ritual.next_area) { - return ; + return null; } return ( - + Alternately, complete the{' '} Grand Ritual by invoking a ritual circle at several nexuses of power. @@ -181,6 +157,6 @@ const RitualPrintout = (props, context) => {
Your next ritual location is the {ritual.next_area}. - + ); }; diff --git a/tgui/packages/tgui/interfaces/common/Objectives.tsx b/tgui/packages/tgui/interfaces/common/Objectives.tsx new file mode 100644 index 00000000000..4ffb75d8d31 --- /dev/null +++ b/tgui/packages/tgui/interfaces/common/Objectives.tsx @@ -0,0 +1,56 @@ +import { BooleanLike } from 'common/react'; +import { InfernoNode } from 'inferno'; +import { Stack } from '../../components'; + +export type Objective = { + // The title of the objective, not actually displayed so optional + name?: string; + // What "number" objective this is, IE, its index in the list of objectives + count: number; + // The text explaining what this objective requires + explanation: string; + // Whether or not this objective is completed + complete: BooleanLike; +}; + +type ObjectivePrintoutProps = { + // For passing onto the Stack component + fill?: boolean; + // Allows additional components to follow the printout in the same stack + objectiveFollowup?: InfernoNode; + // The prefix to use for each objective, defaults to "#" (#1, #2) + objectivePrefix?: string; + // The font size to use for each objective + objectiveTextSize?: string; + // The objectives to print out + objectives: Objective[]; + // The title to use for the printout, defaults to "Your current objectives" + titleMessage?: string; +}; + +export const ObjectivePrintout = (props: ObjectivePrintoutProps, context) => { + const { + fill, + objectiveFollowup, + objectivePrefix, + objectiveTextSize, + objectives = [], + titleMessage, + } = props; + + return ( + + {titleMessage || `Your current objectives`}: + + {(objectives.length === 0 && 'None!') || + objectives.map((objective) => ( + + {objectivePrefix || '#'} + {objective.count}: {objective.explanation} + + ))} + + {!!objectiveFollowup && {objectiveFollowup}} + + ); +};