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'
 
@@ -35,6 +35,7 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
         key={talent.id}
         from={talentsById[talent.requires[0].id]}
         to={talent}
+        active={knownTalents.get(talent.id, 0) > 0 || canLearnTalent(knownTalents, talent)}
       />
     })
 

src/lib/tree.ts

@@ -43,31 +43,39 @@ export function calcMeetsRequirements(talent: TalentData, known: Map<number, num
   }, true)
 }
 
-/**
+export const canLearnTalent = (known: Map<number, number>, talent: TalentData): boolean => {
- * Adds a single talent point to the Map, if possible.
+   // Reached the max rank?
- */
+   if (known.get(talent.id, 0) >= talent.ranks.length) {
-export const addTalentPoint = (known: Map<number, number>, talent: TalentData): Map<number, number> => {
+    return false
-  const currentPoints = known.get(talent.id, 0)
-  
-  // Reached the max rank?
-  if (currentPoints >= talent.ranks.length) {
-    return known
   }
 
   // Spend a maximum of 51 points
   if (calcAvailablePoints(known) === 0) {
-    return known
+    return false
   }
   
   // Support for specific Talent dependency requirement.
   if (talent.requires.length > 0 && !calcMeetsRequirements(talent, known)) {
-    return known
+    return false
   }
   
   // Check we have the required amount of points spent in the tree for this talent
   const requiredPoints = talent.row * 5
   const pointsInSpec = getPointsInSpec(talentToSpec[talent.id], known)
   if (requiredPoints > pointsInSpec) {
+    return false
+  }
+
+  return true
+}
+
+/**
+ * Adds a single talent point to the Map, if possible.
+ */
+export const addTalentPoint = (known: Map<number, number>, talent: TalentData): Map<number, number> => {
+  const currentPoints = known.get(talent.id, 0)
+  
+  if (!canLearnTalent(known, talent)) {
     return known
   }