Add arrow active state

src/components/Arrow.scss

@@ -24,9 +24,13 @@
   }
 
   &--right {
-    background: url('/images/arrows/right.png');
+    background-image: url('/images/arrows/right.png');
     background-position: center right;
 
+    &.arrow--active {
+      background-image: url('/images/arrows/right-active.png');
+    }
+
     // Cols
     @for $i from 0 through 3 {
       &[data-col="#{$i}"] { 
@@ -36,9 +40,13 @@
   }
 
   &--left {
-    background: url('/images/arrows/left.png');
+    background-image: url('/images/arrows/left.png');
     background-position: center left;
 
+    &.arrow--active {
+      background-image: url('/images/arrows/left-active.png');
+    }
+
     // Cols
     @for $i from 0 through 3 {
       &[data-col="#{$i}"] { 
@@ -49,9 +57,13 @@
 
   &--down {
     width: $arrow-width;
-    background: url('/images/arrows/down.png');
+    background-image: url('/images/arrows/down.png');
     background-position: center bottom;
 
+    &.arrow--active {
+      background-image: url('/images/arrows/down-active.png');
+    }
+
     // Rows
     @for $i from 0 through 6 {
       &[data-row="#{$i}"] {

src/components/Arrow.tsx

@@ -5,9 +5,10 @@ import classNames from 'classnames'
 interface Props {
   from: TalentData
   to: TalentData
+  active?: boolean
 }
 
-export const Arrow: FC<Props> = ({ from, to }) => {
+export const Arrow: FC<Props> = ({ from, to, active = false }) => {
   const length = to.row === from.row 
     ? Math.abs(to.col - from.col)
     : to.row - from.row
@@ -19,6 +20,7 @@ export const Arrow: FC<Props> = ({ from, to }) => {
   }
 
   const className = classNames('arrow', {
+    'arrow--active': active,
     '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,

src/components/TalentTree.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { Map }  from 'immutable'
 import { TalentSlot } from './TalentSlot';
-import { getPointsInSpec } from '../lib/tree';
+import { getPointsInSpec, canLearnTalent } from '../lib/tree';
 import { talentsBySpec, specNames, talentsById } from '../data/talents'
 import { Arrow } from './Arrow'
 
@@ -34,7 +34,8 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
       return <Arrow 
         key={talent.id}
         from={talentsById[talent.requires[0].id]}
-        to={talent} 
+        to={talent}
+        active={knownTalents.get(talent.id, 0) > 0 || canLearnTalent(knownTalents, talent)}
       />
     })