Using WH datasets

src/components/Calculator.tsx

@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
-import im from 'immutable'
+import { List, Map, fromJS } from 'immutable'
 import { TalentTree } from './TalentTree';
-import { setPointsInTree } from '../lib/tree';
+import { modifyPointsInTree, modifyKnownTalents } from '../lib/tree';
+import { talentsBySpec, specNames } from '../data/talents';
+import { classByName } from '../data/classes';
+import { number } from 'prop-types';
 
 const createTalent = (name: string, row: number, column: number, ranks: string | string[], type: Talent['type'] = 'talent'): Talent => {
   return { 
@@ -94,33 +97,41 @@ interface Props {
   pointString?: string // e.g. 2305302300--001
 }
 
-const initialSpentPoints: im.List<im.List<number>> = im.fromJS([
+const initialSpentPoints: List<List<number>> = fromJS([
   [], [], []
 ])
 
+const initMap = Map<number, number>()
 
-export const Calculator: React.FC<Props> = ({ forClass, pointString = '' }) => {
+export const Calculator: React.FC<Props> = ({ forClass = 'warlock', pointString = '' }) => {
+  const [knownTalents, setKnownTalents] = useState(initMap)
   const [spentPoints, setSpentPoints] = useState(initialSpentPoints)
-  const points = pointString.split('')
 
-  console.log({spentPoints})
+  const selectedClass = classByName[forClass]
+
+  console.log(knownTalents)
+
+  const handleTalentPress = (specId: number, talentId: number, modifier: 1 | -1) => {
+    console.log('onTalentPress', { specId, talentId, modifier })
+
+    const talent = talentsBySpec[specId][talentId]
+
+    
+    setKnownTalents(modifyKnownTalents(knownTalents, talent, modifier))
 
-  const onTalentPress = (treeIndex, talentId, clickType) => {
-    console.log('onTalentPress')
-    const newSpentPoints = spentPoints.set(
-      treeIndex, 
-      setPointsInTree(spentPoints.get(treeIndex), talentId, 9)
-    )
-    setSpentPoints(newSpentPoints)
   }
   
   return (
     <div className="calculator">
-      <TalentTree 
-        tree={warlockTalents[0]}
-        spentPoints={spentPoints.get(0)} 
-        onTalentPress={(talentId, clickType) => onTalentPress(0, talentId, clickType)}
-      />
+      {selectedClass.specs.map((specId, specIndex) => (
+        <TalentTree
+          key={specId}
+          specId={specId}
+          knownTalents={knownTalents}
+          spentPoints={spentPoints.get(specIndex)} 
+          onTalentPress={handleTalentPress}
+        />
+      ))}
     </div>
   )
 }

src/components/Icon.scss

@@ -0,0 +1,9 @@
+.icon {
+  background-repeat: no-repeat;
+  background-size: cover;
+  
+  &--medium {
+    width: 40px;
+    height: 40px;
+  }
+}

src/components/Icon.tsx

@@ -1,12 +1,18 @@
-import React from 'react'
+import React, { FC } from 'react'
+import './Icon.scss'
 
-interface Props { 
+interface Props {
+  name: string
+  size?: 'small' | 'medium' | 'large'
 }
 
-export const Icon: React.FC<Props> = () => {
+export const Icon: FC<Props> = ({ name, size = 'medium', children }) => {
+  const url = `https://wow.zamimg.com/images/wow/icons/${size}/${name}.jpg`
+  const className = `icon icon--${size}`
+
   return (
-    <div className="icon">
-      icon
+    <div className={className} style={{ backgroundImage: `url(${url})`}}>
+      {children}
     </div>
   )
 }

src/components/TalentSlot.tsx

@@ -1,27 +1,29 @@
-import React from 'react'
+import React, { FC } from 'react'
 import './TalentSlot.scss'
+import { Icon } from './Icon'
+import { spells } from '../data/spells'
 
 interface Props {
   key: number
-  talent: Talent
+  talent: TalentData
   /** Points spent */
   points: number
   onClick?: (e: any) => void
 }
 
-export const TalentSlot: React.FC<Props> = (props) => {
+export const TalentSlot: FC<Props> = (props) => {
   const { talent, points } = props
   const requiredPointsSpent = talent.row * 5
 
   return (
     <div 
       className="talent"
-      title={talent.name}
+      title={talent.ranks[0].toString()}
       data-row={talent.row}
-      data-col={talent.column}
+      data-col={talent.col}
       onClick={props.onClick}
     >
-      <small>{talent.name}</small>
+      <Icon name={talent.icon} />
       <div className="talent__rank">{points}/{talent.ranks.length}</div>
     </div>
   )

src/components/TalentTree.tsx

@@ -1,33 +1,38 @@
-import React from 'react'
-import { List }  from 'immutable'
+import React, { MouseEvent } from 'react'
+import { List, Map }  from 'immutable'
 import { TalentSlot } from './TalentSlot';
+import { getTreePointCount } from '../lib/tree';
+import { talentsBySpec, specNames } from '../data/talents';
 
 interface Props {
-  tree: TalentTree
+  specId: number
   spentPoints: List<number>
+  knownTalents: Map<number, number>
   onTalentPress: TalentClickHandler
 }
 
-export const TalentTree: React.FC<Props> = ({ tree, spentPoints, onTalentPress }) => {
-  const { talents } = tree
+export const TalentTree: React.FC<Props> = ({ specId, spentPoints, knownTalents, onTalentPress }) => {
+  const talents = Object.values(talentsBySpec[specId])
 
-  const handleTalentPress = (index) => {
-    return (e) => {
-      onTalentPress(index, 'add')
+  const handleTalentPress = (talentId: number) => {
+    return (e: MouseEvent) => {
+      onTalentPress(specId, talentId, e.shiftKey ? -1 : 1)
     }
   }
 
   return (
     <div className="tree">
-      <h2>{tree.name}</h2>
+      <h2>{specNames[specId]}</h2>
       {talents.map((talent, index) => 
         <TalentSlot 
-          key={index}
+          key={talent.id}
           talent={talent}
-          points={spentPoints.get(index, 0)}
-          onClick={handleTalentPress(index)}
+          points={knownTalents.get(talent.id, 0)}
+          onClick={handleTalentPress(talent.id)}
         />
       )}
+
+      Spent: {getTreePointCount(spentPoints)}
     </div>
   )
 }