import React, { Component, PropTypes } from 'react'
import { COLS } from '../constants/Board'

const TILE_SIZE = 60
const basicStyles = {
    position: 'absolute',
    //flexGrow: 1,
    border: '1px solid',
    width: TILE_SIZE,
    height: TILE_SIZE
}

export default class Tile extends Component {

    static propTypes = {
        idx: PropTypes.number.isRequired,
        type: PropTypes.number.isRequired
    }

    getStyles(idx) {
        return {
            ...basicStyles,
            left: (idx % COLS) * TILE_SIZE,
            top: (Math.ceil((idx + 1) / COLS) - 1) * TILE_SIZE
        }
    }

    render() {
        const {type, idx} = this.props
        const styles = this.getStyles(idx)
        return (
            <div style={styles}>{type}</div>
        )
    }
}

import React, { Component, PropTypes } from 'react'
import {Spring} from 'react-motion'
import { COLS } from '../constants/Board'

const TILE_SIZE = 60
const basicStyles = {
    position: 'absolute',
    //flexGrow: 1,
    border: '1px solid',
    width: TILE_SIZE,
    height: TILE_SIZE
}

export default class Tile extends Component {

    static propTypes = {
        position: PropTypes.number.isRequired,
        type: PropTypes.number.isRequired
    }

    getLeftValue(position) {
        return (position % COLS) * TILE_SIZE
    }

    getTopValue(position) {
        return (Math.ceil((position + 1) / COLS) - 1) * TILE_SIZE
    }

    render() {
        const {type, position} = this.props
        return (
            <Spring
                endValue={{val: {left: this.getLeftValue(position), top: this.getTopValue(position)}}}
            >
                {interpolated =>
                    <div style={{
                        ...basicStyles,
                        top: interpolated.val.top,
                        left: interpolated.val.left
                    }}>{type}</div>
                }
            </Spring>
        )
    }
}

Use springs to animate tiles
Use springs to animate tiles
