diff options
Diffstat (limited to 'src/leap/bitmask_js/app/components/splash.js')
-rw-r--r-- | src/leap/bitmask_js/app/components/splash.js | 132 |
1 files changed, 0 insertions, 132 deletions
diff --git a/src/leap/bitmask_js/app/components/splash.js b/src/leap/bitmask_js/app/components/splash.js deleted file mode 100644 index 46170d23..00000000 --- a/src/leap/bitmask_js/app/components/splash.js +++ /dev/null @@ -1,132 +0,0 @@ -/* - * A simple animated splash screen - */ - -import React from 'react' -import * as COLOR from '../lib/colors' - -const colorList = [ - COLOR.red200, COLOR.pink200, COLOR.purple200, COLOR.deepPurple200, - COLOR.indigo200, COLOR.blue200, COLOR.lightBlue200, COLOR.cyan200, - COLOR.teal200, COLOR.green200, COLOR.lightGreen200, COLOR.lime200, - COLOR.yellow200, COLOR.amber200, COLOR.orange200, COLOR.deepOrange200 -] - -export default class Splash extends React.Component { - - static get defaultProps() {return{ - speed: "fast", - mask: true, - onClick: null - }} - - constructor(props) { - super(props) - this.counter = 0 - this.interval = null - this.ctx = null - this.stepAngle = 0 - this.resize = this.resize.bind(this) - this.click = this.click.bind(this) - if (this.props.speed == "fast") { - this.fps = 30 - this.stepAngle = 0.005 - } else { - this.fps = 30 - this.stepAngle = 0.0005 - } - } - - componentDidMount() { - this.interval = setInterval(this.tick.bind(this), 1000/this.fps) - this.canvas = this.refs.canvas - this.ctx = this.canvas.getContext('2d') - window.addEventListener('resize', this.resize) - } - - componentWillUnmount() { - clearInterval(this.interval) - window.removeEventListener('resize', this.resize) - } - - click() { - if (this.props.onClick) { - this.props.onClick() - } - } - - tick() { - this.counter++ - this.updateCanvas() - } - - resize() { - this.canvas.width = window.innerWidth - this.canvas.height = window.innerHeight - this.updateCanvas() - } - - updateCanvas() { - const arcCount = 16 - const arcAngle = 1 / arcCount - const x = this.canvas.width / 2 - const y = this.canvas.height / 2 - const radius = screen.height + screen.width - - for (let i = 0; i < arcCount; i++) { - let startAngle = Math.PI * 2 * i/arcCount + this.stepAngle*this.counter - let endAngle = Math.PI * 2 * (i+1)/arcCount + this.stepAngle*this.counter - - this.ctx.fillStyle = colorList[i % colorList.length] - this.ctx.strokeStyle = colorList[i % colorList.length] - this.ctx.beginPath() - this.ctx.moveTo(x, y) - this.ctx.arc(x, y, radius, startAngle, endAngle) - this.ctx.lineTo(x, y) - this.ctx.fill() - this.ctx.stroke() - } - - } - - render () { - let overlay = null - let mask = null - if (this.props.onClick) { - overlay = React.DOM.div({ - style: { - position: 'absolute', - height: '100%', - width: '100%', - backgroundColor: 'transparent' - }, - onClick: this.click - }) - } - if (this.props.mask) { - mask = React.DOM.img({ - src: 'img/mask.svg', - style: { - position: 'absolute', - left: '50%', - top: '50%', - marginLeft: -330/2 + 'px', - marginTop: -174/2 + 'px', - } - }) - } - return React.DOM.div( - {style: {overflow: 'hidden'}}, - React.DOM.canvas({ - ref: 'canvas', - style: {position: 'absolute'}, - width: window.innerWidth, - height: window.innerHeight, - }), - mask, - overlay - ) - } - -} - |