Add simple route-based code splitting

2019-07-26 23:45:47 +02:00
parent f80774c18f
commit 12702d7592
9 changed files with 98 additions and 22 deletions
@@ -0,0 +1,184 @@
+import './Playground.scss'
+import React, { FC } from 'react'
+import { ClassPicker } from '../components/ClassPicker'
+import { RouteComponentProps } from 'react-router'
+import { Icon } from '../components/Icon'
+import { Tooltip } from '../components/Tooltip'
+import { Talent } from '../components/Talent'
+import { talentsById } from '../data/talents'
+import { Map } from 'immutable'
+import { SpellTooltip } from '../components/SpellTooltip';
+import classNames from 'classnames'
+
+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 talentIds = [
+  76, 181, 182, 821
+]
+
+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={classNames('container', `playground-section__${props.title.toLowerCase()}`)}>
+      <h2>{props.title}</h2>
+
+      {props.children}
+    </div>
+  </div>
+}
+
+export default class Playground extends React.PureComponent<Props> {
+  static whyDidYouRender = true
+
+  state = {
+    points: Map<number, number>()
+  }
+
+  handleTalentClick = (id) => {
+    const { points } = this.state
+    this.setState({ 
+      points: points.set(id, points.get(id, 0) + 1)
+    })
+  }
+
+  handleTalentRightClick = (id) => {
+    const { points } = this.state
+    this.setState({ 
+      points: points.set(id, Math.max(0, points.get(id, 0) - 1))
+    })
+  }
+
+  render() {
+    const { points } = this.state
+  
+    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="Talent">
+          <h3>Static</h3>
+          <div className="inline-items">
+            <Talent
+              talent={talentsById[181]}
+              disabled
+            />
+
+            <Talent
+              talent={talentsById[181]}
+            />
+
+            <Talent
+              talent={talentsById[181]}
+              points={3}
+            />
+
+            <Talent
+              talent={talentsById[181]}
+              points={5}
+            />
+
+            <Talent
+              talent={talentsById[181]}
+              points={3}
+              disabled
+            />
+          </div>
+
+          <h3>Interactive</h3>
+          <div className="inline-items">
+            {talentIds.map(id => 
+              <Talent
+                key={id}
+                talent={talentsById[id]}
+                points={points.get(id, 0)}
+                disabled={points.get(id, 0) === talentsById[id].ranks.length}
+                onClick={this.handleTalentClick}
+                onRightClick={this.handleTalentRightClick}
+              />
+            )}
+          </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>With title and icon</h3>
+          <Tooltip title="Strongest Class in the World" icon="inv_pet_babymurlocs_blue">
+            <p className="yellow">And some description text here</p>
+          </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>
+
+        <Section title="SpellTooltip">
+          <SpellTooltip id={29086} />
+          <SpellTooltip id={20501} />
+          <SpellTooltip id={17793} />
+        </Section>
+      </div>
+    )
+  }
+}