From 8302af75042517b5aea3f1563cd19b411ec4b0ad Mon Sep 17 00:00:00 2001
From: Melvin Valster <melvin.valster@gmail.com>
Date: Sun, 21 Jul 2019 22:36:46 +0200
Subject: [PATCH] Add active/inactive styling to ClassPicker

---
 TODO.md                        |  4 ++--
 src/App.scss                   | 22 ++++++++++++++------
 src/components/ClassPicker.tsx | 37 ++++++++++++++++++++++++++--------
 src/components/IndexRoute.tsx  | 24 +++++++++-------------
 src/data/classes.ts            |  7 -------
 src/lib/tree.ts                | 20 +++++++++---------
 src/types.d.ts                 |  7 +++++++
 7 files changed, 73 insertions(+), 48 deletions(-)

diff --git a/TODO.md b/TODO.md
index a8a9b73..9180373 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,10 +1,10 @@
 # TODO
 
 - [ ] Add redux
-- [ ] Prevent reducing talent points on a talent that is a requirement for another talent with points in it
 - [ ] Talent tooltips
 - [ ] Generate URL for chosen talents
 - [ ] Responsive on mobile
 - [ ] Pretty ClassPicker
 - [x] Add react-router
-- [x] Prevent reducing talent points on a row when it is a dependency for points already spent in the next row
\ No newline at end of file
+- [x] Prevent reducing talent points on a row when it is a dependency for points already spent in the next row
+- [x] Prevent reducing talent points on a talent that is a requirement for another talent with points in it
diff --git a/src/App.scss b/src/App.scss
index d48cb51..55eba5e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,7 +3,6 @@ body {
 }
 
 .calculator {
-  
   &__points {
     color: white;
     text-align: center;
@@ -40,15 +39,26 @@ body {
 
 .class-picker {
   display: flex;
+  justify-content: center;
 
   &__class {
     margin-right: 2em;
-  }
+    opacity: .8;
 
-  // TODO: Make BEM 
-  a {
-    &.active {
-      font-weight: bold;
+    &:hover {
+      opacity: 1;
+    }
+
+    &--active {
+      opacity: 1;
+    }
+
+    &--inactive {
+      opacity: .4;
+
+      &:hover {
+        opacity: .6;
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/components/ClassPicker.tsx b/src/components/ClassPicker.tsx
index 374e451..0bc3b57 100644
--- a/src/components/ClassPicker.tsx
+++ b/src/components/ClassPicker.tsx
@@ -1,18 +1,39 @@
 import React from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, Link } from 'react-router-dom'
 import { classByName } from '../data/classes'
+import { Icon } from './Icon'
+import classNames from 'classnames'
 
 interface Props {
+  /** Name of the selected class, lowercase */
+  selected?: string
 }
 
-export const ClassPicker: React.FC<Props> = () => {
-  return (
-    <ul className="class-picker">
+const classNameForItem = (c: ClassData, selected: string) => classNames('class-picker__class', {
+  'class-picker__class--active': c.name.toLowerCase() === selected,
+  'class-picker__class--inactive': !!selected && c.name.toLowerCase() !== selected
+})
+
+export class ClassPicker extends React.PureComponent<Props> {
+  static whyDidYouRender = true
+
+  render() {
+    const { selected } = this.props
+
+    const cn = classNames('class-picker', {
+      'class-picker--has-selection': !!selected
+    })
+  
+    return (
+      <ul className={cn}>
       {Object.values(classByName).map((c) => 
-        <li key={c.id} className="class-picker__class">
-          <NavLink to={`/${c.name.toLowerCase()}`}>{c.name}</NavLink>
+        <li key={c.id} className={classNameForItem(c, selected)}>
+          <Link to={`/${c.name.toLowerCase()}`} title={c.name}>
+            <Icon name={c.icon} />
+          </Link>
         </li>
       )}
     </ul>
-  )
-}
\ No newline at end of file
+    )
+  }
+}
diff --git a/src/components/IndexRoute.tsx b/src/components/IndexRoute.tsx
index e591825..65b2c3d 100644
--- a/src/components/IndexRoute.tsx
+++ b/src/components/IndexRoute.tsx
@@ -1,33 +1,29 @@
 import React from 'react'
 import { Calculator } from './Calculator'
 import { ClassPicker } from './ClassPicker'
+import { match } from 'react-router-dom'
+import { RouteComponentProps } from 'react-router'
 
-interface Props {
-  pointString?: string // e.g. 2305302300--001
-  match: any
-  history: any
+interface Props extends RouteComponentProps {
+  match: match<{ 
+    selectedClass: string
+    pointString: string
+  }>
 }
 
 export class IndexRoute extends React.PureComponent<Props> {
   static whyDidYouRender = true
 
   render() {
-    const { match, history } = this.props
+    const { match } = this.props
     const { selectedClass, pointString } = match.params
   
-    if (!selectedClass) {
-      history.replace('/warlock')
-      return null
-    }
-  
     return (
       <div className="index">
-        <ClassPicker />
+        <ClassPicker selected={selectedClass} />
   
         {selectedClass && 
-          <Calculator 
-            selectedClass={selectedClass}
-          />
+          <Calculator selectedClass={selectedClass} />
         }
       </div>
     )
diff --git a/src/data/classes.ts b/src/data/classes.ts
index 444cc37..d7bccf3 100644
--- a/src/data/classes.ts
+++ b/src/data/classes.ts
@@ -1,10 +1,3 @@
-interface ClassData {
-  id: number
-  name: string
-  icon: string
-  specs: number[]
-}
-
 export const classes: ClassData[] = [
   { 
     id: 1,
diff --git a/src/lib/tree.ts b/src/lib/tree.ts
index e7e28fb..75b9881 100644
--- a/src/lib/tree.ts
+++ b/src/lib/tree.ts
@@ -25,9 +25,9 @@ export function calcMeetsRequirements(talent: TalentData, known: Map<number, num
   if (talent.requires.length === 0) {
     return true
   }
-  return talent.requires.reduce((prev, current) => {
+  return talent.requires.reduce((prev, req) => {
     if (!prev) return false
-    return known.get(current.id, 0) >= current.qty
+    return known.get(req.id, 0) >= req.qty
   }, true)
 }
 
@@ -74,11 +74,14 @@ export const removeTalentPoint = (known: Map<number, number>, talent: TalentData
     return known
   }
   
+  let isDependency = false
   let highestRow = 0
   let cumulativePointsPerRow = {}
+
   known.forEach((points, talentId) => {
     const t = talentsBySpec[specId][talentId]
     if (t) {
+      isDependency = isDependency || t.requires.some((req) => req.id === talent.id)
       highestRow = t.row > highestRow ? t.row : highestRow
       for (let row = t.row; row < MAX_ROWS; row++) {
         cumulativePointsPerRow[row] = (cumulativePointsPerRow[row] || 0) + points
@@ -93,15 +96,10 @@ export const removeTalentPoint = (known: Map<number, number>, talent: TalentData
     return known
   }
 
-  // TODO: Prevent if another talent depends on this 
-  // const isDependency = known.reduce((prev, current, key) => {
-  //   if (prev) return prev
-  //   const t = talentsBySpec[specId][key]
-  //   if (t.requires.length === 0) {
-  //     return false
-  //   }
-  //   t.requires.map((d) => d.id === talent.id ? d : undefined)
-  // }, false)
+  // Prevent if another talent depends on this 
+  if (isDependency) {
+    return known
+  }
 
   return currentPoints === 1 
     ? known.remove(talent.id)
diff --git a/src/types.d.ts b/src/types.d.ts
index 8b45689..befc57e 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -5,6 +5,13 @@ interface TalentTree {
   talents: Talent[]
 }
 
+interface ClassData {
+  id: number
+  name: string
+  icon: string
+  specs: number[]
+}
+
 interface TalentData {
   /** ID for the Talent */
   id: number