'use strict';

import React  from 'react';
import TransitionGroup from "react-addons-css-transition-group"; //eslint-disable-line
import 'styles/BackgroundAnimation.scss';

class BackgroundAnimation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: props.size,
      height: props.size,
      startX: props.startX ? props.startX : props.size / 2,
      startY: props.startY ? props.startY : props.size / 2,
      theme: props.theme
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      width: nextProps.size,
      height: nextProps.size,
      startX: nextProps.startX ? nextProps.startX : nextProps.size / 2,
      startY: nextProps.startY ? nextProps.startY : nextProps.size / 2,
      theme: nextProps.theme
    });
  }

  render() {
    //TODO: pre-calc all this

    var maxSize   = (this.state.width || window.innerWidth) / 2;
    var minSize   = 32;
    var amount    = 7;
    var opacity   = 1;
    var colors    = [
      "rgba(50, 32, 56, " + opacity + ")",
      "rgba(62, 32, 76, " + opacity + ")",
      "rgba(87, 32, 110, " + opacity + ")",
      "rgba(118, 32, 154, " + opacity + ")",
      "rgba(156, 56, 203, " + opacity + ")",
      "rgba(188, 84, 238, " + opacity + ")",
      "rgba(225, 170, 253, " + opacity + ")"
    ].reverse();

    const inc = (maxSize - minSize) / (amount - 1);
    const rings = [0, 1, 2, 3, 4, 5, 6];

    var circles = rings.reverse().map((i) => {
      var radius = minSize + (i * inc);
      var color  = colors[i];
      return (
        <circle
          cx={this.state.startX}
          cy={this.state.startY}
          r={radius}
          fill={color}
          key={"circle" + i}
          style={{ animationDelay: 0.2 + 0.1 * i + "s" }}
        />
      );
    });

    let styleSheet = document.styleSheets[0];
    var dots = rings.map((i) => {
      const color = "rgba(255, 255, 255, 0.4)";
      const pos = minSize + (i * inc);
      const speed = (Math.random() * 12) + 6;
      const size = (Math.random() * 2) + 0.5;

      let keyframes = `@keyframes rot${i} {
        0% {
          transform: rotate(0deg)
                     translate(-${pos}px)
                     rotate(0deg);
        }
        100% {
          transform: rotate(360deg)
                     translate(-${pos}px)
                     rotate(-360deg);
        }
      }`;
      styleSheet.insertRule(keyframes, styleSheet.cssRules.length);

      return (
        <circle
          cx={this.state.startX}
          cy={this.state.startY}
          r={size}
          fill={color}
          style={{
            animation: `rot${i} linear`,
            animationDuration: `${speed}s`,
            animationDelay: `${i/2}s`,
            animationIterationCount: "infinite"
          }}
          key={"dot" + i}>
        </circle>
      );
    });

    return (
      <div className="BackgroundAnimation" ref="container">
        <svg width={this.state.width} height={this.state.width} key="circles" style={this.state.theme} className="transparent">
          {circles}
        </svg>
        <svg width={this.state.width} height={this.state.width} key="dots" style={this.state.theme} className="opaque">
          {dots}
        </svg>
      </div>
    );
  }

}

export default BackgroundAnimation;

@@ -801,24 +801,25 @@
  render() %7B%0A
+%0A
     //TODO: 
@@ -1900,26 +1900,26 @@
 gba(
-255, 255, 255
+196, 196, 196
 , 0.
-4
+1
 )%22;%0A
@@ -1934,14 +1934,116 @@
 nst 
-pos
+mul   = (Math.random() %3C 0.5 ? -1 : 1); // randomize between negative and positive pos%0A      const pos  
  = 
+(
 minS
@@ -2053,25 +2053,65 @@
  + (i * inc)
-;
+) * mul; // starting position for the dot
 %0A      const
@@ -2141,14 +2141,14 @@
  * 1
-2
+4
 ) + 
-6
+8
 ;%0A  
@@ -2162,16 +2162,17 @@
 st size 
+ 
 = (Math.
@@ -2191,13 +2191,70 @@
 ) + 
-0.5;%0A
+1;%0A      const startRadians = Math.floor(Math.random() * 360);
 %0A   
@@ -2305,27 +2305,19 @@
      0%25 
-%7B%0A       
   
+%7B
  transfo
@@ -2331,34 +2331,27 @@
 ate(
-0deg)%0A                    
+$%7BstartRadians%7Ddeg)
  tra
@@ -2349,33 +2349,32 @@
 %7Ddeg) translate(
--
 $%7Bpos%7Dpx)%0A      
@@ -2370,51 +2370,37 @@
 %7Dpx)
-%0A                     rotate(0deg);%0A       
+ rotate(-$%7BstartRadians%7Ddeg);
  %7D%0A 
@@ -2412,26 +2412,16 @@
   100%25 %7B
-%0A         
  transfo
@@ -2435,36 +2435,33 @@
 ate(
+$%7BstartRadians + 
 360
+%7D
 deg)
-%0A                    
  tra
@@ -2467,17 +2467,16 @@
 anslate(
--
 $%7Bpos%7Dpx
@@ -2480,54 +2480,43 @@
 %7Dpx)
-%0A                     rotate(-
+ rotate(-$%7BstartRadians + 
 360
+%7D
 deg);
-%0A       
  %7D%0A 
@@ -2840,47 +2840,8 @@
 s%60,%0A
-            animationDelay: %60$%7Bi/2%7Ds%60,%0A
     

Tweak logo animation