From 0b4af07407d64b23eb4b7662a3f0fe71e86e7dfc Mon Sep 17 00:00:00 2001
From: Melvin Valster <melvin.valster@gmail.com>
Date: Mon, 22 Jul 2019 22:58:32 +0200
Subject: [PATCH] Add arrow active state

---
 .../arrows/{down2.png => down-active.png}     | Bin
 public/images/arrows/left-active.png          | Bin 0 -> 2033 bytes
 public/images/arrows/leftdown-active.png      | Bin 0 -> 1940 bytes
 public/images/arrows/right-active.png         | Bin 0 -> 2032 bytes
 public/images/arrows/rightdown-active.png     | Bin 0 -> 1960 bytes
 src/components/Arrow.scss                     |  18 +++++++++--
 src/components/Arrow.tsx                      |   4 ++-
 src/components/TalentTree.tsx                 |   5 +--
 src/lib/tree.ts                               |  30 +++++++++++-------
 9 files changed, 40 insertions(+), 17 deletions(-)
 rename public/images/arrows/{down2.png => down-active.png} (100%)
 create mode 100644 public/images/arrows/left-active.png
 create mode 100644 public/images/arrows/leftdown-active.png
 create mode 100644 public/images/arrows/right-active.png
 create mode 100644 public/images/arrows/rightdown-active.png

diff --git a/public/images/arrows/down2.png b/public/images/arrows/down-active.png
similarity index 100%
rename from public/images/arrows/down2.png
rename to public/images/arrows/down-active.png
diff --git a/public/images/arrows/left-active.png b/public/images/arrows/left-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..c11d7d5758d330319216f328e9d1d2f174ed5814
GIT binary patch
literal 2033
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
P00000NkvXXu0mjfVBgoH

literal 0
HcmV?d00001

diff --git a/public/images/arrows/leftdown-active.png b/public/images/arrows/leftdown-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a908db4c7c901b3007c7c7178d219dda6a41ed7
GIT binary patch
literal 1940
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
a0R{jPEo}3|UJRW80000<MNUMnLSTX_RIYgd

literal 0
HcmV?d00001

diff --git a/public/images/arrows/right-active.png b/public/images/arrows/right-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..44934a9b6d8e7faa66abe6fcfcffa5291ad8777e
GIT binary patch
literal 2032
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
O0000<MNUMnLSTX)rQE;(

literal 0
HcmV?d00001

diff --git a/public/images/arrows/rightdown-active.png b/public/images/arrows/rightdown-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..135dc5c4fbf5c12154bdaba106a7e9a7c07bf492
GIT binary patch
literal 1960
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

literal 0
HcmV?d00001

diff --git a/src/components/Arrow.scss b/src/components/Arrow.scss
index 9237f1d..306ef98 100644
--- a/src/components/Arrow.scss
+++ b/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}"] {
diff --git a/src/components/Arrow.tsx b/src/components/Arrow.tsx
index 1304284..3795df1 100644
--- a/src/components/Arrow.tsx
+++ b/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,
diff --git a/src/components/TalentTree.tsx b/src/components/TalentTree.tsx
index 4706c14..6d72720 100644
--- a/src/components/TalentTree.tsx
+++ b/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)}
       />
     })
 
diff --git a/src/lib/tree.ts b/src/lib/tree.ts
index efc7483..ddaf6bf 100644
--- a/src/lib/tree.ts
+++ b/src/lib/tree.ts
@@ -43,31 +43,39 @@ export function calcMeetsRequirements(talent: TalentData, known: Map<number, num
   }, 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)
-  
-  // Reached the max rank?
-  if (currentPoints >= talent.ranks.length) {
-    return known
+export const canLearnTalent = (known: Map<number, number>, talent: TalentData): boolean => {
+   // Reached the max rank?
+   if (known.get(talent.id, 0) >= talent.ranks.length) {
+    return false
   }
 
   // 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
   }