Как да създадете дърво на умения в стил 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е смесителната тенджера на приложението. Ще предадете структурата на данните от дървото на уменията, която приложението ще използва, за да изобрази a beautiful-skill-tree. Нека започнем с истинско основно дърво, преди да преминем към нашата грандиозна Borderlands с много дървета и много клонове.

В App.tsx импортирайте 3-те компонента по следния начин:

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

Поставете го под imgмаркера си, извън div контейнера на изображението, но в рамките на външния div. Добавете SkillProvider, предавайки SkillTreeGroupкато дете. Преди да направите същото с SkillTree, не забравяйте, че тъй като SkillTreeGroupизползва модел на функция като дете, ще трябва да изобразите функция, която връща дъщерните компоненти. Върнете сингъл SkillTreeи му дайте а 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' dataс нашата dataдефиниция. Заредете страницата си и трябва да имате интерактивен възел. Задръжте курсора на мишката и щракнете и той трябва да реагира на вашите действия. Ако нещата работят, тогава ще ви задам да създадете два (или повече) дъщерни възела. Експериментирайте с деца и продължителност на братя и сестри, за да видите какво можете да измислите. (Ако случайно нарушите скъпоценния ми пакет, оставете ми проблем с GitHub, за да мога да поправя нещата).

След като се почувствате добре със създаването на дърво на уменията, нека да продължим и да създадем нашето дърво на умения Borderlands. За щастие направих цялата досадна работа за вас и вече създадох структурите на данни и натрупах изображенията.

Ще трябва да импортирате трите дървета от dataфайла, което може да се направи чрез

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

Следващата стъпка е създаването на две допълнителни SkillTreesзаедно с текущата. Ще трябва да ги увиете в, React.Fragmentтъй като SkillTreeGroupсега ще се опитвате да изобразите 3 компонента от най-високо ниво. Предайте данните съответно и ако не сте сигурни, публикувах кодовия фрагмент по-долу.

Продължете и проверете вашия уеб браузър, той трябва да е най- готов. Предоставихме уменията, но стилът изглежда малко неясен. Не се чувства много Borderlands. За ваше щастие аз съм обикновен Нийл Бюканън и подготвих персонализирана тема. Внос на темата и да го мине, за да на SkillTreeGroupе 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!