Rename TalentSlot to Talent

src/components/Playground.tsx

@@ -2,10 +2,11 @@ import './Playground.scss'
 import React, { FC } from 'react'
 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';
+import { Icon } from './Icon'
+import { Tooltip } from './Tooltip'
+import { Talent } from './Talent'
+import { talentsById } from '../data/talents'
+import { Map } from 'immutable'
 
 interface Props extends RouteComponentProps {
   //
@@ -21,6 +22,10 @@ const iconNames = [
   'spell_shadow_requiem',
 ]
 
+const talentIds = [
+  76, 181, 182, 821
+]
+
 const DEEP_WOUNDS = <Tooltip title="Deep Wounds" fixed>
   <p className="tight">Rank 1/3</p>
   <p className="yellow">Your critical strikes cause the opponent to bleed, dealing 20% of your melee weapon's average damage over 12 sec.</p>
@@ -44,7 +49,27 @@ const Section: FC<any> = (props) => {
 export class Playground extends React.PureComponent<Props> {
   static whyDidYouRender = true
 
+  state = {
+    points: Map<number, number>()
+  }
+
+  handleTalentClick = (id) => {
+    const { points } = this.state
+    this.setState({ 
+      points: points.set(id, points.get(id, 0) + 1)
+    })
+  }
+
+  handleTalentRightClick = (id) => {
+    const { points } = this.state
+    this.setState({ 
+      points: points.set(id, Math.max(0, points.get(id, 0) - 1))
+    })
+  }
+
   render() {
+    const { points } = this.state
+  
     return (
       <div className="playground">
         <Section title="Class Picker">
@@ -68,33 +93,49 @@ export class Playground extends React.PureComponent<Props> {
           </div>
         </Section>
 
-        <Section title="TalentSlot">
+        <Section title="Talent">
+          <h3>Static</h3>
           <div className="inline-items">
-            <TalentSlot
+            <Talent
               talent={talentsById[181]}
               disabled
             />
 
-            <TalentSlot
+            <Talent
               talent={talentsById[181]}
             />
 
-            <TalentSlot
+            <Talent
               talent={talentsById[181]}
               points={3}
             />
 
-            <TalentSlot
+            <Talent
               talent={talentsById[181]}
               points={5}
             />
 
-            <TalentSlot
+            <Talent
               talent={talentsById[181]}
               points={3}
               disabled
             />
           </div>
+
+          <h3>Interactive</h3>
+          <div className="inline-items">
+            {talentIds.map(id => 
+              <Talent
+                key={id}
+                talent={talentsById[id]}
+                points={points.get(id, 0)}
+                disabled={points.get(id, 0) === talentsById[id].ranks.length}
+                onClick={this.handleTalentClick}
+                onRightClick={this.handleTalentRightClick}
+              />
+            )}
+          </div>
+
         </Section>
 
         <Section title="Tooltips">

src/components/Talent.tsx

@@ -1,4 +1,4 @@
-import './TalentSlot.scss'
+import './Talent.scss'
 import React, { FC } from 'react'
 import { Icon } from './Icon'
 import classNames from 'classnames'
@@ -19,7 +19,7 @@ const defaultProps: Partial<Props> = {
   onRightClick: () => undefined
 }
 
-export const TalentSlot: FC<Props> = (props) => {
+export const Talent: FC<Props> = (props) => {
   const { talent, points, disabled } = props
   const showPoints = !disabled || points > 0
 
@@ -61,6 +61,6 @@ export const TalentSlot: FC<Props> = (props) => {
   )
 }
 
-TalentSlot.defaultProps = defaultProps
+Talent.defaultProps = defaultProps
 
-;(TalentSlot as any).whyDidYouRender = true
+// ;(Talent as any).whyDidYouRender = true

src/components/TalentTree.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { Map }  from 'immutable'
-import { TalentSlot } from './TalentSlot';
+import { Talent } from './Talent';
 import { getPointsInSpec, canLearnTalent, calcMeetsRequirements } from '../lib/tree';
 import { talentsBySpec, specNames, talentsById, talentToSpec } from '../data/talents'
 import { Arrow } from './Arrow'
@@ -44,7 +44,7 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
 
       <div className="tree__body" style={{ backgroundImage: `url(${bgImg})` }}>
         {talents.map((talent) => 
-          <TalentSlot 
+          <Talent 
             key={talent.id}
             talent={talent}
             points={knownTalents.get(talent.id, 0)}