Melvin Valster
101 lines
2.8 KiB
TypeScript
101 lines
2.8 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'
|
|
// import { debugPrintKnown } from '../lib/debug'
|
|
import { Link } from 'react-router-dom';
|
|
|
|
interface Props {
|
|
selectedClass: string
|
|
history: History
|
|
initialTalents?: Map<number, number>
|
|
}
|
|
|
|
const EMPTY_TALENTS = Map<number, number>()
|
|
|
|
export class Calculator extends React.PureComponent<Props> {
|
|
static whyDidYouRender = true
|
|
|
|
state = {
|
|
knownTalents: EMPTY_TALENTS
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (this.props.initialTalents) {
|
|
this.setState({ knownTalents: this.props.initialTalents })
|
|
this.updateURL(this.props.initialTalents)
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(prevProps: Props) {
|
|
if (prevProps.selectedClass !== this.props.selectedClass) {
|
|
this.setState({
|
|
knownTalents: EMPTY_TALENTS
|
|
})
|
|
}
|
|
}
|
|
|
|
updateURL(knownTalents: Map<number, number>) {
|
|
const { selectedClass } = this.props
|
|
const pointString = encodeKnownTalents(knownTalents, selectedClass)
|
|
this.props.history.replace(`/${selectedClass}` + (pointString ? `/${pointString}` : ''))
|
|
}
|
|
|
|
handleTalentPress = (specId: number, talentId: number, modifier: 1 | -1) => {
|
|
const talent = talentsBySpec[specId][talentId]
|
|
console.log('Clicked talent: ', talentId)
|
|
|
|
const newKnownTalents = modifyTalentPoint(this.state.knownTalents, talent, modifier)
|
|
if (newKnownTalents !== this.state.knownTalents) {
|
|
this.updateURL(newKnownTalents)
|
|
}
|
|
this.setState({ knownTalents: newKnownTalents })
|
|
|
|
// Debug
|
|
// debugPrintKnown(newKnownTalents)
|
|
}
|
|
|
|
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>
|
|
|
|
<h4>Quick links</h4>
|
|
<ul>
|
|
<li><Link to="/shaman/-5505000055523051-55">Shaman test</Link></li>
|
|
<li><Link to="/shaman/-5595000055523051-55">Shaman test broken</Link></li>
|
|
<li><Link to="/rogue/325323125551351-3253552122555155231-55225313333212151">Full Rogue (shouldn't be possible)</Link></li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|