WIP
This commit is contained in:
Ghommie
@@ -69,7 +69,7 @@
|
||||
/proc/english_list(list/input, nothing_text = "nothing", and_text = " and ", comma_text = ", ", final_comma_text = "" )
|
||||
var/total = input.len
|
||||
if (!total)
|
||||
return "[nothing_text]"
|
||||
return nothing_text
|
||||
else if (total == 1)
|
||||
return "[input[1]]"
|
||||
else if (total == 2)
|
||||
|
||||
@@ -28,6 +28,15 @@
|
||||
. = list()
|
||||
var/datum/asset/spritesheet/simple/assets = get_asset_datum(/datum/asset/spritesheet/simple/skills)
|
||||
|
||||
var/all_mods = list()
|
||||
for(var/id in all_current_skill_modifiers)
|
||||
var/datum/skill_modifier/M = GLOB.skill_modifiers[id]
|
||||
all_mods[id] = list(
|
||||
name = M.name,
|
||||
desc = M.desc,
|
||||
icon = assets.icon_class_name(M.icon)
|
||||
)
|
||||
|
||||
.["categories"] = list()
|
||||
var/list/current
|
||||
var/category
|
||||
@@ -42,12 +51,15 @@
|
||||
|
||||
var/skill_value = owner.get_skill_value(path, FALSE)
|
||||
var/skill_level = owner.get_skill_level(path, FALSE)
|
||||
var/list/mod_list = list()
|
||||
var/list/modifiers
|
||||
var/list/mod_ids = list()
|
||||
|
||||
var/value_mods = LAZYACCESS(skill_value_mods, path)
|
||||
var/mod_value = skill_value
|
||||
for(var/k in value_mods)
|
||||
var/datum/skill_modifier/M = GLOB.skill_modifiers[k]
|
||||
mod_list |= M.name
|
||||
mod_ids |= M.identifier
|
||||
mod_value = M.apply_modifier(mod_value, path, src, MODIFIER_TARGET_VALUE)
|
||||
|
||||
@@ -55,16 +67,24 @@
|
||||
var/mod_level = skill_level
|
||||
for(var/k in lvl_mods)
|
||||
var/datum/skill_modifier/M = GLOB.skill_modifiers[k]
|
||||
mod_list |= M.name
|
||||
mod_ids |= M.identifier
|
||||
mod_level = M.apply_modifier(mod_level, path, src, MODIFIER_TARGET_LEVEL)
|
||||
mod_level = SANITIZE_SKILL_LEVEL(S.type, round(mod_level, 1))
|
||||
|
||||
for(var/k in mod_ids)
|
||||
var/list/mod = all_current_skill_modifiers[k]
|
||||
if(mod)
|
||||
LAZYADD(modifiers, list(mod))
|
||||
|
||||
var/list/data = list(
|
||||
name = S.name,
|
||||
desc = S.desc,
|
||||
color = S.name_color,
|
||||
skill_base = S.standard_render_value(skill_value, skill_level),
|
||||
skill_mod = S.standard_render_value(mod_value, mod_level),
|
||||
mod_ids = mod_ids
|
||||
mods_tooltip = english_list(mod_list, null),
|
||||
modifiers = modifiers
|
||||
)
|
||||
current += list(data)
|
||||
|
||||
@@ -72,17 +92,6 @@
|
||||
var/list/cat = list("name" = category, "skills" = current)
|
||||
.["categories"] += list(cat)
|
||||
|
||||
|
||||
var/all_mods = list()
|
||||
for(var/id in all_current_skill_modifiers)
|
||||
var/datum/skill_modifier/M = GLOB.skill_modifiers[id]
|
||||
all_mods[id] = list(
|
||||
name = M.name,
|
||||
desc = M.desc,
|
||||
icon = assets.icon_class_name(M.icon)
|
||||
)
|
||||
.["modifiers"] = all_mods
|
||||
|
||||
/datum/skill_holder/ui_data(mob/user)
|
||||
. = list()
|
||||
.["see_skill_mods"] = see_skill_mods
|
||||
|
||||
@@ -1,120 +1,93 @@
|
||||
import { decodeHtmlEntities } from 'common/string';
|
||||
import { Component, Fragment } from 'inferno';
|
||||
import { act } from '../byond';
|
||||
import { Box, Button, Input, Section, Table, Tabs } from '../components';
|
||||
import { Box, Button, Section, Table, Tabs } from '../components';
|
||||
|
||||
// It's a class because we need to store state in the form of
|
||||
// the current hovered item
|
||||
export class Uplink extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
hoveredItem: {},
|
||||
};
|
||||
}
|
||||
|
||||
setHoveredItem(hoveredItem) {
|
||||
this.setState({
|
||||
hoveredItem,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { state } = this.props;
|
||||
const { config, data } = state;
|
||||
const { ref } = config;
|
||||
const {
|
||||
see_skill_mods,
|
||||
compact_mode,
|
||||
categories = [],
|
||||
} = data;
|
||||
return (
|
||||
<Section
|
||||
title={(
|
||||
<Box
|
||||
inline
|
||||
color={telecrystals > 0 ? 'good' : 'bad'}>
|
||||
{telecrystals} TC
|
||||
</Box>
|
||||
)}
|
||||
buttons={(
|
||||
<Button
|
||||
icon={see_skill_mods ? 'check-square-o' : 'square-o'}
|
||||
content='Show modifiers'}
|
||||
onClick={() => act(ref, 'toggle_mods')} />
|
||||
<Button
|
||||
icon={compact_mode ? 'list' : 'info'}
|
||||
content={compact_mode ? 'Compact' : 'Detailed'}
|
||||
onClick={() => act(ref, 'compact_toggle')} />
|
||||
)}
|
||||
</Fragment>
|
||||
)}>
|
||||
{(
|
||||
<Tabs vertical>
|
||||
{categories.map(category => {
|
||||
const { name, skills } = category;
|
||||
if (name != selected_category) {
|
||||
return;
|
||||
}
|
||||
return (
|
||||
<Tabs.Tab
|
||||
key={name}
|
||||
label={`${name} (${skills.length})`}>
|
||||
export const Skills = props => {
|
||||
const { state } = props;
|
||||
const { config, data } = state;
|
||||
const { ref } = config;
|
||||
const {
|
||||
name,
|
||||
compact_mode,
|
||||
selected_category,
|
||||
categories = [],
|
||||
} = props;
|
||||
return (
|
||||
<Section
|
||||
buttons={(
|
||||
<Button
|
||||
icon={see_skill_mods ? 'check-square-o' : 'square-o'}
|
||||
content='Show modifiers'}
|
||||
onClick={() => act(ref, 'toggle_mods')} />
|
||||
<Button
|
||||
icon={compact_mode ? 'list' : 'info'}
|
||||
content={compact_mode ? 'Compact' : 'Detailed'}
|
||||
onClick={() => act(ref, 'compact_toggle')} />
|
||||
)}
|
||||
</Fragment>
|
||||
)}>
|
||||
{(
|
||||
<Tabs vertical>
|
||||
{categories.map(category => {
|
||||
const { name, skills } = category;
|
||||
return (
|
||||
<Tabs.Tab
|
||||
key={name}
|
||||
label={`${name} (${skills.length})`}>
|
||||
if (name != selected_category) {
|
||||
{() => (
|
||||
<skillList
|
||||
compact={compact_mode}
|
||||
skills={skills}
|
||||
hoveredItem={hoveredItem}
|
||||
onBuyMouseOver={skill => this.setHoveredItem(skill)}
|
||||
onBuyMouseOut={skill => this.setHoveredItem({})}
|
||||
onBuy={skill => act(ref, 'buy', {
|
||||
skill: skill.name,
|
||||
})} />
|
||||
see_mods={see_skill_mods}
|
||||
/>
|
||||
)}
|
||||
</Tabs.Tab>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
}
|
||||
</Tabs.Tab>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
const skillList = props => {
|
||||
const {
|
||||
skills,
|
||||
hoveredItem,
|
||||
compact,
|
||||
onBuy,
|
||||
onBuyMouseOver,
|
||||
onBuyMouseOut,
|
||||
skills,
|
||||
see_mods
|
||||
} = props;
|
||||
const hoveredCost = hoveredItem && hoveredItem.cost || 0;
|
||||
if (compact) {
|
||||
return (
|
||||
<Table>
|
||||
{items.map(item => {
|
||||
const notSameItem = hoveredItem && hoveredItem.name !== item.name;
|
||||
const notEnoughHovered = telecrystals - hoveredCost < item.cost;
|
||||
const disabledDueToHovered = notSameItem && notEnoughHovered;
|
||||
{skills.map(skill => {
|
||||
return (
|
||||
<Table.Row
|
||||
key={item.name}
|
||||
key={skill.name}
|
||||
className="candystripe">
|
||||
<Table.Cell bold>
|
||||
{decodeHtmlEntities(item.name)}
|
||||
<Box color=skill.color>
|
||||
{decodeHtmlEntities(skill.name)}
|
||||
</Box>
|
||||
</Table.Cell>
|
||||
<Table.Cell collapsing textAlign="right">
|
||||
<Button
|
||||
fluid
|
||||
content={item.cost + " TC"}
|
||||
disabled={telecrystals < item.cost || disabledDueToHovered}
|
||||
tooltip={item.desc}
|
||||
content={see_mods
|
||||
? skill.skill_base
|
||||
: skill.skill_mod
|
||||
}
|
||||
tooltip={skill.mods_tooltip
|
||||
? (skill.desc
|
||||
+ "\nModifiers: "
|
||||
+ skill.mods_tooltip
|
||||
)
|
||||
: skill.desc
|
||||
}
|
||||
tooltipPosition="left"
|
||||
onmouseover={() => onBuyMouseOver(item)}
|
||||
onmouseout={() => onBuyMouseOut(item)}
|
||||
onClick={() => onBuy(item)} />
|
||||
/>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
);
|
||||
@@ -122,24 +95,32 @@ const skillList = props => {
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
return items.map(item => {
|
||||
const notSameItem = hoveredItem && hoveredItem.name !== item.name;
|
||||
const notEnoughHovered = telecrystals - hoveredCost < item.cost;
|
||||
const disabledDueToHovered = notSameItem && notEnoughHovered;
|
||||
return skills.map(skill => {
|
||||
return (
|
||||
<Section
|
||||
key={item.name}
|
||||
title={item.name}
|
||||
key={skill.name}
|
||||
title={skill.name}
|
||||
level={2}
|
||||
buttons={(
|
||||
<Button
|
||||
content={item.cost + ' TC'}
|
||||
disabled={telecrystals < item.cost || disabledDueToHovered}
|
||||
onmouseover={() => onBuyMouseOver(item)}
|
||||
onmouseout={() => onBuyMouseOut(item)}
|
||||
onClick={() => onBuy(item)} />
|
||||
content={see_mods
|
||||
? skill.skill_base
|
||||
: skill.skill_mod
|
||||
}
|
||||
/>
|
||||
)}>
|
||||
{decodeHtmlEntities(item.desc)}
|
||||
{decodeHtmlEntities(skill.desc)}
|
||||
modifiers:
|
||||
{skill.modifiers.map(modifier => {
|
||||
<Button
|
||||
textAlign="center"
|
||||
color="transparent"
|
||||
tooltip={
|
||||
"<b>"+modifier.name+"</b>\n"+modifier.desc
|
||||
}
|
||||
<Box className={modifier.icon_class} />
|
||||
/>
|
||||
})}
|
||||
</Section>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user