Felnőttem, szabadidőmet azzal töltöttem, amit a legtöbb programozó: videojátékokat játszott minden ébrenlét pillanatában. Imádtam a kalandjátékokat és azt, hogy milyen időbe süllyedtek. Ha az idő a Mary Rose volt, én pedig a francia voltam, a tüzérségem olyan játék volt, mint a Kingdom Hearts, a Ōkami és a Borderlands.
Miért töltöttem én és mások szabadidőnk nagy részét felfedezéssel, túléléssel, haldoklással és (ennyire) őrléssel? Több száz tényező járul hozzá ahhoz, hogy megnyerő élményt nyújtsunk, de a továbbiakban a progresszió fogalmára fogok koncentrálni.
A gamification ötlete nem új keletű. Sok népszerű alkalmazás (például a todoist vagy a kihívás időzítő) beépített valamilyen progressziós sémát, hogy minket, a fogyasztókat felhasználhassuk az alkalmazásukra, pénzt adhassunk nekik és átadhassuk személyes adatainkat. Tehát úgy döntöttem, hogy megteszem a módját annak, hogy másoknak ezt lehetővé tegyem, gyönyörű képességfákon keresztül! Megjegyzés: Nem várok sem pénzt, sem adatokat azoktól, akik a képességfáimat használják.
Az elmúlt hetekben fáradozom, hogy létrehozzak egy reményeim szerint egy kellemes plug'n'play React csomagot, amely segít izgalmas készségfák létrehozásában. Az oktatóanyag követésével maga is kipróbálhatja. Remélem, súrlódásmentes élmény lesz.
Reméljük, hogy valami hasonló lesz az alábbi képességfához:

[email protected]
Fogja meg a starter repót a gombbal git clone [email protected]:andrico1234/borderlands-skill-tree.git
Beköltözik a könyvtárba, és futtassa a kiindulási forgatókönyv, yarn start
. Adjon örvényt a webhelynek, a Borderlands logót és a környezetet nem látja mást.
beautiful-skill-tree
kiteszi három összetevőből áll: a SkillProvider
, SkillTreeGroup
és a SkillTree
komponensek.
SkillProvider
: Ez nem vesz igénybe kellékeket, és ellátja a gyerekeket a készségfa összefüggéseivel. Ez a kiskutya kezeli a készségfával kapcsolatos összes globális adatot.
SkillTreeGroup
: Jobban részt vesz abban, hogy egy opcionális theme
tulajdonságot vehet igénybe , ahol átadhatunk valamilyen egyedi stílust, hogy készségfánk határmenti érzetet keltsen. A SkillTreeGroup
Gyermek-mint-funkció mintát arra is felhasználja, hogy hozzáférést biztosítson számunkra az imperatív api funkciókhoz, például a készségfa visszaállításához, a kiválasztott készségszámlálóhoz stb. Nem kell aggódnunk ezek közül egyik miatt sem. cikk.
SkillTree
: Ez a legizgalmasabb a csomag exportja közül, hacsak nem vagy a gépelés (amely szintén exportálva van, mindannyian a TS rajongói számára). A SkillTree
nem vállal gyermeket, de megköveteli, 3 kellékek: treeId
, title
és data
. Ennek treeId
egy azonosítónak kell lennie, amely egyedi az egyes készségfáknál, de állandónak kell lennie a felhasználói munkamenetek során, mivel ez a kulcs az adatok helyi tárhelyre történő megszerzéséhez és beállításához. Nem fogom elmagyarázni, mit csinál a title
támasz, hagylak kísérletezni. Ez data
az alkalmazás keverőedénye. Adja át a készségfa adatszerkezetét, amelyet az alkalmazás használni fog a beautiful-skill-tree
. Indítsunk el egy igazi alapfát, mielőtt továbblépnénk a sokfás, sokágú Borderlands látványunkhoz.
Az App.tsx fájlban importálja a 3 komponenst, így:
import { SkillProvider, SkillTreeGroup, SkillTree } from 'beautiful-skill-tree';
Helyezze a img
címke alá , a kép tároló div-jén kívülre, de a külső div-be. Adja hozzá a gyermekként SkillProvider
elhaladó SkillTreeGroup
. Mielőtt ugyanezt tenné a SkillTree
, ne feledje, hogy mivel SkillTreeGroup
a function-as-a-child mintát használja, meg kell adnia egy függvényt, amely visszaadja a gyermek összetevőit. Tegyen vissza egy kislemezt, SkillTree
és adjon neki egy treeId
és egy title
javaslatot. Adjon egy üres tömböt a data
támasztékba, hogy így nézzen App.tsx
ki:
function App() { return ( // {() => { return ( ) }} ); }
Menjen a localhost: 3000 oldalra az alkalmazás futtatásához. Látnia kell a logót, a hátteret és a szürke téglalapot. Ha bármilyen hibába ütközik, nézze át újra a bevezetést, és ellenőrizze, hogy vannak-e szintaxis hibák vagy helytelen importálás.
Ezután hozzunk létre egy igazi alapfát. Csak 3 tétel, amely lineáris vonalon mozog. Az adatstruktúra a következőképpen data
néz ki:
type Skill = { id: string; icon?: string; title: string; tooltip: { description : string; }, children: Skill[]; }
Minden készséghez négy tulajdonság szükséges, az egyik opcionális. Azt is észre kell vennie, hogy a children
tulajdonság rekurzív típus, vagyis ugyanazon adatstruktúra tömbre van szüksége, amelyet a készség gyermekeinek megjelenítésére használ. Ez végtelenül folytatódhat, és igazi bonyolult, kanyargós fákat hozhat létre. Létrehozom neked az első készséget, és bízom benne, hogy folytatod a következő két elemet.
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. ]}
Adja hozzá a fenti részletet a App.tsx
fájlhoz, és cserélje le a SkillTree
'' data
tulajdonságban lévő üres tömböt a data
definíciónkra. Töltse be az oldalát, és interaktív csomópontra van szüksége. Adjon egy lebegést és egy kattintást, és reagálnia kell a tetteire. Ha a dolgok működnek, akkor két (vagy több) gyermekcsomópont létrehozásával megbízom. Kísérletezzen gyermekekkel és testvérhosszakkal, hogy lássa, mire tud kitalálni. (Ha véletlenül megtöri az értékes csomagomat is, hagyjon nekem egy GitHub-kérdést, hogy javíthassam a dolgokat).
Miután jól érzi magát egy készségfa létrehozásában, folytassuk és hozzuk létre a Borderlands készségfát. Szerencsére minden unalmas munkát elvégeztem az Ön számára, és már létrehoztam az adatstruktúrákat és felhalmoztam a képeket.
Importálnia kell a három fát a data
fájlból, amely a következőn keresztül végezhető el:
import { motion, harmony, cataclysm } from "./data/data";
A következő lépés két további létrehozása SkillTrees
a jelenlegi mellett. Be kell csomagolnia őket egy a-ba, React.Fragment
mivel SkillTreeGroup
most megpróbál három legfelső szintű alkatrészt megjeleníteni. Adja meg ennek megfelelően az adatokat, és ha nem biztos benne, az alábbi kódrészletet tettem közzé.
Menj, és ellenőrizze a böngésző, meg kell aaallmoost kész. Rendelkezünk a készségekkel, de a stílus kissé gyengének tűnik. Nem nagyon érződik Borderlands. Szerencsédre rendes Neil Buchanan vagyok, és elkészítettem egy egyedi témát. Importálja a témát, és adja át a SkillTreeGroup
's theme
javaslatnak. A témaobjektum exportálása import theme from './data/theme';
. Könnyen!

Miután elvégezte a fentieket, nézze meg a kész terméket. Ha még mindig nem elégedett a stílusokkal, nézze meg a témaobjektumot, és személyre szabhatja azt. Van még egy csomó további attribútum, amelyek stílusai módosíthatók, ezért csak nézzen utána a csomag gépelésének.
Korábban említettem, hogy van néhány további tulajdonság és érték, amelyek felhasználhatók a készségfa csípésére, úgyhogy keverj magad körül, és kösd össze az általam létrehozott hűvös fákkal. Szívesen felvenném az itt található fák növekvő listájára. Íme egy példa a készségfára, amely elindította ezt a megszállottságot.
Remélem, hogy élvezettel bütykölte a beautiful-skill-tree
csomagot. Mindig új funkciókat és frissítéseket adok hozzá, ezért adj neki egy csillagot a githubon! A borderlands készségfa online bemutatóját itt találja
Megtalálhatsz az Instagramon vagy a GitHub-on, ha csevegni akarsz kódot, zenét vagy fitneszet!