Include Talent component in the playground

src/App.scss

@@ -64,6 +64,24 @@ a {
   margin-right: 1em;
   background-color: #111;
 
+  .talent {
+    position: absolute;
+
+    // Rows
+    @for $i from 0 through 6 {
+      &[data-row="#{$i}"] {
+        top: $row-offset + (($i) * $row-distance);
+      }
+    }
+
+    // Columns
+    @for $i from 0 through 3 {
+      &[data-col="#{$i}"] { 
+        left: $col-offset + ($col-distance * $i); 
+      }
+    }
+  }
+
   &:last-child {
     margin-right: 0;
   }

src/components/Icon.tsx

@@ -32,7 +32,7 @@ export const Icon: FC<Props> = ({ name: defaultName, size = 'medium', golden = f
     }
     img.onerror = () => setName(NOT_FOUND_ICON)
     img.src = url
-  }, [name, url])
+  }, [name, url, start])
 
   const className = classNames('icon', `icon--${size}`, {
     'icon--golden': golden,

src/components/Playground.tsx

@@ -4,6 +4,8 @@ import { ClassPicker } from './ClassPicker'
 import { RouteComponentProps } from 'react-router'
 import { Icon } from './Icon';
 import { Tooltip } from './Tooltip';
+import { TalentSlot } from './TalentSlot';
+import { talentsById } from '../data/talents';
 
 interface Props extends RouteComponentProps {
   //
@@ -66,6 +68,35 @@ export class Playground extends React.PureComponent<Props> {
           </div>
         </Section>
 
+        <Section title="TalentSlot">
+          <div className="inline-items">
+            <TalentSlot
+              talent={talentsById[181]}
+              disabled
+            />
+
+            <TalentSlot
+              talent={talentsById[181]}
+            />
+
+            <TalentSlot
+              talent={talentsById[181]}
+              points={3}
+            />
+
+            <TalentSlot
+              talent={talentsById[181]}
+              points={5}
+            />
+
+            <TalentSlot
+              talent={talentsById[181]}
+              points={3}
+              disabled
+            />
+          </div>
+        </Section>
+
         <Section title="Tooltips">
           <h3>No params</h3>
           <Tooltip />

src/components/TalentSlot.scss

@@ -1,7 +1,7 @@
 @import "../sass/config";
 
 .talent {
-  position: absolute;
+  position: relative;
   width: 40px;
   height: 40px;
   border-radius: 5px;
@@ -11,7 +11,6 @@
 
   &--available {
     .talent__status::after {
-      // background-color: rgba($color-green, .8);
       box-shadow: inset 0px 0px 6px 3px rgba($color-green, .8);
     }
 
@@ -38,20 +37,6 @@
     }
   }
 
-  // Rows
-  @for $i from 0 through 6 {
-    &[data-row="#{$i}"] {
-      top: $row-offset + (($i) * $row-distance);
-    }
-  }
-
-  // Columns
-  @for $i from 0 through 3 {
-    &[data-col="#{$i}"] { 
-      left: $col-offset + ($col-distance * $i); 
-    }
-  }
-
   &__status {
     position: absolute;
     width: 48px;

src/components/TalentSlot.tsx

@@ -2,45 +2,31 @@ import './TalentSlot.scss'
 import React, { FC } from 'react'
 import { Icon } from './Icon'
 import classNames from 'classnames'
-import { Map } from 'immutable';
-import { getPointsInSpec, calcMeetsRequirements } from '../lib/tree';
 
 interface Props {
   talent: TalentData
-  specId: number
-  availablePoints: number
-  /** All spent talents */
-  knownTalents: Map<number, number>
-  /** Disabled override */
+  specId?: number
+  points?: number
   disabled?: boolean
   onClick?: (talentId: number) => void
   onRightClick?: (talentId: number) => void
 }
 
 const defaultProps: Partial<Props> = {
+  points: 0,
+  disabled: false,
   onClick: () => undefined,
   onRightClick: () => undefined
 }
 
-const isAvailable = (talent: TalentData, specId: number, knownTalents: Map<number, number>): boolean => {
-  // Dependent on other talents?
-  if (!calcMeetsRequirements(talent, knownTalents)) {
-    return false
-  }
-  const pointsInSpec = getPointsInSpec(specId, knownTalents)
-  return talent.row * 5 <= pointsInSpec
-}
-
 export const TalentSlot: FC<Props> = (props) => {
-  const { talent, specId, knownTalents, availablePoints } = props
-  const points = knownTalents.get(talent.id, 0)
-  const showPoints = points > 0 || availablePoints > 0
-  const disabled = props.disabled || !showPoints || !isAvailable(talent, specId, knownTalents)
+  const { talent, points, disabled } = props
+  const showPoints = !disabled || points > 0
 
   const containerClassNames = classNames('talent', {
-    'talent--disabled': !!disabled,
+    'talent--disabled': disabled && points === 0,
     'talent--available': !disabled && points < talent.ranks.length,
-    'talent--maxed': points >= talent.ranks.length || (points > 0 && availablePoints === 0)
+    'talent--maxed': points >= talent.ranks.length || (points > 0 && disabled)
   })
 
   const pointsClassNames = classNames('point-label', {
@@ -65,7 +51,7 @@ export const TalentSlot: FC<Props> = (props) => {
       <div className="talent__status" />
       <Icon name={talent.icon} size="medium" />
 
-      {showPoints && !disabled &&
+      {showPoints &&
         <div className={pointsClassNames}>
           {points}
           /{talent.ranks.length}

src/components/TalentTree.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react'
 import { Map }  from 'immutable'
 import { TalentSlot } from './TalentSlot';
-import { getPointsInSpec, canLearnTalent } from '../lib/tree';
-import { talentsBySpec, specNames, talentsById } from '../data/talents'
+import { getPointsInSpec, canLearnTalent, calcMeetsRequirements } from '../lib/tree';
+import { talentsBySpec, specNames, talentsById, talentToSpec } from '../data/talents'
 import { Arrow } from './Arrow'
 
 interface Props {
@@ -46,12 +46,11 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
         {talents.map((talent) => 
           <TalentSlot 
             key={talent.id}
-            specId={specId}
             talent={talent}
-            availablePoints={availablePoints}
-            knownTalents={knownTalents}
+            points={knownTalents.get(talent.id, 0)}
             onClick={handleClick}
             onRightClick={handleRightClick}
+            disabled={availablePoints === 0 || !isAvailable(talent, knownTalents)}
           />
         )}
 
@@ -61,4 +60,15 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
   )
 }
 
+// move this somewhere else/revise this
+export const isAvailable = (talent: TalentData, knownTalents: Map<number, number>): boolean => {
+  // Dependent on other talents?
+  if (!calcMeetsRequirements(talent, knownTalents)) {
+    return false
+  }
+  const specId = talentToSpec[talent.id]
+  const pointsInSpec = getPointsInSpec(specId, knownTalents)
+  return talent.row * 5 <= pointsInSpec
+}
+
 ;(TalentTree as any).whyDidYouRender = true