Як створити дерево навичок у стилі Borderlands за 5 хвилин

Дорослішаючи, я витрачав свій вільний час на те, що робила більшість програмістів: грав у відеоігри кожну неспокійну хвилину. Мені сподобались ігри Пригоди і те, наскільки вони були за часом. Якщо часом була Мері Роуз, а я французькою, моєю артилерією були такі ігри, як Kingdom Hearts, Ōkami та Borderlands.

Чому я та інші витратили стільки нашого вільного часу на дослідження, виживання, вмирання та (так, стільки) подрібнення? Сотні факторів сприяють створенню захоплюючого досвіду, але основним, на якому я зупинюсь, є поняття прогресування.

Ідея гейміфікації не нова. Багато популярних додатків (наприклад, todoist або таймер викликів) включають якусь схему прогресування, щоб змусити нас, споживачів, використовувати їх додаток, давати їм гроші та передавати наші особисті дані. Тож я вирішив піти своїм шляхом, щоб дозволити іншим робити саме це, через прекрасні дерева навичок! Примітка: Я не чекаю ні грошей, ні даних від тих, хто використовує мої дерева навичок.

Останні кілька тижнів бачив, як я працював над тим, щоб створити, як я сподіваюсь, приємний пакет plug-n'play React, який допоможе вам створити захоплюючі дерева навичок. Ви можете перевірити це самостійно, дотримуючись підручника. Сподіваюся, це буде досвід без трення.

Ми сподіваємось мати щось схоже на дерево навичок нижче:

[email protected]

Візьміть стартовий репо за допомогою git clone [email protected]:andrico1234/borderlands-skill-tree.git

Перемістити в папку і запустити стартовий скрипт, yarn start. Закрутіть сайт, ви не побачите нічого, крім логотипу Borderlands та середовища.

beautiful-skill-treeнадає три компонента: SkillProvider, SkillTreeGroup, і SkillTreeкомпоненти.

SkillProvider: Це не вимагає реквізиту та забезпечує дітей контекстом дерева навичок. Цей щеня обробляє всі глобальні дані, що стосуються дерева навичок.

SkillTreeGroup: Більше бере участь у тому, що він може взяти необов’язкову themeвластивість, куди ми можемо передати якийсь власний стиль, щоб наше дерево навичок відчувало себе дуже Borderlands. SkillTreeGroupТакож використовує дитина-як-функцію шаблон , щоб дати нам доступ до деякої імперативною функціональності API, такі як скидання навичок дерева, обраним навички лічильника, і т.д. Ми не повинні турбуватися про яке - або з тих , хто в рамках цього статті.

SkillTree: Це найбільш захоплюючий експорт упаковки, якщо ви не є присоскою для друку машин (які також експортуються для всіх фанатів TS). SkillTreeНе приймає дітей , але вимагає 3 реквізиту: treeId, title, і data. Це treeIdповинен бути ідентифікатор, який є унікальним для кожного дерева навичок, але повинен бути постійним протягом сеансів користувача, оскільки він використовується як ключ для отримання та встановлення даних у локальне сховище. Я не збираюся пояснювати, чим titleзаймається реквізит, я залишу вас експериментувати. Це dataгорщик для змішування аплікації. Ви передасте свою структуру даних дерева навичок, яку програма використовуватиме для відображення beautiful-skill-tree. Давайте розглянемо справжнє базове дерево, перш ніж переходити до нашого вражаючого Borderlands з декількома деревами.

У App.tsx імпортуйте 3 компоненти приблизно так:

import { SkillProvider, SkillTreeGroup, SkillTree } from 'beautiful-skill-tree';

Помістіть його під imgтегом, за межами div контейнера зображення, але всередині зовнішнього div. Додайте SkillProvider, передаючи SkillTreeGroupв дитинстві. Перш ніж робити те саме з SkillTree, пам’ятайте, що оскільки SkillTreeGroupвикористовується шаблон „функція як дитина”, вам потрібно буде відтворити функцію, яка повертає дочірні компоненти. Поверніть сингл SkillTreeі дайте йому a treeIdі titleреквізит. Передайте порожній масив в dataреквізит, щоб ваш App.tsxвигляд виглядав так:

function App() { return ( // {() => { return (  ) }} ); }

Перейдіть до localhost: 3000, щоб побачити запущений додаток. Ви повинні побачити логотип, фон і сірий прямокутник. Якщо у вас трапляються помилки, перегляньте вступ ще раз і перевірте, чи немає помилок синтаксису чи неправильного імпорту.

Далі створимо справжнє базове дерево. Всього 3 елементи, які рухаються по лінійній лінії. Структура даних для dataвиглядає так:

type Skill = { id: string; icon?: string; title: string; tooltip: { description : string; }, children: Skill[]; }

Кожна навичка вимагає чотирьох властивостей, причому одна необов’язкова. Ви також повинні зауважити, що childrenвластивість є рекурсивним типом, що означає, що він бере масив тієї самої структури даних, який він використовує для візуалізації дочірніх навичок. Це може тривати нескінченно і створювати справжні складні звивисті дерева. Я створю для вас перший навик і довіряю вам продовження наступних двох завдань.

const data = [{ id: 'first-skill', title: 'The root node', tooltip: { description : "The parent node, all of the descendants will be locked until it's selected", }, children: [ // rinse and repeat; always repeat. ]}

Додайте вище фрагмент коду в App.tsxфайл, і замінити порожній масив внутрішньої частини SkillTree«S dataвласності з нашим dataвизначенням. Завантажте свою сторінку, і у вас повинен бути інтерактивний вузол. Наведіть на нього курсор і клацніть, і він повинен реагувати на ваші дії. Якщо все працює, тоді я доручу вам створити два (або більше) дочірніх вузли. Експериментуйте з дітьми та довжиною братів і сестер, щоб побачити, що ви можете придумати. (Якщо ви також випадково зламаєте мій дорогоцінний пакет, залиште мені випуск GitHub, щоб я міг виправити ситуацію).

Як тільки вам зручно створити дерево навичок, давайте створимо наше дерево навичок Borderlands. На щастя, я зробив для вас всю нудну роботу і вже створив структури даних та накопичив зображення.

Вам потрібно буде імпортувати три дерева з dataфайлу, що можна зробити через

import { motion, harmony, cataclysm } from "./data/data";

Наступним кроком є ​​створення двох додаткових SkillTreesпоряд із поточним. Вам потрібно буде їх обернути, React.Fragmentоскільки SkillTreeGroupзараз ви намагатиметеся відтворити 3 компоненти верхнього рівня. Передайте дані відповідно, і якщо ви не впевнені, я опублікував фрагмент коду нижче.

Ідіть і перевірте ваш веб - браузер, він повинен бути aaallmoost готовий. Ми отримали навички, але стилістика відчуває себе трохи мляво. Це не дуже прикордонні. На ваше щастя, я звичайний Ніл Бьюкенен і підготував спеціальну тему. Імпорт теми і передати його через до SkillTreeGroup«s themeопору. Об'єкт теми експортується через import theme from './data/theme';. Легко!

Після того, як ви зробили вищезазначене, перевірте готовий продукт. Якщо ви все ще не задоволені стилями, перевірте об’єкт теми та налаштуйте його самостійно, є купа додаткових атрибутів, стилі яких можна регулювати, тому просто загляньте до типізації пакету.

Раніше я вже згадував, що є кілька додаткових властивостей і значень, які можна використовувати для налаштування дерева навичок, тому влаштовуйте безлад навколо себе та прив’язуйте мене до будь-яких крутих дерев, які ви створюєте. Я хотів би додати його до зростаючого списку дерев, знайдених тут. Ось приклад дерева навичок, який започаткував цю одержимість.

Сподіваюся, вам сподобалося повозитись з beautiful-skill-treeпакунком. Я завжди додаю нові функції та оновлюю, тому дайте йому зірочку на github! Ви можете знайти онлайн-демонстрацію дерева навичок прикордонних країн тут

You can find me on Instagram or GitHub if you want to chat code, music, or fitness!