Trip Laser Party

var React = require('react'),
    Keen = require('keen-js');

React.initializeTouchEvents(true);

var config = require('../config');

// Configure Firebase
var firebaseRef = new Firebase(config['firebase']);

// Configure Keen
// https://keen.io/project/KEEN_PROJECT_ID/workbench
var client = new Keen(config['keen']);
var gates = new Keen.Query('count', {
  eventCollection: 'lasers',
  groupBy: 'coreid',
  timeframe: 'this_1_minute'
});
var totals = new Keen.Query('count', {
  eventCollection: 'lasers',
  groupBy: 'coreid'
});


var Gate = React.createClass({

  getInitialState: function(){
    var rando = Math.round(Math.random()*300) + 50;
    return {
      a: {
        active: false,
        radius: 15,
        x: rando,
        y: rando - 50
      },
      b: {
        active: false,
        radius: 15,
        x: rando,
        y: rando + 50
      },
      stroke: '#808080',
      strokeWidth: 5
    }
  },

  handleMove: function(i, e){
    var state = this.state[i];
    if (!state.active) return;
    state.x = this.props.trace[0];
    state.y = this.props.trace[1];
    this.setState(state);
    firebaseRef.child('/gates/' + this.props.id).update(this.state);
  },
  handleDown: function(i,e){
    var state = this.state[i];
    state.active = true;
    state.radius = 25;
    this.setState(state);
    firebaseRef.child('/gates/' + this.props.id).update(this.state);
  },
  handleUp: function(i,e){
    var state = this.state[i];
    state.active = false;
    state.radius = 15;
    this.setState(state);
    firebaseRef.child('/gates/' + this.props.id).update(this.state);
  },

  tick: function(){
    var self = this;
    var diff = self.props.weight - self.state.weight;
    console.log(diff > 0, self.props.total);
    var interval = setInterval(function(){
      if (diff > 0) {
        self.setState({
          weight: self.state.weight ? 0 : self.props.weight,
          total: self.props.total
        });
        diff--;
      }
      else {
        clearInterval(interval);
        if (!self.state.weight) {
          self.setState({
            weight: self.props.weight
          });
        }
      }
    }, 500);
  },

  componentDidMount: function(){
    this.setState(this.props);
    setInterval(this.tick, 1000);
  },

  render: function(){
    return 



      {'ID: ' + this.props.id}
      {'Total: ' + this.state.total}

  }
});


var Stage = React.createClass({

  getDefaultProps: function(){
    return {
      gates: []
    }
  },

  getInitialState: function() {
    return {
      ix: 100,
      iy: 100,
      height: window.innerHeight,
      width: window.innerWidth,
      position: {
        x: window.innerWidth / 2,
        y: window.innerHeight / 2
      }
    };
  },

  getKeenResults: function(){
    client.run([gates, totals], function(err, res){
      res[0].result.forEach(function(record, i){
        var id = record.coreid;
        if (id) {
          firebaseRef.child('/gates/' + id).update({
            id: id,
            weight: record.result,
            total: res[1].result[i].result
          });
        }
      });
    });
  },

  componentDidMount: function() {
    var self = this;

    this.getKeenResults();
    setInterval(this.getKeenResults, 1000 * 5);

    firebaseRef.child('/gates').on('child_added', function(data){
      self.props.gates.push(data.val());
      self.forceUpdate();
    });

    firebaseRef.child('/gates').on('child_changed', function(data){
      self.props.gates.forEach(function(gate, i){
        if (gate.id === data.key()) {
          self.props.gates[i] = data.val();
        }
      });
    });

    firebaseRef.child('/gates').on('child_removed', function(data){
      self.props.gates.forEach(function(gate, i){
        if (gate.id === data.key()) {
          self.props.gates.splice(i, 1);
        }
      });
    });

    window.addEventListener('resize', this.handleResize);
    document.addEventListener('touchmove', this.preventBehavior, false);
  },

  handleResize: function(){
    this.setState({
      'height': window.innerHeight,
      'width': window.innerWidth
    });
  },

  preventBehavior: function(e){
    e.preventDefault();
  },

  handleMove: function(e){
    var touch = (e.touches) ? e.touches[0] : false;
    this.setState({
      ix: touch ? touch.pageX : e.clientX,
      iy: touch ? touch.pageY : e.clientY
    });
  },

  render: function(){
    var gates = this.props.gates.map(function(gate, index){
      // console.log(gate);
      return 
    }, this);

    return 






        {gates}

  }

});

React.render( , document.getElementById('stage') );

module.exports = Stage;

    <!DOCTYPE html>
    <html>
    <head>
      <title>sparkeen</title>
      <style>
        body { margin: 0; }
        svg circle { cursor: move; }
      </style>
    </head>
    <body>
      <div id="stage"></div>
      <script src="https://cdn.firebase.com/js/client/2.0.1/firebase.js"></script>
      <script src="./app/index.js"></script>
    </body>
    </html>

{
   "eventName": "laser",
   "url": "http://api.keen.io/3.0/projects/YOUR_PROJECT_ID/events lasers",
   "requestType": "POST",
   "headers": {
    "Authorization": "YOUR_AUTH_KEY"
   },
    "json": {
      "lasers": {
         "test": "1"
      }
    }
 }