From 745695e60d51412ee3c5793c5e7db276d9213e9d Mon Sep 17 00:00:00 2001
From: Ghommie <42542238+Ghommie@users.noreply.github.com>
Date: Sat, 30 May 2020 15:55:16 +0200
Subject: [PATCH] WIP, js tiring.
---
code/datums/skills/_check_skills.dm | 31 +++-
code/datums/skills/_skill_holder.dm | 12 +-
tgui-next/packages/tgui/interfaces/Skills.js | 146 +++++++++++++++++++
3 files changed, 183 insertions(+), 6 deletions(-)
create mode 100644 tgui-next/packages/tgui/interfaces/Skills.js
diff --git a/code/datums/skills/_check_skills.dm b/code/datums/skills/_check_skills.dm
index d2921c8756..30f105ab4b 100644
--- a/code/datums/skills/_check_skills.dm
+++ b/code/datums/skills/_check_skills.dm
@@ -20,21 +20,23 @@
need_static_data_update = FALSE
ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
if(!ui)
- ui = new(user, src, ui_key, "check_skills", "[owner.name]'s Skills", 900, 480, 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 = new(user, src, ui_key, "skills", "[owner.name]'s Skills", 620, 580, master_ui, state)
ui.open()
/datum/skill_holder/ui_static_data(mob/user)
. = list()
var/datum/asset/spritesheet/simple/assets = get_asset_datum(/datum/asset/spritesheet/simple/skills)
- .["skills"] = list()
+ .["categories"] = list()
var/list/current
var/category
for(var/path in GLOB.skill_datums)
var/datum/skill/S = GLOB.skill_datums[path]
if(!current || S.ui_category != category)
if(category)
- .["skills"][category] = current
+ var/list/cat = list("name" = category, "skills" = current)
+ .["categories"] += list(cat)
current = list()
category = S.ui_category
@@ -67,7 +69,9 @@
current += list(data)
if(category)
- .["skills"][category] = current
+ var/list/cat = list("name" = category, "skills" = current)
+ .["categories"] += list(cat)
+
var/all_mods = list()
for(var/id in all_current_skill_modifiers)
@@ -78,3 +82,22 @@
icon = assets.icon_class_name(M.icon)
)
.["modifiers"] = all_mods
+
+/datum/skill_holder/ui_data(mob/user)
+ . = list()
+ .["see_skill_mods"] = see_skill_mods
+ .["compact_mode"] = compact_mode
+ .["selected_category"] = selected_category
+
+/datum/skill_holder/ui_act(action, params)
+ . = ..()
+ if(.)
+ return
+ switch(action)
+ if("toggle_mods")
+ see_skill_mods = !see_skill_mods
+ return TRUE
+ if("compact_toggle")
+ compact_mode = !compact_mode
+ if("select")
+ selected_category = params["category"]
diff --git a/code/datums/skills/_skill_holder.dm b/code/datums/skills/_skill_holder.dm
index 2b3c963c33..be97132b5c 100644
--- a/code/datums/skills/_skill_holder.dm
+++ b/code/datums/skills/_skill_holder.dm
@@ -22,13 +22,21 @@
var/list/original_levels
/// The mind datum this skill is associated with, only used for the check_skills UI
var/datum/mind/owner
- /// For static UI update.
+ /// For UI updates.
var/need_static_data_update = TRUE
-
+ /// Whether modifiers and final skill values or only base values are displayed.
+ var/see_skill_mods = TRUE
+ /// Whether skill descriptions are displayed or not.
+ var/compact_mode = FALSE
+ /// The current selected skill category.
+ var/selected_category
/datum/skill_holder/New(owner)
..()
src.owner = owner
+ var/datum/skill/S = locate() in GLOB.skill_datums
+ if(S)
+ selected_category = S.ui_category
/**
* Grabs the value of a skill.
diff --git a/tgui-next/packages/tgui/interfaces/Skills.js b/tgui-next/packages/tgui/interfaces/Skills.js
new file mode 100644
index 0000000000..548d5ebee3
--- /dev/null
+++ b/tgui-next/packages/tgui/interfaces/Skills.js
@@ -0,0 +1,146 @@
+import { decodeHtmlEntities } from 'common/string';
+import { Component, Fragment } from 'inferno';
+import { act } from '../byond';
+import { Box, Button, Input, 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 (
+ 0 ? 'good' : 'bad'}>
+ {telecrystals} TC
+
+ )}
+ buttons={(
+
+ );
+ }
+}
+
+const skillList = props => {
+ const {
+ skills,
+ hoveredItem,
+ compact,
+ onBuy,
+ onBuyMouseOver,
+ onBuyMouseOut,
+ } = props;
+ const hoveredCost = hoveredItem && hoveredItem.cost || 0;
+ if (compact) {
+ return (
+
+ {items.map(item => {
+ const notSameItem = hoveredItem && hoveredItem.name !== item.name;
+ const notEnoughHovered = telecrystals - hoveredCost < item.cost;
+ const disabledDueToHovered = notSameItem && notEnoughHovered;
+ return (
+
+
+ {decodeHtmlEntities(item.name)}
+
+
+
+
+ );
+ })}
+
+ );
+ }
+ return items.map(item => {
+ const notSameItem = hoveredItem && hoveredItem.name !== item.name;
+ const notEnoughHovered = telecrystals - hoveredCost < item.cost;
+ const disabledDueToHovered = notSameItem && notEnoughHovered;
+ return (
+ onBuyMouseOver(item)}
+ onmouseout={() => onBuyMouseOut(item)}
+ onClick={() => onBuy(item)} />
+ )}>
+ {decodeHtmlEntities(item.desc)}
+
+ );
+ });
+};