diff options
author | elijah <elijah@riseup.net> | 2016-09-16 14:02:32 -0700 |
---|---|---|
committer | Kali Kaneko (leap communications) <kali@leap.se> | 2016-09-22 11:40:11 -0400 |
commit | 073393af311d36c8ca7570ff0d3f0a3117c0b544 (patch) | |
tree | e59286ac350ba17110392f53b6e48bcedfd12ef1 /www/app/components/splash.js | |
parent | ae5a20d059209f2027c05820dc3b4cfe7346c8a8 (diff) |
[pkg] rename www to ui
Diffstat (limited to 'www/app/components/splash.js')
-rw-r--r-- | www/app/components/splash.js | 132 |
1 files changed, 0 insertions, 132 deletions
diff --git a/www/app/components/splash.js b/www/app/components/splash.js deleted file mode 100644 index 46170d2..0000000 --- a/www/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 - ) - } - -} - |