Crescând, mi-am petrecut timpul liber făcând ceea ce au făcut majoritatea programatorilor: am jucat jocuri video în fiecare moment de veghe. Mi-au plăcut jocurile de aventură și ce timp au fost. Dacă timpul era Mary Rose și eu eram francezul, artileria mea era jocuri precum Kingdom Hearts, Ōkami și Borderlands.

De ce am petrecut atât eu cât și alții atât de mult din timpul nostru liber explorând, supraviețuind, murind și (atât de mult) măcinând? Sute de factori contribuie la realizarea unei experiențe captivante, dar pe care mă voi concentra este noțiunea de progresie.

Ideea gamificării nu este nouă. Multe aplicații populare (cum ar fi todoist, sau temporizator de provocare) au încorporat un fel de schemă de progres pentru a ne face pe noi, consumatorii, să folosim aplicația lor, să le dăm bani și să ne predăm datele personale. Așa că am decis să merg pe calea mea de a permite celorlalți să facă exact asta, prin arbori de abilități frumoase! Notă: nu aștept nici bani, nici date de la cei care folosesc arborii mei de abilități.

În ultimele câteva săptămâni m-am văzut trudindu-mă pentru a crea ceea ce sper să fie un pachet plăcut plug’n’play React pentru a vă ajuta să creați copaci de abilități interesante. Îl puteți testa singur urmând tutorialul. Sper că va fi o experiență fără fricțiuni.

Sperăm să avem ceva asemănător arborelui de calificare de mai jos:

Cum sa creati un arbore de calificare in stil Borderlands
„Un cățeluș pe moarte. Un bebeluș în lacrimi. Dacă declarațiile anterioare au provocat un raport de reacție emoțională către supervizorul dvs. pentru distrugere sumară. ”

beautiful-skill-tree@0.7.5

Luați repozitia de start folosind git clone git@github.com:andrico1234/borderlands-skill-tree.git

Mutați-vă în director și rulați scriptul de pornire, yarn start. Dă-i un vârtej site-ului, nu vei vedea altceva decât sigla și mediul Borderlands.

beautiful-skill-tree expune trei componente: SkillProvider, SkillTreeGroup, si SkillTree componente.

SkillProvider: Acest lucru nu include recuzită și le oferă copiilor contextul arborelui de calificare. Acest cățeluș gestionează toate datele globale legate de arborele de calificare.

SkillTreeGroup: Este mai implicat în faptul că poate lua o opțională theme proprietate, unde putem trece în unele stiluri personalizate, pentru a face ca arborele nostru de competențe să se simtă foarte Borderlands. SkillTreeGroup folosește, de asemenea, modelul copiilor-ca-o-funcție pentru a ne oferi acces la unele funcționalități imperative API, cum ar fi resetarea arborelui de abilități, contorul de abilități selectat etc. Nu trebuie să ne facem griji cu privire la oricare dintre acestea pentru scopul acestui articol .

SkillTree: Acesta este cel mai interesant dintre exporturile pachetului, cu excepția cazului în care sunteți un fraier pentru tipări (care sunt exportate și pentru toți fanii TS). SkillTree nu ia copii, dar necesită 3 recuzită: treeId, title, și data. treeId ar trebui să fie un id unic pentru fiecare arbore de abilități, dar ar trebui să fie persistent în sesiunile utilizatorilor, deoarece acesta este folosit ca cheie pentru obținerea și setarea datelor la stocarea locală. Nu am de gând să explic ce title prop, o să te las să experimentezi. data este vasul de amestecare al aplicației. Veți trece în structura de date a arborelui de calificare pe care aplicația o va folosi pentru a reda un beautiful-skill-tree. Să începem un adevărat copac de bază înainte de a trece la spectaculosul nostru Borderlands cu mai mulți arbori și mai multe ramuri.

În App.tsx, importați cele 3 componente astfel:

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

Așezați-l sub img etichetă, în afara divului containerului imaginii, dar în divul exterior. Adaugă SkillProvider, trecând de SkillTreeGroup ca un copil. Înainte de a face același lucru cu SkillTree, amintiți-vă că SkillTreeGroup folosește un model funcțional ca un copil, va trebui să redați o funcție care returnează componentele copil. Întoarceți un singur SkillTree și dă-i un treeId și a title recuzită. Treceți o matrice goală în data prop astfel încât dumneavoastră App.tsx arata asa:

function App() {
  return (
    <div>
    // <div headercontent />
      <SkillProvider>
        <SkillTreeGroup>
          {() => {
            return (
              <SkillTree treeId="basic-birch" title="First Skill Tree" data={[]} />
            )
          }}
        </SkillTreeGroup>
      </SkillProvider>
    </div>
  );
}

Mergi la localhost: 3000 pentru a vedea aplicația care rulează. Ar trebui să vedeți sigla, fundalul și un dreptunghi gri. Dacă întâmpinați erori, parcurgeți din nou introducerea și verificați dacă există erori de sintaxă sau importuri incorecte.

Apoi, să creăm un adevărat copac de bază. Doar 3 elemente care se mișcă într-o linie liniară. Structura datelor pentru data arata asa:

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

Fiecare abilitate necesită patru proprietăți, una fiind opțională. De asemenea, ar trebui să observați că children proprietatea este un tip recursiv, ceea ce înseamnă că necesită o matrice din aceeași structură de date, pe care o folosește pentru a reda copiii abilităților. Acest lucru poate continua la infinit și poate crea niște copaci adevărați complicați și sinuosi. Voi crea prima abilitate pentru tine și voi avea încredere în tine pentru continuarea următoarelor două articole.

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

Adăugați fragmentul de mai sus la App.tsx și înlocuiți matricea goală din interiorul fișierului SkillTree‘s data proprietate cu data definiție. Încărcați pagina și ar trebui să aveți un nod interactiv. Dați-i un mouse și un clic și ar trebui să reacționeze la acțiunile dvs. Dacă lucrurile funcționează, vă voi însărcina să creați două (sau mai multe) noduri copil. Experimentați cu copiii și lungimile fraților, pentru a vedea cu ce puteți veni. (Dacă vi se întâmplă, de asemenea, să spargeți pachetul meu prețios, lăsați-mi o problemă GitHub, astfel încât să pot corela lucrurile).

Odată ce vă simțiți confortabil cu crearea unui arbore de abilități, să mergem mai departe și să creăm arborele nostru de abilități Borderlands. Din fericire, am făcut toată munca plictisitoare pentru dvs. și am creat deja structurile de date și am acumulat imaginile.

Va trebui să importați cei trei copaci din data fișier, care poate fi realizat prin

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

Următorul pas este crearea a două suplimentare SkillTrees alături de cel actual. Va trebui să le înveliți într-un React.Fragment ca al tau SkillTreeGroup acum va încerca să redea 3 componente de nivel superior. Transmiteți datele în consecință și, dacă nu sunteți sigur, am postat fragmentul de cod mai jos.

<React.Fragment>
  <SkillTree treeId="motion" title="Motion" data={motion} />
  <SkillTree treeId="harmony" title="Harmony" data={harmony} />
  <SkillTree treeId="cataclysm" title="Cataclysm" data={cataclysm} />
</React.Fragment>

Continuați și verificați browserul web, ar trebui să fie aaallmoost gata. Avem abilitățile redate, dar stilul este puțin luminos. Nu se simte prea la graniță. Din fericire pentru tine, sunt un obișnuit Neil Buchanan și a pregătit o temă personalizată. Importați tema și treceți-o în SkillTreeGroup‘s theme recuzită. Obiectul tematic este exportul prin import theme from './data/theme';. Uşor!

1612092126 75 Cum sa creati un arbore de calificare in stil Borderlands
„AM O ÎNTREBARE PENTRU TINE. EXPLOZII? ”

După ce ați făcut cele de mai sus, verificați produsul finit. Dacă încă nu sunteți mulțumit de stiluri, verificați obiectul temei și personalizați-l singur, există o grămadă de atribute suplimentare ale căror stiluri pot fi ajustate, deci aruncați o privire în tipurile pachetului.

Am menționat mai devreme că există câteva proprietăți și valori suplimentare care pot fi folosite pentru modificarea arborelui de calificare, așa că ai o mizerie în jurul tău și leagă-mă de orice copac rece pe care îl creezi. Mi-ar plăcea să îl adaug pe lista tot mai mare de copaci găsiți Aici. Iată un exemplu al arborelui de calificare care a declanșat această obsesie.

Sper că ți-a plăcut să joci beautiful-skill-tree pachet. Adăug mereu funcții și actualizări noi, așa că dă-i o stea pe github! Puteți găsi o demonstrație online a arborelui de calificare borderlands Aici

Mă puteți găsi pe Instagram sau GitHub dacă doriți să conversați cu codul de chat, muzică sau fitness!