import React, { Component } from 'react';

class TableContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            itemName: props.itemName,
            roundsNames: props.roundsNames,
            results: props.results,
            currentRound: props.roundsNames.length - 1
        };
    }

    goToRound (e) {
        this.setState({
            previousRound: this.state.currentRound,
            currentRound: e.target.value
        });
    }

    render() {
        return (
            <div>
                <h3>Standings after {this.state.roundsNames[this.state.currentRound]} games</h3>
                <input
                 type="range"
                 name="rounds"
                 value={this.state.currentRound}
                 min={0}
                 max={this.state.roundsNames.length - 1}
                 onChange={this.goToRound.bind(this)}/>
                <table>
                    <thead>
                        <tr>
                            <th>{this.state.itemName}</th>
                            <th>Points</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.results[this.state.currentRound].sort((a,b) => b.total - a.total)
                            .map(result => {
                                return (
                                    <tr key={result.item}>
                                        <th>{result.item}</th>
                                        <th>{result.total}</th>
                                    </tr>
                                );
                        })}
                    </tbody>
                </table>
            </div>
        );
    }
}

export default TableContainer;

@@ -346,152 +346,652 @@
     
-goToRound (e) %7B%0A        this.setState(%7B%0A            previousRound: this.state.currentRound,%0A            currentRound: e.target.value%0A        %7D);
+handleSliderChange (e) %7B%0A        this.goToRound(e.target.value);%0A    %7D%0A%0A    goToRound (roundNumber, callback) %7B%0A        this.setState(%7B%0A            previousRound: this.state.currentRound,%0A            currentRound: roundNumber%0A        %7D, callback);%0A    %7D%0A%0A    handlePlayButton () %7B%0A        this.setState(%7B playButtonPressed: true%7D, this.play(true))%0A    %7D%0A%0A    play (reset) %7B%0A        if (reset) %7B%0A            this.goToRound(0, this.play);%0A            return;%0A        %7D%0A%0A        if (this.state.currentRound %3C= this.props.roundsNames.length - 2) %7B%0A            setTimeout(() =%3E this.goToRound(this.state.currentRound + 1, this.play), 300);%0A        %7D
 %0A   
@@ -1141,16 +1141,97 @@
 es%3C/h3%3E%0A
+                %3Cbutton onClick=%7Bthis.handlePlayButton.bind(this)%7D%3EPlay%3C/button%3E%0A
         
@@ -1469,25 +1469,34 @@
 e=%7Bthis.
-goToRound
+handleSliderChange
 .bind(th
@@ -1682,24 +1682,165 @@
 Points%3C/th%3E%0A
+                            %7Bthis.props.showChange%0A                                ? %3Cth%3EChange%3C/th%3E%0A                                : null%7D%0A
             
@@ -2284,24 +2284,252 @@
 total%7D%3C/th%3E%0A
+                                        %7Bthis.props.showChange%0A                                            ? %3Cth%3E%7Bresult.change %3E 0 ? %60+$%7Bresult.change%7D%60 : result.change%7D%3C/th%3E%0A                                            : null%7D%0A
             

add play button