Kako stvoriti stablo vještina u stilu Borderlandsa za 5 minuta

Odrastajući, slobodno vrijeme provodio sam radeći ono što je radila većina programera: igrajući videoigre svakog trenutka budnosti. Obožavao sam avanturističke igre i kakav su vremenski ponor bili. Ako je vrijeme bila Mary Rose, a ja Francuz, moje topništvo bile su igre poput Kingdom Hearts, Ōkami i Borderlands.

Zašto sam, i drugi, proveo toliko svog slobodnog vremena istražujući, preživljavajući, umirući i (toliko, toliko) bruseći? Stotine čimbenika pridonose stvaranju zanimljivog iskustva, ali ono na što ću se usredotočiti jest pojam napredovanja.

Ideja gamifikacije nije nova. Mnoge popularne aplikacije (poput todoista ili izazivača) imaju ugrađenu nekakvu shemu napredovanja kako bi nas, potrošače, upotrijebili njihovu aplikaciju, dali im novac i predali naše osobne podatke. Stoga sam odlučio krenuti na svoj način omogućavanja drugima da čine upravo to, kroz prekrasna stabla vještina! Napomena: Ne očekujem ni novac ni podatke od onih koji koriste moje stabla vještina.

Posljednjih nekoliko tjedana vidio sam kako se trudim stvoriti ono za što se nadam da ću biti ugodan plug'n'play React paket koji će vam pomoći u stvaranju uzbudljivih stabala vještina. Možete ga sami testirati slijedeći upute. Nadam se da će to biti iskustvo bez trenja.

Nadamo se da ćemo imati nešto nalik na stablo vještina u nastavku:

[email protected]

Dohvatite repo startera pomoću git clone [email protected]:andrico1234/borderlands-skill-tree.git

Preseliti u direktorij i pokrenuti početnu skriptu, yarn start. Okrećite se web mjestu, vidjet ćete samo logotip Borderlands i okoliš.

beautiful-skill-treeizlaže tri komponente: SkillProvider, SkillTreeGroup, i SkillTreekomponente.

SkillProvider: Ovo ne uzima rekvizite i pruža djeci kontekst stabla vještina. Ovo štene obrađuje sve globalne podatke povezane sa stablom vještina.

SkillTreeGroup: Više je uključen u to da može uzeti neobavezno themesvojstvo, gdje možemo dodati neki prilagođeni stil, kako bi se naše drvo vještina osjećalo vrlo pogranično. SkillTreeGroupTakođer koristi za djecu-as-a-funkcija obrazac kako bi nam pristup nekim imperativ api funkcionalnosti, kao što su reset vještine stabla, odabrana vještine brojač i sl Ne morate brinuti o bilo koji od onih za opseg ovog članak.

SkillTree: Ovo je najuzbudljiviji izvoz paketa, osim ako niste usisavač za tipkanje (koji se također izvozi, za sve vaše obožavatelje TS-a). SkillTreeNe poduzimati nikakve djecu, ali zahtijeva 3 rekvizite: treeId, titlei data. treeIdTrebao bi biti ID koji je jedinstven za svaku vještinu stabla, ali treba biti uporan preko korisničke sjednice jer se koristi kao ključ za dobivanje i postavljanje podataka na lokalnu pohranu. Neću objašnjavati što titlerekvizit radi, ostavit ću vas da eksperimentirate. dataJe miješanje lonac zahtjeva. Proslijedit ćete strukturu podataka stabla vještina koju će aplikacija koristiti za generiranje a beautiful-skill-tree. Krenimo sa pravim osnovnim stablom prije nego što prijeđemo na naš spektakularni Borderlands s više stabala i s više grana.

U App.tsx uvezite 3 komponente na sljedeći način:

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

Postavite ga ispod imgoznake, izvan div-a spremnika slike, ali unutar vanjskog div-a. Dodajte SkillProvider, dodajući SkillTreeGroupkao dijete. Prije nego što učinite isto s SkillTree, sjetite se da ćete, budući da SkillTreeGroupkoristi obrazac funkcija-kao-dijete, trebati prikazati funkciju koja vraća podređene komponente. Vratite singl SkillTreei dajte mu a treeIdi titlerekvizit. Proslijedite niz u datarekvizit tako da App.tsxizgleda ovako:

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

Idite na localhost: 3000 da biste vidjeli kako se aplikacija izvodi. Trebali biste vidjeti logotip, pozadinu i sivi pravokutnik. Ako nailazite na pogreške, ponovno prođite kroz uvod i provjerite postoji li sintaksna pogreška ili netočan uvoz.

Dalje, kreirajmo pravo osnovno stablo. Samo 3 predmeta koji se kreću u linearnoj liniji. Struktura podataka za dataizgleda ovako:

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

Svaka vještina zahtijeva četiri svojstva, a jedno je neobavezno. Također biste trebali primijetiti da je childrensvojstvo rekurzivni tip, što znači da uzima niz iste strukture podataka, koji koristi za prikazivanje djece vještine. To može trajati beskrajno i stvoriti prava komplicirana, zavojita stabla. Stvorit ću vam prvu vještinu i povjerit ću vam nastavak za sljedeće dvije stavke.

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

Dodaj gore isječak na App.tsxdatoteku, i zamijeniti praznog niza unutrašnjost SkillTree„s dataimovinom s našim datadefiniciji. Učitajte svoju stranicu i trebali biste imati interaktivni čvor. Zadržite pokazivač miša i kliknite i trebao bi reagirati na vaše postupke. Ako stvari funkcioniraju, tada ću vam zadati stvaranje dva (ili više) podređenih čvorova. Eksperimentirajte s djecom i duljinom braće i sestara kako biste vidjeli što možete smisliti. (Ako i slučajno razbijete moj dragocjeni paket, ostavite mi GitHub izdanje kako bih mogao popraviti stvari).

Jednom kada se osjećate ugodno sa stvaranjem stabla vještina, krenimo dalje i stvorimo naše drvo vještina Borderlands. Srećom, obavio sam sav dosadan posao za vas i već sam stvorio strukture podataka i prikupio slike.

Morat ćete uvesti tri stabla iz datadatoteke, što se može učiniti putem

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

Sljedeći je korak stvaranje dva dodatna SkillTreesuz trenutni. Morat ćete ih zamotati u, React.Fragmentjer SkillTreeGroupće sada pokušati prikazati 3 komponente najviše razine. U skladu s tim unesite podatke, a ako niste sigurni, u nastavku sam objavio isječak koda.

Samo naprijed provjerite svoj web preglednik, on bi trebao biti najspremniji . Dobili smo vještine, ali stil izgleda pomalo mračno. Ne osjeća se baš Borderlands. Na vašu sreću, redoviti sam Neil Buchanan i pripremio sam prilagođenu temu. Uvoz temu i to prođe pa sve do SkillTreeGroup„s themerekvizit. Predmet teme je izvoz putem import theme from './data/theme';. Lako!

Nakon što učinite gore navedeno, pogledajte gotov proizvod. Ako i dalje niste zadovoljni stilovima, pogledajte objekt teme i prilagodite ga sami, postoji gomila dodatnih atributa čiji se stilovi mogu prilagoditi, pa samo zavirite u tipizacije paketa.

Ranije sam spomenuo da postoji nekoliko dodatnih svojstava i vrijednosti koje se mogu koristiti za dotjerivanje stabla vještina, pa imajte nereda oko sebe i povežite me sa bilo kojim hladnim drvećem koje stvorite. Volio bih ga dodati na rastući popis drveća koje se ovdje nalazi. Evo primjera stabla vještina koje je pokrenulo ovu opsesiju.

Nadam se da ste uživali u prtljanju oko beautiful-skill-treepaketa. Uvijek dodajem nove značajke i ažuriram, pa dajte mu zvjezdicu na githubu! Internet prezentaciju stabla vještina graničnih područja možete pronaći ovdje

Možete me pronaći na Instagramu ili GitHubu ako želite chat kod, glazbu ili fitness!