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-treekiteszi három összetevőből áll: a SkillProvider, SkillTreeGroupés a SkillTreekomponensek.

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 themetulajdonságot vehet igénybe , ahol átadhatunk valamilyen egyedi stílust, hogy készségfánk határmenti érzetet keltsen. A SkillTreeGroupGyermek-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 SkillTreenem vállal gyermeket, de megköveteli, 3 kellékek: treeId, titleés data. Ennek treeIdegy 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 titletámasz, hagylak kísérletezni. Ez dataaz 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 imgcímke alá , a kép tároló div-jén kívülre, de a külső div-be. Adja hozzá a gyermekként SkillProviderelhaladó SkillTreeGroup. Mielőtt ugyanezt tenné a SkillTree, ne feledje, hogy mivel SkillTreeGroupa 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 titlejavaslatot. Adjon egy üres tömböt a datatámasztékba, hogy így nézzen App.tsxki:

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 datané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 childrentulajdonsá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.tsxfájlhoz, és cserélje le a SkillTree'' datatulajdonságban lévő üres tömböt a datadefiní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 datafá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 SkillTreesa jelenlegi mellett. Be kell csomagolnia őket egy a-ba, React.Fragmentmivel SkillTreeGroupmost 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 themejavaslatnak. 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-treecsomagot. 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!