Add active/inactive styling to ClassPicker

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
+- [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

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;
+      }
     }
   }
 }

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>
-  )
-}
+    )
+  }
+}

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>
     )

src/data/classes.ts

@@ -1,10 +1,3 @@
-interface ClassData {
-  id: number
-  name: string
-  icon: string
-  specs: number[]
-}
-
 export const classes: ClassData[] = [
   { 
     id: 1,

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)

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