import { observer } from 'mobx-react' ; import React , { Component } from 'react' ; import { PrimaryAttribute } from '../../model/attribute' ; import { GamingRole } from '../../model/base' ; import { StoreProps } from '../../store' ; import './editor_viewer.less' ; import { ResultService } from '../../service/result_service' ; import { Result } from '../../model/result' ; import { ResultItem } from './result_item' ; import { PlatformUtil } from '../../utils/platform_utils' ; type ResultTuple = [ keyof Result , keyof Result | null ] ; @ observer export class EditorViewer extends Component < StoreProps > { get basicAttributes ( ) : ResultTuple [ ] { const { kungfuMeta , showAllAttributes } = this . props . store ; if ( ! kungfuMeta ) return [ ] ; const attributes = [ [ 'score' , null ] , [ kungfuMeta . primaryAttribute , null ] ] ; if ( showAllAttributes ) { const others = PrimaryAttribute . filter ( ( a ) => a !== kungfuMeta . primaryAttribute ) . map ( ( a ) => [ a , null ] ) ; attributes . push ( ... others ) ; } return attributes ; } get damageAttributes ( ) : ResultTuple [ ] { const { kungfuMeta , showAllAttributes } = this . props . store ; if ( ! kungfuMeta ) return [ ] ; const attributes = [ ] ; if ( showAllAttributes || kungfuMeta . role === GamingRole . DAMAGE_DEALER ) { attributes . push ( [ 'attack' , 'baseAttack' ] ) ; } if ( showAllAttributes || kungfuMeta . role === GamingRole . HEALER ) { attributes . push ( [ 'heal' , 'baseHeal' ] ) ; } if ( showAllAttributes ) { attributes . push ( [ 'hitRate' , 'hit' ] ) ; } if ( showAllAttributes || kungfuMeta . role !== GamingRole . TANK ) { attributes . push ( [ 'critRate' , 'crit' ] ) ; attributes . push ( [ 'critEffectRate' , 'critEffect' ] ) ; } attributes . push ( [ 'hasteRate' , 'haste' ] ) ; if ( showAllAttributes || kungfuMeta . role === GamingRole . DAMAGE_DEALER ) { attributes . push ( [ 'overcomeRate' , 'overcome' ] ) ; } if ( showAllAttributes || kungfuMeta . role !== GamingRole . HEALER ) { attributes . push ( [ 'strainRate' , 'strain' ] ) ; attributes . push ( [ 'surplus' , null ] ) ; } return attributes ; } get defenseAttributes ( ) : ResultTuple [ ] { const { kungfuMeta , showAllAttributes } = this . props . store ; if ( ! kungfuMeta ) return [ ] ; const attributes = [ ] ; attributes . push ( [ 'health' , null ] ) ; attributes . push ( [ 'physicsShieldRate' , 'physicsShield' ] ) ; attributes . push ( [ 'magicShieldRate' , 'magicShield' ] ) ; if ( showAllAttributes || kungfuMeta . role === GamingRole . TANK ) { attributes . push ( [ 'dodgeRate' , 'dodge' ] ) ; attributes . push ( [ 'parryBaseRate' , 'parryBase' ] ) ; attributes . push ( [ 'parryValue' , null ] ) ; } attributes . push ( [ 'toughnessRate' , 'toughness' ] ) ; attributes . push ( [ 'huajingRate' , 'huajing' ] ) ; return attributes ; } render ( ) { const result = ResultService . calc ( this . props . store ) ; const isMobile = PlatformUtil . isMobile ( ) ; let height = 500 ; if ( typeof window === 'object' ) { height = window . screen . height * 0.6 ; } return ( < div className = "result-view" style = { isMobile ? { height } : { } } > < div className = "label" > < b > 基础 < /b></div > { this . basicAttributes . map ( ( [ key , tips ] ) => < ResultItem key = { key } attrib = { key } tips = { tips } result = { result } / > ) } < div className = "label" > < b > 伤害 < /b></div > { this . damageAttributes . map ( ( [ key , tips ] ) => < ResultItem key = { key } attrib = { key } tips = { tips } result = { result } / > ) } < div className = "label" > < b > 生存 < /b></div > { this . defenseAttributes . map ( ( [ key , tips ] ) => < ResultItem key = { key } attrib = { key } tips = { tips } result = { result } / > ) } < /div>); } }