Ravenholdt/Calculateur-Talents-Wow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor, tweaks, clean-up, improve

Browse Source
This commit is contained in:
Melvin Valster
2019-07-24 23:27:23 +02:00
parent 36742ea22e
commit e021dea1ab
16 changed files with 258 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calculator.tsx
+6 -6
View File
@@ -5,13 +5,12 @@ import {
modifyTalentPoint,
calcAvailablePoints,
encodeKnownTalents,
SORT_TALENTS_BY_SPEC
} from '../lib/tree'
import { talentsBySpec, talentsById } from '../data/talents'
import { talentsBySpec } from '../data/talents'
import { classByName } from '../data/classes'
import { History } from 'history'
import { spells } from '../data/spells'
import { debugPrintKnown } from '../lib/debug'
import { Link } from 'react-router-dom';
interface Props {
selectedClass: string
@@ -96,10 +95,11 @@ export class Calculator extends React.PureComponent<Props> {
Points: {availablePoints}
</div>
<h4>Quick links</h4>
<ul>
<li><a href="/shaman/-5505000055523051-55">Shaman test</a></li>
<li><a href="/shaman/-5595000055523051-55">Shaman test broken</a></li>
<li><a href="/rogue/325323125551351-3253552122555155231-55225313333212151">Full Rogue</a></li>
<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>
)
src/components/ClassPicker.scss
+31
View File
@@ -0,0 +1,31 @@
.class-picker {
display: flex;
list-style: none;
padding: 0;
&--center {
justify-content: center;
}
&__class {
margin-right: 1em;
opacity: 1;
transition: all .1s ease-out;
&:hover {
opacity: 1;
}
&--active {
opacity: 1;
}
&--inactive {
opacity: .4;
&:hover {
opacity: .5;
}
}
}
}
src/components/ClassPicker.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import './ClassPicker.scss'
import React from 'react'
import { Link } from 'react-router-dom'
import { classByName } from '../data/classes'
@@ -8,6 +9,7 @@ interface Props {
/** Name of the selected class, lowercase */
selected?: string
center?: boolean
className?: string
}
const classNameForItem = (c: ClassData, selected: string) => classNames('class-picker__class', {
@@ -24,7 +26,7 @@ export class ClassPicker extends React.PureComponent<Props> {
const cn = classNames('class-picker', {
'class-picker--has-selection': !!selected,
'class-picker--center': center,
})
}, this.props.className)
return (
<ul className={cn}>
src/components/Icon.scss
+9 -5
View File
@@ -60,17 +60,20 @@
}
}
&--loading {
&--loaded {
.icon__bg {
opacity: 0;
opacity: 1;
}
&.icon--fade-in .icon__bg {
animation: fadeIn .1s forwards;
}
}
&__bg {
position: absolute;
background-size: cover;
opacity: 1;
transition: all 100ms ease-out;
opacity: 0;
}
&__frame {
@@ -79,4 +82,5 @@
background-repeat: no-repeat;
background-size: contain;
}
}
}
src/components/Icon.tsx
+24 -7
View File
@@ -3,31 +3,48 @@ import classNames from 'classnames'
import './Icon.scss'
interface Props {
name: string
name?: string
size?: 'small' | 'medium' | 'large'
golden?: boolean
}
export const Icon: FC<Props> = ({ name, size = 'medium', golden = false, children }) => {
const [hasLoadedImage, setHasLoadedImage] = useState(false)
const NOT_FOUND_ICON = 'inv_misc_questionmark'
export const Icon: FC<Props> = ({ name: defaultName, size = 'medium', golden = false, children }) => {
const [hasLoadedImage, setLoadedImage] = useState(false)
const [fadeIn, setFadeIn] = useState(false)
const [name, setName] = useState(defaultName)
const bgSize = size !== 'small' ? 'large' : 'medium'
const url = `https://wow.zamimg.com/images/wow/icons/${bgSize}/${name}.jpg`
const start = Date.now()
useEffect(() => {
if (!name) return
const img = new Image()
img.onload = () => setHasLoadedImage(true)
img.onload = () => {
const loadTime = Date.now() - start
if (loadTime >= 300) {
setFadeIn(true)
}
setLoadedImage(true)
}
img.onerror = () => setName(NOT_FOUND_ICON)
img.src = url
}, [])
}, [name, url])
const className = classNames('icon', `icon--${size}`, {
'icon--golden': golden,
'icon--loading': !hasLoadedImage
'icon--loaded': hasLoadedImage,
'icon--fade-in': fadeIn,
})
return (
<div className={className}>
<div className="icon__bg" style={{ backgroundImage: `url(${url})` }} />
{name &&
<div className="icon__bg" style={{ backgroundImage: `url(${url})` }} />
}
<div className="icon__frame" />
{children}
</div>
src/components/IndexRoute.tsx
+5 -1
View File
@@ -33,7 +33,11 @@ export class IndexRoute extends React.PureComponent<Props> {
return (
<div className="index">
<ClassPicker center selected={selectedClass} />
<ClassPicker
className="index__class-picker"
center
selected={selectedClass}
/>
{selectedClass &&
<Calculator
src/components/Playground.scss
+9
View File
@@ -0,0 +1,9 @@
.playground-section {
margin-bottom: 2em;
padding-bottom: 2em;
border-bottom: 1px solid rgba(255, 255, 255, .1);
&:last-child {
margin-bottom: 0;
}
}
src/components/Playground.tsx
+99
View File
@@ -0,0 +1,99 @@
import './Playground.scss'
import React, { FC } from 'react'
import { ClassPicker } from './ClassPicker'
import { RouteComponentProps } from 'react-router'
import { Icon } from './Icon';
import { Tooltip } from './Tooltip';
interface Props extends RouteComponentProps {
//
}
const iconNames = [
'',
'this_doesnot_exist_and_will_cause_default_icon',
'spell_holy_prayerofhealing',
'ability_sap',
'class_shaman',
'inv_ammo_firetar',
'spell_shadow_requiem',
]
const DEEP_WOUNDS = <Tooltip title="Deep Wounds" fixed>
<p className="tight">Rank 1/3</p>
<p className="yellow">Your critical strikes cause the opponent to bleed, dealing 20% of your melee weapon's average damage over 12 sec.</p>
<p className="tight">Next rank:</p>
<p className="yellow">Your critical strikes cause the opponent to bleed, dealing 40% of your melee weapon's average damage over 12 sec.</p>
<p className="green">Click to learn</p>
</Tooltip>
const Section: FC<any> = (props) => {
return <div className="playground-section">
<div className="container">
<h2>{props.title}</h2>
{props.children}
</div>
</div>
}
export class Playground extends React.PureComponent<Props> {
static whyDidYouRender = true
render() {
return (
<div className="playground">
<Section title="Class Picker">
<ClassPicker />
</Section>
<Section title="Icons">
<h3>Small Icons</h3>
<div className="inline-items">
{iconNames.map((n) => <Icon key={n} name={n} size="small" />)}
</div>
<h3>Medium Icons</h3>
<div className="inline-items">
{iconNames.map((n) => <Icon key={n} name={n} size="medium" />)}
</div>
<h3>Large Icons</h3>
<div className="inline-items">
{iconNames.map((n) => <Icon key={n} name={n} size="large" />)}
</div>
</Section>
<Section title="Tooltips">
<h3>No params</h3>
<Tooltip />
<h3>Simple text content</h3>
<Tooltip children="Sanctuary Post" />
<h3>Using HTML inside</h3>
<Tooltip>
<strong>I can use normal HTML in here</strong>
<br />
And even <a href="/warrior">link</a> to exciting places!
</Tooltip>
<h3>Fixed width</h3>
{DEEP_WOUNDS}
<h3>Overriding fixed width</h3>
{React.cloneElement(DEEP_WOUNDS, {
width: '500px'
})}
<h3>No fixed</h3>
{React.cloneElement(DEEP_WOUNDS, {
fixed: false
})}
</Section>
</div>
)
}
}
src/components/PlaygroundRoute.tsx
-71
View File
@@ -1,71 +0,0 @@
import React from 'react'
import { ClassPicker } from './ClassPicker'
import { match } from 'react-router-dom'
import { RouteComponentProps } from 'react-router'
import { Icon } from './Icon';
import { Tooltip } from './Tooltip';
interface Props extends RouteComponentProps {
match: match<{
selectedClass: string
pointString: string
}>
}
const iconNames = [
'foo',
'spell_holy_prayerofhealing',
'ability_sap',
'class_shaman',
'inv_ammo_firetar',
'spell_shadow_requiem',
]
export class PlaygroundRoute extends React.PureComponent<Props> {
static whyDidYouRender = true
render() {
const { match, history } = this.props
return (
<div className="playground container">
<h2>Class Picker</h2>
<ClassPicker />
<h2>Icons</h2>
<h3>Small Icons</h3>
<div className="inline-items">
{iconNames.map((n) => <Icon key={n} name={n} size="small" />)}
</div>
<h3>Medium Icons</h3>
<div className="inline-items">
{iconNames.map((n) => <Icon key={n} name={n} size="medium" />)}
</div>
<h3>Large Icons</h3>
<div className="inline-items">
{iconNames.map((n) => <Icon key={n} name={n} size="large" />)}
</div>
<h2>Tooltip</h2>
<Tooltip inline />
<Tooltip>
<strong>I can use normal HTML in here</strong>
<br />
And even <a href="#">link</a> to exciting places!
</Tooltip>
<Tooltip title="Sanctuary Post" />
<Tooltip title="Fixed width" fixed />
<Tooltip title="Override fixed width" fixed width="600px" />
</div>
)
}
}
src/components/Tooltip.scss
+12
View File
@@ -66,4 +66,16 @@
flex: 1;
}
}
&__title {
font-size: 14px;
line-height: 1.3;
// margin-bottom: 1px;
}
&__body {
p:last-child {
margin-bottom: 2px;
}
}
}
src/components/Tooltip.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const Tooltip: FC<Props> = (props) => {
<div className="tooltip__inner">
<div className="tooltip__top">
<div className="tooltip__body">
{title}
{title && <div className="tooltip__title tight">{title}</div>}
{children}
</div>
</div>