From 291ae8ab6de62284d815195ac4d0a963da9b1d3b Mon Sep 17 00:00:00 2001 From: Melvin Valster Date: Mon, 29 Jul 2019 13:32:26 +0200 Subject: [PATCH] Add simple way to reset talent tree --- TODO.md | 2 -- src/components/Calculator.tsx | 2 +- src/components/TalentTree.scss | 8 ++++++++ src/components/TalentTree.tsx | 19 +++++++++++++++++-- src/store/calculator/actions.ts | 6 ++++++ src/store/calculator/reducers.ts | 14 ++++++++++++-- src/store/calculator/types.ts | 8 +++++++- 7 files changed, 51 insertions(+), 8 deletions(-) diff --git a/TODO.md b/TODO.md index b975b95..6e11d57 100644 --- a/TODO.md +++ b/TODO.md @@ -5,8 +5,6 @@ - [ ] Responsiveness: - [ ] Tooltips on mobile need different UX -- [ ] Talent tree: - - [ ] Reset button per tree (?) - [ ] Tooltips: - [ ] Support multiple positions for tooltip (currently only `top-right` with fallbacks based on viewport) - [ ] Move icons back under `/src` when https://github.com/facebook/create-react-app/pull/6060 is released as part of 3.0.2 \ No newline at end of file diff --git a/src/components/Calculator.tsx b/src/components/Calculator.tsx index 0af8976..93423f0 100644 --- a/src/components/Calculator.tsx +++ b/src/components/Calculator.tsx @@ -1,7 +1,7 @@ import './Calculator.scss' import React from 'react' import { Map } from 'immutable' -import { TalentTree } from './TalentTree' +import TalentTree from './TalentTree' import { calcAvailablePoints } from '../lib/tree' import { classById } from '../data/classes' import { Link } from 'react-router-dom'; diff --git a/src/components/TalentTree.scss b/src/components/TalentTree.scss index 9db743c..26e4e25 100644 --- a/src/components/TalentTree.scss +++ b/src/components/TalentTree.scss @@ -43,6 +43,14 @@ } } + &__reset { + position: absolute; + top: 1em; + right: .5em; + cursor: pointer; + color: lighten(red, 20%) + } + &__body { position: relative; height: 520px; diff --git a/src/components/TalentTree.tsx b/src/components/TalentTree.tsx index cbe40e9..e8020ae 100644 --- a/src/components/TalentTree.tsx +++ b/src/components/TalentTree.tsx @@ -5,15 +5,18 @@ import { Talent } from './Talent'; import { getPointsInSpec, canLearnTalent, SORT_TALENTS_DESC, getUnmetRequirements } from '../lib/tree'; import { talentsBySpec, specNames, talentsById } from '../data/talents' import { Arrow } from './Arrow' +import { resetSpec } from '../store/calculator/actions' +import { connect } from 'react-redux'; interface Props { specId: number availablePoints: number knownTalents: Map onTalentPress: TalentClickHandler + resetSpec?: typeof resetSpec } -export const TalentTree: React.FC = ({ specId, knownTalents, availablePoints, onTalentPress }) => { +export const TalentTree: React.FC = ({ specId, knownTalents, availablePoints, onTalentPress, resetSpec }) => { const talents = Object.values(talentsBySpec[specId]).sort(SORT_TALENTS_DESC) const pointsInSpec = getPointsInSpec(specId, knownTalents) @@ -25,11 +28,18 @@ export const TalentTree: React.FC = ({ specId, knownTalents, availablePoi (talentId) => onTalentPress(specId, talentId, -1), [specId, onTalentPress] ) + const handleResetSpec = useCallback( + resetSpec ? () => resetSpec(specId) : () => {}, + [resetSpec, specId] + ) return (

{specNames[specId]} ({pointsInSpec})

+ {pointsInSpec > 0 && +
x
+ }
@@ -62,4 +72,9 @@ export const TalentTree: React.FC = ({ specId, knownTalents, availablePoi ) } -;(TalentTree as any).whyDidYouRender = true \ No newline at end of file +;(TalentTree as any).whyDidYouRender = true + +export default connect( + null, + { resetSpec } +)(TalentTree) \ No newline at end of file diff --git a/src/store/calculator/actions.ts b/src/store/calculator/actions.ts index b0683fd..a0ad464 100644 --- a/src/store/calculator/actions.ts +++ b/src/store/calculator/actions.ts @@ -5,6 +5,7 @@ import { REMOVE_POINT, SET_POINTS, Points, + RESET_SPEC, } from './types' export const setClass = (classId: number, points?: Points): CalculatorActionTypes => ({ @@ -26,4 +27,9 @@ export const removePoint = (talentId: number): CalculatorActionTypes => ({ export const setPoints = (points: Points): CalculatorActionTypes => ({ type: SET_POINTS, points +}) + +export const resetSpec = (specId: number): CalculatorActionTypes => ({ + type: RESET_SPEC, + specId }) \ No newline at end of file diff --git a/src/store/calculator/reducers.ts b/src/store/calculator/reducers.ts index 4b43a3a..d1f278d 100644 --- a/src/store/calculator/reducers.ts +++ b/src/store/calculator/reducers.ts @@ -5,10 +5,11 @@ import { SET_CLASS, ADD_POINT, REMOVE_POINT, - SET_POINTS + SET_POINTS, + RESET_SPEC } from './types' import { canLearnTalent, canUnlearnTalent, encodeKnownTalents } from '../../lib/tree' -import { talentsById } from '../../data/talents' +import { talentsById, talentsBySpec } from '../../data/talents' const initialState: CalculatorState = { classId: null, @@ -70,6 +71,15 @@ export default function(state = initialState, action: CalculatorActionTypes): Ca } } + case RESET_SPEC: { + const resetIds = Object.values(talentsBySpec[action.specId]).map((t) => t.id) + const nextPoints = points.filter((_, id) => resetIds.indexOf(id) === -1) + return { + ...state, + points: nextPoints + } + } + default: return state } diff --git a/src/store/calculator/types.ts b/src/store/calculator/types.ts index cdb7d24..7f6cb9e 100644 --- a/src/store/calculator/types.ts +++ b/src/store/calculator/types.ts @@ -12,6 +12,7 @@ export const SET_CLASS = 'SET_CLASS' export const ADD_POINT = 'ADD_POINT' export const REMOVE_POINT = 'REMOVE_POINT' export const SET_POINTS = 'SET_POINTS' +export const RESET_SPEC = 'RESET_SPEC' interface SetClassAction { type: typeof SET_CLASS @@ -34,5 +35,10 @@ interface SetPointsAction { points: Points } +interface ResetSpecAction { + type: typeof RESET_SPEC + specId: number +} + export type CalculatorActionTypes = SetClassAction | AddPointAction | RemovePointAction | - SetPointsAction \ No newline at end of file + SetPointsAction | ResetSpecAction \ No newline at end of file