import React from 'react';
import lodash from 'lodash';
import TimerMixin from 'react-timer-mixin';
import classNames from 'classnames';
import KeyboardShortcutModalActionCreators from '../actions/KeyboardShortcutModalActionCreators';
import {ComponentDispatch} from '../utils/ComponentDispatchUtils';
// import {playSound} from '../utils/SoundUtils';
import {ComponentActions} from '../Constants';
import '../styles/raging_demon.styl';
const Sounds = {
// PRIMARY: () => lodash.delay(playSound, 20, 'raging_demon-primary'),
// SECONDARY: () => lodash.delay(playSound, 40, 'raging_demon-secondary')
PRIMARY: () => true,
SECONDARY: () => true,
};
const Symbol = () =>
;
const EXPLOSION_DURATION = 1000;
const SECONDARY_DELAY = 120;
const EXPLOSION_OFFSET = 140;
const Explosion = React.createClass({
mixins: [TimerMixin],
getInitialState() {
return {
animating: false,
renderSecondary: false,
scale: lodash.random(0.6, 1, true),
offsetX: lodash.random(0, EXPLOSION_OFFSET, false) - EXPLOSION_OFFSET / 2,
offsetY: lodash.random(0, EXPLOSION_OFFSET, false) - EXPLOSION_OFFSET / 2,
};
},
componentDidMount() {
this.setState({
animating: true,
});
this.setTimeout(() => {
this.setState({
renderSecondary: true,
});
}, SECONDARY_DELAY);
this.setTimeout(this.done, EXPLOSION_DURATION);
Sounds.PRIMARY();
},
componentDidUpdate(prevProps, prevState) {
if (this.state.renderSecondary && !prevState.renderSecondary) {
Sounds.SECONDARY();
}
},
done() {
this.props.onAnimationComplete(this.props.componentId);
},
/* eslint-disable max-len */
renderPrimary() {
return (
);
},
renderSecondary(offsetX, offsetY) {
return (
);
},
/* eslint-enable max-len */
render() {
const {renderSecondary, offsetX, offsetY, animating, scale} = this.state;
const explosions = [this.renderPrimary()];
if (renderSecondary) {
explosions.push(this.renderSecondary(offsetX, offsetY));
}
return (
{explosions}
);
},
});
const EXPLOSION_TOTAL = 8;
const EXPLOSION_WAIT = SECONDARY_DELAY * 2;
const RagingDemon = React.createClass({
mixins: [TimerMixin],
getInitialState() {
return {
explosions: 0,
};
},
componentWillMount() {
this.children = [];
},
componentDidMount() {
// Wait for modal to animate out
this.setTimeout(() => ComponentDispatch.dispatch(ComponentActions.SHAKE_APP, {duration: 2400}), 1800);
this.setTimeout(this.createExplosion, 1800);
},
removeExplosion(componentId) {
const children = this.children;
const toRemove = children.find(child => child.props.componentId === componentId);
const index = children.indexOf(toRemove);
if (index >= 0) {
children.splice(index, 1);
}
this.forceUpdate();
},
createExplosion() {
const children = this.children;
const xCenter = (window.innerWidth / 2) >> 0;
const yCenter = (window.innerHeight / 2) >> 0;
if (this.state.explosions < EXPLOSION_TOTAL) {
const key = `expl-${this.state.explosions}`;
children.push(
);
this.setTimeout(this.createExplosion, EXPLOSION_WAIT);
this.setState({
explosions: this.state.explosions + 1,
});
} else {
this.setTimeout(this.addSymbol, 750);
}
},
addSymbol() {
this.children = [];
this.forceUpdate();
this.setTimeout(this.delayedClose, 3000);
},
delayedClose() {
KeyboardShortcutModalActionCreators.hide();
},
componentWillUnmount() {
this.children.length = 0;
},
render() {
return {this.children}
;
},
});
export default RagingDemon;
// WEBPACK FOOTER //
// ./discord_app/components/RagingDemon.js