[feat] added initial bitmask_js (WIP)

1 files changed, 132 insertions, 0 deletions

diff --git a/src/leap/bitmask_js/app/components/splash.js b/src/leap/bitmask_js/app/components/splash.js
new file mode 100644
index 00000000..46170d23
--- /dev/null
+++ b/src/leap/bitmask_js/app/components/splash.js
@@ -0,0 +1,132 @@
+/*
+ * 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
+    )
+  }
+
+}
+