Melvin Valster
85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import { Map } from 'immutable'
|
|
import { TalentTree } from './TalentTree'
|
|
import {
|
|
modifyTalentPoint,
|
|
calcAvailablePoints,
|
|
encodeKnownTalents
|
|
} from '../lib/tree'
|
|
import { talentsBySpec } from '../data/talents'
|
|
import { classByName } from '../data/classes'
|
|
import { History } from 'history'
|
|
|
|
interface Props {
|
|
selectedClass: string
|
|
history: History
|
|
}
|
|
|
|
// const EMPTY_TALENTS = Map<number, number>()
|
|
const EMPTY_TALENTS = Map<number, number>()
|
|
// .set(30, 5)
|
|
// .set(26, 5)
|
|
// .set(34, 5)
|
|
// .set(28, 2)
|
|
// .set(27, 3)
|
|
// .set(33, 1)
|
|
// .set(29, 1)
|
|
// .set(32, 1)
|
|
|
|
export class Calculator extends React.PureComponent<Props> {
|
|
static whyDidYouRender = true
|
|
|
|
state = {
|
|
knownTalents: EMPTY_TALENTS
|
|
}
|
|
|
|
componentDidUpdate(prevProps: Props) {
|
|
if (prevProps.selectedClass !== this.props.selectedClass) {
|
|
this.setState({
|
|
knownTalents: EMPTY_TALENTS
|
|
})
|
|
}
|
|
}
|
|
|
|
handleTalentPress = (specId: number, talentId: number, modifier: 1 | -1) => {
|
|
const { selectedClass } = this.props
|
|
const talent = talentsBySpec[specId][talentId]
|
|
console.log('Clicked talent: ' + talentId)
|
|
|
|
const newKnownTalents = modifyTalentPoint(this.state.knownTalents, talent, modifier)
|
|
this.setState({ knownTalents: newKnownTalents })
|
|
|
|
const pointString = encodeKnownTalents(newKnownTalents, selectedClass)
|
|
this.props.history.replace(`/${selectedClass}` + (pointString ? `/${pointString}` : ''))
|
|
}
|
|
|
|
render() {
|
|
const { selectedClass } = this.props
|
|
const { knownTalents } = this.state
|
|
|
|
const classData = classByName[selectedClass]
|
|
const availablePoints = calcAvailablePoints(knownTalents)
|
|
|
|
return (
|
|
<div className="calculator">
|
|
<div className="trees">
|
|
{classData.specs.map((specId) => (
|
|
<TalentTree
|
|
key={specId}
|
|
specId={specId}
|
|
availablePoints={availablePoints}
|
|
knownTalents={knownTalents}
|
|
onTalentPress={this.handleTalentPress}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="calculator__points">
|
|
Points: {availablePoints}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|