summaryrefslogtreecommitdiff
path: root/www/app/components/splash.js
diff options
context:
space:
mode:
authorelijah <elijah@riseup.net>2016-09-16 14:02:32 -0700
committerKali Kaneko (leap communications) <kali@leap.se>2016-09-22 11:40:11 -0400
commit073393af311d36c8ca7570ff0d3f0a3117c0b544 (patch)
treee59286ac350ba17110392f53b6e48bcedfd12ef1 /www/app/components/splash.js
parentae5a20d059209f2027c05820dc3b4cfe7346c8a8 (diff)
[pkg] rename www to ui
Diffstat (limited to 'www/app/components/splash.js')
-rw-r--r--www/app/components/splash.js132
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
- )
- }
-
-}
-