Add down-, right- and left-wards arrows, still missing active state

src/App.scss

@@ -1,3 +1,5 @@
+@import "sass/config";
+
 body {
   background-color: #111;
   font-family: Verdana;

src/components/Arrow.scss

@@ -0,0 +1,76 @@
+@import "../sass/config";
+
+.arrow {
+  $arrow-width: 15px;
+  position: absolute;
+
+  &--right,
+  &--left {
+    height: $arrow-width;
+
+    // Rows
+    @for $i from 0 through 6 {
+      &[data-row="#{$i}"] {
+        top: 12px + $row-offset + (($i) * $row-distance);
+      }
+    }
+
+    // Lengths
+    @for $i from 0 through 3 {
+      &[data-length="#{$i}"] { 
+        width: 1px + ($col-gutter * $i) + ($icon-size * ($i - 1));
+      }
+    }
+  }
+
+  &--right {
+    background: url('/images/arrows/right.png');
+    background-position: center right;
+
+    // Cols
+    @for $i from 0 through 3 {
+      &[data-col="#{$i}"] { 
+        left: 3px + $col-offset + ($col-distance * $i) + $icon-size;
+      }
+    }
+  }
+
+  &--left {
+    background: url('/images/arrows/left.png');
+    background-position: center left;
+
+    // Cols
+    @for $i from 0 through 3 {
+      &[data-col="#{$i}"] { 
+        left: -3px + $col-offset + ($col-gutter * ($i - 1)) + $icon-size;
+      }
+    }
+  }
+
+  &--down {
+    width: $arrow-width;
+    background: url('/images/arrows/down.png');
+    background-position: center bottom;
+
+    // Rows
+    @for $i from 0 through 6 {
+      &[data-row="#{$i}"] {
+        top: $row-offset + (($i) * $row-distance) + 40px;
+      }
+    }
+
+    // Cols
+    @for $i from 0 through 3 {
+      &[data-col="#{$i}"] { 
+        left: 5px + $col-offset + ($col-distance * $i) + floor($arrow-width / 2); 
+      }
+    }
+
+    // Lengths
+    @for $i from 0 through 3 {
+      &[data-length="#{$i}"] { 
+        height: 2px + ($row-offset * $i) + ($icon-size * ($i - 1));
+      }
+    }
+  }
+}

src/components/Arrow.tsx

@@ -0,0 +1,29 @@
+import './Arrow.scss'
+import React, { FC } from 'react'
+import classNames from 'classnames'
+
+interface Props {
+  from: TalentData
+  to: TalentData
+}
+
+export const Arrow: FC<Props> = ({ 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 <div className={className} {...props} />
+}

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'

src/components/TalentSlot.scss

@@ -1,13 +1,4 @@
-$row-offset: 30px;
+@import "../sass/config";
-$row-distance: 70px;
-
-$col-offset: 44px;
-$col-distance: 56px;
-
-$color-yellow: #ffd100;
-$color-green: #1eff00;
-$color-dark-green: #40bf40;
-$color-subtle: #9d9d9d;
 
 .talent {
   position: absolute;

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<Props> = ({ 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 <Arrow 
+        key={talent.id}
+        from={talentsById[talent.requires[0].id]}
+        to={talent} 
+      />
+    })
+
   return (
     <div className="tree">
       <div className="tree__header">
@@ -45,6 +56,8 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
             onRightClick={handleRightClick}
           />
         )}
+
+        {arrows}
       </div>
     </div>
   )

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;