From 1866951986aee54095045661e7ded2cbbd4294d5 Mon Sep 17 00:00:00 2001 From: Melvin Valster Date: Mon, 22 Jul 2019 22:48:05 +0200 Subject: [PATCH] Add down-, right- and left-wards arrows, still missing active state --- public/images/{ => arrows}/down.png | Bin public/images/{ => arrows}/down2.png | Bin public/images/arrows/left.png | Bin 0 -> 1000 bytes public/images/arrows/leftdown.png | Bin 0 -> 987 bytes public/images/arrows/right.png | Bin 0 -> 1006 bytes public/images/arrows/rightdown.png | Bin 0 -> 1044 bytes src/App.scss | 2 + src/components/Arrow.scss | 76 +++++++++++++++++++++++++++ src/components/Arrow.tsx | 29 ++++++++++ src/components/ClassPicker.tsx | 2 +- src/components/TalentSlot.scss | 11 +--- src/components/TalentTree.tsx | 15 +++++- src/sass/_config.scss | 13 +++++ 13 files changed, 136 insertions(+), 12 deletions(-) rename public/images/{ => arrows}/down.png (100%) rename public/images/{ => arrows}/down2.png (100%) create mode 100644 public/images/arrows/left.png create mode 100644 public/images/arrows/leftdown.png create mode 100644 public/images/arrows/right.png create mode 100644 public/images/arrows/rightdown.png create mode 100644 src/components/Arrow.scss create mode 100644 src/components/Arrow.tsx create mode 100644 src/sass/_config.scss diff --git a/public/images/down.png b/public/images/arrows/down.png similarity index 100% rename from public/images/down.png rename to public/images/arrows/down.png diff --git a/public/images/down2.png b/public/images/arrows/down2.png similarity index 100% rename from public/images/down2.png rename to public/images/arrows/down2.png diff --git a/public/images/arrows/left.png b/public/images/arrows/left.png new file mode 100644 index 0000000000000000000000000000000000000000..d3cf71683214ee5c4aebcbca4a5ec116eb70bd4f GIT binary patch literal 1000 zcmV>P)ZsB8q$onvcjJJ{QJA&%c2^SFIu zDuYT!5LrsjvAeSyv|qL9<mnM~-}wr%R4 zB$NDE1~86dNt(=*vZzm8M+e?#Sw=Edj7Fom>oc$>>j0!_D%5)z#;P*028!Wd4gUOl zAA|!jiX(E6XS#D>0#6zaha!riLJ)-ezF!h(JGTo)GA(0=s?};V9>#!y(60G4VcC`l z!;lEV2uuKL@TR0mDm>2l^Y9Q#v>+tZVi=1O~W3z}HzXK?Id39MbFnckGXVZ+7#yF6I zlR;rPUL41wUau1g6;K)lCkhCG0OmqAo*@@=(MEqX%#G4)Hs|Vx@v2e&CJg_@<_`y1 zU0Hb&9PA&I!j2wNu?Wbi;fjsWYPO1YJdVZE(h?C!vy_PPi3BCl&tVKF3ctge9ERxx zk!_4;gRp1Q2_)N?$K?5>zc^FlBKn+F|Ldl>$U&0qihW7c{YM(5)= ze!jN$v`~c8EY3e61QQV&VK~)5P>u@}guxJY5fZ1_RCs>=ZqOgloPNJginUrT;X1Bh zPIS7+Ihbo(ws1W+uid-1jex4SV)5#(wAQ>1tXM;H}Ro~+j?EUN! z|3f zKeh7H3bpOpltbPoiyBeSE|HmIP5Iyk+3RgNpUwT%_N#e;k*xPwY?b(My1B2>* zDAb+gtlK^GnvFmiXTGExRP#fj_K|4r|6<88uZ^h;DjPwR%ZwUHxV|=KGN>wk2`~Vs WvbR48rQ8<)0000|cqBdQq_1p9XQWRLegEFK^?HxUFFx4yZgBo3(0_e%z4k-XtmggSeg8LB6tV#r3tM{|#=wjNboO;r~XW9DF#C@qTh|uCA}l;m1RBesOLllgVEPPKotW zXztg1czbDh|98)Sbd1I$d65xqdg$RI7!In^I-AdgB&TPm-~1bOkGK9m%Br_?%B4PZ zIr#3w=JDo`1;pCpNF4D4UxI5wUsm&-;U*In0@bDf9rcr34{ zlauppme~TK@d!pU#r#B`RVB?>3b~5(E+{CbY1oPE&ti(&%bvZpFVy< zp6fQZceV{D@ylVER##SO@#Z3xN+n|g7zc{z1{w~B2KmuwWIPi^5sk*#7)Y@}p#<)Q zvEn3FixZEtIXvG}i^Yoqav+8AYPCvflG0!}puu1u_2T)_XBm-5mrCC_F?56O`U3X{ zeFA@8RLIheX!*}3e|CK6TB%gj*v6v`+-5k*r8nvMXrh!D4XM}bWyY#RQZO6+tbZmI zLmy;t4yDl#l0Yp6M+F$J-|tfxhVmN5F*n9wG!S$hm)f1Sie7vU)EDYTg#4SZ{AZIt zoJ7cN?jP(+C-Lg_g%|bu4XRzM$qd4tjRpew)QCO{&8K8JCZYqLlWB312GK`D1b{)< zgE?Jtl)$|(3d`WsjO(0E(dX;3?>Z`SVZKVaLZzT28|3Hp*ZCoO=n+!qXZg=Af5>JB zm3oP}(U{lDtrhz8`Qx2#xA#S5kZ!jt9VBnCym9jTlsq5=sgDUlX-=7#dmNADb);0J zSBxPFppOzXb<HIHLJ$^O?cK^U@eXZDCKzwlhXCb#@&m%r}hT+T7Kt*w`IeEc05^yaKxObD?Qg!H7?Tcc^kxk1%cIzL&}4%yokO%k|LE(tP5UO?qNu=!LL6W3 zyrFjo2ZnRV?;t3-teGqd3i*+I@5B44&LQ_*_RoqIMTOWCJty9_DVtmwLX)CE};bw#O~C<(-lADwf}9c;&@ z2+@kiJ;<^>_T0JWPVQsI^opWT0)gOmSYiT!;P2?^3N~b^^#*dW_;v4jOjYA(E&1D*KHktJRY0t*=(k&YcPyct2?z`II6l<-xvPRlYjGf z-UK)te>pzXmq)t)5%mfDK<&NXQ@gKsmFIc24loiFsv0UulA00L>vgS97=~({mTe%% zhJ|u?7e>qS%uG_2mNIO|Hj~Da1Ck(z_9%)}krygXVim_R>BaJK&trs9c%yHY*K~vK z)rnrkD+T^MxfrYZV-o&Pn?Gbj20JOs+Zt_=tkr5oj)?Ig1AH*f$;ruv^Emg-OU>wF zCS#qb%gf8sX#J3sWaD40uE+?u2Ps^`@VIw#*GvjW2@n7o-}mVm+94ZlFdinw>RD>O zn43tz*TD9x?OMcqNC^MO#~<%4mJ15_a0<`$$SG~hrm=89=fz?{df^Z6;W@Gx>;;D< z2kLSZ2x+FIrja3>-+|K2w8!K?iX#maLm%p^l|e+{RE++dN-;kAa9U-3Kpuu<`_aHcG(sXLaV9M@4n zKPWR(+#VQ=RhG*oDNs$d8(U-*Lv`*qYbB8qIkiG5PNk5YW+^>~=OQ(t4N(F2C{YWm zFny_A_npt@YC4^kX+2q&sT1|7?vJPey-`9S5;SY%DiBE^gE=A+!8ll-ps#EDxq-o%!cP$ z5$V_%)xDk+?-s*rWA%eRogov1IZD9bFhtiv@?SytKTiI5j*Q{tWm%WoH% = ({ from, to }) => { + const length = to.row === from.row + ? Math.abs(to.col - from.col) + : to.row - from.row + + const props = { + 'data-col': from.col, + 'data-row': from.row, + 'data-length': length, + } + + const className = classNames('arrow', { + 'arrow--down': to.row > from.row, + 'arrow--right': to.row === from.row && to.col > from.col, + 'arrow--left': to.row === from.row && to.col < from.col, + 'arrow--right-down': to.row === from.row + 1 && to.col === from.col + 1 + }) + + return
+} \ No newline at end of file diff --git a/src/components/ClassPicker.tsx b/src/components/ClassPicker.tsx index f22ebf8..aa6fbc6 100644 --- a/src/components/ClassPicker.tsx +++ b/src/components/ClassPicker.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { NavLink, Link } from 'react-router-dom' +import { Link } from 'react-router-dom' import { classByName } from '../data/classes' import { Icon } from './Icon' import classNames from 'classnames' diff --git a/src/components/TalentSlot.scss b/src/components/TalentSlot.scss index 457508f..0a481b2 100644 --- a/src/components/TalentSlot.scss +++ b/src/components/TalentSlot.scss @@ -1,13 +1,4 @@ -$row-offset: 30px; -$row-distance: 70px; - -$col-offset: 44px; -$col-distance: 56px; - -$color-yellow: #ffd100; -$color-green: #1eff00; -$color-dark-green: #40bf40; -$color-subtle: #9d9d9d; +@import "../sass/config"; .talent { position: absolute; diff --git a/src/components/TalentTree.tsx b/src/components/TalentTree.tsx index 00dedb7..4706c14 100644 --- a/src/components/TalentTree.tsx +++ b/src/components/TalentTree.tsx @@ -2,7 +2,8 @@ import React, { useCallback } from 'react' import { Map } from 'immutable' import { TalentSlot } from './TalentSlot'; import { getPointsInSpec } from '../lib/tree'; -import { talentsBySpec, specNames } from '../data/talents'; +import { talentsBySpec, specNames, talentsById } from '../data/talents' +import { Arrow } from './Arrow' interface Props { specId: number @@ -27,6 +28,16 @@ export const TalentTree: React.FC = ({ specId, knownTalents, availablePoi backgroundImage: `url("https://wow.zamimg.com/images/wow/talents/backgrounds/classic/${specId}.jpg")` } + const arrows = talents + .filter((talent) => talent.requires.length > 0) + .map((talent) => { + return + }) + return (
@@ -45,6 +56,8 @@ export const TalentTree: React.FC = ({ specId, knownTalents, availablePoi onRightClick={handleRightClick} /> )} + + {arrows}
) diff --git a/src/sass/_config.scss b/src/sass/_config.scss new file mode 100644 index 0000000..6188427 --- /dev/null +++ b/src/sass/_config.scss @@ -0,0 +1,13 @@ +$icon-size: 40px; + +$row-offset: 30px; +$row-distance: $icon-size + $row-offset; + +$col-offset: 44px; +$col-gutter: 16px; +$col-distance: $icon-size + $col-gutter; + +$color-yellow: #ffd100; +$color-green: #1eff00; +$color-dark-green: #40bf40; +$color-subtle: #9d9d9d;