Skills and clockwork build
This commit is contained in:
Artur
@@ -17,7 +17,7 @@
|
||||
/datum/skill_holder/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/ui_state/state = GLOB.always_state)
|
||||
ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
|
||||
if(!ui)
|
||||
ui = new(user, src, ui_key, "skillpanel", "[owner.name]'s Skills", 620, 580, master_ui, state)
|
||||
ui = new(user, src, ui_key, "SkillPanel", "[owner.name]'s Skills", 620, 580, master_ui, state)
|
||||
ui.set_autoupdate(FALSE) // This UI is only ever opened by one person, and never is updated outside of user input.
|
||||
ui.open()
|
||||
else if(need_static_data_update)
|
||||
|
||||
@@ -45,53 +45,50 @@ export const ClockworkSlab = (props, context) => {
|
||||
onClick={() => act('toggle')}
|
||||
/>
|
||||
</Section>
|
||||
{recollection
|
||||
? ( // tutorial
|
||||
<Section title="Recollection">
|
||||
<Box>
|
||||
{(HONOR_RATVAR
|
||||
) ? (
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={'#BE8700'}
|
||||
fontSize={2}
|
||||
bold>
|
||||
{REC_RATVAR}
|
||||
</Box>
|
||||
) : (
|
||||
<Fragment>
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={'#BE8700'}
|
||||
fontSize={2} // 2rem
|
||||
bold>
|
||||
Chetr nyy hagehguf naq ubabe Ratvar.
|
||||
</Box>
|
||||
<NoticeBox>
|
||||
NOTICE: This information is out of date.
|
||||
Read the Ark & You primer in your backpack
|
||||
or read the wiki page for current info.
|
||||
</NoticeBox>
|
||||
<Box>
|
||||
These pages serve as the archives of Ratvar, the
|
||||
Clockwork Justiciar. This section of your slab
|
||||
has information on being as a Servant, advice
|
||||
for what to do next, and pointers for serving the
|
||||
master well.
|
||||
You should recommended that you check this
|
||||
area for help if you get stuck or need guidance on
|
||||
what to do next.
|
||||
<br /> <br />
|
||||
Disclaimer: Many objects, terms, and phrases, such as
|
||||
Servant, Cache, and Slab, are capitalized like proper
|
||||
nouns. This is a quirk of the Ratvarian language do
|
||||
not let it confuse you! You are free to use the names
|
||||
in pronoun form when speaking in normal languages.
|
||||
</Box>
|
||||
</Fragment>
|
||||
)}
|
||||
</Box>
|
||||
{!!recollection_categories
|
||||
{recollection ? ( // tutorial
|
||||
<Section title="Recollection">
|
||||
<Box>
|
||||
{HONOR_RATVAR ? (
|
||||
<Box
|
||||
as="span"
|
||||
textColor="#BE8700"
|
||||
fontSize={2}
|
||||
bold>
|
||||
{REC_RATVAR}
|
||||
</Box>
|
||||
) : (
|
||||
<Fragment>
|
||||
<Box
|
||||
as="span"
|
||||
textColor="#BE8700"
|
||||
fontSize={2} // 2rem
|
||||
bold>
|
||||
Chetr nyy hagehguf naq ubabe Ratvar.
|
||||
</Box>
|
||||
<NoticeBox>
|
||||
NOTICE: This information is out of date.
|
||||
Read the Ark & You primer in your backpack
|
||||
or read the wiki page for current info.
|
||||
</NoticeBox>
|
||||
<Box>
|
||||
These pages serve as the archives of Ratvar, the
|
||||
Clockwork Justiciar. This section of your slab
|
||||
has information on being as a Servant, advice
|
||||
for what to do next, and pointers for serving the
|
||||
master well. You should recommended that you check this
|
||||
area for help if you get stuck or need guidance on
|
||||
what to do next.
|
||||
<br /> <br />
|
||||
Disclaimer: Many objects, terms, and phrases, such as
|
||||
Servant, Cache, and Slab, are capitalized like proper
|
||||
nouns. This is a quirk of the Ratvarian language do
|
||||
not let it confuse you! You are free to use the names
|
||||
in pronoun form when speaking in normal languages.
|
||||
</Box>
|
||||
</Fragment>
|
||||
)}
|
||||
</Box>
|
||||
{!!recollection_categories
|
||||
&& recollection_categories.map(cat => {
|
||||
return (
|
||||
<Fragment key={cat.name} >
|
||||
@@ -106,154 +103,155 @@ export const ClockworkSlab = (props, context) => {
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
<Box>
|
||||
{data.rec_section}
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={'#BE8700'}
|
||||
fontSize={2.3}>
|
||||
{rec_section ? (
|
||||
'500 Server Internal archives not found.'
|
||||
) : (
|
||||
rec_section.title
|
||||
)}
|
||||
</Box>
|
||||
<br /><br />
|
||||
<Box>
|
||||
{data.rec_section}
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={'#BE8700'}
|
||||
fontSize={2.3}>
|
||||
{rec_section ? (
|
||||
"One of the cogscarabs must've misplaced this section."
|
||||
'500 Server Internal archives not found.'
|
||||
) : (
|
||||
rec_section.info
|
||||
rec_section.title
|
||||
)}
|
||||
</Box>
|
||||
<br /><br />
|
||||
{rec_section ? (
|
||||
"One of the cogscarabs must've misplaced this section."
|
||||
) : (
|
||||
rec_section.info
|
||||
)}
|
||||
</Box>
|
||||
<br />
|
||||
<Box>
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={'#BE8700'}
|
||||
fontSize={2.3}>
|
||||
Quickbound Scripture
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} italic>
|
||||
You can have up to five scriptures bound to
|
||||
action buttons for easy use.
|
||||
</Box>
|
||||
<br /><br />
|
||||
{!!data.rec_binds && data.rec_binds.map(bind => (
|
||||
<Fragment key={bind.name}>
|
||||
A <b>Quickbind</b> slot ({data.rec_binds[bind]}),
|
||||
currently set to
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={bind ? bind.color : "#BE8700"}
|
||||
bold>
|
||||
{bind ? bind.name : "None"}
|
||||
</Box>
|
||||
.
|
||||
<br />
|
||||
</Fragment>
|
||||
))}
|
||||
</Box>
|
||||
</Section>
|
||||
) : (
|
||||
<Section title="Power">
|
||||
<b>{power}</b> power is available for scripture
|
||||
and other consumers.
|
||||
<Section level={2}>
|
||||
<Tabs>
|
||||
{map((scriptures, name) => {
|
||||
return (
|
||||
<Tabs.Tab
|
||||
key={name}
|
||||
selected={tab === name}
|
||||
onClick={() => setTab(name)}>
|
||||
{name}
|
||||
</Tabs.Tab>
|
||||
);
|
||||
})(scripture)}
|
||||
</Tabs>
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={'#B18B25'}
|
||||
bold={!!tierInfo.ready} // muh booleans
|
||||
italic={!tierInfo.ready}>
|
||||
{tierInfo.ready ? (
|
||||
"These scriptures are permanently unlocked."
|
||||
) : (
|
||||
tierInfo.requirement
|
||||
)}
|
||||
</Box>
|
||||
<br />
|
||||
<Box>
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={'#BE8700'}
|
||||
fontSize={2.3}>
|
||||
Quickbound Scripture
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} italic>
|
||||
You can have up to five scriptures bound to
|
||||
action buttons for easy use.
|
||||
</Box>
|
||||
<br /><br />
|
||||
{!!data.rec_binds && data.rec_binds.map(bind => (
|
||||
<Fragment key={bind.name} >
|
||||
A <b>Quickbind</b> slot ({data.rec_binds[bind]}),
|
||||
currently set to
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={bind ? bind.color : "#BE8700"}
|
||||
bold>
|
||||
{bind ? bind.name : "None"}
|
||||
</Box>
|
||||
.
|
||||
<br />
|
||||
</Fragment>
|
||||
))}
|
||||
<Box as={'span'} textColor={'#DAAA18'}>
|
||||
Scriptures in <b>yellow</b> are related to
|
||||
construction and building.
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} textColor={'#6E001A'}>
|
||||
Scriptures in <b>red</b> are related to
|
||||
attacking and offense.
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} textColor={'#1E8CE1'}>
|
||||
Scriptures in <b>blue</b> are related to
|
||||
healing and defense.
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} textColor={'#AF0AAF'}>
|
||||
Scriptures in <b>purple</b> are niche but
|
||||
still important!
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} textColor={'#DAAA18'} italic>
|
||||
Scriptures with italicized names are
|
||||
important to success.
|
||||
</Box>
|
||||
<Divider />
|
||||
<Table>
|
||||
{!!scriptInTab && scriptInTab.map(script => (
|
||||
<Table.Row
|
||||
key={script.name}
|
||||
className="candystripe">
|
||||
<Table.Cell
|
||||
italic={!!script.important}
|
||||
color={script.fontcolor}>
|
||||
{`
|
||||
${script.name}
|
||||
${script.descname}
|
||||
${script.invokers || ''}
|
||||
`}
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
collapsing
|
||||
textAlign="right">
|
||||
<Fragment>
|
||||
<Button
|
||||
content={`Recite ${script.required}`}
|
||||
disabled={
|
||||
script.required_unformatted >= power_unformatted
|
||||
}
|
||||
tooltip={script.tip}
|
||||
tooltipPosition={'left'}
|
||||
onClick={() => act('recite', {
|
||||
'script': script.type,
|
||||
})} />
|
||||
<Button
|
||||
content={script.bound ? (
|
||||
`Unbind ${script.bound}`
|
||||
) : (
|
||||
'Quickbind'
|
||||
)}
|
||||
disabled={!script.quickbind}
|
||||
onClick={() => act('bind', {
|
||||
'script': script.type,
|
||||
})} />
|
||||
</Fragment>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table>
|
||||
</Section>
|
||||
) : (
|
||||
<Section title="Power">
|
||||
<b>{power}</b> power is available for scripture
|
||||
and other consumers.
|
||||
<Section level={2}>
|
||||
<Tabs>
|
||||
{map((scriptures, name) => {
|
||||
return (
|
||||
<Tabs.Tab
|
||||
key={name}
|
||||
selected={tab === name}
|
||||
onClick={() => setTab(name)}>
|
||||
{name}
|
||||
</Tabs.Tab>
|
||||
);
|
||||
})(scripture)}
|
||||
</Tabs>
|
||||
<Box
|
||||
as={'span'}
|
||||
textColor={'#B18B25'}
|
||||
bold={!!tierInfo.ready} // muh booleans
|
||||
italic={!tierInfo.ready}>
|
||||
{tierInfo.ready ? (
|
||||
"These scriptures are permanently unlocked."
|
||||
) : (
|
||||
tierInfo.requirement
|
||||
)}
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} textColor={'#DAAA18'}>
|
||||
Scriptures in <b>yellow</b> are related to
|
||||
construction and building.
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} textColor={'#6E001A'}>
|
||||
Scriptures in <b>red</b> are related to
|
||||
attacking and offense.
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} textColor={'#1E8CE1'}>
|
||||
Scriptures in <b>blue</b> are related to
|
||||
healing and defense.
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} textColor={'#AF0AAF'}>
|
||||
Scriptures in <b>purple</b> are niche but
|
||||
still important!
|
||||
</Box>
|
||||
<br />
|
||||
<Box as={'span'} textColor={'#DAAA18'} italic>
|
||||
Scriptures with italicized names are
|
||||
important to success.
|
||||
</Box>
|
||||
<Divider />
|
||||
<Table>
|
||||
{!!scriptInTab && scriptInTab.map(script => (
|
||||
<Table.Row
|
||||
key={script.name}
|
||||
className="candystripe">
|
||||
<Table.Cell
|
||||
italic={!!script.important}
|
||||
color={script.fontcolor}>
|
||||
{`
|
||||
${script.name}
|
||||
${script.descname}
|
||||
${script.invokers || ''}
|
||||
`}
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
collapsing
|
||||
textAlign="right">
|
||||
<Fragment>
|
||||
<Button
|
||||
content={`Recite ${script.required}`}
|
||||
disabled={script.required_unformatted
|
||||
>= power_unformatted}
|
||||
tooltip={script.tip}
|
||||
tooltipPosition={'left'}
|
||||
onClick={() => act('recite', {
|
||||
'script': script.type,
|
||||
})} />
|
||||
<Button
|
||||
content={script.bound ? (
|
||||
`Unbind ${script.bound}`
|
||||
) : (
|
||||
'Quickbind'
|
||||
)}
|
||||
disabled={!script.quickbind}
|
||||
onClick={() => act('bind', {
|
||||
'script': script.type,
|
||||
})} />
|
||||
</Fragment>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table>
|
||||
</Section>
|
||||
</Section>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
</Fragment>
|
||||
</Window.Content>
|
||||
</Window>
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
import { Fragment } from 'inferno';
|
||||
import { useBackend } from '../backend';
|
||||
import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
|
||||
|
||||
export const SkillPanel = (props, context) => {
|
||||
const { act, data } = useBackend(context);
|
||||
const skills = data.skills || [];
|
||||
const see_mods = data.see_skill_mods;
|
||||
const skillgreen = {
|
||||
color: 'lightgreen',
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
const skillyellow = {
|
||||
color: '#FFDB58',
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
return (
|
||||
<Section
|
||||
title={data.playername}
|
||||
buttons={(
|
||||
<Button
|
||||
icon={see_mods ? 'Enabled' : 'Disabled'}
|
||||
content={see_mods ? 'Modifiers Shown' : 'Modifiers Hidden'}
|
||||
onClick={() => act('toggle_mods')} />
|
||||
)}>
|
||||
<LabeledList>
|
||||
{skills.map(skill => (
|
||||
<LabeledList.Item key={skill.name} label={skill.name}>
|
||||
<span style={skillyellow}>
|
||||
{skill.desc}
|
||||
<br />
|
||||
`Modifiers: ${skill.modifiers}`
|
||||
</span>
|
||||
<br />
|
||||
{!!skill.level_based && (
|
||||
<Box>
|
||||
{see_mods ? (
|
||||
<span>
|
||||
Level: [
|
||||
<span style={skill.mod_style}>
|
||||
{skill.lvl_mod}
|
||||
</span>]
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
Level: [
|
||||
<span style={skill.base_style}>
|
||||
{skill.lvl_base}
|
||||
</span>]
|
||||
</span>
|
||||
)}
|
||||
<br />
|
||||
Total Experience:
|
||||
{see_mods ? (
|
||||
<span>[{skill.value_mod} XP]</span>
|
||||
) : (
|
||||
<span>[{skill.value_base} XP]</span>
|
||||
)}
|
||||
<br />
|
||||
XP To Next Level:
|
||||
{skill.max_lvl !== (see_mods
|
||||
? skill.lvl_mod_num
|
||||
: skill.lvl_base_num) ? (
|
||||
<Box inline>
|
||||
{see_mods ? (
|
||||
<span>{skill.xp_next_lvl_mod}</span>
|
||||
) : (
|
||||
<span>{skill.xp_next_lvl_base}</span>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<span style={skillgreen}>
|
||||
[MAXXED]
|
||||
</span>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
{see_mods ? (
|
||||
<span>{skill.mod_readout}</span>
|
||||
) : (
|
||||
<span>{skill.base_readout}</span>
|
||||
)}
|
||||
{see_mods ? (
|
||||
<ProgressBar
|
||||
value={skill.percent_mod}
|
||||
color="good" />
|
||||
) : (
|
||||
<ProgressBar
|
||||
value={skill.percent_base}
|
||||
color="good" />
|
||||
)}
|
||||
<br />
|
||||
{!!data.admin && (
|
||||
<Fragment>
|
||||
<Button
|
||||
content="Adjust Exp"
|
||||
onClick={() => act('adj_exp', {
|
||||
skill: skill.path,
|
||||
})} />
|
||||
<Button
|
||||
content="Set Exp"
|
||||
onClick={() => act('set_exp', {
|
||||
skill: skill.path,
|
||||
})} />
|
||||
{!!skill.level_based && (
|
||||
<Button
|
||||
content="Set Level"
|
||||
onClick={() => act('set_lvl', {
|
||||
skill: skill.path,
|
||||
})} />
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
<br />
|
||||
<br />
|
||||
</LabeledList.Item>
|
||||
))}
|
||||
</LabeledList>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user