<commit_before>import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import saveGame from '../actions/update-game'
import './Canvas.sass'

// helpers
import { updatePlayer, currentPlayer, otherPlayer } from '../helpers/update-player-helper'
import { checkCollision } from '../helpers/game-helper'

// models [still empty]
import Player from '../models/PlayerModel'
import Sword from '../models/SwordModel'

const WIDTH = 800
const HEIGHT = 550
let clientSwords = []

class Canvas extends React.Component {

  componentWillMount(){
    const { swords, players, levels } = this.props.game
    clientSwords = swords.map((sword) => {
      return new Sword(sword, levels[0])
    })
  }
    componentDidMount() {
      this.drawPlayers()
      console.log('Hey, we`re MOUNTING')
      window.addEventListener( 'keydown', function(event) {
        updatePlayer(this, event)
      }.bind(this))

      this.draw()
    }

    // componentDidUpdate() {
    //     console.log('Hey, I received props!')
    //     this.updateCanvas()
    // }

    draw(){
        const { swords } = this.props.game
        const ctx = this.refs.canvas.getContext('2d')
        ctx.clearRect(0,0,WIDTH,HEIGHT)

        const collided = checkCollision(swords, currentPlayer(this))

        !!collided ? saveGame(collided) : false

        this.drawSwords(swords)
        this.drawPlayers()

        window.requestAnimationFrame(this.draw.bind(this))
    }

    drawSwords(swords) {

      const ctx = this.refs.canvas.getContext('2d')
      const swordImg = new Image()
      clientSwords.map((sword) => {
        sword.falling()
        swordImg.src = sword.image
        ctx.drawImage(swordImg, sword.position.x, sword.position.y)
      })
    }

    drawPlayers() {
        const { players } = this.props.game
        const ctx = this.refs.canvas.getContext('2d')

        const puppet1 = new Image()
        const puppet2 = new Image()
        puppet2.src = players[1].puppet
        puppet1.src = players[0].puppet

        ctx.drawImage(puppet1, players[0].position.x, players[0].position.y)
        ctx.drawImage(puppet2, players[1].position.x, players[1].position.y)
    }

    render() {
        return (
	    <div className="canvas-container">
              <canvas ref="canvas" width={WIDTH} height={HEIGHT} />
            </div>
        );
    }
}

// copied this from Game.js
Canvas.propTypes = {
  game: PropTypes.object.isRequired,
  currentUser: PropTypes.object.isRequired,
}

// we don't use mapStateToProps here cause we got the props from the Game
export default connect(null, { saveGame })(Canvas)
<commit_msg>some comments<commit_after>import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import saveGame from '../actions/update-game'
import './Canvas.sass'

// helpers
import { updatePlayer, currentPlayer, otherPlayer } from '../helpers/update-player-helper'
import { checkCollision } from '../helpers/game-helper'

// models [still empty]
import Player from '../models/PlayerModel'
import Sword from '../models/SwordModel'

const WIDTH = 800
const HEIGHT = 550
let clientSwords = []

class Canvas extends React.Component {

    componentWillMount(){
        const { swords, players, levels } = this.props.game
        clientSwords = swords.map((sword) => {
          return new Sword(sword, levels[0])
        })
    }

    // we bind addEventListener to update the player position
    // when the component has mounted
    componentDidMount() {
       // we draw the players for the first time
      this.drawPlayers()
      console.log('Hey, we`re MOUNTING')
      window.addEventListener( 'keydown', function(event) {
        updatePlayer(this, event)
      }.bind(this))

      // here we trigger the draw function for the first time
      // we should call this at least once to start the loop
      // to continuously trigger the drawPlayer and drawSwords functions
      this.draw()
    }

    // we continuously draw all swords and players
    draw(){
        const { swords } = this.props.game
        const ctx = this.refs.canvas.getContext('2d')
        ctx.clearRect(0,0,WIDTH,HEIGHT)

        const collided = checkCollision(swords, currentPlayer(this))

        !!collided ? saveGame(collided) : false

        this.drawSwords(swords)
        this.drawPlayers()

        window.requestAnimationFrame(this.draw.bind(this))
    }

    // this is how we draw swords
    drawSwords(swords) {

      const ctx = this.refs.canvas.getContext('2d')
      const swordImg = new Image()
      clientSwords.map((sword) => {

        // the falling class function increments the y-coordinates
        // of the swords each time we draw
        sword.falling()
        swordImg.src = sword.image
        ctx.drawImage(swordImg, sword.position.x, sword.position.y)
      })
    }

    // this is how we draw players
    drawPlayers() {
        const { players } = this.props.game
        const ctx = this.refs.canvas.getContext('2d')

        const puppet1 = new Image()
        const puppet2 = new Image()
        puppet2.src = players[1].puppet
        puppet1.src = players[0].puppet

        ctx.drawImage(puppet1, players[0].position.x, players[0].position.y)
        ctx.drawImage(puppet2, players[1].position.x, players[1].position.y)
    }

    render() {
        return (
	    <div className="canvas-container">
              <canvas ref="canvas" width={WIDTH} height={HEIGHT} />
            </div>
        );
    }
}

// copied this from Game.js. This sort of validates the game and currentUser
Canvas.propTypes = {
  game: PropTypes.object.isRequired,
  currentUser: PropTypes.object.isRequired,
}

// we don't use mapStateToProps here
// because we feed the needed props straight
// to the Canvas tag in the Game component
export default connect(null, { saveGame })(Canvas)

{'fraction_non_alphanumeric': 0.12160546541417591, 'fraction_numerical': 0.008198121263877029, 'mean_word_length': 2.6170475602223595, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4862968', 'n_tokens_mistral': 1777, 'n_tokens_neox': 1719, 'n_words': 441}