Sådan oprettes et færdighedstræ i Borderlands-stil på 5 minutter

Da jeg voksede op, brugte jeg min fritid på at gøre, hvad de fleste programmører gjorde: spillede videospil hvert øjeblik. Jeg elskede eventyrspil og hvilken tidsvask de var. Hvis tiden var Mary Rose, og jeg var franskmanden, var mit artilleri spil som Kingdom Hearts, Ōkami og Borderlands.

Hvorfor brugte jeg og andre så meget af vores fritid på at udforske, overleve, dø og (så meget) slibning? Hundredvis af faktorer bidrager til at skabe en engagerende oplevelse, men den, jeg vil fokusere på, er forestillingen om progression.

Ideen om gamification er ikke ny. Mange populære applikationer (som todoist eller udfordringstimer) har indarbejdet en slags progressionsplan for at få os, forbrugerne, til at bruge deres app, give dem penge og aflevere vores personlige data. Så jeg besluttede at gå min vej til at sætte andre i stand til netop det gennem smukke dygtighedstræer! Bemærk: Jeg forventer hverken penge eller data fra dem, der bruger mine dygtighedstræer.

De sidste par uger har jeg arbejdet væk for at skabe det, jeg håber at være en behagelig plug'n'play React-pakke, der hjælper dig med at skabe spændende dygtighedstræer. Du kan teste det selv ved at følge vejledningen. Jeg håber, det bliver en gnidningsfri oplevelse.

Vi håber at have noget der ligner dygtighedstræet nedenfor:

[email protected]

Grib startrepanoen ved hjælp af git clone [email protected]:andrico1234/borderlands-skill-tree.git

Gå ind i biblioteket og kør start scriptet yarn start. Giv webstedet en hvirvel, du vil kun se Borderlands-logoet og miljøet.

beautiful-skill-treeudsætter tre komponenter: SkillProvider, SkillTreeGroupog de SkillTreekomponenter.

SkillProvider: Dette indeholder ingen rekvisitter og forsyner børnene med færdighedstræets sammenhæng. Denne hvalp håndterer alle de globale data relateret til dygtighedstræet.

SkillTreeGroup: Er mere involveret i, at det kan tage en valgfri themeegenskab, hvor vi kan videregive en brugerdefineret styling, for at få vores dygtighedstræ til at føle sig meget Borderlands. Den SkillTreeGroupbruger også mønsteret for børn-som-funktion til at give os adgang til nogle bydende API-funktioner, såsom nulstilling af færdighedstræ, valgt kompetencetæller osv. Vi behøver ikke bekymre os om nogen af ​​dem inden for dette artikel.

SkillTree: Dette er den mest spændende af pakkens eksport, medmindre du er en sucker for typings (som også eksporteres til alle dine TS-fans). Den SkillTreetager ikke nogen børn, men kræver 3 rekvisitter: treeId, title, og data. Det treeIdskal være et id, der er unikt for hvert færdighedstræ, men skal være vedholdende på tværs af brugersessioner, da dette bruges som nøglen til at få og indstille dataene til lokal lagring. Jeg vil ikke forklare, hvad titlerekvisitten gør, jeg vil lade dig eksperimentere. Det dataer blandingspanden til applikationen. Du videregiver datastrukturen til dit færdighedstræ, som appen bruger til at gengive en beautiful-skill-tree. Lad os få et ægte grundlæggende træ i gang, inden vi går videre til vores spektakulære flergrenede Borderlands-gren.

Importér de 3 komponenter i App.tsx således:

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

Placer det under dit imgtag uden for billedets container div, men inden i det ydre div. Tilføj den SkillProvider, passerer SkillTreeGroupsom barn. Inden du gør det samme med SkillTree, skal du huske, at når du SkillTreeGroupbruger funktion-som-barn-mønster, skal du gengive en funktion, der returnerer underordnede komponenter. Returner en single SkillTreeog giv den en treeIdog en titleprop. Giv et tomt array ind i datastiften, så dit App.tsxser sådan ud:

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

Gå til localhost: 3000 for at se applikationen køre. Du skal se logoet, baggrunden og et gråt rektangel. Hvis du løber ind i fejl, skal du gennemgå introduktionen igen og kontrollere, om der er nogen syntaksfejl eller forkert import.

Lad os derefter oprette et rigtigt grundlæggende træ. Kun 3 emner, der bevæger sig i en lineær linje. Datastrukturen for dataser sådan ud:

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

Hver færdighed kræver fire egenskaber, hvoraf den ene er valgfri. Du skal også bemærke, at childrenejendommen er en rekursiv type, hvilket betyder, at den tager en matrix af samme datastruktur, som den bruger til at gengive børnene til færdigheden. Dette kan fortsætte uendeligt og skabe nogle rigtige komplicerede, snoede træer. Jeg opretter den første færdighed til dig, og jeg stoler på, at du fortsætter med de næste to ting.

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. ]}

Tilføj ovenstående uddrag til App.tsxfilen, og erstatte den tomme vifte indersiden af SkillTree's dataejendom med vores datadefinition. Indlæs din side, og du skal have en interaktiv knude. Giv det et svæv og klik, og det skal reagere på dine handlinger. Hvis tingene fungerer, får jeg dig til at oprette to (eller flere) barneknuder. Eksperimenter med børn og søskendelængder for at se, hvad du kan komme på. (Hvis du tilfældigvis også bryder min dyrebare pakke, skal du give mig et GitHub-problem, så jeg kan rette tingene op).

Når du er fortrolig med at oprette et færdighedstræ, lad os gå videre og oprette vores Borderlands-træetræ. Heldigvis har jeg gjort alt det kedelige arbejde for dig og har allerede oprettet datastrukturer og akkumuleret billederne.

Du skal importere de tre træer fra datafilen, hvilket kan gøres via

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

Det næste trin er at oprette to yderligere SkillTreessammen med den aktuelle. Du bliver nødt til at pakke dem ind i en, React.Fragmentda din SkillTreeGroupvil nu forsøge at gengive 3 komponenter på øverste niveau. Indsend dataene i overensstemmelse hermed, og hvis du er i tvivl, har jeg sendt kodestykket nedenfor.

Gå videre og tjek din webbrowser, den skal være næsten klar. Vi har fået de færdigheder, der er gengivet, men stylingen føles lidt mangelfuld. Det føles ikke særlig grænseland. Heldigvis for dig er jeg en regelmæssig Neil Buchanan og forberedte et brugerdefineret tema. Importer temaet og send det videre til SkillTreeGroup's themeprop. Temaobjektet eksporteres via import theme from './data/theme';. Let!

Når du har gjort ovenstående, skal du tjekke det færdige produkt. Hvis du stadig ikke er tilfreds med typografierne, skal du tjekke temaobjektet og tilpasse det selv. Der er en masse ekstra attributter, hvis typografier kan justeres, så bare kig ind i pakkens typografier.

Jeg nævnte tidligere, at der er et par ekstra egenskaber og værdier, der kan bruges til at finjustere dygtighedstræet, så tag et rod rundt dig selv, og link mig til alle seje træer, du opretter. Jeg vil meget gerne føje det til den voksende liste over træer, der findes her. Her er et eksempel på det dygtighedstræ, der startede denne besættelse.

Jeg håber, du har haft glæde af at pille med beautiful-skill-treepakken. Jeg tilføjer altid nye funktioner og opdaterer, så giv det en stjerne på github! Du kan finde en online demo af borderlands-dygtighedstræet her

Du kan finde mig på Instagram eller GitHub, hvis du vil chatte kode, musik eller fitness!